diff --git a/src/components/ModalRoot.svelte b/src/components/ModalRoot.svelte
deleted file mode 100644
index 86bad7f..0000000
--- a/src/components/ModalRoot.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { ModalManager, type Modal } from "$lib/util/modal";
-	import { browser } from "$app/environment";
-	import { onMount } from "svelte";
-
-	const closeDuration = 180;
-
-	let modal: Modal | null = null;
-	let closing = false;
-
-	$: pointer = modal ? "pointer-events-auto" : "pointer-events-none";
-	$: opacity = closing || !modal ? "opacity-0" : "opacity-100";
-	$: scale = !closing && modal ? "scale-100" : "scale-[0.9]";
-
-	function closeModal() {
-		if (closing) return;
-		closing = true;
-		setTimeout(() => {
-			closing = false;
-			modal = null;
-		}, closeDuration);
-	}
-
-	function modalBgClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) closeModal();
-	}
-
-	function modalEsc(e: KeyboardEvent) {
-		console.log(e.key);
-		if (e.key === "Escape") closeModal();
-	}
-
-	onMount(() => {
-		const id = ModalManager.addListener((d) => {
-			modal = d;
-		});
-		return () => {
-			ModalManager.removeListener(id);
-		};
-	});
-</script>
-
-<div
-	style="transition: 180ms ease; transition-property: opacity;"
-	class={`fixed inset-0 z-50 h-screen w-screen ${opacity} ${pointer} flex items-center justify-center bg-[rgba(0,0,0,0.5)]`}
-	tabindex="-1"
-	id="modal-root"
-	role="presentation"
-	on:click={modalBgClick}
-	on:keydown={modalEsc}
->
-	<div
-		style="transition: 180ms ease; transition-property: transform;"
-		class={`${scale} relative w-full max-w-[750px] rounded-[2.25rem] border border-solid border-gray-700 bg-black p-10 shadow-2xl shadow-stone-900`}
-	>
-		{#if modal}
-			<h1 class="text-5xl">{modal.title}</h1>
-			<p class="mt-4 text-lg leading-relaxed text-[#A6A5A7]">{modal.message}</p>
-		{/if}
-	</div>
-</div>
diff --git a/src/lib/util/modal/index.ts b/src/lib/util/modal/index.ts
deleted file mode 100644
index 25b941c..0000000
--- a/src/lib/util/modal/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { v4 } from "uuid";
-
-export interface Modal {
-	title: string;
-	message: string;
-}
-
-export class ModalManager {
-	private static listeners: {
-		id: string;
-		callback: (data: Modal) => void;
-	}[] = [];
-
-	static addListener(callback: (data: Modal) => void) {
-		const id = v4();
-		this.listeners.push({ id, callback });
-		return id;
-	}
-
-	static removeListener(id: string) {
-		this.listeners = this.listeners.filter((listener) => listener.id !== id);
-	}
-
-	static notify(data: Modal) {
-		this.listeners.forEach((listener) => listener.callback(data));
-	}
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9e73fa7..abef142 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,6 @@
 	import Logo from "../components/LogoWithTextHorizontal.svelte";
 	import { CodeBranchOutline, DiscordSolid, DownloadOutline } from "flowbite-svelte-icons";
 	import { browser } from "$app/environment";
-	import ModalManager from "$components/ModalRoot.svelte";
 	import { writable } from "svelte/store";
 	import { setContext } from "svelte";
 	import type { PageData } from "./$types";
@@ -52,11 +51,11 @@
 
 <main class="min-h-full w-full">
 	<header
-		style="transition: 180ms ease;"
+		style="transition: 180ms ease border;"
 		class={`${
 			scrolled
-				? "fixed top-0 z-40 w-full border-b-2 border-b-[#ffffff11] bg-[#131215d0]"
-				: "fixed top-0 z-40 w-full border-b-0 border-b-[transparent]"
+				? "fixed top-0 z-[9999] w-full border-b-2 border-b-[#ffffff11] bg-[#131215d0]"
+				: "fixed top-0 z-[9999] w-full border-b-0 border-b-[transparent]"
 		} pl-[calc(100vw-100%)]`}
 	>
 		<nav
@@ -104,5 +103,3 @@
 		<slot />
 	</div>
 </main>
-
-<ModalManager />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 97f9b4c..9ff9166 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import embedImage from "$assets/branding/suyu__Embed-Image.png";
-	import { ModalManager } from "$lib/util/modal";
 	import type { PageData } from "./$types";
 	import suyuWindow from "$assets/mockups/suyuwindow.png";
+	import { XCircleOutline } from "flowbite-svelte-icons";
+	import { Dialog } from "radix-svelte";
 
 	export let data: PageData;
 	$: memberCount = parseFloat(data.memberCount.toPrecision(2));
@@ -15,13 +16,10 @@
 		image: embedImage,
 	};
 
-	function openModal() {
-		ModalManager.notify({
-			title: "suyu isn't available for download yet.",
-			message:
-				"Official downloads for suyu aren't available yet, but you're welcome to compile it yourself from the source code. If you're not comfortable with that, we recommend you wait for the official release.",
-		});
-	}
+	let rootOpen: boolean;
+	let rootModal: boolean = true;
+	let contentOpenAutoFocus: boolean = true;
+	let contentCloseAutoFocus: boolean = true;
 </script>
 
 <svelte:head>
@@ -69,25 +67,24 @@
 		and open-source, forever.
 	</p>
 	<div class="flex flex-row gap-4">
-		<!-- <Dialog.Root bind:modal={rootModal} bind:open={rootOpen}> -->
-		<button on:click={openModal} class="cta-button">
-			Download <svg
-				class=""
-				style="--icon-color:#000"
-				width="16"
-				height="16"
-				viewBox="0 0 16 16"
-				fill="#000"
-				role="img"
-				focusable="false"
-				aria-hidden="true"
-				><path
-					d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
-				></path></svg
-			>
-		</button>
-		<!-- </Dialog.Trigger> -->
-		<!-- <Dialog.Portal>
+		<Dialog.Root bind:modal={rootModal} bind:open={rootOpen}>
+			<Dialog.Trigger class="cta-button">
+				Download <svg
+					class=""
+					style="--icon-color:#000"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="#000"
+					role="img"
+					focusable="false"
+					aria-hidden="true"
+					><path
+						d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
+					></path></svg
+				>
+			</Dialog.Trigger>
+			<Dialog.Portal>
 				<Dialog.Overlay
 					class="fixed inset-0 z-[9999] bg-black/80 data-[state=open]:animate-[overlayShow_555ms_cubic-bezier(.16,1,.3,1)]"
 				/>
@@ -116,7 +113,7 @@
 					</Dialog.Close>
 				</Dialog.Content>
 			</Dialog.Portal>
-		</Dialog.Root> -->
+		</Dialog.Root>
 		<a
 			href="https://gitlab.com/suyu-emu/"
 			target="_blank"
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 208f3c3..a4b2302 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -4,7 +4,6 @@
 	import { getContext } from "svelte";
 	import type { PageData } from "./$types";
 	import type { Writable } from "svelte/store";
-	import { ModalManager } from "$lib/util/modal";
 
 	const token = getContext<Writable<string>>("token");