diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..5c0a8fb
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,39 @@
+import { Component, createEffect, createSignal, FlowComponent } from "solid-js";
+
+const Modal: FlowComponent<{ open: boolean }> = (props) => {
+  const [isVisible, setVisibility] = createSignal(props.open);
+  createEffect(() => {
+    if (props.open) {
+      setVisibility(true);
+    } else {
+      setTimeout(function () {
+        setVisibility(false);
+      }, 200);
+    }
+  });
+
+  return (
+    <div
+      classList={{
+        modal: true,
+        "modal-open": props.open,
+        "!visible": isVisible(),
+      }}
+    >
+      <div class="modal-box w-1/2 p-20 max-w-none overflow-hidden">
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+
+export const ModalCloseButton: Component<{ onClick: () => void }> = (props) => (
+  <label
+    class="btn btn-sm btn-circle absolute right-2 top-2"
+    onClick={props.onClick}
+  >
+    ✕
+  </label>
+);