diff --git a/app/assets/css/header.css b/app/assets/css/header.css
index 9c98e86..f5c31f7 100644
--- a/app/assets/css/header.css
+++ b/app/assets/css/header.css
@@ -139,7 +139,6 @@
         transform: scale(1);
 
         & a {
-            display: block;
             text-align: center;
 
             &:hover {
diff --git a/app/components/Header.vue b/app/components/Header.vue
index c8b221c..9b537a0 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -28,8 +28,11 @@
       </label>
       <nav>
         <ul class="main-nav">
-          <li v-for="({label, to, aria}) in nav" :key="label" @click="isBurgerOpen = false">
-            <NuxtLink :to="to" :aria-label="aria" active-class="active">{{ label }}</NuxtLink>
+          <li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
+            <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row">
+              <Icon :name="`ph:${icon}-duotone`" mode="svg" />
+              {{ label }}
+            </NuxtLink>
           </li>
         </ul>
       </nav>
@@ -52,21 +55,25 @@ const nav = [
   {
     to: `/`,
     label: 'home',
+    icon: 'house',
     'aria-label': 'Link dieser Seite: Startseite'
   },
   {
     to: `/services`,
     label: 'leistungen',
+    icon: 'list-checks',
     aria: 'Link dieser Seite: Leistungen'
   },
   {
     to: `/references`,
     label: 'referenzen',
+    icon: 'at',
     aria: 'Link dieser Seite: Referenzen'
   },
   {
     to: `/contact`,
     label: 'kontakt',
+    icon: 'chats-circle',
     aria: 'Link dieser Seite: Kontakt'
   },
 ]