diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7561e19..bbe6121 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-    "rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
+    "rust-analyzer.linkedProjects": [
+        "gh-pages/Cargo.toml"
+    ]
 }
\ No newline at end of file
diff --git a/Cargo.toml b/Cargo.toml
index 5029193..f3bfe51 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -14,7 +14,7 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.5.0-rc2",  features = ["csr"] }
-stylers = { git = "https://github.com/abishekatp/stylers", rev = "4bfd2df" }
+stylers = "0.3.2"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.5.0-rc2" }
 wasm-bindgen = "0.2.85"
diff --git a/gh-pages/src/pages/menu/mod.rs b/gh-pages/src/pages/menu/mod.rs
index cde492c..e714cab 100644
--- a/gh-pages/src/pages/menu/mod.rs
+++ b/gh-pages/src/pages/menu/mod.rs
@@ -1,3 +1,4 @@
+use crate::components::{Demo, DemoCode};
 use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
@@ -6,26 +7,26 @@ use melt_ui::*;
 pub fn MenuPage() -> impl IntoView {
     let selected = create_rw_signal(String::from("o"));
     view! {
-        <Card>
-            { move || selected.get() }
-            <Menu selected>
-                <MenuItem key="a" label="and"/>
-                <MenuItem key="o" label="or"/>
-            </Menu>
-            <CardFooter slot>
-                <Code>
-                    <pre>
-                        {
-                            indoc!(r#"
-                            <Menu selected>
-                                <MenuItem key="a" label="and"/>
-                                <MenuItem key="o" label="or"/>
-                            </Menu>
-                            "#)
-                        }
-                    </pre>
-                </Code>
-            </CardFooter>
-        </Card>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Menu"</h1>
+            <Demo>
+                <Menu selected>
+                    <MenuItem key="a" label="and"/>
+                    <MenuItem key="o" label="or"/>
+                </Menu>
+                <DemoCode slot>
+                    {
+                        indoc!(r#"
+                        let selected = create_rw_signal(String::from("o"));
+                        
+                        <Menu selected>
+                            <MenuItem key="a" label="and"/>
+                            <MenuItem key="o" label="or"/>
+                        </Menu>
+                        "#)
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/gh-pages/src/pages/slider/mod.rs b/gh-pages/src/pages/slider/mod.rs
index be993b9..625de3c 100644
--- a/gh-pages/src/pages/slider/mod.rs
+++ b/gh-pages/src/pages/slider/mod.rs
@@ -1,3 +1,5 @@
+use crate::components::{Demo, DemoCode};
+use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
 
@@ -6,6 +8,20 @@ pub fn SliderPage() -> impl IntoView {
     let value = create_rw_signal(0.0);
 
     view! {
-        <Slider value/>
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Slider"</h1>
+            <Demo>
+                <Slider value/>
+                <DemoCode slot>
+                    {
+                        indoc!(r#"
+                        let value = create_rw_signal(0.0);
+                        
+                        <Slider value/>
+                        "#)
+                    }
+                </DemoCode>
+            </Demo>
+        </div>
     }
 }
diff --git a/src/menu/menu-item.css b/src/menu/menu-item.css
index 0df4feb..d9a9f01 100644
--- a/src/menu/menu-item.css
+++ b/src/menu/menu-item.css
@@ -1,16 +1,20 @@
 .melt-menu-item__content {
-    margin: 6px 8px;
-    padding: 12px 10px;
-    padding-left: 14px;
+    margin: 0.3rem 0.4rem;
+    padding: 0.6rem 0.8rem 0.6rem 1rem;
+    color: var(--font-color);
     cursor: pointer;
-    border-radius: var(--border-radius);
+    border-radius: 0.25rem;
+
+    transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
 }
 
-.melt-menu-item__content:hover {
-    color: var(--font-color);
+.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
+    background-color: var(--bg-color-hover);
 }
 
 .melt-menu-item__content--selected {
-    color: var(--font-color);
+    color: var(--font-color-active);
     background-color: var(--bg-color);
 }
diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs
index 700f083..8755763 100644
--- a/src/menu/menu_item.rs
+++ b/src/menu/menu_item.rs
@@ -19,10 +19,10 @@ pub fn MenuItem(
         let mut css_vars = String::new();
         let theme = theme.get();
         let font_color = theme.common.color_primary.clone();
-        css_vars.push_str(&format!("--font-color: {font_color};"));
+        css_vars.push_str(&format!("--font-color-active: {font_color};"));
+        css_vars.push_str(&format!("--font-color: {};", theme.menu.color));
         css_vars.push_str(&format!("--bg-color: {font_color}1a;"));
-        let border_radius = theme.common.border_radius.clone();
-        css_vars.push_str(&format!("--border-radius: {border_radius};"));
+        css_vars.push_str(&format!("--bg-color-hover: {};", theme.menu.item_color_hover));
         css_vars
     });
     view! { class=class_name,
diff --git a/src/menu/mod.rs b/src/menu/mod.rs
index 6a3fce2..781ccb1 100644
--- a/src/menu/mod.rs
+++ b/src/menu/mod.rs
@@ -1,7 +1,9 @@
 mod menu_item;
+mod theme;
 
 use leptos::*;
 pub use menu_item::*;
+pub use theme::MenuTheme;
 
 #[component]
 pub fn Menu(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
diff --git a/src/menu/theme.rs b/src/menu/theme.rs
new file mode 100644
index 0000000..1779aa7
--- /dev/null
+++ b/src/menu/theme.rs
@@ -0,0 +1,23 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct MenuTheme {
+    pub color: String,
+    pub item_color_hover: String,
+}
+
+impl ThemeMethod for MenuTheme {
+    fn light() -> Self {
+        Self {
+            color: "#333639".into(),
+            item_color_hover: "#f3f5f6".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            color: "#333639".into(),
+            item_color_hover: "#f3f5f6".into(),
+        }
+    }
+}
diff --git a/src/theme/mod.rs b/src/theme/mod.rs
index ab0281b..d6fbf6a 100644
--- a/src/theme/mod.rs
+++ b/src/theme/mod.rs
@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::{ButtonTheme, InputTheme};
+use crate::{ButtonTheme, InputTheme, MenuTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -14,6 +14,7 @@ pub struct Theme {
     pub common: CommonTheme,
     pub button: ButtonTheme,
     pub input: InputTheme,
+    pub menu: MenuTheme,
 }
 
 impl Theme {
@@ -22,6 +23,7 @@ impl Theme {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
             input: InputTheme::light(),
+            menu: MenuTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -29,6 +31,7 @@ impl Theme {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
 }
@@ -39,6 +42,7 @@ impl ThemeMethod for Theme {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
     fn dark() -> Self {
@@ -46,6 +50,7 @@ impl ThemeMethod for Theme {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
+            menu: MenuTheme::dark(),
         }
     }
 }