diff --git a/wp-content/themes/wp-starter/blocks/dialog/block.json b/wp-content/themes/wp-starter/blocks/dialog/block.json
new file mode 100644
index 00000000..e3198f40
--- /dev/null
+++ b/wp-content/themes/wp-starter/blocks/dialog/block.json
@@ -0,0 +1,40 @@
+{
+  "name": "dialog",
+  "title": "Dialog",
+  "description": "Displays a Dialog/Modal Component.",
+  "icon": "cover-image",
+  "category": "components",
+  "textdomain": "wp-starter",
+  "keywords": ["popup", "overlay", "cta", "section", "dialog"],
+  "attributes": {
+    "align": {
+      "type": "string",
+      "default": "wide"
+    }
+  },
+  "supports": {
+    "jsx": true,
+    "mode": false,
+    "alignWide": true,
+    "color": {
+      "background": true
+    },
+    "background": {
+      "backgroundImage": true,
+      "backgroundSize": true
+    },
+    "layout": {
+      "default": {
+        "type": "constrained",
+        "justifyContent": "center"
+      },
+      "allowOrientation": false,
+      "allowCustomContentAndWideSize": false
+    }
+  },
+  "viewStyle": "file:./view.css",
+  "editorStyle": "file:./editor.css",
+  "acf": {
+    "mode": "preview"
+  }
+}
diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css
new file mode 100644
index 00000000..b21ee6cb
--- /dev/null
+++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css
@@ -0,0 +1,34 @@
+@layer components {
+	.wp-block-acf-dialog {
+		@apply relative !border !border-black;
+
+		.acf-block-dialog {
+			@apply !relative;
+		}
+
+		.inner {
+			@apply !relative p-24;
+		}
+
+		.acfbt-dialog-close {
+			@apply absolute right-12 top-12 z-50 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black;
+			@apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white;
+		}
+	}
+
+	.acfbt-dialog-label {
+		@apply mb-24 block cursor-pointer;
+	}
+
+	.acfbt-dialog-checkbox {
+		@apply sr-only;
+	}
+
+	input:checked + label + div .acf-block-dialog {
+		@apply block w-2/3;
+	}
+
+	.is-root-container:has(.acf-block-dialog) {
+		@apply relative;
+	}
+}
diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php
new file mode 100644
index 00000000..dfd84232
--- /dev/null
+++ b/wp-content/themes/wp-starter/blocks/dialog/render.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Block: Dialog
+ *
+ * @global array $block
+ *
+ * @package WPStarter
+ */
+
+$cbx_id      = uniqid();
+$button_text = get_field( 'button_text' );
+?>
+<?php if ( is_admin() ) : ?>
+	<input type="checkbox" id="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-checkbox">
+	<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle Dialog', 'wp-site-starter' ); ?></label>
+<?php endif; ?>
+
+<div
+<?php if ( ! is_admin() ) : ?>
+	x-data="{
+		openDialog: false,
+
+		// Close the dialog when the user clicks backdrop
+		handleDialogClick(event) {
+			(event.target === $refs.dialogRef) && this.handleDialogClose();
+		},
+
+		// Delay close to allow for animation
+		handleDialogClose() {
+			if (!this.openDialog) return;
+			this.openDialog = false;
+			$refs.dialogRef.close();
+		}
+	}"
+<?php endif; ?>
+>
+
+	<dialog
+		<?php block_attrs( $block ); ?>
+		<?php if ( ! is_admin() ) : ?>
+			x-ref="dialogRef"
+			@keydown.escape.prevent="handleDialogClose()"
+			@click="handleDialogClick(event)"
+		<?php endif; ?>
+	>
+		<?php if ( ! is_admin() ) : ?>
+			<button
+				class="acf-dialog-close"
+				@click="handleDialogClose()"
+			>
+				<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
+			</button>
+		<?php endif; ?>
+
+		<div class="inner">
+			<?php if ( is_admin() ) : ?>
+				<label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-close">
+					<span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span>
+				</label>
+			<?php endif; ?>
+			<?php inner_blocks(); ?>
+		</div>
+	</dialog>
+
+	<button
+		class="btn-default"
+		<?php if ( ! is_admin() ) : ?>
+			@click="$refs.dialogRef.showModal(), openDialog = true"
+		<?php endif; ?>
+	>
+		<?php esc_html_e( $button_text ? $button_text : 'Open', 'wp-site-starter' ); ?>
+	</button>
+</div>
diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.twig b/wp-content/themes/wp-starter/blocks/dialog/render.twig
new file mode 100644
index 00000000..05c66fe8
--- /dev/null
+++ b/wp-content/themes/wp-starter/blocks/dialog/render.twig
@@ -0,0 +1,69 @@
+{#
+  Block: Dialog
+#}
+
+{% set cbx_id = 'dialog-' ~ random() %}
+{% set button_text = block.data['button_text'] %}
+
+{% if function('is_admin') == true %}
+	<input type="checkbox" id="{{ cbx_id }}" class="acfbt-dialog-checkbox">
+	<label for="{{ cbx_id }}" class="acfbt-dialog-label">Toggle Dialog</label>
+{% endif %}
+
+<div
+{% if function('is_admin') == false %}
+	x-data="{
+		openDialog: false,
+
+		// Close the dialog when the user clicks backdrop
+		handleDialogClick(event) {
+			(event.target === $refs.dialogRef) && this.handleDialogClose();
+		},
+
+		// Delay close to allow for animation
+		handleDialogClose() {
+			if (!this.openDialog) return;
+			this.openDialog = false;
+			$refs.dialogRef.close();
+		}
+	}"
+{% endif %}
+>
+
+	<dialog
+		{{ block_attrs( block ) }}
+		{% if function('is_admin') == false %}
+			x-ref="dialogRef"
+			@keydown.escape.prevent="handleDialogClose()"
+			@click="handleDialogClick(event)"
+		{% endif %}
+	>
+		{% if function('is_admin') == false %}
+			<button
+				class="acf-dialog-close"
+				@click="handleDialogClose()"
+			>
+				<span class="sr-only">Close</span>
+			</button>
+		{% endif %}
+
+		<div class="inner">
+			{% if function('is_admin') == true %}
+				<label for="{{ cbx_id }}" class="acfbt-dialog-close">
+					<span class="sr-only">Close</span>
+				</label>
+			{% endif %}
+			{{ inner_blocks() }}
+		</div>
+	</dialog>
+
+
+	<button
+		class="btn-default"
+		{% if function('is_admin') == false %}
+			@click="$refs.dialogRef.showModal(), openDialog = true"
+		{% endif %}
+	>
+		{{ button_text ? button_text : 'Open' }}
+	</button>
+</div>
diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.css b/wp-content/themes/wp-starter/blocks/dialog/view.css
new file mode 100644
index 00000000..de7231b0
--- /dev/null
+++ b/wp-content/themes/wp-starter/blocks/dialog/view.css
@@ -0,0 +1,23 @@
+@layer components {
+	html:has(.acf-block-dialog[open]),
+	body:has(.acf-block-dialog[open]) {
+		@apply overflow-hidden;
+	}
+
+	.acf-block-dialog {
+		@apply top-0 right-0 bottom-0 left-0 !m-auto h-1/2 w-1/2 rounded border-none bg-white;
+
+		&::backdrop {
+			@apply bg-black/70;
+		}
+
+		.acf-dialog-close {
+			@apply absolute top-12 right-12 z-10 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black;
+			@apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white;
+		}
+
+		> .inner {
+			@apply flex flex-col p-24;
+		}
+	}
+}