diff --git a/bun.lockb b/bun.lockb
index 58f2b5d..5491c44 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 9844e54..77a3951 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,27 @@
 {
-  "name": "trepa-web",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "bunx --bun astro dev",
-    "start": "bunx --bun astro dev",
-    "build": "rm -rf dist && bunx --bun astro check && bunx --bun astro build",
-    "preview": "bunx --bun astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.7.0",
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.3.4",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
-    "astro": "^4.8.4",
-    "bootstrap": "^5.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.3.3"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.7.3"
-  }
+	"name": "trepa-web",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "bunx --bun astro dev",
+		"start": "bunx --bun astro dev",
+		"build": "rm -rf dist && bunx --bun astro check && bunx --bun astro build",
+		"preview": "bunx --bun astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.7.0",
+		"@astrojs/node": "^8.2.5",
+		"@astrojs/react": "^3.4.0",
+		"@types/react": "^18.3.2",
+		"@types/react-dom": "^18.3.0",
+		"astro": "^4.9.1",
+		"bootstrap": "^5.3.3",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"typescript": "^5.3.3"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.7.3"
+	}
 }
diff --git a/src/components/forms/LoginForm.tsx b/src/components/forms/LoginForm.tsx
index f97fefa..b2283f0 100644
--- a/src/components/forms/LoginForm.tsx
+++ b/src/components/forms/LoginForm.tsx
@@ -1,23 +1,71 @@
-export default function LoginForm() {
+import { useState } from "react";
+
+export interface LoginFormValue {
+	username: string;
+	password: string;
+}
+
+interface LoginFormProps {
+	onSubmit: (data: LoginFormValue) => void;
+}
+
+export default function LoginForm(props: LoginFormProps) {
+	const [form, setForm] = useState<LoginFormValue>({
+		username: "",
+		password: "",
+	});
+
+	function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+		const target = event.target;
+		const name = target.name;
+		const value = target.value;
+
+		setForm({
+			...form,
+			[name]: value,
+		});
+	}
+
+	function handleBtnClick() {
+		props.onSubmit({ ...form });
+	}
+
 	return (
 		<div className="card">
 			<div className="card-body">
 				<form>
 					<div className="form-floating mb-3">
-						<input type="text" className="form-control" id="username" />
+						<input
+							type="text"
+							className="form-control"
+							id="username"
+							name="username"
+							value={form.username}
+							onChange={handleInputChange}
+						/>
 						<label className="form-label">Nom d'utilisateur</label>
 					</div>
 					<div className="form-floating mb-3">
-						<input type="password" className="form-control" id="password" />
+						<input
+							type="password"
+							className="form-control"
+							id="password"
+							name="password"
+							onChange={handleInputChange}
+							value={form.password}
+						/>
 						<label className="form-label">Mot de passe</label>
 					</div>
-
-					<div className="d-grid">
-						<button type="submit" className="btn btn-primary">
-							Connexion
-						</button>
-					</div>
 				</form>
+				<div className="d-grid">
+					<button
+						type="button"
+						onClick={handleBtnClick}
+						className="btn btn-primary"
+					>
+						Connexion
+					</button>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/components/forms/LoginFormData.tsx b/src/components/forms/LoginFormData.tsx
new file mode 100644
index 0000000..c72bcd5
--- /dev/null
+++ b/src/components/forms/LoginFormData.tsx
@@ -0,0 +1,22 @@
+import LoginForm, { type LoginFormValue } from "./LoginForm";
+
+export default function LoginFormData() {
+	function handleOnFormSubmit(data: LoginFormValue) {
+		fetch(`${import.meta.env.PUBLIC_API_URL}/accounts/login`, {
+			method: "POST",
+			body: JSON.stringify(data),
+			credentials: "include",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+		})
+			.then((res) => res.json())
+			.then((json) => {
+				window.location.href = "/home";
+			})
+			.catch((err) => console.log(err));
+	}
+
+	return <LoginForm onSubmit={handleOnFormSubmit} />;
+}
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..5677b56 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,11 @@
 /// <reference types="astro/client" />
+
+declare namespace App {
+	interface Locals {
+		account?: {
+			id: number;
+			username: string;
+			role_id: number;
+		};
+	}
+}
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
new file mode 100644
index 0000000..0bf5bfb
--- /dev/null
+++ b/src/layouts/HomeLayout.astro
@@ -0,0 +1,25 @@
+---
+import RootLayout from "./RootLayout.astro";
+
+interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<RootLayout title={title}>
+    <div class="row justify-content-center">
+        <div class="col-auto">Films</div>
+        <div class="col-auto">Compte</div>
+        <div class="col-auto">Deconnexion</div>
+    </div>
+
+    <div class="row">
+        <div class="col">
+            <slot />
+        </div>
+    </div>
+</RootLayout>
+
+<script></script>
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..5edb62e
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,29 @@
+import { defineMiddleware, sequence } from "astro:middleware";
+
+const protectedRoutes = defineMiddleware(async (ctx, next) => {
+	const pathname = ctx.url.pathname;
+	if (!["/", "/register"].includes(pathname)) {
+		const jwt = ctx.cookies.get("token");
+		if (!jwt) {
+			return ctx.redirect("/");
+		}
+
+		const res = await fetch(
+			`${import.meta.env.PUBLIC_API_URL}/accounts/recovery`,
+			{
+				credentials: "include",
+				headers: ctx.request.headers,
+			},
+		);
+
+		if (res.status !== 201) {
+			return ctx.redirect("/");
+		}
+
+		ctx.locals.account = JSON.parse(await res.text()).account;
+	}
+
+	return await next();
+});
+
+export const onRequest = sequence(defineMiddleware(protectedRoutes));
diff --git a/src/pages/home/index.astro b/src/pages/home/index.astro
new file mode 100644
index 0000000..f38a8aa
--- /dev/null
+++ b/src/pages/home/index.astro
@@ -0,0 +1,9 @@
+---
+import HomeLayout from "../../layouts/HomeLayout.astro";
+
+const account = Astro.locals.account;
+---
+
+<HomeLayout title="Trepa">
+    Hello {account?.username}
+</HomeLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a7a4901..e80e5d5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,8 @@
 ---
+import LoginFormData from "../components/forms/LoginFormData";
 import EmptyLayout from "../layouts/EmptyLayout.astro";
-
-const jwt = Astro.cookies.get("jwt");
-if (!jwt) {
-	Astro.redirect("/login");
-}
 ---
 
-<EmptyLayout title="Welcome to Astro." />
+<EmptyLayout title="Trepa - Connexion">
+	<LoginFormData client:load />
+</EmptyLayout>
diff --git a/src/pages/login.astro b/src/pages/login.astro
deleted file mode 100644
index 7f63113..0000000
--- a/src/pages/login.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import RootLayout from "../layouts/RootLayout.astro";
-import LoginForm from "../components/forms/LoginForm";
-import EmptyLayout from "../layouts/EmptyLayout.astro";
----
-
-<EmptyLayout title="Welcome to Astro.">
-    <LoginForm />
-</EmptyLayout>