diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs
index 633f0e5..bc07606 100644
--- a/gh-pages/src/app.rs
+++ b/gh-pages/src/app.rs
@@ -12,23 +12,19 @@ pub fn App() -> impl IntoView {
                     <Route path="/menu" view=MenuPage />
                     <Route path="/slider" view=SliderPage />
                     <Route path="/tabbar" view=TabbarPage />
-                    <Route path="/nav-bar" view=|| view! {
-                        <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
-                    } />
+                    <Route path="/nav-bar" view=NavBarPage />
                     <Route path="/input" view=InputPage />
                     <Route path="/image" view=ImagePage />
                     <Route path="/modal" view=ModalPage />
                     <Route path="/button" view=ButtonPage />
                     <Route path="/checkbox" view=CheckboxPage />
-                    <Route path="/toast" view=|| view! {
-                        <MobilePage path="/melt-ui?path=/mobile/toast" />
-                    } />
+                    <Route path="/toast" view=ToastPage />
                     <Route path="/tabs" view=TabsPage />
                     <Route path="/select" view=SelectPage />
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage />
-                <Route path="/mobile/nav-bar" view=NavBarPage />
-                <Route path="/mobile/toast" view=ToastPage />
+                <Route path="/mobile/nav-bar" view=NavBarDemoPage />
+                <Route path="/mobile/toast" view=ToastDemoPage />
             </Routes>
         </Router>
     }
diff --git a/gh-pages/src/pages/checkbox/mod.rs b/gh-pages/src/pages/checkbox/mod.rs
index a3c5ba8..6026093 100644
--- a/gh-pages/src/pages/checkbox/mod.rs
+++ b/gh-pages/src/pages/checkbox/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -5,10 +7,24 @@ use melt_ui::*;
 pub fn CheckboxPage() -> impl IntoView {
     let checked = create_rw_signal(false);
     view! {
-        <div>
-            <Checkbox checked>
-                "Click"
-            </Checkbox>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Checkbox"</h1>
+            <Demo>
+                <Checkbox checked>
+                    "Click"
+                </Checkbox>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                            let checked = create_rw_signal(false);
+
+                            <Checkbox checked>
+                                "Click"
+                            </Checkbox>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
         </div>
     }
 }
