diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..f685a96
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,98 @@
+import { Link } from "react-router-dom";
+import { Terminal, Github, Twitter } from "lucide-react";
+
+const columns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Documentation", to: "/docs" },
+      { label: "API Reference", to: "/docs" },
+      { label: "Changelog", to: "/changelog" },
+      { label: "Status", to: "/status" },
+    ],
+  },
+  {
+    title: "Developers",
+    links: [
+      { label: "Getting Started", to: "/docs" },
+      { label: "SDKs", to: "/docs" },
+      { label: "Community", to: "#" },
+      { label: "Open Source", to: "#" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", to: "#" },
+      { label: "Blog", to: "#" },
+      { label: "Careers", to: "#" },
+      { label: "Contact", to: "#" },
+    ],
+  },
+];
+
+export default function Footer() {
+  return (
+    <footer className="bg-slate-950 border-t border-slate-800">
+      <div className="mx-auto max-w-7xl px-6 py-16">
+        <div className="grid md:grid-cols-5 gap-12">
+          {/* Brand column */}
+          <div className="md:col-span-2">
+            <Link to="/" className="flex items-center gap-2.5 mb-4">
+              <div className="h-8 w-8 rounded-lg bg-emerald-500 flex items-center justify-center">
+                <Terminal className="h-4 w-4 text-slate-950" />
+              </div>
+              <span className="text-lg font-bold text-white">DevStack</span>
+            </Link>
+            <p className="text-sm text-slate-500 max-w-xs leading-relaxed">
+              Build, deploy, and scale your applications with the most developer-friendly API platform.
+            </p>
+            <div className="flex items-center gap-4 mt-6">
+              <a href="#" className="text-slate-500 hover:text-white transition-colors">
+                <Github className="h-5 w-5" />
+              </a>
+              <a href="#" className="text-slate-500 hover:text-white transition-colors">
+                <Twitter className="h-5 w-5" />
+              </a>
+              <a href="#" className="text-slate-500 hover:text-white transition-colors">
+                <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963a.075.075 0 0 0-.041-.104 13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028z" /></svg>
+              </a>
+            </div>
+            {/* Status indicator */}
+            <div className="flex items-center gap-2 mt-6">
+              <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+              <span className="text-xs text-slate-500">All systems operational</span>
+            </div>
+          </div>
+
+          {/* Link columns */}
+          {columns.map((col) => (
+            <div key={col.title}>
+              <h4 className="text-sm font-semibold text-white mb-4">{col.title}</h4>
+              <ul className="space-y-3">
+                {col.links.map((link) => (
+                  <li key={link.label}>
+                    <Link to={link.to} className="text-sm text-slate-500 hover:text-white transition-colors">
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-slate-600">
+            &copy; {new Date().getFullYear()} DevStack Inc.. All rights reserved.
+          </p>
+          <div className="flex items-center gap-6">
+            <a href="#" className="text-xs text-slate-600 hover:text-slate-400 transition-colors">Privacy</a>
+            <a href="#" className="text-xs text-slate-600 hover:text-slate-400 transition-colors">Terms</a>
+            <a href="#" className="text-xs text-slate-600 hover:text-slate-400 transition-colors">Security</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}