diff --git a/artifacts/ehsan-poc/src/components/layout/Header.tsx b/artifacts/ehsan-poc/src/components/layout/Header.tsx
index 1341035..a2d78c2 100644
--- a/artifacts/ehsan-poc/src/components/layout/Header.tsx
+++ b/artifacts/ehsan-poc/src/components/layout/Header.tsx
@@ -112,7 +112,7 @@ export function Header() {
   ];
 
   return (
-    <header className="bg-white sticky top-0 z-50 shadow-sm relative">
+    <header className="bg-white sticky top-0 z-50 shadow-sm relative border-b-4 border-[#14573A]">
       <div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
         {/* Logo */}
         <Link href="/" className="flex items-center shrink-0">
@@ -120,12 +120,12 @@ export function Header() {
         </Link>
 
         {/* Desktop nav */}
-        <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
+        <nav className="hidden lg:flex items-stretch self-stretch gap-1 flex-1 justify-center">
           <Link
             href="/"
-            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+            className={`px-4 flex items-center text-sm font-medium transition-colors ${
               isActive("/")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold rounded-t-lg"
                 : "text-foreground hover:text-primary"
             }`}
             data-testid="nav-home"
@@ -135,9 +135,9 @@ export function Header() {
 
           <Link
             href="/waqf"
-            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+            className={`px-4 flex items-center text-sm font-medium transition-colors ${
               isActive("/waqf")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold rounded-t-lg"
                 : "text-foreground hover:text-primary"
             }`}
             data-testid="nav-waqf"
@@ -147,9 +147,9 @@ export function Header() {
 
           <Link
             href="/opportunities"
-            className={`px-4 py-2 text-sm rounded-md inline-flex items-center gap-1 transition-colors ${
+            className={`px-4 flex items-center gap-1 text-sm transition-colors ${
               isActive("/opportunities")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold rounded-t-lg"
                 : "text-foreground font-medium hover:text-primary"
             }`}
             data-testid="nav-opportunities"
@@ -162,7 +162,7 @@ export function Header() {
             ref={servicesTriggerRef}
             type="button"
             onClick={() => setServicesOpen((v) => !v)}
-            className={`px-3 py-2 text-sm font-medium inline-flex items-center gap-1 transition-colors ${
+            className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
               servicesOpen ? "text-primary" : "text-foreground hover:text-primary"
             }`}
             data-testid="nav-services"
@@ -180,7 +180,7 @@ export function Header() {
             ref={aboutTriggerRef}
             type="button"
             onClick={() => setAboutOpen((v) => !v)}
-            className={`px-3 py-2 text-sm font-medium inline-flex items-center gap-1 transition-colors ${
+            className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
               aboutOpen || location.startsWith("/about")
                 ? "text-primary"
                 : "text-foreground hover:text-primary"
@@ -198,9 +198,9 @@ export function Header() {
 
           <Link
             href="/baraem"
-            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+            className={`px-4 flex items-center text-sm font-medium transition-colors ${
               isActive("/baraem")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold rounded-t-lg"
                 : "text-foreground hover:text-primary"
             }`}
             data-testid="nav-baraem"
@@ -369,7 +369,7 @@ export function Header() {
             onClick={() => setMobileOpen(false)}
             className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
               isActive("/")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold"
                 : "text-foreground font-medium"
             }`}
           >
@@ -380,7 +380,7 @@ export function Header() {
             onClick={() => setMobileOpen(false)}
             className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
               isActive("/waqf")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold"
                 : "text-foreground font-medium"
             }`}
           >
@@ -391,7 +391,7 @@ export function Header() {
             onClick={() => setMobileOpen(false)}
             className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
               isActive("/opportunities")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold"
                 : "text-foreground font-medium"
             }`}
           >
@@ -447,7 +447,7 @@ export function Header() {
             onClick={() => setMobileOpen(false)}
             className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
               isActive("/baraem")
-                ? "bg-primary text-primary-foreground font-bold"
+                ? "bg-[#14573A] text-white font-bold"
                 : "text-foreground font-medium"
             }`}
           >