diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7dd98f4..9374991 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,8 @@
 {
   "cSpell.language": "en,ru",
   "cSpell.words": [
+    "десктопная",
+    "десктопных",
     "инпута",
     "инпуте",
     "фронтенд",
diff --git a/app/components/the-header/TheHeader.vue b/app/components/the-header/TheHeader.vue
index e506f76..b17033d 100644
--- a/app/components/the-header/TheHeader.vue
+++ b/app/components/the-header/TheHeader.vue
@@ -33,7 +33,7 @@ const navigation = computed(() => {
     <div
       class="border-default flex items-center justify-between gap-x-2 rounded-xl border bg-white/60 p-2 shadow backdrop-blur-lg md:rounded-2xl md:px-4 dark:bg-neutral-900/60"
     >
-      <TheHeaderNavigation class="hidden md:flex" :navigation />
+      <UNavigationMenu class="hidden md:flex" :items="navigation" />
       <TheHeaderNavigationMobile class="md:hidden" :navigation />
       <div class="flex justify-between gap-x-2">
         <TheHeaderLocaleSwitch />
diff --git a/app/components/the-header/navigation/TheHeaderNavigationMobile.vue b/app/components/the-header/TheHeaderNavigationMobile.vue
similarity index 100%
rename from app/components/the-header/navigation/TheHeaderNavigationMobile.vue
rename to app/components/the-header/TheHeaderNavigationMobile.vue
diff --git a/app/components/the-header/navigation/TheHeaderNavigation.vue b/app/components/the-header/navigation/TheHeaderNavigation.vue
deleted file mode 100644
index 0286157..0000000
--- a/app/components/the-header/navigation/TheHeaderNavigation.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui"
-
-const { navigation } = defineProps<{
-  /** Навигация */
-  navigation: NavigationMenuItem[]
-}>()
-</script>
-
-<template>
-  <UNavigationMenu :items="navigation" />
-</template>
diff --git a/app/tests/components/the-header/TheHeader.spec.ts b/app/tests/components/the-header/TheHeader.spec.ts
index 3bf1330..2f0b467 100644
--- a/app/tests/components/the-header/TheHeader.spec.ts
+++ b/app/tests/components/the-header/TheHeader.spec.ts
@@ -8,6 +8,11 @@ import TheHeader from "~/components/the-header/TheHeader.vue"
 describe("Компонент TheHeader", () => {
   let wrapper: VueWrapper
 
+  const desktopNavigation = () =>
+    wrapper.findComponent({ name: "UNavigationMenu" })
+  const mobileNavigation = () =>
+    wrapper.findComponent({ name: "TheHeaderNavigationMobile" })
+
   beforeEach(async () => {
     wrapper = await mountSuspended(TheHeader, { shallow: true })
   })
@@ -19,4 +24,32 @@ describe("Компонент TheHeader", () => {
   test("Семантический тег header", () => {
     expect(wrapper.element.tagName).toBe("HEADER")
   })
+
+  describe("Десктопная навигация", () => {
+    test("Отображается", () => {
+      expect(desktopNavigation().exists()).toBeTruthy()
+    })
+
+    test("Передаются элементы навигации", () => {
+      expect(desktopNavigation().props("items")).toMatchSnapshot()
+    })
+
+    test("Отображается на десктопных устройствах", () => {
+      expect(desktopNavigation().classes()).toContain("md:flex")
+    })
+  })
+
+  describe("Мобильная навигация", () => {
+    test("Отображается", () => {
+      expect(mobileNavigation().exists()).toBeTruthy()
+    })
+
+    test("Передаются элементы навигации", () => {
+      expect(mobileNavigation().props("navigation")).toMatchSnapshot()
+    })
+
+    test("Скрывается на десктопных устройствах", () => {
+      expect(mobileNavigation().classes()).toContain("md:hidden")
+    })
+  })
 })
diff --git a/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts b/app/tests/components/the-header/TheHeaderNavigationMobile.spec.ts
similarity index 91%
rename from app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
rename to app/tests/components/the-header/TheHeaderNavigationMobile.spec.ts
index b32b0e2..7ef231a 100644
--- a/app/tests/components/the-header/navigation/TheHeaderNavigationMobile.spec.ts
+++ b/app/tests/components/the-header/TheHeaderNavigationMobile.spec.ts
@@ -4,7 +4,7 @@ import { UButton } from "#components"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { afterEach, beforeEach, describe, expect, test } from "vitest"
 
-import TheHeaderNavigationMobile from "~/components/the-header/navigation/TheHeaderNavigationMobile.vue"
+import TheHeaderNavigationMobile from "~/components/the-header/TheHeaderNavigationMobile.vue"
 import { navigation } from "~/tests/constants/navigation"
 
 describe("Компонент TheHeaderNavigationMobile", () => {
diff --git a/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap b/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap
new file mode 100644
index 0000000..bf882a7
--- /dev/null
+++ b/app/tests/components/the-header/__snapshots__/TheHeader.spec.ts.snap
@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Компонент TheHeader > Десктопная навигация > Передаются элементы навигации 1`] = `
+[
+  {
+    "icon": "heroicons:home",
+    "label": "pages.index",
+    "to": "/",
+  },
+  {
+    "icon": "heroicons:briefcase",
+    "label": "pages.experience",
+    "to": "/experience/",
+  },
+  {
+    "icon": "heroicons:squares-2x2",
+    "label": "pages.projects",
+    "to": "/projects/",
+  },
+  {
+    "icon": "heroicons:user",
+    "label": "pages.about",
+    "to": "/about/",
+  },
+]
+`;
+
+exports[`Компонент TheHeader > Мобильная навигация > Передаются элементы навигации 1`] = `
+[
+  {
+    "icon": "heroicons:home",
+    "label": "pages.index",
+    "to": "/",
+  },
+  {
+    "icon": "heroicons:briefcase",
+    "label": "pages.experience",
+    "to": "/experience/",
+  },
+  {
+    "icon": "heroicons:squares-2x2",
+    "label": "pages.projects",
+    "to": "/projects/",
+  },
+  {
+    "icon": "heroicons:user",
+    "label": "pages.about",
+    "to": "/about/",
+  },
+]
+`;
diff --git a/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts b/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts
deleted file mode 100644
index 079a4f4..0000000
--- a/app/tests/components/the-header/navigation/TheHeaderNavigation.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { VueWrapper } from "@vue/test-utils"
-
-import { mountSuspended } from "@nuxt/test-utils/runtime"
-import { afterEach, beforeEach, describe, expect, test } from "vitest"
-
-import TheHeaderNavigation from "~/components/the-header/navigation/TheHeaderNavigation.vue"
-import { navigation } from "~/tests/constants/navigation"
-
-describe("Компонент TheHeaderNavigation", () => {
-  let wrapper: VueWrapper
-
-  beforeEach(async () => {
-    wrapper = await mountSuspended(TheHeaderNavigation, {
-      props: { navigation },
-    })
-  })
-
-  afterEach(() => {
-    wrapper.unmount()
-  })
-
-  const nav = () => wrapper.find("nav")
-  const navigationLink = () => nav().find("a")
-
-  test("Семантический тег nav", () => {
-    expect(nav().exists()).toBeTruthy()
-  })
-
-  describe("Элементы навигации", () => {
-    test("Правильное количество элементов", () => {
-      /** Количество элементов в навигации */
-      const navigationLinksCount = nav().findAll("a").length
-
-      expect(navigationLinksCount).toBe(navigation.length)
-    })
-
-    test("Семантический тег a", () => {
-      expect(navigationLink().exists()).toBeTruthy()
-    })
-
-    test("Ссылки передаются из навигации", () => {
-      expect(navigationLink().attributes("href")).toBe(navigation[0].to)
-    })
-  })
-})