diff --git a/frontend/fonts/space-grotesk.ttf b/frontend/fonts/space-grotesk.ttf
new file mode 100644
index 0000000..2c6cc59
Binary files /dev/null and b/frontend/fonts/space-grotesk.ttf differ
diff --git a/frontend/index.html b/frontend/index.html
index 255af3c..d2271a4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,14 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jarne Götz - Portfolio</title>
-    <meta name="description"
-        content="Software Developer & Technology Enthusiast. Focusing on Rust, AI, Security, and Infrastructure.">
-
-    <!-- Font: Space Grotesk -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
-        rel="stylesheet">
+    <meta name="description" content="Software Developer. Focusing on Rust, AI, Security, and Infrastructure.">
 
     <!-- Preload Icons -->
     <link rel="preload" href="icons/menu.svg" as="image" type="image/svg+xml">
@@ -53,8 +46,7 @@
     <!-- Hero Section -->
     <header class="section">
         <div class="container">
-            <div class="mb-4"
-                style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; text-transform: uppercase; color: var(--fg-muted); border: 1px solid var(--border); padding: 0.25rem 0.75rem;">
+            <div class="mb-4 tag">
                 <img src="icons/terminal.svg" alt="Terminal" class="icon-sm">
                 Software Developer
             </div>
@@ -112,8 +104,7 @@
     <!-- Projects Section -->
     <section id="projects" class="section">
         <div class="container">
-            <div class="flex"
-                style="justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 2rem;">
+            <div class="flex project-header">
                 <h2>Selected Projects</h2>
                 <span class="text-sm font-mono text-muted">03 / REPOS</span>
             </div>
@@ -291,8 +282,8 @@
                     <h3>Home Assistant</h3>
                     <p class="text-sm text-muted">Smart Home Automation</p>
                 </a>
-                <a href="https://www.librechat.ai" class="grid-item lab-item" target="_blank">
-                    <h3>LibreChat</h3>
+                <a href="https://openwebui.com" class="grid-item lab-item" target="_blank">
+                    <h3>Open WebUI</h3>
                     <p class="text-sm text-muted">LLM Web Interface</p>
                 </a>
                 <a href="https://github.com/dani-garcia/vaultwarden" class="grid-item lab-item" target="_blank">
diff --git a/frontend/style.css b/frontend/style.css
index 31f1a2e..c28b40b 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1,3 +1,10 @@
+@font-face {
+  /* Default font family */
+  src: url('fonts/space-grotesk.ttf');
+  font-family: 'Space Grotesk';
+  font-display: swap
+}
+
 :root {
     /* Monochromatic Palette */
     --bg-body: #09090b;
@@ -255,7 +262,9 @@ nav {
     padding: 0.25rem 0.5rem;
     border: 1px solid var(--border);
     color: var(--fg-muted);
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 /* Tech Strip - Fixed Overflow */
@@ -292,6 +301,14 @@ nav {
     margin-right: 0;
 }
 
+.project-header {
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border);
+    align-items: flex-end;
+    padding-bottom: 1rem;
+    margin-bottom: 2rem;
+}
+
 /* Project Cards */
 .project-card {
     display: flex;