diff --git a/web/src/lib/Modal.svelte b/web/src/lib/Modal.svelte
new file mode 100644
index 0000000..85b2c6f
--- /dev/null
+++ b/web/src/lib/Modal.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children }: { children: Snippet } = $props();
+
+  let dialog:  HTMLDialogElement; 
+
+  export function open(){
+    dialog.showModal()
+  }
+
+  export function close(){
+    dialog.close();
+  }
+
+</script>
+
+<dialog
+  bind:this={dialog}
+  closedby="any"
+  class="bg-gradient-to-br from-blue-100 to-indigo-200 p-5 center-dialog rounded-2xl backdrop:bg-black/50 backdrop:backdrop-blur-xs"
+>
+  {@render children?.()}
+</dialog>
+
+<style scoped>
+  .center-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>