diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
new file mode 100644
index 0000000..7048a51
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,9 @@
+services:
+  db:
+    image: mariadb
+    restart: always
+    environment:
+      MARIADB_DATABASE: file-uploader
+      MARIADB_ROOT_PASSWORD: development
+    ports:
+      - '3306:3306'
diff --git a/src/hooks.server.js b/src/hooks.server.js
index 2671ce5..7374b67 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -1,6 +1,13 @@
 import { redirect } from '@sveltejs/kit';
 
-const PUBLIC_RESOURCES = ['/', '/api', '/terms', '/privacy'];
+const PUBLIC_RESOURCES = [
+	'/',
+	'/api',
+	'/api/auth/register',
+	'/api/auth/login',
+	'/terms',
+	'/privacy'
+];
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
diff --git a/src/lib/components/FormInput.svelte b/src/lib/components/FormInput.svelte
index 8728206..211ef80 100644
--- a/src/lib/components/FormInput.svelte
+++ b/src/lib/components/FormInput.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { CircleAlert, Check } from 'lucide-svelte';
 
-	export let type, name, id, placeholder, bind, required;
+	export let type, name, id, placeholder, value, required;
 </script>
 
 <!-- insane that i have to do this because -->
@@ -20,7 +20,7 @@
 			{id}
 			{placeholder}
 			{required}
-			bind:value={bind}
+			bind:value
 		/>
 		<div class="peer-invalid:flex hidden my-auto">
 			<CircleAlert />
@@ -43,7 +43,7 @@
 			{id}
 			{placeholder}
 			{required}
-			bind:value={bind}
+			bind:value
 		/>
 		<div class="peer-invalid:flex hidden my-auto">
 			<CircleAlert />
@@ -66,7 +66,7 @@
 			{id}
 			{placeholder}
 			{required}
-			bind:value={bind}
+			bind:value
 		/>
 		<div class="peer-invalid:flex hidden my-auto">
 			<CircleAlert />
diff --git a/src/lib/components/RegisterForm.svelte b/src/lib/components/RegisterForm.svelte
index 9677193..25e030e 100644
--- a/src/lib/components/RegisterForm.svelte
+++ b/src/lib/components/RegisterForm.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { blur } from 'svelte/transition';
-	import { Mail, SquareAsterisk, Undo, User, UserPlus, Dot } from 'lucide-svelte';
+	import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 
 	import Logo from '$lib/components/Logo.svelte';
@@ -17,10 +17,43 @@
 	async function register() {
 		disabled = true;
 
-		setTimeout(() => {
-			toast('Failed to register.');
-			disabled = false;
-		}, 5_000);
+		const id = toast.loading('Registering...');
+
+		if (!username) {
+			toast.error('Missing username.', { id });
+			return (disabled = false);
+		}
+
+		if (!email) {
+			toast.error('Missing email.', { id });
+			return (disabled = false);
+		}
+
+		if (!password || !cpassword) {
+			toast.error('Missing password.', { id });
+			return (disabled = false);
+		}
+
+		if (password !== cpassword) {
+			toast.error('Your passwords do not match.', { id });
+			return (disabled = false);
+		}
+
+		const response = await fetch('/api/auth/register', {
+			method: 'POST',
+			body: JSON.stringify({ username, email, password })
+		}).catch((_) => toast.error(_.message));
+		const body = await response.json().catch((_) => toast.error(_.message));
+
+		if (response.status >= 400 && response.status < 500) {
+			toast.error(body?.error || 'Client Error', { id });
+			return (disabled = false);
+		}
+
+		if (response.status >= 500) {
+			toast.error(body?.error || 'Server Error', { id });
+			return (disabled = false);
+		}
 	}
 </script>
 
@@ -36,7 +69,7 @@
 					name={'username'}
 					id={'username'}
 					placeholder={'Username'}
-					bind={username}
+					bind:value={username}
 					required={true}
 				>
 					<User />
@@ -46,7 +79,7 @@
 					name={'email'}
 					id={'email'}
 					placeholder={'user@example.com'}
-					bind={email}
+					bind:value={email}
 					required={true}
 				>
 					<Mail />
@@ -56,7 +89,7 @@
 					name={'password'}
 					id={'password'}
 					placeholder={'•'.repeat(16)}
-					bind={password}
+					bind:value={password}
 					required={true}
 				>
 					<SquareAsterisk />
@@ -66,7 +99,7 @@
 					name={'cpassword'}
 					id={'cpassword'}
 					placeholder={'•'.repeat(16)}
-					bind={cpassword}
+					bind:value={cpassword}
 					required={true}
 				>
 					<SquareAsterisk />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 34a6d47..cb2acfe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
 
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -19,8 +20,9 @@
 	}
 
 	state.subscribe((value) => {
-		if (!browser) return;
-		window.history.replaceState(null, '', '#' + value);
+		if (browser) {
+			goto('#' + value);
+		}
 	});
 </script>
 
diff --git a/src/routes/api/auth/register/+server.js b/src/routes/api/auth/register/+server.js
index 63b0de1..54eafad 100644
--- a/src/routes/api/auth/register/+server.js
+++ b/src/routes/api/auth/register/+server.js
@@ -4,4 +4,12 @@ import { json } from '@sveltejs/kit';
 export async function POST(event) {
 	const { request, cookies, locals } = event;
 	const body = await request.json();
+
+	if (!body?.username || body?.username.length > 16 || body?.username.length < 3)
+		return json({ error: 'Invalid username' }, { status: 400 });
+
+	if (!body?.password || body?.password.length > 128 || body?.password.length < 6)
+		return json({ error: 'Invalid password' }, { status: 400 });
+
+	return json({ error: 'Not Implemented' }, { status: 500 });
 }