diff --git a/src/components/Dialog.astro b/src/components/Dialog.astro
new file mode 100644
index 0000000..06a5cc0
--- /dev/null
+++ b/src/components/Dialog.astro
@@ -0,0 +1,54 @@
+---
+import { randomUUID } from "node:crypto";
+
+interface Props {
+	title: string;
+}
+
+const uuid = randomUUID();
+const wrapperStyles = ["cursor: pointer;"];
+---
+
+<astro-dialog data-uuid={uuid}>
+  <button
+    id={`trigger-${uuid}`}
+    style={wrapperStyles.join(" ")}
+    class="btn btn-soft btn-sm"
+  >
+    {Astro.props.title}
+  </button>
+
+  <dialog
+    id={`dialog-${uuid}`}
+    closedby="any"
+    class="modal"
+  >
+    <div class="modal-box">
+      <slot />
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>閉じる</button>
+    </form>
+  </dialog>
+</astro-dialog>
+
+<script>
+class AstroDialog extends HTMLElement {
+  connectedCallback() {
+    const uuid = this.dataset.uuid;
+
+    const triggerId = `trigger-${uuid}`;
+    const dialogId = `dialog-${uuid}`;
+
+    const trigger = document.getElementById(triggerId);
+    const dialog = document.getElementById(dialogId);
+
+    trigger.addEventListener("click", () => {
+      dialog.showModal();
+    });
+  }
+}
+
+customElements.define("astro-dialog", AstroDialog);
+</script>
+
diff --git a/src/components/Image.astro b/src/components/Image.astro
index 3e64b90..204eae6 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -36,11 +36,17 @@
   <dialog
     id={`dialog-${uuid}`}
     closedby="any"
+    class="modal"
   >
-    <img 
-      src={src} 
-      alt={alt}
-    />
+    <div class="modal-box">
+      <img 
+        src={src} 
+        alt={alt}
+      />
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>閉じる</button>
+    </form>
   </dialog>
 </astro-image>