diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..6c054c5
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+
+	let initialStatusGot = false;
+	let status = 0;
+	let message = "";
+	page.subscribe((val) => {
+		if (val.status && !initialStatusGot) {
+			initialStatusGot = true;
+			status = val.status;
+			message = val.error?.message || "Unknown Error";
+		}
+	});
+</script>
+
+<div
+	class="flex h-[calc(100vh-300px)] w-full flex-col items-center justify-center gap-4 text-center"
+>
+	<h1 class="text-[24px] leading-[1.41] md:text-[32px] md:leading-[1.1]">
+		Well, that's an error...
+	</h1>
+	<h1 class="text-[42px] leading-[1.41] md:text-[84px] md:leading-[1.1]">
+		{status}: "{message}"
+	</h1>
+	<p style="text-align: center;" class="max-w-[36rem] text-lg leading-relaxed text-[#A6A5A7]">
+		Sorry about that. Click the suyu logo to go home.
+	</p>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9c48563..4a5e4b4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,11 @@
 	import { browser } from "$app/environment";
 	import { writable } from "svelte/store";
 	import { setContext } from "svelte";
+	import type { TransitionConfig } from "svelte/transition";
+	import type { PageData } from "./$types";
+	import { bounceOut } from "svelte/easing";
+
+	export let data: PageData;
 
 	// TODO: refactor
 	interface NavItem {
@@ -39,6 +44,87 @@
 	const transition =
 		"linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)";
 
+	function transitionIn(node: HTMLElement, { duration = 360 }: TransitionConfig) {
+		const UA = navigator.userAgent;
+		const ff = UA.indexOf("Firefox") > -1;
+		if (!dropdownCloseFinished) {
+			node.animate(
+				[
+					{
+						top: "160px",
+						opacity: "0",
+						filter: ff ? "" : "blur(20px)",
+					},
+					{
+						top: "0",
+						opacity: "1",
+						filter: ff ? "" : "blur(0px)",
+					},
+				],
+				{
+					easing: transition,
+					duration,
+				},
+			);
+
+			return {
+				duration: 0,
+			};
+		}
+		// FUCK YOUR DEFAULT SYSTEM, SVELTEKIT!!!
+		node.animate(
+			[
+				{
+					top: "-240px",
+					opacity: "0",
+					filter: ff ? "" : "blur(20px)",
+				},
+				{
+					top: "0",
+					opacity: "1",
+					filter: ff ? "" : "blur(0px)",
+				},
+			],
+			{
+				easing: transition,
+				duration,
+			},
+		);
+		return {
+			duration,
+		};
+	}
+
+	function transitionOut(node: HTMLElement, { duration = 360 }: TransitionConfig) {
+		if (!dropdownCloseFinished)
+			return {
+				duration: 0,
+			};
+		const UA = navigator.userAgent;
+		const ff = UA.indexOf("Firefox") > -1;
+		node.animate(
+			[
+				{
+					top: "0",
+					opacity: "1",
+					filter: ff ? "" : "blur(0px)",
+				},
+				{
+					top: "240px",
+					opacity: "0",
+					filter: ff ? "" : "blur(80px)",
+				},
+			],
+			{
+				easing: transition,
+				duration,
+			},
+		);
+		return {
+			duration,
+		};
+	}
+
 	let dropdownOpen = false;
 	let dropdownCloseFinished = true;
 	let dropdownOpenFinished = false;
@@ -108,7 +194,7 @@
 		}
 	}
 
-	function openDropdown() {
+	function toggleDropdown() {
 		dropdownOpen = !dropdownOpen;
 	}
 
@@ -153,7 +239,12 @@
 				: "mx-auto flex h-[120px] w-full max-w-[1300px] flex-row items-center justify-between px-8"}
 		>
 			<div class="flex w-full flex-row items-center justify-start gap-8">
