diff --git a/frontend/src/app.css b/frontend/src/app.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/routes/(auth)/+layout.ts b/frontend/src/routes/(auth)/+layout.ts
new file mode 100644
index 0000000..fe1e106
--- /dev/null
+++ b/frontend/src/routes/(auth)/+layout.ts
@@ -0,0 +1,8 @@
+import { loggedIn } from '$lib/api';
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+	if (!loggedIn()) {
+		redirect(307, '/login');
+	}
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
new file mode 100644
index 0000000..b93e9ba
--- /dev/null
+++ b/frontend/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+{@render children()}
diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/frontend/src/routes/+layout.ts
@@ -0,0 +1 @@
+export const ssr = false;
diff --git a/frontend/src/routes/+page.ts b/frontend/src/routes/+page.ts
new file mode 100644
index 0000000..471709e
--- /dev/null
+++ b/frontend/src/routes/+page.ts
@@ -0,0 +1,7 @@
+import { loggedIn } from '$lib/api';
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+	const page = loggedIn() ? '/main' : '/login';
+	redirect(307, page);
+}
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
new file mode 100644
index 0000000..b69d326
--- /dev/null
+++ b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { login } from '$lib/api';
+
+	let username = '';
+	let password = '';
+	let errorMessage = '';
+	let isLoading = false;
+
+	const handleLogin = async () => {
+		isLoading = true;
+		errorMessage = ''; // Reset any previous error message
+
+		try {
+			await login(username, password);
+			// If successful, you can redirect the user to another page or show a success message
+			window.location.href = '/main'; // Example redirection after login
+		} catch (error: any) {
+			errorMessage = error.message || 'Login failed. Please try again.';
+		} finally {
+			isLoading = false;
+		}
+	};
+</script>
+
+<div class="login-container">
+	<h2>Login</h2>
+
+	<div class="form-group">
+		<label for="username">Username</label>
+		<input type="text" id="username" bind:value={username} placeholder="Enter your username" />
+	</div>
+
+	<div class="form-group">
+		<label for="password">Password</label>
+		<input type="password" id="password" bind:value={password} placeholder="Enter your password" />
+	</div>
+
+	{#if errorMessage}
+		<div class="error-message">{errorMessage}</div>
+	{/if}
+
+	<button class="submit-button" on:click={handleLogin} disabled={isLoading}>
+		{#if isLoading}
+			<div class="loading">
+				<span>Loading...</span>
+			</div>
+		{:else}
+			Login
+		{/if}
+	</button>
+</div>
diff --git a/frontend/src/routes/login/+page.ts b/frontend/src/routes/login/+page.ts
new file mode 100644
index 0000000..22f14b6
--- /dev/null
+++ b/frontend/src/routes/login/+page.ts
@@ -0,0 +1,8 @@
+import { loggedIn } from '$lib/api';
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+	if (loggedIn()) {
+		redirect(307, '/');
+	}
+}