diff --git a/view/src/lib/firebase.ts b/view/src/lib/firebase.ts
new file mode 100644
index 0000000..52393fa
--- /dev/null
+++ b/view/src/lib/firebase.ts
@@ -0,0 +1,16 @@
+
+import { getAuth } from 'firebase/auth';
+import { initializeApp } from 'firebase/app';
+
+const app = initializeApp({
+	apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
+	authDomain: 'me-fit-a9365.firebaseapp.com',
+	projectId: 'me-fit-a9365',
+	storageBucket: 'me-fit-a9365.appspot.com',
+	messagingSenderId: '631045688520',
+	appId: '1:631045688520:web:c7e0534927b52b0db629fd'
+});
+
+const auth = getAuth(app);
+
+export { auth };
diff --git a/view/src/routes/+layout.svelte b/view/src/routes/+layout.svelte
index 78e4c12..08406dd 100644
--- a/view/src/routes/+layout.svelte
+++ b/view/src/routes/+layout.svelte
@@ -1,59 +1,44 @@
 <script lang="ts">
 	import '../app.css';
-	import { onMount } from 'svelte';
-	import type { Auth } from 'firebase/auth';
-	import {
-		getAuth,
-		signInWithPopup,
-		signInWithEmailAndPassword,
-		EmailAuthProvider
-	} from 'firebase/auth';
+	import { onDestroy, onMount } from 'svelte';
+	import type { Auth, User } from 'firebase/auth';
 
 	var auth: Auth | null = null;
+	var user: User | null = null;
+	var unsub: (() => void) | null = null;
 
-	onMount(async () => {
-		const firebaseApp = await import('firebase/app');
-
-		const app = firebaseApp.initializeApp({
-			apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
-			authDomain: 'me-fit-a9365.firebaseapp.com',
-			projectId: 'me-fit-a9365',
-			storageBucket: 'me-fit-a9365.appspot.com',
-			messagingSenderId: '631045688520',
-			appId: '1:631045688520:web:c7e0534927b52b0db629fd'
+	onMount(async (): Promise<any> => {
+		const { auth: _auth } = await import('../lib/firebase');
+		auth = _auth;
+		user = auth.currentUser;
+		unsub = auth.onAuthStateChanged((newUser) => {
+			user = newUser;
 		});
-
-		auth = getAuth(app);
 	});
 
-	const signIn = async () => {
-		try {
-			const provider = new EmailAuthProvider();
-			const result = await signInWithEmailAndPassword(auth as Auth, google);
-			console.log(result);
-		} catch (error) {
-			console.error(error);
+	onDestroy(() => {
+		if (unsub) {
+			unsub();
 		}
-	};
+	});
 
 	const signOut = async () => {
 		try {
 			await (auth as Auth).signOut();
-			console.log('Signed out');
 		} catch (error) {
 			console.error(error);
 		}
 	};
-
-	$: user = (auth as any as Auth)?.currentUser;
 </script>
 
-<p class="text-9xl text-red-950">Tailwind working</p>
-
-<button on:click={async () => signIn()}>Login</button>
-<button on:click={async () => signOut()}>Logout</button>
-<!-- <button on:click={async () => console.log(await (auth as Auth).currentUser?.getIdToken())}>Click me</button> -->
-
-<p>{user?.email}</p>
+<div class="flex justify-end items-center min-h-10 gap-10 py-1 px-10 border-b border-accent">
+	<a href="/" class="flex-1">ME-FIT</a>
+	{#if user}
+		<p>{user?.email}</p>
+		<button class="btn" on:click={async () => signOut()}>Logout</button>
+	{:else}
+		<a href="/login" class="btn">Login</a>
+	{/if}
+</div>
 
 <slot></slot>
diff --git a/view/src/routes/+page.svelte b/view/src/routes/+page.svelte
index 5982b0a..5ba6853 100644
--- a/view/src/routes/+page.svelte
+++ b/view/src/routes/+page.svelte
@@ -1,2 +1,3 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<div class="flex h-svh justify-center items-center">
+	<h1 class="text-9xl text-primary-content">Welcome to ME-FIT</h1>
+</div>
diff --git a/view/src/routes/login/+page.svelte b/view/src/routes/login/+page.svelte
index 14be225..f88933e 100644
--- a/view/src/routes/login/+page.svelte
+++ b/view/src/routes/login/+page.svelte
@@ -1 +1,65 @@
-<h2>Login</h2>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { signInWithEmailAndPassword } from 'firebase/auth';
+
+	var errorStr: string | null = null;
+
+	const signIn = async (event: SubmitEvent) => {
+		errorStr = null;
+		const { auth } = await import('$lib/firebase');
+
+		try {
+			const data = new FormData(event.target as HTMLFormElement);
+			await signInWithEmailAndPassword(
+				auth,
+				data.get('email') as string,
+				data.get('password') as string
+			);
+
+			goto('/');
+		} catch (error: any) {
+			errorStr = error.code ? error.code : error.message;
+		}
+	};
+</script>
+
+<form class="max-w-xl mx-auto flex flex-col gap-4" on:submit|preventDefault={signIn}>
+	<h2 class="text-6xl mb-10">Login</h2>
+	<label class="input input-bordered flex items-center gap-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 16 16"
+			fill="currentColor"
+			class="h-4 w-4 opacity-70"
+		>
+			<path
+				d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+			/>
+			<path
+				d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+			/>
+		</svg>
+		<input type="text" class="grow" placeholder="Email" name="email" />
+	</label>
+	<label class="input input-bordered flex items-center gap-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 16 16"
+			fill="currentColor"
+			class="h-4 w-4 opacity-70"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+		<input type="password" class="grow" placeholder="Password" name="password" />
+	</label>
+
+	<button class="btn btn-primary self-end">Login</button>
+
+	{#if errorStr}
+		<p class="text-red-500">{errorStr}</p>
+	{/if}
+</form>