diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..290f051
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { enhancedImages } from '@sveltejs/enhanced-img';
+</script>
+
+<header class="flex justify-between items-center p-4 bg-slate-100 mb-8 drop-shadow-md">
+	<enhanced:img
+		src="$lib/assets/img/logo-full.webp"
+		alt="Euroviisu Kotiraati 25"
+		sizes="50px"
+		class="rounded-md w-10 lg:w-24"
+	/>
+	<h1>Euroviisu Kotiraati 25</h1>
+	<nav class="text-xs lg:text-base">
+		<ul>
+			<li><a href="/login">Kirjaudu</a></li>
+		</ul>
+	</nav>
+</header>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1cb1545..3d0cfb7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script>
 	let { children } = $props();
 	import '../app.css';
+	import Header from '$lib/components/Header.svelte';
 </script>
 
+<Header />
 <div class="container mx-auto">
 	{@render children()}
 </div>