diff --git a/frontend/src/pages/player.astro b/frontend/src/pages/player.astro
index 30c2905..7280da4 100644
--- a/frontend/src/pages/player.astro
+++ b/frontend/src/pages/player.astro
@@ -1,13 +1,66 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import type { APIResponse, Player } from "../types";
+import type { APIResponse, Player, Note } from "../types";
 
 const res = await fetch("http://localhost:3000/player");
 const data: APIResponse<Player[]> = await res.json();
-console.log(data);
+
+const request = { success: true, message: "" };
+if (Astro.request.method === "POST") {
+	try {
+		const body = await Astro.request.text();
+		const res = await fetch("http://localhost:3000/note/new", {
+			method: "POST",
+			body,
+		});
+		const data: APIResponse<Note> = await res.json();
+		request.success = data.success;
+		request.message = data.message;
+		return new Response(null, {
+			status: res.status,
+			statusText: data.message,
+		});
+	} catch (err) {
+		console.error(err);
+	}
+}
+console.log(request);
 ---
 
+<script>
+	const form = document.querySelector("form");
+	if (form) {
+		form.addEventListener("submit", (e) => {
+			e.preventDefault();
+			const note = document.querySelector("#note");
+			if (!note) {
+				console.error("No note found");
+				return;
+			}
+
+			fetch(window.location.href, {
+				method: "POST",
+				body: note.innerText,
+			}).then((res) => {
+				if (res.status != 200) {
+					console.error(res);
+					const err = res.statusText;
+					const kaput = document.querySelector("#kaput");
+					kaput.classList.remove("display-none");
+					kaput.innerText = err;
+				} else {
+					const kaput = document.querySelector("#kaput");
+					kaput.classList.add("display-none");
+					note.innerText = "";
+				}
+			});
+		});
+	}
+</script>
+
 <Layout title="Players">
+	<div id="kaput" class="display-none text-center text-2xl text-red-600 py-2">
+	</div>
 	<form class="p-5 min-h-[25rem] h-[25rem]">
 		<div class="h-full w-full mb-4 border rounded-lg shadow-lg overflow-hidden flex flex-col">
 			<div
@@ -18,6 +71,7 @@ console.log(data);
 			</div>
 			<div class="flex items-center justify-between px-3 py-2 border-t">
 				<button
+					id="note-submit-btn"
 					type="submit"
 					class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 transition-all duration-200"
 				>