diff --git a/frontend-new/src/components/Header.vue b/frontend-new/src/components/Header.vue
index 0c419af14..575cb4b5a 100644
--- a/frontend-new/src/components/Header.vue
+++ b/frontend-new/src/components/Header.vue
@@ -144,11 +144,21 @@ const loggedIn = false; // TODO
             </div>
 
             <div class="login-buttons flex gap-2 items-center">
-                <button class="flex" @click="theme.toggleDarkMode()">
+                <button class="flex mr-2" @click="theme.toggleDarkMode()">
                     <icon-mdi-weather-night v-if="theme.darkMode" style="font-size: 1.2em;"></icon-mdi-weather-night>
                     <icon-mdi-white-balance-sunny v-else style="font-size: 1.2em;"></icon-mdi-white-balance-sunny>
                 </button>
-                <p>login</p>
+                <div v-if="!loggedIn" class="flex">
+                    <a class="flex items-center rounded-md px-2 py-2" href="https://hangar-auth.benndorf.dev/account/login" hover="text-primary-100 bg-primary-50">
+                        <icon-mdi-key-outline class="mr-1" style="font-size: 1.2em;"/>
+                        {{ t("nav.login") }}
+                    </a>
+                    <a class="flex items-center rounded-md px-2 py-2" href="https://hangar-auth.benndorf.dev/account/signup/" hover="text-primary-100 bg-primary-50">
+                        <icon-mdi-clipboard-outline class="mr-1" style="font-size: 1.2em;"/>
+                        {{ t("nav.signup") }}
+                    </a>
+                </div>
+
             </div>
         </div>
     </header>
diff --git a/frontend-new/src/types/components.d.ts b/frontend-new/src/types/components.d.ts
index a48d4803b..1ed94659c 100644
--- a/frontend-new/src/types/components.d.ts
+++ b/frontend-new/src/types/components.d.ts
@@ -9,11 +9,13 @@ declare module 'vue' {
     Header: typeof import('./../components/Header.vue')['default']
     IconMdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     IconMdiBookOpen: typeof import('~icons/mdi/book-open')['default']
+    IconMdiClipboardOutline: typeof import('~icons/mdi/clipboard-outline')['default']
     IconMdiCodeBraces: typeof import('~icons/mdi/code-braces')['default']
     IconMdiDownloadCircle: typeof import('~icons/mdi/download-circle')['default']
     IconMdiForum: typeof import('~icons/mdi/forum')['default']
     IconMdiHome: typeof import('~icons/mdi/home')['default']
     IconMdiKey: typeof import('~icons/mdi/key')['default']
+    IconMdiKeyOutline: typeof import('~icons/mdi/key-outline')['default']
     IconMdiLanguageJava: typeof import('~icons/mdi/language-java')['default']
     IconMdiMenu: typeof import('~icons/mdi/menu')['default']
     IconMdiPuzzle: typeof import('~icons/mdi/puzzle')['default']