diff --git a/gh-pages/src/pages/image/mod.rs b/gh-pages/src/pages/image/mod.rs
index 15e22fa..831daa3 100644
--- a/gh-pages/src/pages/image/mod.rs
+++ b/gh-pages/src/pages/image/mod.rs
@@ -1,12 +1,25 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
 #[component]
 pub fn ImagePage() -> impl IntoView {
     view! {
-        <>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Image"</h1>
+            <Demo>
             <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
             <Image width="200px" height="200px"/>
-        </>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                            <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
+                            <Image width="200px" height="200px"/>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/input/mod.rs b/gh-pages/src/pages/input/mod.rs
index 77a0046..8fa7427 100644
--- a/gh-pages/src/pages/input/mod.rs
+++ b/gh-pages/src/pages/input/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -5,10 +7,22 @@ use melt_ui::*;
 pub fn InputPage() -> impl IntoView {
     let value = create_rw_signal(String::from("o"));
     view! {
-        <>
-            {move || value.get()}
-            <Input value/>
-            <Input value type_=InputType::PASSWORD />
-        </>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Input"</h1>
+            <Demo>
+                <Input value/>
+                <Input value type_=InputType::PASSWORD />
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                            let value = create_rw_signal(String::from("o"));
+
+                            <Input value/>
+                            <Input value type_=InputType::PASSWORD />
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/modal/mod.rs b/gh-pages/src/pages/modal/mod.rs
index df0eafc..38d7244 100644
--- a/gh-pages/src/pages/modal/mod.rs
+++ b/gh-pages/src/pages/modal/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -5,11 +7,30 @@ use melt_ui::*;
 pub fn ModalPage() -> impl IntoView {
     let show = create_rw_signal(false);
     view! {
-        <Button on:click=move |_| show.set(true)>
-            "open modal"
-        </Button>
-        <Modal title="title" show>
-            "sd"
-        </Modal>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Modal"</h1>
+            <Demo>
+                <Button on:click=move |_| show.set(true)>
+                    "Open Modal"
+                </Button>
+                <Modal title="title" show>
+                    "hello"
+                </Modal>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                        let show = create_rw_signal(false);
+
+                        <Button on:click=move |_| show.set(true)>
+                            "open modal"
+                        </Button>
+                        <Modal title="title" show>
+                            "hello"
+                        </Modal>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/nav_bar/mod.rs b/gh-pages/src/pages/nav_bar/mod.rs
index 83c749d..c9e30b5 100644
--- a/gh-pages/src/pages/nav_bar/mod.rs
+++ b/gh-pages/src/pages/nav_bar/mod.rs
@@ -1,8 +1,44 @@
+use crate::{
+    components::{Demo, DemoCode},
+    pages::MobilePage,
+};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::NavBar;
 
 #[component]
 pub fn NavBarPage() -> impl IntoView {
+    view! {
+        <div style="display: flex">
+            <div style="width: 896px; margin: 0 auto;">
+                <h1>"Navbar"</h1>
+                <Demo>
+                    ""
+                    <DemoCode slot>
+                        {
+                            indoc!(r#"
+                                <NavBar 
+                                    title="Home" 
+                                    left_arrow=true 
+                                    left_text="back" 
+                                    right_text="add" 
+                                    click_left=click_left 
+                                    click_right=click_right
+                                />
+                            "#)
+                        }
+                    </DemoCode>
+                </Demo>
+            </div>
+            <div>
+                <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
+            </div>
+        </div>
+    }
+}
+
+#[component]
+pub fn NavBarDemoPage() -> impl IntoView {
     let click_text = create_rw_signal(String::from("none"));
 
     let click_left = SignalSetter::map(move |_| click_text.set("left".to_string()));
diff --git a/gh-pages/src/pages/select/mod.rs b/gh-pages/src/pages/select/mod.rs
index d52a80d..c6e85d3 100644
--- a/gh-pages/src/pages/select/mod.rs
+++ b/gh-pages/src/pages/select/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -10,6 +12,24 @@ pub fn SelectPage() -> impl IntoView {
         value: String::from("apple"),
     }];
     view! {
-        <Select value=selected_value options/>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Select"</h1>
+            <Demo>
+                <Select value=selected_value options/>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                        let selected_value = create_rw_signal(Some(String::from("apple")));
+                        let options = vec![SelectOption {
+                            label: String::from("apple"),
+                            value: String::from("apple"),
+                        }];
+
+                        <Select value=selected_value options/>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/tabbar/mod.rs b/gh-pages/src/pages/tabbar/mod.rs
index 8afcaa5..8d7e495 100644
--- a/gh-pages/src/pages/tabbar/mod.rs
+++ b/gh-pages/src/pages/tabbar/mod.rs
@@ -36,7 +36,7 @@ pub fn TabbarPage() -> impl IntoView {
                 </Demo>
             </div>
             <div>
-                <MobilePage path="/melt-ui?path=/mobile/nav-bar" />
+                <MobilePage path="/melt-ui?path=/mobile/tabbar" />
             </div>
         </div>
     }
diff --git a/gh-pages/src/pages/tabs/mod.rs b/gh-pages/src/pages/tabs/mod.rs
index 559b412..623d982 100644
--- a/gh-pages/src/pages/tabs/mod.rs
+++ b/gh-pages/src/pages/tabs/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -5,13 +7,33 @@ use melt_ui::*;
 pub fn TabsPage() -> impl IntoView {
     let active_key = create_rw_signal("apple");
     view! {
-        <Tabs active_key>
-            <Tab key="apple" label="Apple">
-                "apple"
-            </Tab>
-            <Tab key="pear" label="Pear">
-                "pear"
-            </Tab>
-        </Tabs>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Tabs"</h1>
+            <Demo>
+                <Tabs active_key>
+                    <Tab key="apple" label="Apple">
+                        "apple"
+                    </Tab>
+                    <Tab key="pear" label="Pear">
+                        "pear"
+                    </Tab>
+                </Tabs>
+                <DemoCode slot>
+                    {
+                        indoc! {r#"
+                        let active_key = create_rw_signal("apple");
+                        <Tabs active_key>
+                            <Tab key="apple" label="Apple">
+                                "apple"
+                            </Tab>
+                            <Tab key="pear" label="Pear">
+                                "pear"
+                            </Tab>
+                        </Tabs>
+                        "#}
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/toast/mod.rs b/gh-pages/src/pages/toast/mod.rs
index 26d2a3f..c2f6aef 100644
--- a/gh-pages/src/pages/toast/mod.rs
+++ b/gh-pages/src/pages/toast/mod.rs
@@ -1,3 +1,8 @@
+use crate::{
+    components::{Demo, DemoCode},
+    pages::MobilePage,
+};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::*;
 use melt_ui::*;
@@ -5,6 +10,37 @@ use std::time::Duration;
 
 #[component]
 pub fn ToastPage() -> impl IntoView {
+    view! {
+        <div style="display: flex">
+            <div style="width: 896px; margin: 0 auto;">
+                <h1>"Toast"</h1>
+                <Demo>
+                    ""
+                    <DemoCode slot>
+                        {
+                            indoc!(r#"
+                            let count = create_rw_signal(0u32);
+                            let onclick = move |_| {
+                                show_toast(ToastOptions {
+                                    message: format!("Hello {}", count.get_untracked()),
+                                    duration: Duration::from_millis(2000),
+                                });
+                                count.set(count.get_untracked() + 1);
+                            };
+                            "#)
+                        }
+                    </DemoCode>
+                </Demo>
+            </div>
+            <div>
+                <MobilePage path="/melt-ui?path=/mobile/toast" />
+            </div>
+        </div>
+    }
+}
+
+#[component]
+pub fn ToastDemoPage() -> impl IntoView {
     let count = create_rw_signal(0u32);
     let onclick = move |_| {
         show_toast(ToastOptions {