diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index de12dae..12f6fbb 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -1,12 +1,26 @@
 use leptos::*;
-use leptos_router::{use_navigate, use_query_map};
+use leptos_router::{use_navigate, use_query_map, Url};
 use melt_ui::*;
 
 #[component]
 pub fn Home() -> impl IntoView {
     let query_map = use_query_map().get_untracked();
+    // mobile page
     if let Some(path) = query_map.get("path") {
         let navigate = use_navigate();
+        if let Some((_, search)) = path.split_once("?") {
+            if let Some((key, value)) = search.split_once("=") {
+                if key == "theme" {
+                    let theme = use_rw_theme();
+                    let theme_name = theme.with_untracked(|theme| theme.name.clone());
+                    if value == "light" && theme_name != "light" {
+                        theme.set(Theme::light())
+                    } else if value == "dark" && theme_name != "dark" {
+                        theme.set(Theme::dark())
+                    }
+                }
+            }
+        }
         navigate(path, Default::default());
     }
     view! {
diff --git a/demo/src/pages/mobile.rs b/demo/src/pages/mobile.rs
index 01936a5..cbdbb01 100644
--- a/demo/src/pages/mobile.rs
+++ b/demo/src/pages/mobile.rs
@@ -1,12 +1,22 @@
 use leptos::*;
+use melt_ui::{use_theme, Theme};
 
 #[component]
 pub fn MobilePage(path: &'static str) -> impl IntoView {
+    let theme = use_theme(Theme::light);
+    let src = create_memo(move |_| theme.with(|theme| format!("{path}?theme={}", theme.name)));
+    let style = create_memo(move |_| {
+        theme.with(|theme| {
+            let mut style = String::from("margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; box-shadow: 0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03);");
+            style.push_str(&format!("border: 1px solid {}; ", theme.common.border_color));
+            style
+        })
+    });
     view! {
         <div style="height: 100vh; width: 400px; text-align: center">
             <iframe
-                src=path
-                style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"
+                src=move || src.get()
+                style=move || style.get()
             ></iframe>
         </div>
     }
diff --git a/demo/src/pages/nav_bar/mod.rs b/demo/src/pages/nav_bar/mod.rs
index f000996..3e305da 100644
--- a/demo/src/pages/nav_bar/mod.rs
+++ b/demo/src/pages/nav_bar/mod.rs
@@ -58,7 +58,7 @@ pub fn NavBarDemoPage() -> impl IntoView {
     let on_click_right = move |_| click_text.set("right".to_string());
 
     view! {
-        <div style="height: 100vh; background: #f5f5f5">
+        <div style="height: 100vh;">
             <NavBar
                 title="Home"
                 left_arrow=true
diff --git a/demo/src/pages/tabbar/mod.rs b/demo/src/pages/tabbar/mod.rs
index 70a8e13..340a790 100644
--- a/demo/src/pages/tabbar/mod.rs
+++ b/demo/src/pages/tabbar/mod.rs
@@ -51,7 +51,7 @@ pub fn TabbarPage() -> impl IntoView {
 pub fn TabbarDemoPage() -> impl IntoView {
     let value = create_rw_signal(String::from("o"));
     view! {
-        <div style="height: 100vh; background: #f5f5f5">
+        <div style="height: 100vh;">
             {move || value.get()} <Tabbar value>
                 <TabbarItem key="a">"and"</TabbarItem>
                 <TabbarItem key="i">"if"</TabbarItem>