diff --git a/src/button/mod.rs b/src/button/mod.rs
index ef0d0d5..2e846b7 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -82,7 +82,7 @@ pub fn Button(
                         <Icon icon=icon style=icon_style/>
                     }
                 }/>
-                <OptionComp value=children view=move |cx, children| {
+                <OptionComp value=children view=|cx, children| {
                     children(cx).into_view(cx)
                 }/>
         </button>
diff --git a/src/card/mod.rs b/src/card/mod.rs
index c02636a..1d35fc5 100644
--- a/src/card/mod.rs
+++ b/src/card/mod.rs
@@ -1,11 +1,11 @@
-use crate::utils::mount_style::mount_style;
+use crate::{components::*, utils::mount_style::mount_style};
 use leptos::*;
 use stylers::style_sheet_str;
 
 #[component]
 pub fn Card(
     cx: Scope,
-    #[prop(default = None)] title: Option<String>,
+    #[prop(optional)] title: MaybeSignal<String>,
     #[prop(default = None)] header: Option<Children>,
     #[prop(default = None)] header_extra: Option<Children>,
     children: Children,
@@ -16,41 +16,25 @@ pub fn Card(
         cx, class=class_name,
         <div class="melt-card">
             {
-                if header.is_some() || title.is_some() {
+                if header.is_some() || title.get().is_empty() {
                     view! {
                         cx, class=class_name,
                         <div class="melt-card__header">
                             <div class="melt-card__header-content">
-                                {
-                                    if let Some(header) = header {
-                                        view! {
-                                            cx,
-                                            <>
-                                                { header(cx) }
-                                            </>
-                                        }
-                                    } else {
-                                        view! {
-                                            cx,
-                                            <>
-                                                { title }
-                                            </>
-                                        }
-                                    }
-                                }
+                                <OptionComp value=header view=|cx, header| {
+                                    header(cx).into_view(cx)
+                                }>
+                                    { title.get() }
+                                </OptionComp>
                             </div>
-                            {
-                                if let Some(header_extra) = header_extra {
-                                    view! {
-                                        cx, class=class_name,
-                                        <div class="melt-card__header-extra">
-                                            { header_extra(cx)}
-                                        </div>
-                                    }.into()
-                                } else {
-                                    None
+                            <OptionComp value=header_extra view=move |cx, header_extra| {
+                                view! {
+                                    cx, class=class_name,
+                                    <div class="melt-card__header-extra">
+                                        { header_extra(cx)}
+                                    </div>
                                 }
-                            }
+                            }/>
                         </div>
                     }.into()
                 } else {
@@ -60,18 +44,14 @@ pub fn Card(
             <div class="melt-card__content">
                 { children(cx) }
             </div>
-            {
-                if let Some(footer) = footer {
-                    view! {
-                        cx, class=class_name,
-                        <div class="melt-card__footer">
-                            { footer(cx) }
-                        </div>
-                    }.into()
-                } else {
-                    None
+            <OptionComp value=footer view=move |cx, footer| {
+                view! {
+                    cx, class=class_name,
+                    <div class="melt-card__footer">
+                        { footer(cx) }
+                    </div>
                 }
-            }
+            }/>
          </div>
     }
 }
diff --git a/src/components/option_comp.rs b/src/components/option_comp.rs
index 1cb261a..9938533 100644
--- a/src/components/option_comp.rs
+++ b/src/components/option_comp.rs
@@ -1,4 +1,3 @@
-use super::Fallback;
 use leptos::*;
 
 #[component]
@@ -6,16 +5,16 @@ pub fn OptionComp<T, VF, IV>(
     cx: Scope,
     value: Option<T>,
     view: VF,
-    #[prop(optional)] fallback: Option<Fallback>,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView
 where
-    VF: Fn(Scope, T) -> IV + 'static,
+    VF: FnOnce(Scope, T) -> IV + 'static,
     IV: IntoView,
 {
     if let Some(value) = value {
         view(cx, value).into_view(cx)
-    } else if let Some(fallback) = &fallback {
-        (fallback.children)(cx).into_view(cx)
+    } else if let Some(children) = children {
+        children(cx).into_view(cx)
     } else {
         ().into_view(cx)
     }