diff --git a/examples/basic/src/demo_modal.rs b/examples/basic/src/demo_modal.rs
new file mode 100644
index 0000000..3888825
--- /dev/null
+++ b/examples/basic/src/demo_modal.rs
@@ -0,0 +1,16 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn DemoModal(cx: Scope) -> impl IntoView {
+    let (open, set_open) = create_signal(cx, false);
+    let on_cancel = SignalSetter::map(cx, move |_| {
+        set_open.set(false);
+    });
+    view! {cx,
+        <Button on:click=move |_| set_open.update(move |value| *value = !*value)>"open modal"</Button>
+        <Modal title="" open=open on_cancel=on_cancel>
+            "sd"
+        </Modal>
+    }
+}
\ No newline at end of file
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index e4f5548..156430b 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -1,5 +1,7 @@
 use leptos::*;
 use melt_ui::*;
+mod demo_modal;
+pub use demo_modal::*;
 
 fn main() {
     mount_to_body(|cx| view! { cx,  <App /> })
@@ -10,7 +12,6 @@ pub fn App(cx: Scope) -> impl IntoView {
     let (theme, set_theme) = create_signal(cx, Theme::light());
     provide_context(cx, theme);
     let (count, set_count) = create_signal(cx, 0.0);
-    let (open, set_open) = create_signal(cx, true);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
     
     let count_string = create_memo(cx, move |_| {
@@ -27,9 +28,7 @@ pub fn App(cx: Scope) -> impl IntoView {
             <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
             <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
             {move || count.get()}
-            <Modal title=Some("".to_string()) open=open on_cancel=Some(Box::new(move || { set_open.set(false) }))>
-                "sd" {move || count.get()}
-            </Modal>
+            <DemoModal />
             <Progress percentage=count/>
         </Space>
     }
diff --git a/src/modal/mod.rs b/src/modal/mod.rs
index d52dcd9..cff89ad 100644
--- a/src/modal/mod.rs
+++ b/src/modal/mod.rs
@@ -7,11 +7,11 @@ use stylers::style_sheet_str;
 #[component]
 pub fn Modal(
     cx: Scope,
-    #[prop(default = None)] title: Option<String>,
+    #[prop(optional, into)] title: Option<MaybeSignal<String>>,
     children: Children,
-    #[prop(default = None)] footer: Option<Children>,
-    open: ReadSignal<bool>,
-    #[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>,
+    #[prop(optional)] footer: Option<Children>,
+    #[prop(optional, into)] open: MaybeSignal<bool>,
+    #[prop(optional)] on_cancel: Option<SignalSetter<()>>,
 ) -> impl IntoView {
     let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
     let header = move |cx| {
@@ -24,11 +24,12 @@ pub fn Modal(
             </>
         }
     };
-    let header_extra = |cx| {
+
+    let header_extra = move |cx| {
         view! {
             cx,
             <>
-                <span style="cursor: pointer;" on:click=move |_| if let Some(on_cancel) = &on_cancel { on_cancel()}>
+                <span style="cursor: pointer;" on:click=move |_| if let Some(on_cancel) = &on_cancel { on_cancel.set(())}>
                     { "x" }
                 </span>
             </>