diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index e1e2c75..41f860a 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,6 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import NavLink from './NavLink.astro';
+import "../styles/nav.css";
 
 const nav = [
 	{title: "Úvod", link: "/"},
@@ -14,19 +15,12 @@ const nav = [
 <nav>
 	<div class="inner">
 		<div class="title">
-			<div class="left">
-				<label for="menu-toggle">
-					<Icon name="tabler:menu" class="icon" />
-				</label>
-			</div>
 			<a href="/" class="logo">
 				<img src="/assets/logo.webp" />
 			</a>
-			<div class="right">
-				<a href="//wiki.cdsp.cz">
-					<Icon name="tabler:bookmark" class="icon" />
-				</a>
-			</div>
+			<label for="menu-toggle">
+				<Icon name="tabler:menu-2" class="icon" />
+			</label>
 		</div>
 		<ul>
 			{ nav.map(item =>
@@ -35,10 +29,10 @@ const nav = [
 				</li>
 			) }
 			<li class="right">
-				<a href="//status.cdsp.cz" target="_blank">Stav služeb <Icon name="tabler:external-link"></a>
+				<a href="https://status.codespace.cz" target="_blank">Stav služeb <Icon name="tabler:external-link"></a>
 			</li>
 			<li>
-				<a href="//wiki.cdsp.cz" target="_blank">Wiki <Icon name="tabler:external-link"></a>
+				<a href="https://wiki.codespace.cz" target="_blank">Wiki <Icon name="tabler:external-link"></a>
 			</li>
 		</ul>
 	</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 90b5991..cc04614 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -15,8 +15,11 @@ interface Meta {
 	color: string
 }
 
+type Styles = "white-nav";
+
 interface Props {
-	meta: Partial<Meta>
+	meta: Partial<Meta>,
+	style?: Styles[]
 }
 
 const defaultMeta: Meta = {
@@ -34,10 +37,14 @@ const defaultMeta: Meta = {
 
 const props = Astro.props;
 const meta = { ...defaultMeta, ...props.meta };
+let classes: string[] = [];
+
+props.style?.forEach(s => classes.push(`style-${s}`));
 
 const title = meta.title + (meta.use_title_suffix ? meta.title_suffix : "");
 const card =  meta.image_type == "banner" ? "summary_large_image" : "summary";
 
+import '../styles/variables.css';
 import '../styles/global.css';
 import '../styles/fonts.css';
 ---
@@ -64,7 +71,7 @@ import '../styles/fonts.css';
 		<link rel="icon" href={meta.favicon} />
 		<script is:inline defer data-domain="codespace.cz" src="https://plausible.cdsp.cz/js/script.js"></script>
 	</head>
-	<body>
+	<body class:list={classes}>
 		<div class="page">
 			<Nav />
 			<slot />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6a89b3a..9c16ebb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,7 +10,7 @@ const meta = {
 ---
 
 <Layout meta={meta}>
-	<header class="main">
+	<header class="main under-nav">
 		<div class="inner">
 			<div class="grid">
 				<div>
diff --git a/src/styles/global.css b/src/styles/global.css
index e50ef35..be9b585 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,31 +1,3 @@
-:root {
-
-	--bg-color: #18181b;
-	--dark-bg-color: #000000;
-	--alt-bg-color: #232327;
-
-	--border-color: #27272a;
-
-	--brand-color-1: #db2446;
-	--brand-color-2: #c51b6e;
-
-	--nav-link-color: #fff;
-	--inactive-color: #444;
-
-	--title-color: #fff;
-	--text-color: #fffa;
-	--text-hover-color: #fffd;
-	--text-active-color: #fff;
-
-	--link-color: #dd4379;
-	--link-hover-color: #c21f58;
-
-	--site-padding: 40px;
-	--site-width: 1200px;
-	--nav-height: 75px;
-
-}
-
 html, body {font-family: Cantarell, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; line-height: 1.5; font-size: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;}
 
 :is(nav, header, section, footer) > .inner {max-width: var(--site-width); margin: auto; padding: 0 var(--site-padding);}
@@ -42,56 +14,6 @@ a {color: var(--link-color);}
 a:hover {color: var(--link-hover-color);}
 
 
-/* Navigation */
-
-nav {position: sticky; top: 0; left: 0; width: 100%; border-bottom: 1px solid var(--border-color); background-color: var(--bg-color); height: var(--nav-height);}
-
-nav .inner {display: flex; gap: 30px; align-items: center;}
-
-nav .title > * {display: none;}
-nav .title img {height: 30px; padding-bottom: 1px;}
-nav .title .icon {padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
-nav .title .logo {display: flex;}
-
-nav .title .right {justify-content: right;}
-
-nav :is(a, label) {display: flex; align-items: center;}
-
-nav ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 20px; flex: 1;}
-nav ul a {gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; padding: 22px 0;}
-
-nav a.active {color: var(--nav-link-color); box-shadow: 0 1px 0 0 var(--nav-link-color);}
-nav a:hover {color: var(--text-hover-color);}
-
-nav ul li.right {margin-left: auto;}
-
-#menu-toggle {display: none;}
-
-@media screen and (max-width: 900px) {
-
-	:root {
-		--nav-height: 65px;
-	}
-
-	nav {overflow: hidden;}
-	#menu-toggle:checked + nav {height: 100%;}
-
-	nav .inner {display: block; flex-direction: column-reverse;}
-	nav .title {display: grid; gap: 15px; grid-template-columns: 1fr max-content 1fr; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
-	nav .title > *, .nav .title {display: flex; align-items: center;}
-
-	nav ul {flex-direction: column; margin: 25px 0; gap: 0px;}
-	nav ul li {margin: 0 !important;}
-
-	nav ul a {padding: 8px 20px; padding-left: 51px; margin: 0 -20px; font-size: 18px; position: relative; text-decoration: none;}
-	nav ul a.active {font-weight: 900; box-shadow: none;}
-
-	nav ul a::before {content: ""; width: 11px; height: 2px; background-color: var(--inactive-color); position: absolute; left: 23px; top: 50%; border-radius: 5px;}
-	nav ul a.active::before {background-color: var(--brand-color-1);}
-
-}
-
-
 /* Sections */
 
 :is(header, section, footer) > .inner {margin: 70px auto; padding: 0 var(--site-padding);}
@@ -100,9 +22,11 @@ nav ul li.right {margin-left: auto;}
 /* Header */
 
 header > .inner {padding: 0 var(--site-padding);}
-header {border-bottom: 1px solid var(--border-color); overflow: hidden;}
+header {overflow: hidden;}
 
-header.main {background-image: radial-gradient(max(50vh, 60vw) at -30vw 70vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw -10vh, var(--brand-color-1), transparent); background-color: var(--dark-bg-color);}
+header:not(.no-line) + section {border-top: 1px solid var(--border-color);}
+
+header.main {background-image: radial-gradient(max(50vh, 60vw) at -30vw 70vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw -10vh, var(--brand-color-1), transparent); background-color: #000;}
 
 header.main .grid {display: grid; grid-template-columns: 600px 1fr;}
 
@@ -135,11 +59,11 @@ footer > .inner {margin: 30px auto;}
 .service a {display: flex; align-items: center; gap: 7px;}
 
 @media screen and (max-width: 900px) {
-	.services {grid-template-columns: 1fr 1fr;}	
+	.services {grid-template-columns: 1fr 1fr;}
 }
 
 @media screen and (max-width: 600px) {
-	.services {grid-template-columns: 1fr;}	
+	.services {grid-template-columns: 1fr;}
 }
 
 
diff --git a/src/styles/nav.css b/src/styles/nav.css
new file mode 100644
index 0000000..6f30128
--- /dev/null
+++ b/src/styles/nav.css
@@ -0,0 +1,49 @@
+nav {position: relative; top: 0; left: 0; width: 100%; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
+
+.style-white-nav nav img {filter: grayscale(1) brightness(10);}
+
+nav .inner {display: flex; gap: 30px; align-items: center;}
+
+nav .title > * {display: none;}
+nav .title img {height: 30px;}
+nav .title .icon {padding: 20px; margin: -20px; cursor: pointer; font-size: 24px; color: var(--title-color);}
+nav .title .logo {display: flex;}
+
+nav :is(a, label) {display: flex; align-items: center;}
+
+nav ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 20px; flex: 1;}
+nav ul a {gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; padding: 22px 0;}
+
+nav a.active {color: var(--nav-link-color); box-shadow: 0 1px 0 0 var(--nav-link-color);}
+nav a:hover {color: var(--text-hover-color);}
+
+nav ul li.right {margin-left: auto;}
+
+#menu-toggle {display: none;}
+
+@media screen and (max-width: 900px) {
+
+	:root {
+		--nav-height: 64px !important;
+	}
+
+	nav {overflow: hidden;}
+	#menu-toggle:checked + nav {height: 100%;}
+
+	nav .inner {display: block; flex-direction: column-reverse;}
+	nav .title {display: grid; gap: 15px; grid-template-columns: 1fr max-content; border-bottom: 1px solid var(--border-color); height: var(--nav-height);}
+	nav .title > *, .nav .title {display: flex; align-items: center;}
+	nav .title img {height: 24px;}
+
+	nav ul {flex-direction: column; margin: 20px 0; gap: 0px;}
+	nav ul li {margin: 0 !important;}
+
+	nav ul a {padding: 6px 20px; padding-left: 51px; margin: 0 -20px; font-size: 18px; position: relative; text-decoration: none;}
+	nav ul a.active {font-weight: 900; box-shadow: none;}
+
+	nav ul a::before {content: ""; width: 11px; height: 2px; background-color: var(--inactive-color); position: absolute; left: 23px; top: 50%; border-radius: 5px;}
+	nav ul a.active::before {background-color: var(--brand-color-1);}
+
+}
+
+:not(#menu-toggle:checked) + nav + header.under-nav {margin-top: calc(0px - var(--nav-height)); padding-top: var(--nav-height);}
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 0000000..5747a33
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,26 @@
+:root {
+
+	--bg-color: #18181b;
+	--alt-bg-color: #232327;
+
+	--border-color: rgba(255, 255, 255, 0.1);
+
+	--brand-color-1: #db2446;
+	--brand-color-2: #c51b6e;
+
+	--nav-link-color: #fff;
+	--inactive-color: #fff5;
+
+	--title-color: #fff;
+	--text-color: #fffa;
+	--text-hover-color: #fffd;
+	--text-active-color: #fff;
+
+	--link-color: #dd4379;
+	--link-hover-color: #c21f58;
+
+	--site-padding: 40px;
+	--site-width: 1200px;
+	--nav-height: 75px;
+
+}
