diff --git a/src/app/page.tsx b/src/app/page.tsx
index bb69380..d42c311 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,6 +14,7 @@ import {
   Lock,
   Sparkles,
 } from "lucide-react";
+import WebStuff from "@/components/Web";
 
 export default function HomePage() {
   const [mounted, setMounted] = useState(false);
@@ -86,7 +87,7 @@ export default function HomePage() {
   };
 
   return (
-    <div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
+    <WebStuff>
       {/* Animated background */}
       <div className="fixed inset-0 opacity-20">
         <div
@@ -355,41 +356,6 @@ export default function HomePage() {
           </div>
         </motion.div>
       </motion.section>
-
-      {/* Footer */}
-      <footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
-        <div className="max-w-7xl mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-            <img src="orus.svg" alt="Logo" className="h-4" />
-
-            <div className="text-slate-400 text-center">
-              © 2025 ORUS. Open source for everyone. Built with 💜 for
-              developers.
-            </div>
-
-            <div className="flex gap-6">
-              <motion.a
-                href="https://github.com/orus-dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-slate-400 hover:text-purple-400 transition-colors"
-                whileHover={{ scale: 1.2, rotate: 5 }}
-              >
-                <Github className="w-6 h-6" />
-              </motion.a>
-              <motion.a
-                href="https://discord.gg/HFRsNxfCqT"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-slate-400 hover:text-purple-400 transition-colors"
-                whileHover={{ scale: 1.2, rotate: -5 }}
-              >
-                <MessageSquare className="w-6 h-6" />
-              </motion.a>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
+    </WebStuff>
   );
 }
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..1e1482e
--- /dev/null
+++ b/src/app/projects/page.tsx
@@ -0,0 +1,378 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  Github,
+  MessageSquare,
+  Shield,
+  Code2,
+  Rocket,
+  Lock,
+  Sparkles,
+  ExternalLink,
+  Star,
+  GitFork,
+  Terminal,
+  Globe,
+  Zap,
+  Package,
+} from "lucide-react";
+import WebStuff from "@/components/Web";
+
+export default function ProjectsPage() {
+  const [mounted, setMounted] = useState(false);
+  const [activeFilter, setActiveFilter] = useState("all");
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const projects = [
+    {
+      title: "SecureAuth Pro",
+      description:
+        "Enterprise-grade authentication system with zero-trust architecture and advanced threat detection.",
+      category: "security",
+      icon: Shield,
+      stars: 2450,
+      forks: 340,
+      tech: ["TypeScript", "Node.js", "PostgreSQL"],
+      status: "Active",
+      github: "https://github.com/orus-dev",
+      demo: "#",
+    },
+    {
+      title: "DevOps Toolkit",
+      description:
+        "Complete CI/CD automation suite with container orchestration and infrastructure as code.",
+      category: "devtools",
+      icon: Terminal,
+      stars: 1820,
+      forks: 290,
+      tech: ["Go", "Docker", "Kubernetes"],
+      status: "Active",
+      github: "https://github.com/orus-dev",
+    },
+    {
+      title: "CloudSync API",
+      description:
+        "Real-time data synchronization service with end-to-end encryption and multi-region support.",
+      category: "infrastructure",
+      icon: Globe,
+      stars: 980,
+      forks: 145,
+      tech: ["Rust", "Redis", "GraphQL"],
+      status: "Beta",
+      github: "https://github.com/orus-dev",
+      demo: "#",
+    },
+    {
+      title: "CodeGuard Scanner",
+      description:
+        "Automated code security scanner with AI-powered vulnerability detection and remediation suggestions.",
+      category: "security",
+      icon: Lock,
+      stars: 3200,
+      forks: 480,
+      tech: ["Python", "TensorFlow", "FastAPI"],
+      status: "Active",
+      github: "https://github.com/orus-dev",
+    },
+    {
+      title: "MicroFramework",
+      description:
+        "Lightweight, blazing-fast microservices framework with built-in service mesh and observability.",
+      category: "devtools",
+      icon: Zap,
+      stars: 1560,
+      forks: 210,
+      tech: ["TypeScript", "gRPC", "Prometheus"],
+      status: "Active",
+      github: "https://github.com/orus-dev",
+      demo: "#",
+    },
+    {
+      title: "PackageHub",
+      description:
+        "Private package registry with caching, versioning, and dependency analysis for modern development.",
+      category: "infrastructure",
+      icon: Package,
+      stars: 720,
+      forks: 95,
+      tech: ["Node.js", "MongoDB", "S3"],
+      status: "Beta",
+      github: "https://github.com/orus-dev",
+    },
+  ];
+
+  const filters = [
+    { id: "all", label: "All Projects" },
+    { id: "security", label: "Security" },
+    { id: "devtools", label: "Dev Tools" },
+    { id: "infrastructure", label: "Infrastructure" },
+  ];
+
+  const filteredProjects =
+    activeFilter === "all"
+      ? projects
+      : projects.filter((p) => p.category === activeFilter);
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <WebStuff>
+      {/* Hero Section */}
+      <motion.section
+        className="relative z-10 px-6 py-16 lg:py-24 max-w-7xl mx-auto"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <div className="text-center max-w-4xl mx-auto">
+          <motion.div variants={itemVariants} className="mb-6">
+            <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
+              <Sparkles className="w-4 h-4" />
+              Open Source Projects
+            </span>
+          </motion.div>
+
+          <motion.h1
+            variants={itemVariants}
+            className="text-5xl lg:text-6xl font-bold mb-6"
+          >
+            <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+              Building the Future
+            </span>
+          </motion.h1>
+
+          <motion.p
+            variants={itemVariants}
+            className="text-xl text-slate-300 mb-8 leading-relaxed max-w-3xl mx-auto"
+          >
+            Explore our collection of open-source projects designed to empower
+            developers and enhance security across the ecosystem.
+          </motion.p>
+
+          {/* Filter Tabs */}
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-wrap justify-center gap-3"
+          >
+            {filters.map((filter) => (
+              <button
+                key={filter.id}
+                onClick={() => setActiveFilter(() => filter.id)}
+                className={`px-6 py-2.5 rounded-lg font-medium transition-all ${
+                  activeFilter === filter.id
+                    ? "bg-purple-500 text-white shadow-lg shadow-purple-500/50"
+                    : "bg-slate-800/50 text-slate-300 hover:bg-slate-700/50 border border-slate-700"
+                }`}
+              >
+                {filter.label}
+              </button>
+            ))}
+          </motion.div>
+        </div>
+      </motion.section>
+
+      {/* Projects Grid */}
+      <motion.section
+        className="relative z-10 px-6 py-12 max-w-7xl mx-auto"
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+      >
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredProjects.map((project, i) => (
+            <motion.div
+              key={i}
+              layout
+              className="relative group"
+              whileHover={{ y: -8 }}
+              viewport={{ once: false }}
+            >
+              <div className="absolute inset-0 bg-linear-to-r from-purple-500/20 to-blue-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all" />
+              <div className="relative bg-slate-900/80 backdrop-blur border border-slate-700 hover:border-purple-500/50 rounded-2xl p-6 transition-all h-full flex flex-col">
+                {/* Header */}
+                <div className="flex items-start justify-between mb-4">
+                  <div className="inline-flex items-center justify-center w-12 h-12 bg-purple-500/10 rounded-xl">
+                    <project.icon className="w-6 h-6 text-purple-400" />
+                  </div>
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-medium ${
+                      project.status === "Active"
+                        ? "bg-green-500/10 text-green-400 border border-green-500/20"
+                        : "bg-yellow-500/10 text-yellow-400 border border-yellow-500/20"
+                    }`}
+                  >
+                    {project.status}
+                  </span>
+                </div>
+
+                {/* Content */}
+                <h3 className="text-xl font-bold mb-2 group-hover:text-purple-400 transition-colors">
+                  {project.title}
+                </h3>
+                <p className="text-slate-400 text-sm mb-4 leading-relaxed grow">
+                  {project.description}
+                </p>
+
+                {/* Stats */}
+                <div className="flex items-center gap-4 mb-4 text-sm text-slate-400">
+                  <div className="flex items-center gap-1">
+                    <Star className="w-4 h-4" />
+                    <span>{project.stars.toLocaleString()}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <GitFork className="w-4 h-4" />
+                    <span>{project.forks}</span>
+                  </div>
+                </div>
+
+                {/* Tech Stack */}
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {project.tech.map((tech, idx) => (
+                    <span
+                      key={idx}
+                      className="px-2.5 py-1 bg-slate-800/50 border border-slate-700 rounded-md text-xs text-slate-300"
+                    >
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-4 border-t border-slate-800">
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors"
+                  >
+                    <Github className="w-4 h-4" />
+                    Code
+                  </a>
+                  {project.demo && (
+                    <a
+                      href={project.demo}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-lg text-sm font-medium text-purple-400 transition-colors"
+                    >
+                      <ExternalLink className="w-4 h-4" />
+                      Demo
+                    </a>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+
+      {/* Stats Section */}
+      <motion.section
+        className="relative z-10 px-6 py-20 max-w-7xl mx-auto"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={containerVariants}
+      >
+        <motion.div
+          variants={itemVariants}
+          className="bg-slate-900/30 backdrop-blur border border-slate-800 rounded-3xl p-8 lg:p-12"
+        >
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            {[
+              { label: "Projects", value: "24+" },
+              { label: "Contributors", value: "180+" },
+              { label: "Stars", value: "12.5K+" },
+              { label: "Forks", value: "2.1K+" },
+            ].map((stat, i) => (
+              <motion.div
+                key={i}
+                variants={itemVariants}
+                className="text-center"
+              >
+                <div className="text-3xl lg:text-4xl font-bold text-purple-400 mb-2">
+                  {stat.value}
+                </div>
+                <div className="text-slate-400">{stat.label}</div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </motion.section>
+
+      {/* CTA Section */}
+      <motion.section
+        className="relative z-10 px-6 py-20 max-w-5xl mx-auto"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={containerVariants}
+      >
+        <motion.div
+          variants={itemVariants}
+          className="relative overflow-hidden bg-linear-to-r from-purple-500/10 to-blue-500/10 backdrop-blur border border-purple-500/20 rounded-3xl p-12 text-center"
+        >
+          <div className="absolute inset-0 bg-linear-to-r from-purple-500/5 to-blue-500/5" />
+
+          <div className="relative">
+            <h2 className="text-3xl lg:text-4xl font-bold mb-4">
+              Want to Contribute?
+            </h2>
+            <p className="text-slate-300 text-lg mb-8 max-w-2xl mx-auto">
+              All our projects are open source and welcoming to contributors.
+              Join us in building tools that make a difference.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <motion.a
+                href="https://github.com/orus-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-purple-600 hover:bg-purple-500 rounded-lg font-semibold text-lg transition-colors"
+                whileTap={{ scale: 0.95 }}
+              >
+                <Github className="w-5 h-5" />
+                View on GitHub
+              </motion.a>
+
+              <motion.a
+                href="https://discord.gg/HFRsNxfCqT"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-600 hover:border-slate-400 rounded-lg font-semibold text-lg transition-colors"
+                whileTap={{ scale: 0.95 }}
+              >
+                <MessageSquare className="w-5 h-5" />
+                Join Discord
+              </motion.a>
+            </div>
+          </div>
+        </motion.div>
+      </motion.section>
+    </WebStuff>
+  );
+}
diff --git a/src/components/Web.tsx b/src/components/Web.tsx
new file mode 100644
index 0000000..d54dfed
--- /dev/null
+++ b/src/components/Web.tsx
@@ -0,0 +1,166 @@
+import { motion } from "framer-motion";
+import { Github, MessageSquare } from "lucide-react";
+
+export default function WebStuff({
+  children,
+}: Readonly<{
+  children?: React.ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
+      {/* Animated background */}
+      <div className="fixed inset-0 opacity-20">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `radial-gradient(circle at 2px 2px, rgb(168, 85, 247) 1px, transparent 0)`,
+            backgroundSize: "50px 50px",
+          }}
+        />
+      </div>
+
+      {/* Gradient orbs */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <motion.div
+          className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"
+          animate={{
+            scale: [1, 1.2, 1],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+          }}
+        />
+        <motion.div
+          className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"
+          animate={{
+            scale: [1.2, 1, 1.2],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            delay: 1,
+          }}
+        />
+      </div>
+
+      {/* Navigation */}
+      <motion.nav
+        initial="hidden"
+        animate="visible"
+        variants={{
+          hidden: { y: -40, opacity: 0 },
+          visible: {
+            y: 0,
+            opacity: 1,
+            transition: {
+              duration: 0.6,
+              ease: [0.25, 0.1, 0.25, 1], // smooth ease
+            },
+          },
+        }}
+        className="relative z-10 px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"
+      >
+        <motion.a
+          className="flex items-center"
+          href="/"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+        >
+          <img src="orus2.svg" alt="Logo" className="h-4" />
+        </motion.a>
+
+        {/* Menu */}
+        <motion.div
+          className="flex gap-6 items-center"
+          variants={{
+            hidden: {},
+            visible: {
+              transition: {
+                staggerChildren: 0.08,
+                delayChildren: 0.15,
+              },
+            },
+          }}
+        >
+          {["Blog", "Projects", "About"].map((item) => (
+            <motion.a
+              key={item}
+              href={`/${item.toLowerCase()}`}
+              className="text-slate-300 hover:text-white transition-colors hidden md:block"
+              variants={{
+                hidden: { opacity: 0, y: -12 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              transition={{
+                duration: 0.45,
+                ease: [0.25, 0.1, 0.25, 1],
+              }}
+              whileHover={{ y: -2 }}
+            >
+              {item}
+            </motion.a>
+          ))}
+
+          <motion.a
+            href="https://discord.gg/HFRsNxfCqT"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-colors text-sm"
+            variants={{
+              hidden: { opacity: 0, y: -12 },
+              visible: { opacity: 1, y: 0 },
+            }}
+            transition={{
+              duration: 0.45,
+              ease: [0.25, 0.1, 0.25, 1],
+            }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <MessageSquare className="w-4 h-4" />
+            Join Discord
+          </motion.a>
+        </motion.div>
+      </motion.nav>
+
+      {children}
+
+      <footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
+            <img src="orus.svg" alt="Logo" className="h-4" />
+
+            <div className="text-slate-400 text-center">
+              © 2025 ORUS. Open source for everyone. Built with 💜 for
+              developers.
+            </div>
+
+            <div className="flex gap-6">
+              <motion.a
+                href="https://github.com/orus-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-slate-400 hover:text-purple-400 transition-colors"
+                whileHover={{ scale: 1.2, rotate: 5 }}
+              >
+                <Github className="w-6 h-6" />
+              </motion.a>
+              <motion.a
+                href="https://discord.gg/HFRsNxfCqT"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-slate-400 hover:text-purple-400 transition-colors"
+                whileHover={{ scale: 1.2, rotate: -5 }}
+              >
+                <MessageSquare className="w-6 h-6" />
+              </motion.a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}