diff --git a/app/components/header/HeaderActions.vue b/app/components/header/HeaderActions.vue
new file mode 100644
index 0000000..3bb4d8d
--- /dev/null
+++ b/app/components/header/HeaderActions.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex w-full items-center justify-end gap-2">
+    <HeaderProfile />
+    <TheLocaleSelector />
+  </div>
+</template>
diff --git a/app/components/header/HeaderLogo.vue b/app/components/header/HeaderLogo.vue
new file mode 100644
index 0000000..5372db2
--- /dev/null
+++ b/app/components/header/HeaderLogo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <NuxtLinkLocale
+      :to="{
+        name: 'index',
+      }"
+      class="grid w-40 place-items-center rounded-card p-2 focus-ring lg:w-52"
+    >
+      {{ t('todo.logo') }}
+    </NuxtLinkLocale>
+  </div>
+</template>
diff --git a/app/components/header/HeaderNavigationMenu.vue b/app/components/header/HeaderNavigationMenu.vue
new file mode 100644
index 0000000..5b05a4b
--- /dev/null
+++ b/app/components/header/HeaderNavigationMenu.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  NavigationMenuList,
+  NavigationMenuRoot,
+} from 'radix-vue'
+
+import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant'
+</script>
+
+<template>
+  <NavigationMenuRoot>
+    <NavigationMenuList
+      class="flex items-center gap-3"
+    >
+      <template
+        v-for="menuItem in NAVIGATION_LINKS"
+        :key="menuItem.title"
+      >
+        <HeaderNavigationMenuLink v-bind="menuItem">
+          {{ menuItem.title }}
+        </HeaderNavigationMenuLink>
+        <HeaderNavigationMenuSpacer class="last:hidden" />
+      </template>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>
diff --git a/app/components/header/HeaderNavigationMenuLink.vue b/app/components/header/HeaderNavigationMenuLink.vue
new file mode 100644
index 0000000..45ad876
--- /dev/null
+++ b/app/components/header/HeaderNavigationMenuLink.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+import type { NavigationLink } from '~/constants/header/navigationLinks.constant'
+
+defineProps<NavigationLink>()
+</script>
+
+<template>
+  <NavigationMenuLink as-child>
+    <NuxtLinkLocale
+      :to="to"
+      active-class="link-active"
+      class="group rounded px-1 text-subtext font-medium text-foreground focus-ring"
+    >
+      <div>
+        <slot />
+      </div>
+      <div class="h-px w-full bg-transparent duration-200 group-[.link-active]:bg-primary" />
+    </NuxtLinkLocale>
+  </NavigationMenuLink>
+</template>
diff --git a/app/components/header/HeaderNavigationMenuSpacer.vue b/app/components/header/HeaderNavigationMenuSpacer.vue
new file mode 100644
index 0000000..8f3c646
--- /dev/null
+++ b/app/components/header/HeaderNavigationMenuSpacer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div
+    class="size-1 rounded-full bg-primary"
+  />
+</template>
diff --git a/app/components/header/HeaderProfile.vue b/app/components/header/HeaderProfile.vue
new file mode 100644
index 0000000..c3579c1
--- /dev/null
+++ b/app/components/header/HeaderProfile.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { CurrentUser } from '@auth/models/current-user/currentUser.model'
+import { useAuthStore } from '@auth/stores/auth.store'
+import { AppText } from '@wisemen/vue-core'
+import { PopoverClose } from 'radix-vue'
+
+const authStore = useAuthStore()
+const { t } = useI18n()
+const currentUser = computed<CurrentUser | null>(() => authStore.currentUser)
+
+function onLogout() {
+  void authStore.logout()
+}
+</script>
+
+<template>
+  <AppPopover
+    v-if="currentUser"
+    align="center"
+    hide-close-button
+    hide-arrow
+  >
+    <AppIconButton
+      :label="t('shared.settings')"
+      icon="profile"
+      class="flex-none rounded-full"
+    />
+    <template #content>
+      <AppCard class="min-w-80">
+        <div class="flex flex-col gap-4">
+          <AppText
+            class="font-medium"
+            variant="subtitle"
+          >
+            {{ t('shared.hello', { name: currentUser.firstName }) }}
+          </AppText>
+
+          <PopoverClose :as-child="true">
+            <AppButton
+              class="w-full"
+              @click="onLogout"
+            >
+              {{ t('shared.logout') }}
+            </AppButton>
+          </PopoverClose>
+        </div>
+      </AppCard>
+    </template>
+  </AppPopover>
+</template>
diff --git a/app/components/header/TheHeader.vue b/app/components/header/TheHeader.vue
new file mode 100644
index 0000000..080bffd
--- /dev/null
+++ b/app/components/header/TheHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <header class="sticky top-0 border-b border-solid border-primary/10 bg-neutral-100 py-4">
+    <div class="container mx-auto hidden px-4 lg:block">
+      <div class="flex items-center justify-between lg:grid lg:grid-cols-3 lg:items-center lg:justify-center">
+        <HeaderNavigationMenu />
+        <HeaderLogo />
+        <HeaderActions />
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/locale/TheLocaleSelector.vue b/app/components/locale/TheLocaleSelector.vue
new file mode 100644
index 0000000..4851890
--- /dev/null
+++ b/app/components/locale/TheLocaleSelector.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { translateLocale } from '@base/translations/locale.translate'
+import type { DropdownMenuItem } from '@base/types/core/dropdownMenuItem.type'
+import type { LocaleObject } from '@nuxtjs/i18n'
+import { AppIcon } from '@wisemen/vue-core'
+
+const { locale, locales } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+
+const availableLocales = computed<LocaleObject[]>(() => {
+  return locales.value.filter((i) => i.code !== locale.value)
+})
+
+const dropdownItems = computed<DropdownMenuItem[]>(() => {
+  return availableLocales.value.map((i) => ({
+    label: translateLocale(i.code),
+    type: 'option',
+    onSelect: () => {
+      void navigateTo(switchLocalePath(i.code))
+    },
+  }))
+})
+</script>
+
+<template>
+  <AppDropdownMenu
+    :items="dropdownItems"
+  >
+    <button class="flex items-center gap-1 px-2 py-1 font-medium uppercase text-foreground">
+      <span>
+        {{ locale }}
+      </span>
+      <AppIcon
+        icon="chevronDown"
+      />
+    </button>
+  </AppDropdownMenu>
+</template>
diff --git a/app/constants/header/navigationLinks.constant.ts b/app/constants/header/navigationLinks.constant.ts
new file mode 100644
index 0000000..5d029ae
--- /dev/null
+++ b/app/constants/header/navigationLinks.constant.ts
@@ -0,0 +1,22 @@
+import type { TypedRouteLocationRaw } from '@typed-router'
+
+export interface NavigationLink {
+  title: string
+  isTargetBlank?: boolean
+  to: TypedRouteLocationRaw
+}
+
+export const NAVIGATION_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index a20557c..cae7488 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="flex min-h-screen flex-col">
+      <TheHeader />
       <div class="container relative z-0 mx-auto flex w-full flex-1 flex-col items-center justify-center overflow-x-hidden px-4">
         <slot />
       </div>
