diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7561e19
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
+}
\ No newline at end of file
diff --git a/gh-pages/index.html b/gh-pages/index.html
index 7dd8246..7640165 100644
--- a/gh-pages/index.html
+++ b/gh-pages/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Melt UI</title>
     <link data-trunk rel="css" href="./src/assets/css/index.css" />
 </head>
 <body>
diff --git a/gh-pages/src/pages/home.rs b/gh-pages/src/pages/home.rs
index 4022cce..7e7cdab 100644
--- a/gh-pages/src/pages/home.rs
+++ b/gh-pages/src/pages/home.rs
@@ -12,37 +12,27 @@ pub fn Home(cx: Scope) -> impl IntoView {
             _ = navigate(&path.get_value(), Default::default());
         });
     }
-    let (theme, set_theme) = create_signal(cx, Theme::light());
-    provide_context(cx, theme);
-    let (count, set_count) = create_signal(cx, 0.0);
-    let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
     view! { cx,
-        <Button on:click=move |_| {
-            let navigate = use_navigate(cx);
-            _ = navigate("/components/menu", Default::default());
-        }>
-            "components"
-        </Button>
-        <hr />
-        <Space>
-            <Button
-                on:click=move |_| set_theme.update(move |value| *value = Theme::dark())
-                type_=button_type
-            >
-                "theme"
-            </Button>
-            <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()}
-
-            <Progress percentage=count/>
-        </Space>
+        <Layout position=LayoutPosition::ABSOLUTE>
+            <LayoutHeader
+                style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
+                >
+                "Melt UI"
+                <Button type_=ButtonType::TEXT on:click=move |_| {
+                    _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
+                }>
+                    "Github"
+                </Button>
+            </LayoutHeader>
+            <Layout position=LayoutPosition::ABSOLUTE style="top: 54px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
+                <p>"A Leptos UI Library"</p>
+                <Button on:click=move |_| {
+                    let navigate = use_navigate(cx);
+                    _ = navigate("/components/menu", Default::default());
+                }>
+                    "Read the docs"
+                </Button>
+            </Layout>
+        </Layout>
     }
 }
diff --git a/src/layout/layout.css b/src/layout/layout.css
new file mode 100644
index 0000000..214a701
--- /dev/null
+++ b/src/layout/layout.css
@@ -0,0 +1,11 @@
+.melt-layout {
+    flex: auto;
+}
+
+.melt-layout--absolute-positioned {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
diff --git a/src/layout/layout_header.rs b/src/layout/layout_header.rs
new file mode 100644
index 0000000..eafa6f9
--- /dev/null
+++ b/src/layout/layout_header.rs
@@ -0,0 +1,14 @@
+use leptos::*;
+
+#[component]
+pub fn LayoutHeader(
+    cx: Scope,
+    #[prop(optional, into)] style: MaybeSignal<String>,
+    children: Children,
+) -> impl IntoView {
+    view! { cx,
+        <div class="melt-layout-header" style=move || style.get()>
+            { children(cx) }
+        </div>
+    }
+}
diff --git a/src/layout/mod.rs b/src/layout/mod.rs
new file mode 100644
index 0000000..a04215d
--- /dev/null
+++ b/src/layout/mod.rs
@@ -0,0 +1,37 @@
+mod layout_header;
+
+use crate::utils::mount_style::mount_style;
+pub use layout_header::*;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[derive(Default, PartialEq)]
+pub enum LayoutPosition {
+    #[default]
+    STATIC,
+    ABSOLUTE,
+}
+
+impl LayoutPosition {
+    pub fn as_str(&self) -> &str {
+        match self {
+            LayoutPosition::STATIC => "static",
+            LayoutPosition::ABSOLUTE => "absolute",
+        }
+    }
+}
+
+#[component]
+pub fn Layout(
+    cx: Scope,
+    #[prop(optional, into)] style: MaybeSignal<String>,
+    #[prop(optional)] position: LayoutPosition,
+    children: Children,
+) -> impl IntoView {
+    let class_name = mount_style("layout", || style_sheet_str!("./src/layout/layout.css"));
+    view! { cx, class=class_name,
+        <div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
+            { children(cx) }
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 620cc65..e8bf91d 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -4,6 +4,7 @@ mod checkbox;
 mod components;
 mod image;
 mod input;
+mod layout;
 mod menu;
 pub mod mobile;
 mod modal;
@@ -20,6 +21,7 @@ pub use button::*;
 pub use checkbox::*;
 pub use image::*;
 pub use input::*;
+pub use layout::*;
 pub use menu::*;
 pub use modal::*;
 pub use progress::*;
