diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 69f1834..f12e850 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -64,32 +64,49 @@
   }
   .nav {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-left: 1rem;
     flex: 1;
   }
   .nav a {
     color: inherit;
     text-decoration: none;
-    padding: 0.3rem 0.6rem;
-    border-radius: 4px;
-    opacity: 0.9;
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.25);
+    font-weight: 500;
+    line-height: 1;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
   }
-  .nav a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
-  .nav a.active {
+  .nav a:hover {
     background: rgba(255,255,255,0.22);
-    opacity: 1;
+    border-color: rgba(255,255,255,0.4);
+  }
+  .nav a:active { transform: translateY(1px); }
+  .nav a.active {
+    background: #fff;
+    color: #b00d27;
+    border-color: #fff;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
   }
   .lang {
-    background: rgba(255,255,255,0.18);
+    background: rgba(255,255,255,0.12);
     color: inherit;
     border: 1px solid rgba(255,255,255,0.45);
-    padding: 0.35rem 0.85rem;
-    border-radius: 4px;
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
     font: inherit;
+    font-weight: 500;
+    line-height: 1;
     cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
   }
-  .lang:hover { background: rgba(255,255,255,0.28); }
+  .lang:hover {
+    background: rgba(255,255,255,0.22);
+    border-color: rgba(255,255,255,0.6);
+  }
+  .lang:active { transform: translateY(1px); }
 
   @media (max-width: 640px) {
     .header { flex-wrap: wrap; }