diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..14875e1
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import Link from "next/link"
+import { Shield, Github, Linkedin, Twitter } from "lucide-react"
+
+export function Footer() {
+  return (
+    <footer className="border-t border-border bg-card/50">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Brand */}
+          <div className="md:col-span-1">
+            <Link href="/" className="flex items-center gap-2 mb-4">
+              <Shield className="h-8 w-8 text-primary" />
+              <span className="text-xl font-bold">
+                Secure<span className="text-primary">Bob</span> AI
+              </span>
+            </Link>
+            <p className="text-muted-foreground text-sm">
+              AI-powered DevSecOps assistant for detecting vulnerabilities before deployment.
+            </p>
+          </div>
+
+          {/* Features */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Features</h4>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="/github-scanner" className="text-muted-foreground hover:text-primary transition-colors">
+                  GitHub Scanner
+                </Link>
+              </li>
+              <li>
+                <Link href="/vulnerability-scanner" className="text-muted-foreground hover:text-primary transition-colors">
+                  Vulnerability Detection
+                </Link>
+              </li>
+              <li>
+                <Link href="/secret-scanner" className="text-muted-foreground hover:text-primary transition-colors">
+                  Secret Leak Detection
+                </Link>
+              </li>
+              <li>
+                <Link href="/pr-review" className="text-muted-foreground hover:text-primary transition-colors">
+                  PR Security Review
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Resources</h4>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="/security-dashboard" className="text-muted-foreground hover:text-primary transition-colors">
+                  Security Dashboard
+                </Link>
+              </li>
+              <li>
+                <Link href="/ai-assistant" className="text-muted-foreground hover:text-primary transition-colors">
+                  AI Assistant
+                </Link>
+              </li>
+              <li>
+                <span className="text-muted-foreground">Documentation</span>
+              </li>
+              <li>
+                <span className="text-muted-foreground">API Reference</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Powered By */}
+          <div>
+            <h4 className="font-semibold text-foreground mb-4">Powered By</h4>
+            <div className="space-y-3">
+              <div className="glass-card rounded-lg p-3">
+                <p className="text-sm font-medium text-primary">IBM watsonx.ai</p>
+                <p className="text-xs text-muted-foreground">Enterprise AI Platform</p>
+              </div>
+              <div className="glass-card rounded-lg p-3">
+                <p className="text-sm font-medium text-secondary">IBM Granite</p>
+                <p className="text-xs text-muted-foreground">Foundation Models</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
+          <p className="text-sm text-muted-foreground">
+            2024 SecureBob AI. Built for IBM watsonx Hackathon.
+          </p>
+          <div className="flex items-center gap-4">
+            <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <Github className="h-5 w-5" />
+            </a>
+            <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <Twitter className="h-5 w-5" />
+            </a>
+            <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <Linkedin className="h-5 w-5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
new file mode 100644
index 0000000..66b48f6
--- /dev/null
+++ b/components/navbar.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { motion } from "framer-motion"
+import { Shield, Menu, X } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+
+const navLinks = [
+  { href: "/", label: "Home" },
+  { href: "/features", label: "Features" },
+  { href: "/github-scanner", label: "GitHub Scanner" },
+  { href: "/security-dashboard", label: "Dashboard" },
+  { href: "/ai-assistant", label: "AI Assistant" },
+]
+
+export function Navbar() {
+  const pathname = usePathname()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <motion.header
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      className="fixed top-0 left-0 right-0 z-50 glass"
+    >
+      <nav className="container mx-auto px-4 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 group">
+            <div className="relative">
+              <Shield className="h-8 w-8 text-primary glow-text-blue" />
+              <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" />
+            </div>
+            <span className="text-xl font-bold text-foreground">
+              Secure<span className="text-primary">Bob</span> AI
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`relative text-sm font-medium transition-colors hover:text-primary ${
+                  pathname === link.href ? "text-primary" : "text-muted-foreground"
+                }`}
+              >
+                {link.label}
+                {pathname === link.href && (
+                  <motion.div
+                    layoutId="navbar-indicator"
+                    className="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary rounded-full"
+                  />
+                )}
+              </Link>
+            ))}
+          </div>
+
+          {/* CTA Button */}
+          <div className="hidden md:flex items-center gap-4">
+            <Link href="/features">
+              <Button className="bg-primary hover:bg-primary/90 text-primary-foreground glow-blue">
+                Start Scanning
+              </Button>
+            </Link>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden text-foreground"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            className="md:hidden mt-4 pb-4 border-t border-border"
+          >
+            <div className="flex flex-col gap-4 pt-4">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className={`text-sm font-medium transition-colors hover:text-primary ${
+                    pathname === link.href ? "text-primary" : "text-muted-foreground"
+                  }`}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              <Link href="/features" onClick={() => setMobileMenuOpen(false)}>
+                <Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
+                  Start Scanning
+                </Button>
+              </Link>
+            </div>
+          </motion.div>
+        )}
+      </nav>
+    </motion.header>
+  )
+}