diff --git a/app/locales/nl.json b/app/locales/nl.json
index 9cab905..e3024fa 100644
--- a/app/locales/nl.json
+++ b/app/locales/nl.json
@@ -1,4 +1,4 @@
 {
-  "test.login.forgot_password": "Wachtwoord vergeten?"
-
+  "test.login.forgot_password": "Wachtwoord vergeten?",
+  "shared.hello": "Hallo, {name}!"
 }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 14fb943..86c8104 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  middleware: 'auth-middleware',
+  // middleware: 'auth-middleware',
 })
 </script>
 
diff --git a/layers/base/components/core/popover/popover.style.ts b/layers/base/components/core/popover/popover.style.ts
index d0941e5..6dde65d 100644
--- a/layers/base/components/core/popover/popover.style.ts
+++ b/layers/base/components/core/popover/popover.style.ts
@@ -5,7 +5,7 @@ export const usePopoverStyle = tv({
   slots: {
     arrow: 'absolute left-1/2 size-4 -translate-x-1/2 -translate-y-3 rotate-45 rounded-sm bg-popover shadow-popover-shadow',
     arrowContainer: 'relative z-50 -mb-4 h-4 w-10 overflow-hidden',
-    closeButtonContainer: '!absolute right-0 top-0',
+    closeButtonContainer: '!absolute right-2 top-2',
     content: 'custom-popover-content z-popover rounded-popover bg-popover shadow-popover-shadow',
   },
 })
