diff --git a/demo_markdown/docs/card/mod.md b/demo_markdown/docs/card/mod.md
index 1a1070a..585da00 100644
--- a/demo_markdown/docs/card/mod.md
+++ b/demo_markdown/docs/card/mod.md
@@ -2,32 +2,26 @@
 
 ```rust demo
 view! {
-    <Space vertical=true>
-        <Card title="title">"content"</Card>
-        <Card title="title">
-            <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
-            "content"
-        </Card>
-        <Card title="title">
-            <CardHeader>
-                "Header"
-                <CardHeaderDescription slot>
-                    "Description"
-                </CardHeaderDescription>
-                <CardHeaderAction slot>
-                    <Button appearance=ButtonAppearance::Transparent>
-                        "..."
-                    </Button>
-                </CardHeaderAction>
-            </CardHeader>
-            "content"
-        </Card>
-        <Card title="title">
-            <CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
-            "content"
-            <CardFooter slot>"footer"</CardFooter>
-        </Card>
-    </Space>
+    <Card>
+        <CardHeader>
+            "Header"
+            <CardHeaderDescription slot>
+                "Description"
+            </CardHeaderDescription>
+            <CardHeaderAction slot>
+                <Button appearance=ButtonAppearance::Transparent>
+                    "..."
+                </Button>
+            </CardHeaderAction>
+        </CardHeader>
+        <CardPreview>
+            <img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
+        </CardPreview>
+        <CardFooter>
+            <Button>"Reply"</Button>
+            <Button>"Share"</Button>
+        </CardFooter>
+    </Card>
 }
 ```
 
diff --git a/thaw/src/card/card-footer.css b/thaw/src/card/card-footer.css
new file mode 100644
index 0000000..2b36ce3
--- /dev/null
+++ b/thaw/src/card/card-footer.css
@@ -0,0 +1,6 @@
+.thaw-card-footer {
+    display: flex;
+    flex-direction: row;
+    column-gap: 12px;
+    row-gap: 12px;
+}
diff --git a/thaw/src/card/card.css b/thaw/src/card/card.css
index 75bc809..6462160 100644
--- a/thaw/src/card/card.css
+++ b/thaw/src/card/card.css
@@ -19,11 +19,10 @@
     --thaw-card--size: 12px;
 }
 
-.thaw-card__header {
-    font-weight: 600;
-    display: flex;
-    align-items: center;
+.thaw-card > .thaw-card-preview {
+    margin: 0 calc(var(--thaw-card--size)* -1);
 }
+
 .thaw-card__header-extra {
     display: flex;
     align-items: center;
diff --git a/thaw/src/card/card_footer.rs b/thaw/src/card/card_footer.rs
new file mode 100644
index 0000000..1271f23
--- /dev/null
+++ b/thaw/src/card/card_footer.rs
@@ -0,0 +1,12 @@
+use leptos::*;
+use thaw_utils::mount_style;
+
+#[component]
+pub fn CardFooter(children: Children) -> impl IntoView {
+    mount_style("card-footer", include_str!("./card-footer.css"));
+    view! {
+        <div class="thaw-card-footer">
+            {children()}
+        </div>
+    }
+}
diff --git a/thaw/src/card/card_preview.rs b/thaw/src/card/card_preview.rs
new file mode 100644
index 0000000..006be8b
--- /dev/null
+++ b/thaw/src/card/card_preview.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn CardPreview(children: Children) -> impl IntoView {
+    view! {
+        <div class="thaw-card-preview" style="position: relative">
+            {children()}
+        </div>
+    }
+}
diff --git a/thaw/src/card/mod.rs b/thaw/src/card/mod.rs
index 97d1e94..05529b5 100644
--- a/thaw/src/card/mod.rs
+++ b/thaw/src/card/mod.rs
@@ -1,15 +1,13 @@
+mod card_footer;
 mod card_header;
+mod card_preview;
 
+pub use card_footer::*;
 pub use card_header::*;
+pub use card_preview::*;
 
-use crate::{use_theme, Theme};
 use leptos::*;
-use thaw_components::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
-// #[slot]
-// pub struct CardHeader {
-//     children: Children,
-// }
 
 #[slot]
 pub struct CardHeaderExtra {
@@ -26,69 +24,19 @@ pub struct CardFooter {
 #[component]
 pub fn Card(
     #[prop(optional, into)] title: OptionalProp<MaybeSignal<String>>,
-    // #[prop(optional)] card_header: Option<CardHeader>,
     #[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
     #[prop(optional)] card_footer: Option<CardFooter>,
 ) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            // TODO
-            css_vars.push_str(&format!(
-                "--thaw-background-color: ;",
-                // theme.common.background_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-border-color: {};",
-                theme.common.border_color
-            ));
-        });
-        css_vars
-    });
 
     view! {
         <div
             class=class_list!["thaw-card", class.map(| c | move || c.get())]
-            style=move || css_vars.get()
             role="group"
         >
-
-            // {if card_header.is_some() || title.is_some() {
-            //     view! {
-            //         <div class="thaw-card__header">
-            //             <div class="thaw-card__header-content">
-
-            //                 {if let Some(header) = card_header {
-            //                     (header.children)().into_view()
-            //                 } else if let Some(title) = title.into_option() {
-            //                     (move || title.get()).into_view()
-            //                 } else {
-            //                     unreachable!()
-            //                 }}
-
-            //             </div>
-            //             <OptionComp value=card_header_extra let:header_extra>
-            //                 <div class="thaw-card__header-extra">{(header_extra.children)()}</div>
-            //             </OptionComp>
-            //         </div>
-            //     }
-            //         .into()
-            // } else {
-            //     None
-            // }}
-
-            <div class="thaw-card__content">{children()}</div>
-            <OptionComp value=card_footer let:footer>
-                <If cond=footer.if_>
-                    <Then slot>
-                        <div class="thaw-card__footer">{(footer.children)()}</div>
-                    </Then>
-                </If>
-            </OptionComp>
+            {children()}
         </div>
     }
 }