diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte
index d99c4083..73f9952b 100644
--- a/frontend/src/routes/Header.svelte
+++ b/frontend/src/routes/Header.svelte
@@ -13,6 +13,7 @@
 		<div class="nav">
 			<a href="/search">Search</a>
 			<a href="/upload">Upload</a>
+			<a href="/login">Login</a>
 		</div>
 	</div>
 
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
new file mode 100644
index 00000000..c4bd36cd
--- /dev/null
+++ b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Button, Label, Input } from "flowbite-svelte";
+
+	let username: string = "";
+	let password: string = "";
+	$: formValid = username.length > 0 && password.length > 0;
+
+	/**
+	 * Gets run on button "Login" or form submit (pressing enter)
+	 * @todo add login logic with tokens and making a request to the backend
+	 */
+	function submitForm() {
+		if (!formValid) return;
+
+		console.log("submitted");
+		console.table({ username, password });
+	}
+</script>
+
+<form on:submit={submitForm} class="flex gap-5 flex-col">
+	<div>
+		<Label for="username">Username</Label>
+		<Input
+			id="username"
+			style="width: 300px;"
+			bind:value={username}
+			placeholder="Enter your username..."
+		/>
+	</div>
+
+	<div>
+		<Label for="password">Password</Label>
+		<Input
+			type="password"
+			id="password"
+			style="width: 300px;"
+			bind:value={password}
+			placeholder="Enter your password..."
+		/>
+	</div>
+
+	<div>
+		<Button size="lg" type="submit" disabled={!formValid}>Login</Button>
+	</div>
+</form>