diff --git a/.changeset/witty-crabs-glow.md b/.changeset/witty-crabs-glow.md
new file mode 100644
index 0000000000..cb86033103
--- /dev/null
+++ b/.changeset/witty-crabs-glow.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+Moves modal state to Form component
diff --git a/packages/vue-components/src/components/Dialog.vue b/packages/vue-components/src/components/Dialog.vue
index 019dd47837..e39a6211dd 100644
--- a/packages/vue-components/src/components/Dialog.vue
+++ b/packages/vue-components/src/components/Dialog.vue
@@ -14,7 +14,7 @@
     <!-- pass down slots -->
     <!-- @vue-skip -->
     <template
-      v-for="(_, name) in $slots"
+      v-for="(_, name) in otherSlots"
       #[name]="slotData"
     >
       <slot
@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
 import { useOnClose } from "./OmegaForm/blockDialog"
 import { onMountedWithCleanup } from "./OmegaForm/onMountedWithCleanup"
 
@@ -35,7 +36,15 @@ const props = defineProps<{
 
 const open = defineModel<boolean>({ default: false })
 
-const onCancel = useOnClose(() => open.value = false)
+const slots = useSlots()
+const otherSlots = computed(() => {
+  const { default: _, ...rest } = slots
+  return rest
+})
+
+const onCancel = useOnClose(() => {
+  return open.value = false
+})
 
 onMountedWithCleanup(() => {
   const onEscape = (e: KeyboardEvent) => {
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
index bfc9306b3a..83ee4a7a13 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
@@ -30,6 +30,8 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useStore } from "@tanstack/vue-form"
+import { defineSlots } from "vue"
+import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
 import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
 import { type OmegaFormReturn } from "./useOmegaForm"
@@ -52,6 +54,13 @@ const subscribedValues = getOmegaStore(
   props.subscribe
 )
 
+if (!props.form.ignorePreventCloseEvents) {
+  console.log(props.form.ignorePreventCloseEvents)
+  usePreventClose(() => {
+    return props.form.useStore((state) => state.isDirty)
+  })
+}
+
 defineSlots<{
   default(props: { subscribedValues: typeof subscribedValues.value }): void
 }>()
diff --git a/packages/vue-components/src/components/OmegaForm/blockDialog.ts b/packages/vue-components/src/components/OmegaForm/blockDialog.ts
index 9454a268d3..ca1e65076f 100644
--- a/packages/vue-components/src/components/OmegaForm/blockDialog.ts
+++ b/packages/vue-components/src/components/OmegaForm/blockDialog.ts
@@ -35,7 +35,12 @@ export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
 }
 
 export const useOnClose = (close: () => void) => {
-  const bus = provideBus()
+  // Use existing bus if available, otherwise provide a new one
+  let bus = injectBus()
+  if (!bus) {
+    bus = provideBus()
+  }
+
   const onClose = () => {
     const evt: DialogClosing = {}
     bus.emit("dialog-closing", evt)
diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
index 2128aa41f7..0839ddb6a7 100644
--- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
+++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
@@ -7,7 +7,6 @@ import { Array, Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
 import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from "vue"
-import { usePreventClose } from "./blockDialog"
 import { MergedInputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
 import OmegaAutoGen from "./OmegaAutoGen.vue"
@@ -129,6 +128,7 @@ export interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
   clear: () => void
   i18nNamespace?: string
+  ignorePreventCloseEvents?: boolean
   registerField: (
     field: ComputedRef<{
       name: string
@@ -870,6 +870,7 @@ export const useOmegaForm = <
 
   const formWithExtras: OF<From, To> = Object.assign(form, {
     i18nNamespace: omegaConfig?.i18nNamespace,
+    ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
     meta,
     clear,
     handleSubmit: (meta?: Record<string, any>) => {
@@ -886,10 +887,6 @@ export const useOmegaForm = <
 
   const errorContext = { form: formWithExtras, fieldMap }
 
-  if (!omegaConfig?.ignorePreventCloseEvents) {
-    usePreventClose(() => formWithExtras.useStore((state) => state.isDirty))
-  }
-
   return Object.assign(formWithExtras, {
     errorContext,
     Form: fHoc(formWithExtras)(OmegaForm as any) as any,
diff --git a/packages/vue-components/stories/Dialog.stories.ts b/packages/vue-components/stories/Dialog.stories.ts
new file mode 100644
index 0000000000..e9e9a6c5f8
--- /dev/null
+++ b/packages/vue-components/stories/Dialog.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta as StoryMeta, StoryObj } from "@storybook/vue3"
+import Dialog from "../src/components/Dialog.vue"
+import AsyncBlockingComponent from "./Dialog/AsyncBlocking.vue"
+import SimpleBlockingComponent from "./Dialog/SimpleBlocking.vue"
+import UploadBlockingComponent from "./Dialog/UploadBlocking.vue"
+
+const meta: StoryMeta<typeof Dialog> = {
+  title: "Components/Dialog",
+  component: Dialog
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+export const SimpleBlocking: Story = {
+  render: () => ({
+    components: { SimpleBlockingComponent },
+    template: "<SimpleBlockingComponent />"
+  })
+}
+
+export const AsyncBlocking: Story = {
+  render: () => ({
+    components: { AsyncBlockingComponent },
+    template: "<AsyncBlockingComponent />"
+  })
+}
+
+export const UploadBlocking: Story = {
+  render: () => ({
+    components: { UploadBlockingComponent },
+    template: "<UploadBlockingComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/Dialog/AsyncBlocking.vue b/packages/vue-components/stories/Dialog/AsyncBlocking.vue
new file mode 100644
index 0000000000..79312ecc9a
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/AsyncBlocking.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Async Blocking with Custom Modal
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>injectBus()</code> and <code>evt.prevent = Promise&lt;boolean&gt;</code> to use a custom modal instead of native confirm.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Create Project
+          </v-card-title>
+          <v-card-text>
+            <AsyncBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="cancel"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import AsyncBlockingContent from "./AsyncBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue b/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue
new file mode 100644
index 0000000000..16c8bf3bc9
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Blocking enabled: <strong>{{ shouldBlock }}</strong>
+    </p>
+    <p class="mb-4">
+      Toggle the switch and try to close. You'll see a custom modal with Allow/Prevent options.
+    </p>
+
+    <v-switch
+      v-model="shouldBlock"
+      label="Enable blocking"
+      color="primary"
+    />
+
+    <p class="mt-4 text-body-2">
+      This uses <code>evt.prevent = Promise&lt;boolean&gt;</code> for async blocking with a custom modal.
+    </p>
+
+    <!-- Custom Confirmation Modal -->
+    <v-dialog
+      v-model="showConfirm"
+      max-width="400"
+      persistent
+    >
+      <v-card>
+        <v-card-title class="bg-warning">
+          Confirm Close
+        </v-card-title>
+        <v-card-text class="pt-4">
+          The blocking is enabled. What would you like to do?
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            variant="text"
+            @click="handlePrevent"
+          >
+            Prevent (Stay)
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            @click="handleAllow"
+          >
+            Allow (Close)
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { type DialogClosing, injectBus } from "../../src/components/OmegaForm/blockDialog"
+import { onMountedWithCleanup } from "../../src/components/OmegaForm/onMountedWithCleanup"
+
+const shouldBlock = ref(false)
+const showConfirm = ref(false)
+let confirmResolver: ((allow: boolean) => void) | null = null
+
+const bus = injectBus()
+
+if (bus) {
+  onMountedWithCleanup(() => {
+    const handler = (evt: DialogClosing) => {
+      if (shouldBlock.value) {
+        evt.prevent = new Promise((resolve) => {
+          confirmResolver = resolve
+          showConfirm.value = true
+        })
+      }
+    }
+
+    bus.on("dialog-closing", handler)
+    return () => bus.off("dialog-closing", handler)
+  })
+}
+
+const handlePrevent = () => {
+  showConfirm.value = false
+  confirmResolver?.(false) // Prevent close
+  confirmResolver = null
+}
+
+const handleAllow = () => {
+  showConfirm.value = false
+  confirmResolver?.(true) // Allow close
+  confirmResolver = null
+}
+</script>
diff --git a/packages/vue-components/stories/Dialog/SimpleBlocking.vue b/packages/vue-components/stories/Dialog/SimpleBlocking.vue
new file mode 100644
index 0000000000..f4a4e50b5a
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/SimpleBlocking.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Simple Sync Blocking
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>usePreventClose()</code> - the simplest way to block dialog closing with a native confirm.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Edit User
+          </v-card-title>
+          <v-card-text>
+            <SimpleBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="() => {
+                console.log('cancel')
+                cancel()
+              }"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import SimpleBlockingContent from "./SimpleBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue b/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue
new file mode 100644
index 0000000000..2c089810c7
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Blocking enabled: <strong>{{ shouldBlock }}</strong>
+    </p>
+    <p class="mb-4">
+      Toggle the switch and try to close. When enabled, you'll see: "Es sind ungespeicherte Änderungen vorhanden.
+      Wirklich schließen?"
+    </p>
+
+    <v-switch
+      v-model="shouldBlock"
+      label="Enable blocking"
+      color="primary"
+    />
+
+    <p class="mt-4 text-body-2">
+      This uses <code>usePreventClose(() => shouldBlock)</code> to sync block the dialog.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { usePreventClose } from "../../src/components/OmegaForm/blockDialog"
+
+const shouldBlock = ref(false)
+
+usePreventClose(() => shouldBlock)
+</script>
diff --git a/packages/vue-components/stories/Dialog/UploadBlocking.vue b/packages/vue-components/stories/Dialog/UploadBlocking.vue
new file mode 100644
index 0000000000..f9d902fe8d
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/UploadBlocking.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Upload Progress Blocking
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>injectBus()</code> and <code>evt.prevent = true</code> to conditionally block based on operation state.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Upload Files
+          </v-card-title>
+          <v-card-text>
+            <UploadBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="cancel"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import UploadBlockingContent from "./UploadBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/UploadBlockingContent.vue b/packages/vue-components/stories/Dialog/UploadBlockingContent.vue
new file mode 100644
index 0000000000..4edf695d78
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/UploadBlockingContent.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Upload in progress: <strong>{{ uploadInProgress }}</strong>
+    </p>
+    <p class="mb-4">
+      Click "Start Upload" to simulate a file upload. Try to close while uploading - you'll get a confirmation asking if
+      you want to cancel the upload.
+    </p>
+
+    <v-text-field
+      v-model="fileName"
+      label="File Name"
+      variant="outlined"
+      :disabled="uploadInProgress"
+    />
+
+    <v-btn
+      class="mt-2"
+      :disabled="uploadInProgress"
+      @click="startUpload"
+    >
+      {{ uploadInProgress ? `Uploading... ${uploadProgress}%` : "Start Upload" }}
+    </v-btn>
+
+    <v-progress-linear
+      v-if="uploadInProgress"
+      :model-value="uploadProgress"
+      class="mt-4"
+      color="primary"
+      height="20"
+    >
+      <template #default="{ value }">
+        <strong>{{ Math.ceil(value) }}%</strong>
+      </template>
+    </v-progress-linear>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { type DialogClosing, injectBus } from "../../src/components/OmegaForm/blockDialog"
+import { onMountedWithCleanup } from "../../src/components/OmegaForm/onMountedWithCleanup"
+
+const fileName = ref("document.pdf")
+const uploadInProgress = ref(false)
+const uploadProgress = ref(0)
+let uploadInterval: ReturnType<typeof setInterval> | null = null
+
+const bus = injectBus()
+
+const cancelUpload = () => {
+  if (uploadInterval) {
+    clearInterval(uploadInterval)
+    uploadInterval = null
+  }
+  uploadInProgress.value = false
+  uploadProgress.value = 0
+}
+
+const completeUpload = () => {
+  if (uploadInterval) {
+    clearInterval(uploadInterval)
+    uploadInterval = null
+  }
+  uploadInProgress.value = false
+  uploadProgress.value = 0
+}
+
+if (bus) {
+  onMountedWithCleanup(() => {
+    const handler = (evt: DialogClosing) => {
+      if (uploadInProgress.value) {
+        const confirmed = confirm(
+          "File upload is in progress. Closing will cancel the upload. Continue?"
+        )
+        if (!confirmed) {
+          evt.prevent = true
+        } else {
+          // Cancel the upload
+          cancelUpload()
+        }
+      }
+    }
+
+    bus.on("dialog-closing", handler)
+    return () => {
+      bus.off("dialog-closing", handler)
+      cancelUpload()
+    }
+  })
+}
+
+const startUpload = () => {
+  uploadInProgress.value = true
+  uploadProgress.value = 0
+
+  uploadInterval = setInterval(() => {
+    uploadProgress.value += 10
+    if (uploadProgress.value >= 100) {
+      completeUpload()
+    }
+  }, 500)
+}
+</script>
diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 0c99c1e77c..ee7ac06757 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -10,6 +10,7 @@ import ClearableComponent from "./OmegaForm/Clearable.vue"
 import ComplexFormComponent from "./OmegaForm/ComplexForm.vue"
 import CreateUseFormWithCustomInputComponent from "./OmegaForm/CreateUseFormWithCustomInput.vue"
 import DateComponent from "./OmegaForm/Date.vue"
+import DialogBlockingExamplesComponent from "./OmegaForm/DialogBlockingExamples.vue"
 import EmailFormComponent from "./OmegaForm/EmailForm.vue"
 import FormInputComponent from "./OmegaForm/form.Input.vue"
 import IntersectionExampleComponent from "./OmegaForm/IntersectionExample.vue"
@@ -199,3 +200,10 @@ export const SetErrorOnSubmit: Story = {
     template: "<SetErrorOnSubmitComponent />"
   })
 }
+
+export const DialogBlockingExamples: Story = {
+  render: () => ({
+    components: { DialogBlockingExamplesComponent },
+    template: "<DialogBlockingExamplesComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
new file mode 100644
index 0000000000..1789a63032
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="pa-4">
+    <h1 class="text-h4 mb-4">
+      Dialog Exit Blocking
+    </h1>
+    <p class="mb-6">
+      Forms automatically prevent dialog closing when dirty. Try editing and pressing Escape or clicking outside.
+    </p>
+
+    <v-card>
+      <v-card-text>
+        <p class="mb-4">
+          Edit the form and try to close. You'll see: "Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?"
+        </p>
+        <v-btn @click="open = true">
+          Open Dialog
+        </v-btn>
+
+        <Dialog v-model="open">
+          <template #default="{ cancel }">
+            <v-card max-width="600">
+              <v-card-title class="d-flex justify-space-between align-center">
+                Edit User
+              </v-card-title>
+              <v-card-text>
+                <form.Form id="my-form">
+                  <form.Input
+                    label="Name"
+                    name="name"
+                  />
+                  <form.Input
+                    label="Mimmo"
+                    name="mimmo"
+                  />
+                </form.Form>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn
+                  variant="text"
+                  @click="cancel"
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  active
+                  type="submit"
+                  form="my-form"
+                >
+                  submit
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </Dialog>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import { useOmegaForm } from "../../src/components/OmegaForm/useOmegaForm"
+
+const open = ref(false)
+const form = useOmegaForm(
+  S.Struct({ name: S.NonEmptyString, mimmo: S.NonEmptyString }),
+  {
+    onSubmit: async ({ value }) => {
+      console.log(value)
+      open.value = false
+    }
+  }
+)
+</script>