diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
index bd77b63..2df6778 100644
--- a/examples/basic/Cargo.toml
+++ b/examples/basic/Cargo.toml
@@ -8,4 +8,5 @@ edition = "2021"
 [dependencies]
 leptos = { version = "0.3.0", features = ["stable"] }
 melt-ui = { path = "../../" }
-leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
\ No newline at end of file
+leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
+leptos_router = { version = "0.3.0", features = ["csr"] }
\ No newline at end of file
diff --git a/examples/basic/src/app.rs b/examples/basic/src/app.rs
new file mode 100644
index 0000000..7162d8b
--- /dev/null
+++ b/examples/basic/src/app.rs
@@ -0,0 +1,16 @@
+use crate::pages::*;
+use leptos::*;
+use leptos_router::*;
+
+#[component]
+pub fn App(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <Router>
+            <Routes>
+                <Route path="/" view=move |cx| view! {cx,
+                    <Home />
+                } />
+            </Routes>
+        </Router>
+    }
+}
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index 806ac9f..b3334f8 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -1,61 +1,12 @@
-use leptos::*;
-use melt_ui::*;
+mod app;
 mod demo_button;
 mod demo_checkbox;
 mod demo_modal;
 mod demo_slider;
+mod pages;
 
-pub use demo_button::*;
-pub use demo_checkbox::*;
-pub use demo_modal::*;
-pub use demo_slider::*;
-
-#[component]
-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 (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
-
-    let count_string = create_memo(cx, move |_| {
-        log!("sd");
-        count.get().to_string()
-    });
-    let on_input = SignalSetter::map(cx, move |value: String| {
-        set_count.set(value.parse().unwrap());
-    });
-    view! { cx,
-        <Space>
-            <Input value=count_string on_input=on_input/>
-            <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>
-        <hr />
-        <DemoButton />
-        <hr />
-        <DemoModal/>
-        <hr />
-        <DemoCheckout />
-        <hr />
-        <DemoSlider />
-    }
-}
+use app::*;
+use leptos::*;
 
 fn main() {
     mount_to_body(|cx| view! { cx, <App/> })
diff --git a/examples/basic/src/pages/home.rs b/examples/basic/src/pages/home.rs
new file mode 100644
index 0000000..79198cb
--- /dev/null
+++ b/examples/basic/src/pages/home.rs
@@ -0,0 +1,53 @@
+use crate::demo_button::*;
+use crate::demo_checkbox::*;
+use crate::demo_modal::*;
+use crate::demo_slider::*;
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn Home(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 (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
+
+    let count_string = create_memo(cx, move |_| {
+        log!("sd");
+        count.get().to_string()
+    });
+    let on_input = SignalSetter::map(cx, move |value: String| {
+        set_count.set(value.parse().unwrap());
+    });
+    view! { cx,
+        <Space>
+            <Input value=count_string on_input=on_input/>
+            <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>
+        <hr />
+        <DemoButton />
+        <hr />
+        <DemoModal/>
+        <hr />
+        <DemoCheckout />
+        <hr />
+        <DemoSlider />
+    }
+}
diff --git a/examples/basic/src/pages/mod.rs b/examples/basic/src/pages/mod.rs
new file mode 100644
index 0000000..72caa3c
--- /dev/null
+++ b/examples/basic/src/pages/mod.rs
@@ -0,0 +1,3 @@
+mod home;
+
+pub use home::*;