diff --git a/src/lib/components/molecules/Banner.svelte b/src/lib/components/molecules/Banner.svelte
index 6ac0e26..148deaf 100644
--- a/src/lib/components/molecules/Banner.svelte
+++ b/src/lib/components/molecules/Banner.svelte
@@ -60,7 +60,7 @@
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: 9999;
+		z-index: 9998;
 
 		&.info {
 		}
diff --git a/src/lib/components/molecules/Modal.svelte b/src/lib/components/molecules/Modal.svelte
new file mode 100644
index 0000000..965410b
--- /dev/null
+++ b/src/lib/components/molecules/Modal.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { WithChildren } from '$types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		buttons?: Snippet;
+	} & WithChildren;
+	let { buttons, children }: Props = $props();
+</script>
+
+<div class="background">
+	<div class="modal rounded">
+		<div class="content">
+			{@render children()}
+		</div>
+		{#if buttons}
+			<div class="buttons">
+				{@render buttons()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+	}
+
+	.modal {
+		padding: 2rem;
+		max-width: 90vw;
+		max-height: 90vh;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.content {
+		flex: 1;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 1rem;
+		justify-content: flex-end;
+	}
+</style>
diff --git a/src/lib/components/molecules/NavBar.svelte b/src/lib/components/molecules/NavBar.svelte
index 17a3d52..53ebc4f 100644
--- a/src/lib/components/molecules/NavBar.svelte
+++ b/src/lib/components/molecules/NavBar.svelte
@@ -46,7 +46,7 @@
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: 9999;
+		z-index: 9998;
 	}
 
 	.nav-group {