diff --git a/layers/base/icons/ProfileIcon.vue b/layers/base/icons/ProfileIcon.vue
new file mode 100644
index 0000000..9d33c82
--- /dev/null
+++ b/layers/base/icons/ProfileIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.50065 1.25016C3.60116 1.25016 1.25065 3.60067 1.25065 6.50016C1.25065 7.79583 1.72001 8.98187 2.49797 9.89754C3.03256 9.24821 3.8428 8.8335 4.75065 8.8335H8.25065C9.15851 8.8335 9.96874 9.24821 10.5033 9.89754C11.2813 8.98188 11.7507 7.79583 11.7507 6.50016C11.7507 3.60067 9.40015 1.25016 6.50065 1.25016ZM10.7999 11.2636C12.1002 10.0893 12.9173 8.39016 12.9173 6.50016C12.9173 2.95634 10.0445 0.0834961 6.50065 0.0834961C2.95682 0.0834961 0.0839844 2.95634 0.0839844 6.50016C0.0839844 8.39016 0.901113 10.0893 2.20136 11.2636C2.20813 11.27 2.21506 11.2762 2.22216 11.2823C3.35748 12.2987 4.85688 12.9168 6.50065 12.9168C8.14442 12.9168 9.64382 12.2987 10.7791 11.2823C10.7862 11.2762 10.7932 11.27 10.7999 11.2636ZM9.65101 10.7003C9.33137 10.2747 8.82265 10.0002 8.25065 10.0002H4.75065C4.17865 10.0002 3.66993 10.2747 3.35029 10.7003C4.2278 11.3595 5.3186 11.7502 6.50065 11.7502C7.6827 11.7502 8.7735 11.3595 9.65101 10.7003ZM6.50065 3.29183C5.53415 3.29183 4.75065 4.07533 4.75065 5.04183C4.75065 6.00833 5.53415 6.79183 6.50065 6.79183C7.46715 6.79183 8.25065 6.00833 8.25065 5.04183C8.25065 4.07533 7.46715 3.29183 6.50065 3.29183ZM3.58398 5.04183C3.58398 3.431 4.88982 2.12516 6.50065 2.12516C8.11148 2.12516 9.41732 3.431 9.41732 5.04183C9.41732 6.65266 8.11148 7.9585 6.50065 7.9585C4.88982 7.9585 3.58398 6.65266 3.58398 5.04183Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/icons.ts b/layers/base/icons/icons.ts
index 41c8563..9626358 100644
--- a/layers/base/icons/icons.ts
+++ b/layers/base/icons/icons.ts
@@ -19,6 +19,7 @@ export interface BaseIcons {
   eyeSlash: Promise<Component>
   filterLines: Promise<Component>
   minus: Promise<Component>
+  profile: Promise<Component>
   search: Promise<Component>
   warning: Promise<Component>
 }
@@ -46,6 +47,7 @@ export const icons: AllIcons = {
   eyeSlash: import('@base/icons/EyeSlashIcon.vue'),
   filterLines: import('@base/icons/FilterLinesIcon.vue'),
   minus: import('@base/icons/MinusIcon.vue'),
+  profile: import('@base/icons/ProfileIcon.vue'),
   search: import('@base/icons/SearchIcon.vue'),
   warning: import('@base/icons/WarningIcon.vue'),
 }
diff --git a/layers/base/locales/nl.json b/layers/base/locales/nl.json
index c561dd2..d4cd7c7 100644
--- a/layers/base/locales/nl.json
+++ b/layers/base/locales/nl.json
@@ -91,5 +91,10 @@
   "shared.phone": "Telefoonnummer",
   "shared.send": "Versturen",
   "validation.invalid_phone": "Ongeldig telefoonnummer",
-  "layouts.title": "Nuxt Template - {title}"
+  "layouts.title": "Nuxt Template - {title}",
+  "shared.logout": "Uitloggen",
+  "shared.settings": "Instellingen",
+  "locale.fr": "Frans",
+  "locale.nl": "Nederlands",
+  "locale.en": "Engels"
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3d973f9..f42e17a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,6 +20,12 @@ export default defineNuxtConfig({
       ],
     },
   },
+  components: [
+    {
+      pathPrefix: false,
+      path: '@/components',
+    },
+  ],
   devtools: { enabled: true },
   future: {
     compatibilityVersion: 4,
diff --git a/package.json b/package.json
index 1a1589d..9c2949e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@nuxtjs/i18n": "8.3.1",
     "@pinia/nuxt": "^0.5.1",
     "@tanstack/vue-query": "^5.45.0",
-    "@wisemen/vue-core": "^0.0.77",
+    "@wisemen/vue-core": "^0.0.78",
     "embla-carousel": "^8.1.5",
     "embla-carousel-vue": "^8.1.5",
     "formango": "^2.0.35",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 486e433..39d6e85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ dependencies:
     specifier: ^5.45.0
     version: 5.45.0(vue@3.4.30)
   '@wisemen/vue-core':
-    specifier: ^0.0.77
-    version: 0.0.77
+    specifier: ^0.0.78
+    version: 0.0.78
   embla-carousel:
     specifier: ^8.1.5
     version: 8.1.5
@@ -4951,8 +4951,8 @@ packages:
       - vue-eslint-parser
     dev: true
 
-  /@wisemen/vue-core@0.0.77:
-    resolution: {integrity: sha512-ErRSGIvT+b3C70buG4H3eDlhIo8laDDZu1M9gvX1hSai7ZyVLfL0HMyXIOj0lAOp7sBUlpJxRV2VOzGjReCDIg==}
+  /@wisemen/vue-core@0.0.78:
+    resolution: {integrity: sha512-8qdKgBXvOqjW/6uHCS/f8l6gdA9wfkw1znOgAI2NiOxdZtxgQa8Fl11UyIqJK0A7SEDgh37zrl/XbWWHOB0Slg==}
     dependencies:
       '@internationalized/date': 3.5.4
     dev: false