diff --git a/apps/shared/ClawdisKit/Sources/ClawdisKit/Resources/CanvasA2UI/a2ui.bundle.js b/apps/shared/ClawdisKit/Sources/ClawdisKit/Resources/CanvasA2UI/a2ui.bundle.js
index 63e57deec..065df64d7 100644
--- a/apps/shared/ClawdisKit/Sources/ClawdisKit/Resources/CanvasA2UI/a2ui.bundle.js
+++ b/apps/shared/ClawdisKit/Sources/ClawdisKit/Resources/CanvasA2UI/a2ui.bundle.js
@@ -17566,6 +17566,27 @@ function instanceOf(tagName) {
 
 //#endregion
 //#region apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js
+const modalStyles = i`
+  dialog {
+    padding: 24px;
+    border: none;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 32px);
+  }
+
+  dialog::backdrop {
+    background: rgba(5, 8, 16, 0.65);
+    backdrop-filter: blur(6px);
+  }
+`;
+const modalElement = customElements.get("a2ui-modal");
+if (modalElement && Array.isArray(modalElement.styles)) {
+	modalElement.styles = [...modalElement.styles, modalStyles];
+}
 const empty = Object.freeze({});
 const emptyClasses = () => ({});
 const textHintStyles = () => ({
@@ -17689,6 +17710,14 @@ const clawdisTheme = {
 			padding: "14px",
 			boxShadow: cardShadow
 		},
+		Modal: {
+			background: "rgba(12, 16, 24, 0.92)",
+			border: "1px solid rgba(255,255,255,.12)",
+			borderRadius: "16px",
+			padding: "16px",
+			boxShadow: "0 30px 80px rgba(0,0,0,.6)",
+			width: "min(520px, calc(100vw - 48px))"
+		},
 		Column: { gap: "10px" },
 		Row: {
 			gap: "10px",
diff --git a/apps/shared/ClawdisKit/Tests/ClawdisKitTests/CanvasA2UIActionTests.swift b/apps/shared/ClawdisKit/Tests/ClawdisKitTests/CanvasA2UIActionTests.swift
index 7bc4e48c7..d26241a9f 100644
--- a/apps/shared/ClawdisKit/Tests/ClawdisKitTests/CanvasA2UIActionTests.swift
+++ b/apps/shared/ClawdisKit/Tests/ClawdisKitTests/CanvasA2UIActionTests.swift
@@ -52,4 +52,16 @@ import Testing
         #expect(js.contains("blur(${r(statusBlur)})"))
         #expect(js.contains("box-shadow: ${r(statusShadow)}"))
     }
+
+    @Test func a2uiBundleStylesModalBackdrop() throws {
+        guard let url = ClawdisKitResources.bundle.url(forResource: "a2ui.bundle", withExtension: "js")
+        else {
+            throw NSError(domain: "Tests", code: 1, userInfo: [
+                NSLocalizedDescriptionKey: "Missing resource a2ui.bundle.js",
+            ])
+        }
+        let js = try String(contentsOf: url, encoding: .utf8)
+        #expect(js.contains("::backdrop"))
+        #expect(js.contains("backdrop-filter: blur(6px)"))
+    }
 }
diff --git a/apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js b/apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js
index 3737a5547..3a183c662 100644
--- a/apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js
+++ b/apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js
@@ -6,6 +6,29 @@ import { v0_8 } from "@a2ui/lit";
 import "@a2ui/lit/ui";
 import { themeContext } from "@clawdis/a2ui-theme-context";
 
+const modalStyles = css`
+  dialog {
+    padding: 24px;
+    border: none;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 32px);
+  }
+
+  dialog::backdrop {
+    background: rgba(5, 8, 16, 0.65);
+    backdrop-filter: blur(6px);
+  }
+`;
+
+const modalElement = customElements.get("a2ui-modal");
+if (modalElement && Array.isArray(modalElement.styles)) {
+  modalElement.styles = [...modalElement.styles, modalStyles];
+}
+
 const empty = Object.freeze({});
 const emptyClasses = () => ({});
 const textHintStyles = () => ({ h1: {}, h2: {}, h3: {}, h4: {}, h5: {}, body: {}, caption: {} });
@@ -93,6 +116,14 @@ const clawdisTheme = {
       padding: "14px",
       boxShadow: cardShadow,
     },
+    Modal: {
+      background: "rgba(12, 16, 24, 0.92)",
+      border: "1px solid rgba(255,255,255,.12)",
+      borderRadius: "16px",
+      padding: "16px",
+      boxShadow: "0 30px 80px rgba(0,0,0,.6)",
+      width: "min(520px, calc(100vw - 48px))",
+    },
     Column: { gap: "10px" },
     Row: { gap: "10px", alignItems: "center" },
     Divider: { opacity: "0.25" },