diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index a676623..f2fac72 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -4,6 +4,7 @@ import { Features } from "@/components/sections/features";
 import { Architecture } from "@/components/sections/architecture";
 import { TechStack } from "@/components/sections/tech-stack";
 import { Roadmap } from "@/components/sections/roadmap";
+import { AlgorithmChecklist } from "@/components/sections/algorithm-checklist";
 import { FAQ } from "@/components/sections/faq";
 import { OpenSource } from "@/components/sections/open-source";
 import { Footer } from "@/components/sections/footer";
@@ -24,6 +25,7 @@ export default function Home() {
         <Architecture />
         <TechStack />
         <Roadmap />
+        <AlgorithmChecklist />
         <FAQ />
         <OpenSource />
       </main>
diff --git a/apps/web/src/components/animations/array-search.tsx b/apps/web/src/components/animations/array-search.tsx
index 0285ed0..689a89b 100644
--- a/apps/web/src/components/animations/array-search.tsx
+++ b/apps/web/src/components/animations/array-search.tsx
@@ -3,17 +3,40 @@
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 
-const array = [2, 5, 8, 11, 12, 16, 23, 28, 38, 56, 60, 67, 72, 81, 91, 99, 123, 212];
+const DESKTOP_ARRAY = [2, 5, 8, 11, 12, 16, 23, 28, 38, 56, 60, 67, 72, 81, 91, 99, 123, 212];
+const MOBILE_ARRAY = [67, 69, 70, 77, 81, 98];
 
 export function ArraySearch() {
+  const [array, setArray] = useState(DESKTOP_ARRAY);
   const target = 67;
   const [currentIndex, setCurrentIndex] = useState(-1);
   const [left, setLeft] = useState(0);
-  const [right, setRight] = useState(array.length - 1);
+  const [right, setRight] = useState(DESKTOP_ARRAY.length - 1);
   const [found, setFound] = useState(false);
 
+  // Handle responsive array
   useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setArray(MOBILE_ARRAY);
+      } else {
+        setArray(DESKTOP_ARRAY);
+      }
+    };
+
+    // Initial check
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    let isCancelled = false;
+
     const animateBinarySearch = async () => {
+      if (isCancelled) return;
+
       setCurrentIndex(-1);
       setLeft(0);
       setRight(array.length - 1);
@@ -23,6 +46,8 @@ export function ArraySearch() {
       let r = array.length - 1;
 
       while (l <= r) {
+        if (isCancelled) return;
+
         const mid = Math.floor((l + r) / 2);
         setCurrentIndex(mid);
         setLeft(l);
@@ -39,14 +64,19 @@ export function ArraySearch() {
         }
       }
 
-      await new Promise((resolve) => setTimeout(resolve, 2500));
+      if (!isCancelled) {
+        await new Promise((resolve) => setTimeout(resolve, 2500));
+      }
     };
 
     const interval = setInterval(animateBinarySearch, 8000);
     animateBinarySearch();
 
-    return () => clearInterval(interval);
-  }, []);
+    return () => {
+      isCancelled = true;
+      clearInterval(interval);
+    };
+  }, [array]); // Restart animation when array changes
 
   return (
     <div className="space-y-3">
@@ -58,7 +88,7 @@ export function ArraySearch() {
 
           return (
             <motion.div
-              key={index}
+              key={`${array.length}-${index}`} // Key changes when array changes to force re-render
               className={`w-8 h-8 flex items-center justify-center rounded-md text-xs font-semibold border transition-colors ${isFound
                 ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]"
                 : isCurrent
diff --git a/apps/web/src/components/sections/algorithm-checklist.tsx b/apps/web/src/components/sections/algorithm-checklist.tsx
new file mode 100644
index 0000000..8d1bc93
--- /dev/null
+++ b/apps/web/src/components/sections/algorithm-checklist.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import { ChevronDown, ChevronRight, Check, Circle, Terminal, Sparkles, Rocket } from "lucide-react";
+import { categories, getTotalCount, getCategoryCount, type Category, type AlgorithmTopic } from "@/lib/algorithms-data";
+
+interface SubcategoryProps {
+  name: string;
+  topics: AlgorithmTopic[];
+}
+
+function Subcategory({ name, topics }: SubcategoryProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const implementedCount = topics.filter(t => t.implemented).length;
+
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full text-left text-[hsl(var(--foreground))]/80 text-xs sm:text-sm font-medium flex items-center gap-2 hover:text-[hsl(var(--foreground))] transition-colors py-1"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3 w-3 text-[hsl(var(--muted-foreground))]" />
+        ) : (
+          <ChevronRight className="h-3 w-3 text-[hsl(var(--muted-foreground))]" />
+        )}
+        <span className="cursor-pointer">{name}</span>
+        <span className="text-[10px] font-mono text-[hsl(var(--muted-foreground))] ml-auto">
+          {implementedCount}/{topics.length}
+        </span>
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2 }}
+            className="ml-5 space-y-0.5 overflow-hidden"
+          >
+            {topics.map((item, index) => (
+              <div
+                key={index}
+                className={`group flex items-center justify-between text-xs transition-colors duration-200 py-0.5 ${item.implemented
+                  ? "text-[hsl(var(--primary))]"
+                  : "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+                  }`}
+              >
+                <span className="flex items-center gap-2 cursor-default">
+                  <span className="text-[hsl(var(--muted-foreground))]/50 ">
+                    {index === topics.length - 1 ? "└─" : "├─"}
+                  </span>
+                  {item.name}
+                </span>
+                <span title={item.implemented ? "Implemented" : "Pending"}>
+                  {item.implemented ? (
+                    <Check className="h-3 w-3" />
+                  ) : (
+                    <Circle className="h-3 w-3" />
+                  )}
+                </span>
+              </div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+interface CategorySectionProps {
+  category: Category;
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+}
+
+function CategorySection({ category, visible, setVisible }: CategorySectionProps) {
+  const { total, implemented } = getCategoryCount(category);
+
+  return (
+    <div className="w-full">
+      <button
+        className="w-full text-left text-[hsl(var(--primary))] text-sm sm:text-base font-semibold mb-4 cursor-pointer hover:text-[hsl(var(--primary))]/80 flex items-center gap-2 transition-colors"
+        onClick={() => setVisible(!visible)}
+      >
+        {visible ? (
+          <ChevronDown className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+        <span>{category.title}</span>
+        <span className="text-xs font-mono text-[hsl(var(--muted-foreground))] ml-auto">
+          {implemented}/{total}
+        </span>
+      </button>
+
+      <AnimatePresence>
+        {visible && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3 }}
+            className="ml-4 space-y-2 overflow-hidden"
+          >
+            {Object.entries(category.items).map(([topic, { topics }]) => (
+              <Subcategory key={topic} name={topic} topics={topics} />
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function AlgorithmChecklist() {
+  const [dsVisible, setDsVisible] = useState(true);
+  const [algoVisible, setAlgoVisible] = useState(true);
+  const { total, implemented } = getTotalCount();
+  const progress = Math.round((implemented / total) * 100);
+
+  return (
+    <section className="relative py-24 sm:py-32 overflow-hidden">
+      {/* Background */}
+      <div className="absolute inset-0 bg-[hsl(var(--background))]/90" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[hsl(var(--primary))]/5 to-transparent" />
+      <div className="absolute inset-0 grid-pattern opacity-20" />
+
+      {/* Noise overlay */}
+      <div className="noise absolute inset-0">
+        <div className="absolute inset-0" />
+      </div>
+
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-12 sm:mb-16"
+        >
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Rocket className="h-4 w-4 text-[hsl(var(--primary))]" />
+            <span className="mono-label">/ Implementation Roadmap</span>
+          </div>
+
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[hsl(var(--foreground))]">
+            THE <span className="text-[hsl(var(--primary))]">AMBITIOUS</span> LIST
+          </h2>
+
+          <p className="mt-4 text-sm sm:text-base text-[hsl(var(--muted-foreground))] max-w-2xl mx-auto">
+            {total}+ algorithms and data structures. This is what we&apos;re building together.
+            Pick one and contribute, or suggest new ones. ML/DL, algorithms from other fields, and visualizers are all welcome.
+          </p>
+
+          {/* Progress bar */}
+          <div className="mt-8 max-w-md mx-auto">
+            <div className="flex items-center justify-between text-xs font-mono text-[hsl(var(--muted-foreground))] mb-2">
+              <span>Progress</span>
+              <span>{implemented}/{total} ({progress}%)</span>
+            </div>
+            <div className="h-2 w-full rounded-full bg-[hsl(var(--secondary))] overflow-hidden">
+              <motion.div
+                className="h-full rounded-full bg-[hsl(var(--primary))]"
+                initial={{ width: 0 }}
+                whileInView={{ width: `${progress}%` }}
+                viewport={{ once: true }}
+                transition={{ duration: 1, delay: 0.3 }}
+              />
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Terminal-style container */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="rounded-2xl border border-[hsl(var(--border))] bg-[hsl(0_0%_4%)]/90 overflow-hidden shadow-2xl shadow-black/50"
+        >
+          {/* Terminal header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-[hsl(var(--border))] bg-[hsl(0_0%_6%)]">
+            <div className="flex items-center gap-2">
+              <div className="flex gap-1.5">
+                <div className="h-3 w-3 rounded-full bg-red-500/80" />
+                <div className="h-3 w-3 rounded-full bg-yellow-500/80" />
+                <div className="h-3 w-3 rounded-full bg-green-500/80" />
+              </div>
+              <Terminal className="h-4 w-4 text-[hsl(var(--muted-foreground))] ml-2" />
+            </div>
+            <span className="text-xs font-mono text-[hsl(var(--muted-foreground))]">
+              opendsa@roadmap ~ $
+            </span>
+          </div>
+
+          {/* Terminal content */}
+          <div className="p-4 sm:p-6">
+            {/* Header banner */}
+            <div className="text-center mb-6 pb-4 border-b border-[hsl(var(--border))]/50">
+              <div className="flex items-center justify-center gap-2 text-[hsl(var(--primary))] font-bold text-lg sm:text-xl">
+                <Sparkles className="h-5 w-5" />
+                OpenDSA Implementation Roadmap
+                <Sparkles className="h-5 w-5" />
+              </div>
+              <p className="text-xs text-[hsl(var(--muted-foreground))] mt-2">
+                Click on any category to expand/collapse
+              </p>
+            </div>
+
+            {/* Two columns */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
+              <div className="lg:border-r lg:border-[hsl(var(--border))]/30 lg:pr-8">
+                <CategorySection
+                  category={categories.dataStructures}
+                  visible={dsVisible}
+                  setVisible={setDsVisible}
+                />
+              </div>
+
+              <div>
+                <CategorySection
+                  category={categories.algorithms}
+                  visible={algoVisible}
+                  setVisible={setAlgoVisible}
+                />
+              </div>
+            </div>
+
+            {/* Legend */}
+            <div className="mt-6 pt-4 border-t border-[hsl(var(--border))]/50 flex flex-wrap items-center gap-4 text-xs text-[hsl(var(--muted-foreground))]">
+              <span>Status:</span>
+              <span className="flex items-center gap-1.5 text-[hsl(var(--primary))]">
+                <Check className="h-3 w-3" /> Implemented
+              </span>
+              <span className="flex items-center gap-1.5">
+                <Circle className="h-3 w-3" /> Pending
+              </span>
+            </div>
+
+            {/* Cursor */}
+            <div className="mt-4 text-[hsl(var(--primary))] font-mono text-sm flex items-center gap-1">
+              <span>$</span>
+              <motion.span
+                animate={{ opacity: [1, 0] }}
+                transition={{ repeat: Infinity, duration: 0.8 }}
+                className="inline-block w-2 h-4 bg-[hsl(var(--primary))]"
+              />
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Future plans */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+          className="mt-8 text-center"
+        >
+          <p className="text-xs sm:text-sm text-[hsl(var(--muted-foreground))]">
+            <span className="text-[hsl(var(--primary))] font-semibold">Open to Contributions:</span>{" "}
+            Machine Learning & Deep Learning Algorithm Visualizers etc...
+          </p>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/sections/footer.tsx b/apps/web/src/components/sections/footer.tsx
index 14cf254..9919bad 100644
--- a/apps/web/src/components/sections/footer.tsx
+++ b/apps/web/src/components/sections/footer.tsx
@@ -20,6 +20,7 @@ const footerLinks = {
     { label: "GitHub", href: "https://github.com/soloshun/opendsa" },
     { label: "Discord", href: "#" },
     { label: "Twitter", href: "#" },
+    { label: "Support Us ☕", href: "https://docs.opendsa.dev/sponsors" },
   ],
 };
 
@@ -46,10 +47,10 @@ export function Footer() {
       {/* Gradient from bottom */}
       <div className="absolute inset-0 bg-gradient-to-t from-[hsl(var(--primary))]/10 via-transparent to-transparent" />
       <div className="absolute bottom-0 left-0 right-0 h-[300px] bg-[radial-gradient(ellipse_at_bottom,_hsl(var(--primary))_0%,_transparent_60%)] opacity-[0.08]" />
-      
+
       {/* Background */}
       <div className="absolute inset-0 bg-[hsl(var(--card))]/80" />
-      
+
       {/* Noise overlay */}
       <div className="noise absolute inset-0">
         <div className="absolute inset-0" />
diff --git a/apps/web/src/components/sections/header.tsx b/apps/web/src/components/sections/header.tsx
index 59b70c7..e453214 100644
--- a/apps/web/src/components/sections/header.tsx
+++ b/apps/web/src/components/sections/header.tsx
@@ -1,14 +1,19 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Github, Menu, X, Sun } from "lucide-react";
+import {
+  Github,
+  Menu,
+  X,
+  // Sun 
+} from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 
 const navLinks = [
   { href: "#features", label: "Features" },
   { href: "#roadmap", label: "Roadmap" },
-  { href: "#open-source", label: "Open Source" },
+  // { href: "#open-source", label: "Open Source" },
   { href: "https://docs.opendsa.dev", label: "Docs", external: true },
 ];
 
@@ -20,7 +25,7 @@ export function Header() {
       initial={{ y: -100, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.6, ease: "easeOut" }}
-      className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-5xl"
+      className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-6xl"
     >
       {/* Main nav container - rounded pill style */}
       <nav className="relative flex items-center justify-between rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--background))]/80 backdrop-blur-xl px-2 py-2 shadow-lg shadow-black/20">
@@ -54,9 +59,9 @@ export function Header() {
         {/* Right side buttons */}
         <div className="hidden md:flex md:items-center md:gap-2">
           {/* Theme toggle placeholder */}
-          <button className="flex h-9 w-9 items-center justify-center rounded-full text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--secondary))] hover:text-[hsl(var(--foreground))]">
+          {/* <button className="flex h-9 w-9 items-center justify-center rounded-full text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--secondary))] hover:text-[hsl(var(--foreground))]">
             <Sun className="h-4 w-4" />
-          </button>
+          </button> */}
 
           {/* GitHub star button */}
           <Link
diff --git a/apps/web/src/components/sections/open-source.tsx b/apps/web/src/components/sections/open-source.tsx
index 6d12a06..b1ad90e 100644
--- a/apps/web/src/components/sections/open-source.tsx
+++ b/apps/web/src/components/sections/open-source.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Github, Heart, Star, GitFork, Users, ExternalLink } from "lucide-react";
+import { Github, Star, GitFork, Users, ExternalLink, Crown, Code2 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import Image from "next/image";
+import { useEffect, useState, useRef } from "react";
 
 interface GitHubStats {
   stars: number;
@@ -11,12 +12,197 @@ interface GitHubStats {
   contributors: number;
 }
 
+interface Contributor {
+  login: string;
+  id: number;
+  avatar_url: string;
+  html_url: string;
+  contributions: number;
+}
+
+// Contribution tier colors and badges
+function getContributorTier(contributions: number) {
+  if (contributions >= 100) {
+    return {
+      tier: "legendary",
+      color: "from-amber-400 via-yellow-500 to-amber-600",
+      border: "border-amber-400/60",
+      glow: "shadow-amber-500/30",
+      badge: "bg-gradient-to-r from-amber-500 to-yellow-500",
+      textColor: "text-amber-400",
+      emoji: "👑",
+    };
+  }
+  if (contributions >= 50) {
+    return {
+      tier: "gold",
+      color: "from-yellow-400 to-amber-500",
+      border: "border-yellow-400/50",
+      glow: "shadow-yellow-500/20",
+      badge: "bg-gradient-to-r from-yellow-500 to-amber-500",
+      textColor: "text-yellow-400",
+      emoji: "⭐",
+    };
+  }
+  if (contributions >= 20) {
+    return {
+      tier: "silver",
+      color: "from-slate-300 to-slate-400",
+      border: "border-slate-400/40",
+      glow: "shadow-slate-400/15",
+      badge: "bg-gradient-to-r from-slate-400 to-slate-500",
+      textColor: "text-slate-300",
+      emoji: "",
+    };
+  }
+  if (contributions >= 10) {
+    return {
+      tier: "bronze",
+      color: "from-orange-400 to-orange-600",
+      border: "border-orange-400/30",
+      glow: "shadow-orange-500/10",
+      badge: "bg-gradient-to-r from-orange-500 to-orange-600",
+      textColor: "text-orange-400",
+      emoji: "",
+    };
+  }
+  return {
+    tier: "contributor",
+    color: "from-[hsl(var(--primary))] to-emerald-600",
+    border: "border-[hsl(var(--border))]",
+    glow: "",
+    badge: "bg-[hsl(var(--primary))]",
+    textColor: "text-[hsl(var(--primary))]",
+    emoji: "",
+  };
+}
+
+function formatContributions(count: number): string {
+  if (count >= 100) return "99+";
+  return count.toString();
+}
+
+interface ContributorAvatarProps {
+  contributor: Contributor;
+  index: number;
+}
+
+function ContributorAvatar({ contributor, index }: ContributorAvatarProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isInView, setIsInView] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const tier = getContributorTier(contributor.contributions);
+
+  // Intersection Observer for lazy loading
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "100px" }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, scale: 0.8 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.3, delay: index * 0.05 }}
+      className="relative group"
+    >
+      <Link
+        href={contributor.html_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block relative"
+      >
+        {/* Glow effect for top contributors */}
+        {tier.tier === "legendary" && (
+          <div className="absolute -inset-1 bg-gradient-to-r from-amber-400 via-yellow-500 to-amber-400 rounded-full blur-md opacity-50 group-hover:opacity-75 transition-opacity animate-pulse" />
+        )}
+        {tier.tier === "gold" && (
+          <div className="absolute -inset-0.5 bg-gradient-to-r from-yellow-400 to-amber-500 rounded-full blur-sm opacity-40 group-hover:opacity-60 transition-opacity" />
+        )}
+
+        {/* Avatar container */}
+        <div
+          className={`relative h-12 w-12 sm:h-14 sm:w-14 rounded-full overflow-hidden border-2 ${tier.border} transition-all duration-300 group-hover:scale-110 group-hover:border-[hsl(var(--primary))] ${tier.glow ? `shadow-lg ${tier.glow}` : ""}`}
+        >
+          {isInView ? (
+            <Image
+              src={contributor.avatar_url}
+              alt={contributor.login}
+              fill
+              className={`object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`}
+              onLoad={() => setIsLoaded(true)}
+              sizes="56px"
+            />
+          ) : null}
+
+          {/* Loading skeleton */}
+          {(!isInView || !isLoaded) && (
+            <div className="absolute inset-0 bg-[hsl(var(--secondary))] animate-pulse" />
+          )}
+        </div>
+
+        {/* Crown for legendary contributors */}
+        {tier.emoji && (
+          <span className="absolute -top-1 -right-1 text-sm sm:text-base z-10">
+            {tier.emoji}
+          </span>
+        )}
+
+        {/* Contribution badge */}
+        <div
+          className={`absolute -bottom-1 -right-1 ${tier.badge} text-[9px] sm:text-[10px] font-bold text-white px-1.5 py-0.5 rounded-full min-w-[20px] text-center shadow-lg z-10`}
+        >
+          {formatContributions(contributor.contributions)}
+        </div>
+
+        {/* Hover tooltip */}
+        <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-20">
+          <div className="bg-[hsl(0_0%_8%)] border border-[hsl(var(--border))] rounded-lg px-3 py-2 shadow-xl whitespace-nowrap">
+            {/* Username */}
+            <div className={`font-mono text-xs sm:text-sm font-bold ${tier.textColor}`}>
+              @{contributor.login}
+            </div>
+            {/* Contribution count */}
+            <div className="flex items-center gap-1.5 mt-1 text-[10px] sm:text-xs text-[hsl(var(--muted-foreground))]">
+              <Code2 className="h-3 w-3" />
+              <span>{contributor.contributions} commits</span>
+              {tier.emoji && <span>{tier.emoji}</span>}
+            </div>
+            {/* Tier badge */}
+            <div className={`mt-1.5 text-[9px] font-mono uppercase tracking-wider ${tier.textColor}`}>
+              {tier.tier}
+            </div>
+            {/* Arrow */}
+            <div className="absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-[hsl(var(--border))]" />
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+}
+
 export function OpenSource() {
   const [stats, setStats] = useState<GitHubStats>({ stars: 0, forks: 0, contributors: 1 });
+  const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    async function fetchGitHubStats() {
+    async function fetchGitHubData() {
       try {
         // Fetch repo data
         const repoRes = await fetch("https://api.github.com/repos/soloshun/opendsa");
@@ -29,28 +215,21 @@ export function OpenSource() {
           }));
         }
 
-        // Fetch contributors count
-        const contribRes = await fetch("https://api.github.com/repos/soloshun/opendsa/contributors?per_page=1");
+        // Fetch contributors
+        const contribRes = await fetch("https://api.github.com/repos/soloshun/opendsa/contributors?per_page=50");
         if (contribRes.ok) {
-          const linkHeader = contribRes.headers.get("Link");
-          if (linkHeader) {
-            const match = linkHeader.match(/page=(\d+)>; rel="last"/);
-            if (match) {
-              setStats(prev => ({ ...prev, contributors: parseInt(match[1]) }));
-            }
-          } else {
-            const data = await contribRes.json();
-            setStats(prev => ({ ...prev, contributors: data.length || 1 }));
-          }
+          const contribData: Contributor[] = await contribRes.json();
+          setContributors(contribData);
+          setStats(prev => ({ ...prev, contributors: contribData.length }));
         }
       } catch (error) {
-        console.error("Failed to fetch GitHub stats:", error);
+        console.error("Failed to fetch GitHub data:", error);
       } finally {
         setLoading(false);
       }
     }
 
-    fetchGitHubStats();
+    fetchGitHubData();
   }, []);
 
   return (
@@ -78,18 +257,12 @@ export function OpenSource() {
           transition={{ duration: 0.5 }}
           className="text-center"
         >
-          {/* Icon */}
-          <motion.div
-            initial={{ scale: 0 }}
-            whileInView={{ scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ type: "spring", delay: 0.2 }}
-            className="mx-auto mb-6 sm:mb-8 inline-flex h-16 w-16 sm:h-20 sm:w-20 items-center justify-center rounded-2xl bg-[hsl(var(--primary))]/10 text-[hsl(var(--primary))] border border-[hsl(var(--primary))]/20"
-          >
-            <Heart className="h-8 w-8 sm:h-10 sm:w-10" />
-          </motion.div>
+          {/* Heading */}
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Github className="h-4 w-4 text-[hsl(var(--primary))]" />
+            <span className="mono-label">/ Open Source</span>
+          </div>
 
-          {/* Heading - creative layout */}
           <h2 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-extrabold tracking-tight text-[hsl(var(--foreground))]">
             BUILT BY THE <span className="text-[hsl(var(--primary))]">COMMUNITY</span>
             <br />
@@ -101,13 +274,96 @@ export function OpenSource() {
             the best algorithm visualization platform.
           </p>
 
+          {/* Contributors showcase */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-10 sm:mt-14"
+          >
+            {/* Contributors header */}
+            <div className="flex items-center justify-center gap-3 mb-6">
+              <div className="h-px flex-1 max-w-[100px] bg-gradient-to-r from-transparent to-[hsl(var(--border))]" />
+              <div className="flex items-center gap-2 text-sm font-mono text-[hsl(var(--muted-foreground))]">
+                <Crown className="h-4 w-4 text-amber-400" />
+                <span>Contributors</span>
+                <span className="text-[hsl(var(--primary))]">({stats.contributors})</span>
+              </div>
+              <div className="h-px flex-1 max-w-[100px] bg-gradient-to-l from-transparent to-[hsl(var(--border))]" />
+            </div>
+
+            {/* Contributors grid */}
+            <div className="relative rounded-2xl border border-[hsl(var(--border))] bg-[hsl(var(--card))]/50 backdrop-blur-sm p-6 sm:p-8">
+              {/* Terminal-like header */}
+              <div className="absolute top-0 left-0 right-0 flex items-center gap-2 px-4 py-2 border-b border-[hsl(var(--border))] bg-[hsl(0_0%_6%)]/80 rounded-t-2xl">
+                <div className="flex gap-1.5">
+                  <div className="h-2.5 w-2.5 rounded-full bg-red-500/80" />
+                  <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/80" />
+                  <div className="h-2.5 w-2.5 rounded-full bg-green-500/80" />
+                </div>
+                <span className="text-[10px] font-mono text-[hsl(var(--muted-foreground))] ml-2">
+                  git log --format=&quot;%an&quot; | sort -u
+                </span>
+              </div>
+
+              {/* Contributors avatars */}
+              <div className="pt-8 sm:pt-10">
+                {loading ? (
+                  <div className="flex flex-wrap justify-center gap-3 sm:gap-4">
+                    {[...Array(8)].map((_, i) => (
+                      <div
+                        key={i}
+                        className="h-12 w-12 sm:h-14 sm:w-14 rounded-full bg-[hsl(var(--secondary))] animate-pulse"
+                      />
+                    ))}
+                  </div>
+                ) : contributors.length > 0 ? (
+                  <div className="flex flex-wrap justify-center gap-3 sm:gap-4">
+                    {contributors.map((contributor, index) => (
+                      <ContributorAvatar
+                        key={contributor.id}
+                        contributor={contributor}
+                        index={index}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-[hsl(var(--muted-foreground))] py-4">
+                    Be the first contributor!
+                  </p>
+                )}
+              </div>
+
+              {/* Legend */}
+              <div className="mt-6 pt-4 border-t border-[hsl(var(--border))]/50 flex flex-wrap items-center justify-center gap-4 text-[10px] sm:text-xs text-[hsl(var(--muted-foreground))]">
+                <span className="flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-full bg-gradient-to-r from-amber-400 to-yellow-500" />
+                  <span>👑 100+ commits</span>
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-full bg-gradient-to-r from-yellow-400 to-amber-500" />
+                  <span>⭐ 50+ commits</span>
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-full bg-gradient-to-r from-slate-300 to-slate-400" />
+                  <span>20+ commits</span>
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <span className="h-2 w-2 rounded-full bg-[hsl(var(--primary))]" />
+                  <span>Contributor</span>
+                </span>
+              </div>
+            </div>
+          </motion.div>
+
           {/* Stats */}
-          <div className="mt-10 sm:mt-14 grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 max-w-3xl mx-auto opacity-80">
+          <div className="mt-10 sm:mt-14 grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 max-w-3xl mx-auto">
             {[
               { icon: <Star className="h-5 w-5 sm:h-6 sm:w-6" />, label: "Stars", value: loading ? "..." : stats.stars.toString() },
               { icon: <GitFork className="h-5 w-5 sm:h-6 sm:w-6" />, label: "Forks", value: loading ? "..." : stats.forks.toString() },
               { icon: <Users className="h-5 w-5 sm:h-6 sm:w-6" />, label: "Contributors", value: loading ? "..." : stats.contributors.toString() },
-              { icon: <Heart className="h-5 w-5 sm:h-6 sm:w-6" />, label: "Sponsors", value: "0" },
+              { icon: <Github className="h-5 w-5 sm:h-6 sm:w-6" />, label: "MIT License", value: "Free" },
             ].map((stat, index) => (
               <motion.div
                 key={stat.label}
@@ -115,7 +371,7 @@ export function OpenSource() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: 0.1 * index }}
-                className="relative group flex flex-col items-center gap-2 p-4 sm:p-6 rounded-2xl bg-[hsl(var(--card))] border border-[hsl(var(--border))] hover:border-[hsl(var(--primary))]/30 transition-colors"
+                className="relative group flex flex-col items-center gap-2 p-4 sm:p-6 rounded-2xl bg-[hsl(var(--card))]/80 border border-[hsl(var(--border))] hover:border-[hsl(var(--primary))]/30 transition-colors"
               >
                 <div className="noise absolute inset-0 rounded-2xl overflow-hidden opacity-30">
                   <div className="absolute inset-0" />
@@ -145,9 +401,9 @@ export function OpenSource() {
               href="https://github.com/soloshun/opendsa/blob/main/CONTRIBUTING.md"
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full sm:w-auto flex items-center justify-center gap-2 rounded-full border border-[hsl(var(--border))] bg-transparent px-6 sm:px-8 py-3.5 sm:py-4 text-sm sm:text-base font-medium text-[hsl(var(--foreground))] transition-all hover:bg-[hsl(var(--secondary))] hover:border-[hsl(var(--primary))]/50"
+              className="w-full sm:w-auto flex items-center justify-center gap-2 rounded-full border border-[hsl(var(--border))] bg-transparent px-6 sm:px-8 py-3.5 sm:py-4 text-sm sm:text-base font-medium text-[hsl(var(--foreground))] transition-all hover:bg-[hsl(var(--secondary))]/80 hover:border-[hsl(var(--primary))]/50"
             >
-              Contribute
+              Become a Contributor
             </Link>
           </div>
 
diff --git a/apps/web/src/components/ui/particles-background.tsx b/apps/web/src/components/ui/particles-background.tsx
index 63dc8df..a78d770 100644
--- a/apps/web/src/components/ui/particles-background.tsx
+++ b/apps/web/src/components/ui/particles-background.tsx
@@ -16,9 +16,7 @@ export function ParticlesBackground() {
     });
   }, []);
 
-  const particlesLoaded = useCallback(async (container: Container | undefined) => {
-    console.log("Particles loaded", container);
-  }, []);
+  const particlesLoaded = useCallback(async () => { }, []);
 
   const options: ISourceOptions = useMemo(
     () => ({
diff --git a/apps/web/src/lib/algorithms-data.ts b/apps/web/src/lib/algorithms-data.ts
new file mode 100644
index 0000000..af0b8d8
--- /dev/null
+++ b/apps/web/src/lib/algorithms-data.ts
@@ -0,0 +1,205 @@
+// Comprehensive list of algorithms and data structures for OpenDSA
+// This is an ambitious roadmap - contributions welcome!
+
+export interface AlgorithmTopic {
+  name: string;
+  implemented: boolean;
+  description?: string;
+}
+
+export interface CategoryItem {
+  topics: AlgorithmTopic[];
+}
+
+export interface Category {
+  title: string;
+  items: Record<string, CategoryItem>;
+}
+
+export interface AlgorithmCategories {
+  dataStructures: Category;
+  algorithms: Category;
+}
+
+export const categories: AlgorithmCategories = {
+  dataStructures: {
+    title: "Data Structures",
+    items: {
+      Arrays: {
+        topics: [
+          { name: "Basic Array Operations", implemented: true },
+          { name: "Dynamic Arrays", implemented: false },
+          { name: "Multi-dimensional Arrays", implemented: false },
+        ],
+      },
+      "Linked Lists": {
+        topics: [
+          { name: "Singly Linked List", implemented: false },
+          { name: "Doubly Linked List", implemented: false },
+          { name: "Circular Linked List", implemented: false },
+        ],
+      },
+      Stacks: {
+        topics: [
+          { name: "Basic Stack Operations", implemented: false },
+          { name: "Applications (Balancing Parentheses)", implemented: false },
+        ],
+      },
+      Queues: {
+        topics: [
+          { name: "Basic Queue", implemented: false },
+          { name: "Circular Queue", implemented: false },
+          { name: "Priority Queue", implemented: false },
+          { name: "Deque (Double-Ended Queue)", implemented: false },
+        ],
+      },
+      Trees: {
+        topics: [
+          { name: "Binary Tree", implemented: false },
+          { name: "Binary Search Tree (BST)", implemented: false },
+          { name: "AVL Tree (Self-Balancing BST)", implemented: false },
+          { name: "Red-Black Tree", implemented: false },
+          { name: "Segment Tree", implemented: false },
+          { name: "Trie", implemented: false },
+          { name: "B-Tree and B+ Tree", implemented: false },
+        ],
+      },
+      Heaps: {
+        topics: [
+          { name: "Min Heap", implemented: false },
+          { name: "Max Heap", implemented: false },
+          { name: "Fibonacci Heap", implemented: false },
+        ],
+      },
+      Graphs: {
+        topics: [
+          { name: "Directed/Undirected Graphs", implemented: false },
+          { name: "Weighted/Unweighted Graphs", implemented: false },
+          { name: "Adjacency Matrix", implemented: false },
+          { name: "Adjacency List", implemented: false },
+          { name: "Edge List", implemented: false },
+        ],
+      },
+      Hashing: {
+        topics: [
+          { name: "Hash Tables", implemented: false },
+          { name: "Hash Maps", implemented: false },
+          { name: "Open Addressing", implemented: false },
+          { name: "Separate Chaining", implemented: false },
+        ],
+      },
+    },
+  },
+  algorithms: {
+    title: "Algorithms",
+    items: {
+      "Sorting (Easy)": {
+        topics: [
+          { name: "Bubble Sort", implemented: true },
+          { name: "Selection Sort", implemented: false },
+          { name: "Insertion Sort", implemented: false },
+        ],
+      },
+      "Sorting (Intermediate)": {
+        topics: [
+          { name: "Merge Sort", implemented: false },
+          { name: "Quick Sort", implemented: false },
+        ],
+      },
+      "Sorting (Advanced)": {
+        topics: [
+          { name: "Heap Sort", implemented: false },
+          { name: "Counting Sort", implemented: false },
+          { name: "Radix Sort", implemented: false },
+          { name: "Bucket Sort", implemented: false },
+        ],
+      },
+      Searching: {
+        topics: [
+          { name: "Linear Search", implemented: true },
+          { name: "Binary Search", implemented: false },
+          { name: "Jump Search", implemented: false },
+          { name: "Exponential Search", implemented: false },
+        ],
+      },
+      "Graph Algorithms": {
+        topics: [
+          { name: "Breadth-First Search (BFS)", implemented: false },
+          { name: "Depth-First Search (DFS)", implemented: false },
+          { name: "Dijkstra's Algorithm", implemented: false },
+          { name: "Floyd-Warshall", implemented: false },
+          { name: "Bellman-Ford", implemented: false },
+          { name: "Prim's MST", implemented: false },
+          { name: "Kruskal's MST", implemented: false },
+          { name: "A* Search", implemented: false },
+        ],
+      },
+      "Dynamic Programming": {
+        topics: [
+          { name: "Fibonacci", implemented: false },
+          { name: "Coin Change (Minimum Coins)", implemented: false },
+          { name: "Longest Common Subsequence (LCS)", implemented: false },
+          { name: "Knapsack Problem", implemented: false },
+          { name: "Matrix Chain Multiplication", implemented: false },
+        ],
+      },
+      Backtracking: {
+        topics: [
+          { name: "Rat in a Maze", implemented: false },
+          { name: "N-Queens Problem", implemented: false },
+          { name: "Knight's Tour", implemented: false },
+          { name: "Sudoku Solver", implemented: false },
+        ],
+      },
+      "Greedy Algorithms": {
+        topics: [
+          { name: "Activity Selection", implemented: false },
+          { name: "Fractional Knapsack", implemented: false },
+          { name: "Huffman Coding", implemented: false },
+          { name: "Job Sequencing", implemented: false },
+        ],
+      },
+      "Miscellaneous Algorithms": {
+        topics: [
+          { name: "Sieve of Eratosthenes (Prime Numbers)", implemented: false },
+          { name: "Euclidean Algorithm (GCD)", implemented: false },
+          { name: "KMP Pattern Matching", implemented: false },
+          { name: "Rabin-Karp Algorithm", implemented: false },
+          { name: "Bit Manipulation", implemented: false },
+          { name: "Randomized Algorithms (QuickSelect)", implemented: false },
+        ],
+      },
+    },
+  },
+};
+
+// Helper functions
+export function getTotalCount(): { total: number; implemented: number } {
+  let total = 0;
+  let implemented = 0;
+
+  (Object.values(categories) as Category[]).forEach((category) => {
+    Object.values(category.items).forEach((item: CategoryItem) => {
+      item.topics.forEach((topic) => {
+        total++;
+        if (topic.implemented) implemented++;
+      });
+    });
+  });
+
+  return { total, implemented };
+}
+
+export function getCategoryCount(category: Category): { total: number; implemented: number } {
+  let total = 0;
+  let implemented = 0;
+
+  Object.values(category.items).forEach((item) => {
+    item.topics.forEach((topic) => {
+      total++;
+      if (topic.implemented) implemented++;
+    });
+  });
+
+  return { total, implemented };
+}