diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 0c2268a..fa09b28 100755
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -3,11 +3,13 @@
 import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
 const navLinks = [
-  { href: "#about", label: "About" },
-  { href: "#projects", label: "Projects" },
-  { href: "#contact", label: "Contact" },
+  { href: "/#about", label: "About" },
+  { href: "/services", label: "Services" },
+  { href: "/#projects", label: "Projects" },
+  { href: "/#contact", label: "Contact" },
 ];
 
 export default function Navigation() {
@@ -30,7 +32,7 @@ export default function Navigation() {
       }`}
     >
       <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
-        <a href="#" className="flex items-center gap-3" aria-label="Wild Dragon — back to top">
+        <Link href="/" className="flex items-center gap-3" aria-label="Wild Dragon — home">
           <Image
             src="/images/dragon-mark.png"
             alt="Wild Dragon"
@@ -45,22 +47,33 @@ export default function Navigation() {
           >
             Wild Dragon
           </span>
-        </a>
+        </Link>
 
         {/* Desktop nav */}
-        <div className="hidden md:flex items-center gap-8" role="list">
-          {navLinks.map((link) => (
-            <a
-              key={link.href}
-              href={link.href}
-              role="listitem"
-              className={`text-sm font-medium transition-colors hover:text-accent ${
-                scrolled ? "text-muted" : "text-white/80"
-              }`}
-            >
-              {link.label}
-            </a>
-          ))}
+        <div className="hidden md:flex items-center gap-8">
+          {navLinks.map((link) =>
+            link.href.startsWith("/#") ? (
+              <a
+                key={link.href}
+                href={link.href}
+                className={`text-sm font-medium transition-colors hover:text-accent ${
+                  scrolled ? "text-muted" : "text-white/80"
+                }`}
+              >
+                {link.label}
+              </a>
+            ) : (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`text-sm font-medium transition-colors hover:text-accent ${
+                  scrolled ? "text-muted" : "text-white/80"
+                }`}
+              >
+                {link.label}
+              </Link>
+            )
+          )}
         </div>
 
         {/* Mobile toggle */}
@@ -87,20 +100,28 @@ export default function Navigation() {
         <div
           id="mobile-menu"
           className="md:hidden bg-white border-t border-neutral-200 px-6 py-4"
-          role="menu"
-          aria-label="Mobile navigation"
         >
-          {navLinks.map((link) => (
-            <a
-              key={link.href}
-              href={link.href}
-              role="menuitem"
-              onClick={() => setMobileOpen(false)}
-              className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors"
-            >
-              {link.label}
-            </a>
-          ))}
+          {navLinks.map((link) =>
+            link.href.startsWith("/#") ? (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileOpen(false)}
+                className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors"
+              >
+                {link.label}
+              </a>
+            ) : (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileOpen(false)}
+                className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors"
+              >
+                {link.label}
+              </Link>
+            )
+          )}
         </div>
       )}
     </nav>