-				<a href="/">
+				<a
+					href="/"
+					on:click={() => {
+						if (dropdownOpen && window.innerWidth < 625) toggleDropdown();
+					}}
+				>
 					<Logo size={28} />
 				</a>
 			</div>
@@ -182,15 +273,15 @@
 					>
 						<DiscordSolid />
 					</a>
-					<a href={$token ? "/account" : "/signup"} class="button-sm"
+					<!-- <a href={$token ? "/account" : "/signup"} class="button-sm"
 						>{$token ? "Account" : "Sign up"}</a
-					>
+					> -->
 				</div>
 				<div class="relative mr-4 hidden flex-row gap-4 max-[625px]:flex">
 					<button
 						aria-label={dropdownOpen ? "Close navigation" : "Open navigation"}
 						aria-expanded={dropdownOpen}
-						on:click={openDropdown}
+						on:click={toggleDropdown}
 					>
 						<div
 							style="transition: 180ms; transition-property: opacity transform;"
@@ -214,7 +305,7 @@
 	<div
 		style="transition: 180ms ease;"
 		aria-hidden={!dropdownOpenFinished && !dropdownOpen}
-		class={`fixed left-0 z-10 h-screen w-full bg-black p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"}`}
+		class={`fixed left-0 z-10 h-screen w-full bg-black p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"} ${dropdownOpen && !dropdownCloseFinished} ? "z-[99999]" : ""`}
 	>
 		<div class={`flex flex-col gap-8`}>
 			<!-- <a href="##"><h1 class="w-full text-5xl">Blog</h1></a>
@@ -263,6 +354,7 @@
 						? "translate-y-0 opacity-100 filter-none"
 						: "-translate-y-24 opacity-0 blur-md"}
 					href={item.href}
+					on:click={() => toggleDropdown()}
 				>
 					<h1 class="w-full text-5xl">{item.name}</h1>
 				</a>
@@ -270,12 +362,16 @@
 		</div>
 	</div>
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div
-		style="transition: 360ms {transition};"
-		aria-hidden={dropdownOpenFinished && dropdownOpen}
-		tabindex={dropdownOpen ? 0 : -1}
-		class={`relative z-50 mx-auto flex w-full max-w-[1300px] flex-col px-8 pb-12 pt-[120px] ${dropdownOpen ? "pointer-events-none translate-y-[25vh] opacity-0" : ""} ${dropdownOpenFinished && dropdownOpen ? "invisible" : ""}`}
-	>
-		<slot />
-	</div>
+	{#key data.url}
+		<div
+			in:transitionIn={{ duration: 500 }}
+			out:transitionOut={{ duration: 500 }}
+			style="transition: 360ms {transition};"
+			aria-hidden={dropdownOpenFinished && dropdownOpen}
+			tabindex={dropdownOpen ? 0 : -1}
+			class={`absolute left-[50%] z-50 mx-auto flex w-screen max-w-[1300px] translate-x-[-50%] flex-col px-8 pb-12 pt-[120px] ${dropdownOpen ? "pointer-events-none translate-y-[25vh] opacity-0" : ""} ${dropdownOpenFinished && dropdownOpen ? "invisible" : ""}`}
+		>
+			<slot />
+		</div>
+	{/key}
 </main>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..ef8d609
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,5 @@
+export function load({ url }) {
+	return {
+		url: url.pathname,
+	};
+}
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index a4b2302..c3109c9 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
 	import { getContext } from "svelte";
@@ -77,4 +77,4 @@
 			<a href="/account/rooms" class="button-sm">Rooms</a>
 		</div>
 	</div>
-</div>
+</div> -->
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index 5b5a2b0..6bab9e7 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
 	import HCaptcha from "$components/HCaptcha.svelte";
@@ -81,4 +81,4 @@
 			<button {disabled} on:click={signUp} class="cta-button mt-2">Sign up</button>
 		</div>
 	</div>
-</div>
+</div> -->