diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
new file mode 100644
index 0000000..398decc
--- /dev/null
+++ b/src/lib/components/NavBar.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import HoverIcon from '$lib/components/HoverIcon.svelte';
+	import { page } from '$app/state';
+
+	export let routes: App.Route[];
+	export let isVertical: boolean = false;
+</script>
+
+<nav
+	class="flex flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:px-2 landscape:flex-col landscape:py-2"
+>
+	{#each routes as route (route.href)}
+		<a class="nav-button {page.url.pathname === route.href ? 'active' : ''}" href={route.href}>
+			<div class="p-1">
+				<HoverIcon
+					src={route.icon}
+					class="text-sm uppercase"
+					text={route.href}
+					size={32}
+					black={page.url.pathname !== route.href}
+				/>
+			</div>
+			<div class="contour">
+				{route.label}
+			</div>
+		</a>
+	{/each}
+</nav>
+
+<style>
+	@import '$src/app.css';
+
+	.nav-button {
+		@apply flex aspect-square flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
+
+		> .contour {
+			@apply rounded-full bg-slate-50 px-1.5 py-0.5 text-center;
+		}
+
+		&.active {
+			@apply bg-emerald-600;
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5db3e07..ac454fb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,15 @@
 <script lang="ts">
 	import '../app.css';
 	// import '../syntax-highlight.css'; // https://github.com/PrismJS/prism-themes
-	import { page } from '$app/state';
-	import { slide } from 'svelte/transition';
-	import { navigating } from '$app/state';
-	// import NavButton from '$lib/components/Nav-Button.svelte';
-	import Icon from '@iconify/svelte';
+	import NavBar from '$src/lib/components/NavBar.svelte';
 
 	const routes: App.Route[] = [
-		{ label: 'команда', icon: 'material-symbols:person', href: '/team' },
-		{ label: 'новости', icon: 'material-symbols:newspaper', href: '/blog' },
-		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' }
+		{ label: 'главная', icon: 'material-symbols:emoji-food-beverage', href: '/' },
+		{ label: 'команда', icon: 'material-symbols:groups', href: '/team' },
+		{ label: 'блог', icon: 'material-symbols:newspaper', href: '/blog' },
+		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' },
+		{ label: 'контакты', icon: 'material-symbols:chat', href: '/contact' }
 	];
-
-	let isMenuOpen = false;
-	$: if (navigating) isMenuOpen = false;
 </script>
 
 <svelte:head>
@@ -25,16 +20,21 @@
 	<title>Tea Sanctuary</title>
 </svelte:head>
 
-<div class="relative flex flex-col min-h-lvh">
-	<slot />
-</div>
+<div class="flex h-screen w-screen flex-row portrait:flex-col-reverse">
+	<NavBar {routes} />
+	<div class="flex grow-1 flex-col overflow-auto">
+		<div class="relative grow-1">
+			<slot />
+		</div>
 
-<footer class="bg-emerald-950">
-	<div
-		class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
-	>
-		<p>
-			<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
-		</p>
+		<footer class="bg-emerald-950">
+			<div
+				class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
+			>
+				<p>
+					<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
+				</p>
+			</div>
+		</footer>
 	</div>
-</footer>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d2a2fa7..073d202 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,10 @@
 	import { PUBLIC_TS_DISCORD } from '$env/static/public';
 </script>
 
+<svelte:head>
+	<title>Tea Sanctuary</title>
+</svelte:head>
+
 <section
 	class="flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4 hero-background"
 >