diff --git a/src/alert/alert.css b/src/alert/alert.css
index 5dbcfc9..cc1f2ba 100644
--- a/src/alert/alert.css
+++ b/src/alert/alert.css
@@ -1,8 +1,8 @@
 .melt-alert {
     position: relative;
     padding: 14px 20px 14px 42px;
-    background-color: var(--background-color);
-    border: 1px solid var(--border-color);
+    background-color: var(--melt-background-color);
+    border: 1px solid var(--melt-border-color);
     border-radius: 3px;
     line-height: 1.6;
 }
@@ -12,7 +12,7 @@
     top: 12px;
     left: 10px;
     font-size: 24px;
-    color: var(--icon-color);
+    color: var(--melt-icon-color);
 }
 
 .melt-alert__header {
diff --git a/src/alert/mod.rs b/src/alert/mod.rs
index 7b5e6f1..4e22917 100644
--- a/src/alert/mod.rs
+++ b/src/alert/mod.rs
@@ -54,15 +54,15 @@ pub fn Alert(
             theme.with(|theme| {
                 let variant = variant.get();
                 css_vars.push_str(&format!(
-                    "--icon-color: {};",
+                    "--melt-icon-color: {};",
                     variant.theme_icon_color(theme)
                 ));
                 css_vars.push_str(&format!(
-                    "--background-color: {};",
+                    "--melt-background-color: {};",
                     variant.theme_background_color(theme)
                 ));
                 css_vars.push_str(&format!(
-                    "--border-color: {};",
+                    "--melt-border-color: {};",
                     variant.theme_border_color(theme)
                 ));
             });
diff --git a/src/auto_complete/mod.rs b/src/auto_complete/mod.rs
index b908176..456ffcf 100644
--- a/src/auto_complete/mod.rs
+++ b/src/auto_complete/mod.rs
@@ -79,7 +79,11 @@ pub fn AutoComplete(
             <div
                 class="melt-auto-complete__menu"
                 style=move || {
-                    if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".to_string() }
+                    if is_show_menu.get() {
+                        menu_css_vars.get()
+                    } else {
+                        "display: none;".to_string()
+                    }
                 }
 
                 ref=auto_complete_menu_ref
diff --git a/src/avatar/mod.rs b/src/avatar/mod.rs
index f83260d..a222671 100644
--- a/src/avatar/mod.rs
+++ b/src/avatar/mod.rs
@@ -31,10 +31,9 @@ pub fn Avatar(
         <span class="melt-avatar" style=move || css_vars.get()>
             {move || {
                 let src = src.get();
-                (!src.is_empty()).then(|| view! {
-                    <img src=src />
-                })
+                (!src.is_empty()).then(|| view! { <img src=src/> })
             }}
+
         </span>
     }
 }
diff --git a/src/badge/badge.css b/src/badge/badge.css
index cd8bca5..dcfe682 100644
--- a/src/badge/badge.css
+++ b/src/badge/badge.css
@@ -4,8 +4,8 @@
 }
 .melt-badge__sup {
     position: absolute;
-    color: var(--font-color);
-    background-color: var(--background-color);
+    color: var(--melt-font-color);
+    background-color: var(--melt-background-color);
 }
 .melt-badge__sup--value {
     top: -9px;
diff --git a/src/badge/mod.rs b/src/badge/mod.rs
index 6b74bac..4ff27e0 100644
--- a/src/badge/mod.rs
+++ b/src/badge/mod.rs
@@ -31,10 +31,10 @@ pub fn Badge(
     mount_style("badge", include_str!("./badge.css"));
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        css_vars.push_str("--font-color: #fff;");
+        css_vars.push_str("--melt-font-color: #fff;");
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--background-color: {};",
+                "--melt-background-color: {};",
                 color.get().theme_color(theme)
             ));
         });
diff --git a/src/button/button.css b/src/button/button.css
index fa8003b..17f9d63 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -1,9 +1,9 @@
 .melt-button {
     height: 34px;
     padding: 0 16px;
-    background-color: var(--background-color);
-    color: var(--font-color);
-    border: 1px solid var(--border-color);
+    background-color: var(--melt-background-color);
+    color: var(--melt-font-color);
+    border: 1px solid var(--melt-border-color);
     border-radius: 5px;
     position: relative;
     display: inline-flex;
@@ -13,8 +13,8 @@
 }
 
 .melt-button:hover {
-    border-color: var(--border-color-hover);
-    background-color: var(--background-color-hover);
+    border-color: var(--melt-border-color-hover);
+    background-color: var(--melt-background-color-hover);
     cursor: pointer;
 
     transition: all 0.3s;
@@ -22,8 +22,8 @@
 
 .melt-button:active:not(.melt-button--disabled) {
     transition: all 0.3s;
-    border-color: var(--border-color-hover);
-    background-color: var(--background-color-active);
+    border-color: var(--melt-border-color-hover);
+    background-color: var(--melt-background-color-active);
 }
 
 .melt-button--text,
@@ -32,7 +32,7 @@
 }
 
 .melt-button--text:hover {
-    color: var(--font-color-hover);
+    color: var(--melt-font-color-hover);
 }
 
 .melt-button--link {
@@ -41,7 +41,7 @@
 }
 
 .melt-button--link:hover {
-    color: var(--font-color-hover);
+    color: var(--melt-font-color-hover);
 }
 
 .melt-button--round {
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 15fbf2f..25ff1f1 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -76,28 +76,30 @@ pub fn Button(
             if variant.get() == ButtonVariant::Primary {
                 let bg_color_hover = color.get().theme_color_hover(theme);
                 let bg_color_active = color.get().theme_color_active(theme);
-                css_vars.push_str(&format!("--background-color: {bg_color};"));
-                css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
-                css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
-                css_vars.push_str("--font-color: #fff;");
-                css_vars.push_str(&format!("--border-color: {bg_color};"));
-                css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
-                css_vars.push_str(&format!("--melt-ripple-color: {bg_color};"));
-            } else if variant.get() == ButtonVariant::Text {
-                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--melt-background-color: {bg_color};"));
+                css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};"));
                 css_vars.push_str(&format!(
-                    "--background-color-hover: {};",
+                    "--melt-background-color-active: {bg_color_active};"
+                ));
+                css_vars.push_str("--melt-font-color: #fff;");
+                css_vars.push_str(&format!("--melt-border-color: {bg_color};"));
+                css_vars.push_str(&format!("--melt-border-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--melt-melt-ripple-color: {bg_color};"));
+            } else if variant.get() == ButtonVariant::Text {
+                css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!(
+                    "--melt-background-color-hover: {};",
                     theme.button.color_text_hover
                 ));
                 css_vars.push_str(&format!(
-                    "--background-color-active: {};",
+                    "--melt-background-color-active: {};",
                     theme.button.color_text_active
                 ));
                 css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
             } else {
-                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
-                css_vars.push_str("--border-color: #555a;");
-                css_vars.push_str("--border-color-hover: #555;");
+                css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
+                css_vars.push_str("--melt-border-color: #555a;");
+                css_vars.push_str("--melt-border-color-hover: #555;");
                 css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
             }
         });
diff --git a/src/checkbox/checkbox.css b/src/checkbox/checkbox.css
index 9671d1e..e4bb1dd 100644
--- a/src/checkbox/checkbox.css
+++ b/src/checkbox/checkbox.css
@@ -20,10 +20,10 @@
 }
 .melt-checkbox:hover .melt-checkbox__dot,
 .melt-checkbox--checked .melt-checkbox__dot {
-    border-color: var(--background-color-checked);
+    border-color: var(--melt-background-color-checked);
 }
 .melt-checkbox--checked .melt-checkbox__dot {
-    background-color: var(--background-color-checked);
+    background-color: var(--melt-background-color-checked);
 }
 
 .melt-checkbox__label {
diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs
index bec4f43..360aa83 100644
--- a/src/checkbox/mod.rs
+++ b/src/checkbox/mod.rs
@@ -23,9 +23,12 @@ pub fn Checkbox(
 
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        let theme = theme.get();
-        let bg_color = theme.common.color_primary;
-        css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--melt-background-color-checked: {};",
+                theme.common.color_primary
+            ));
+        });
         css_vars
     });
 
diff --git a/src/color_picker/mod.rs b/src/color_picker/mod.rs
index da95849..695ed0e 100644
--- a/src/color_picker/mod.rs
+++ b/src/color_picker/mod.rs
@@ -108,7 +108,11 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
                 class="melt-color-picker-popover"
                 ref=popover_ref
                 style=move || {
-                    if is_show_popover.get() { popover_css_vars.get() } else { "display: none".to_string() }
+                    if is_show_popover.get() {
+                        popover_css_vars.get()
+                    } else {
+                        "display: none".to_string()
+                    }
                 }
             >
 
diff --git a/src/input/mod.rs b/src/input/mod.rs
index 201aaa8..2cb6cd7 100644
--- a/src/input/mod.rs
+++ b/src/input/mod.rs
@@ -94,23 +94,20 @@ pub fn Input(
                     value_trigger.track();
                     value.get()
                 }
+
                 on:input=on_input
                 on:focus=on_internal_focus
                 on:blur=on_internal_blur
                 class="melt-input__input-el"
                 placeholder=move || placeholder.get()
             />
-            {
-                if let Some(suffix) = input_suffix {
-                    view! {
-                        <div class="melt-input__suffix">
-                            {(suffix.children)()}
-                        </div>
-                    }.into()
-                } else {
-                    None
-                }
-            }
+
+            {if let Some(suffix) = input_suffix {
+                view! { <div class="melt-input__suffix">{(suffix.children)()}</div> }.into()
+            } else {
+                None
+            }}
+
         </div>
     }
 }
diff --git a/src/menu/menu-group.css b/src/menu/menu-group.css
index 23c1dc8..a2105db 100644
--- a/src/menu/menu-group.css
+++ b/src/menu/menu-group.css
@@ -2,5 +2,5 @@
     padding: 0.85rem 1.15em 0.1rem;
     font-size: 0.86rem;
     font-weight: 500;
-    color: var(--font-color);
+    color: var(--melt-font-color);
 }
diff --git a/src/menu/menu-item.css b/src/menu/menu-item.css
index f1b4b2c..533370e 100644
--- a/src/menu/menu-item.css
+++ b/src/menu/menu-item.css
@@ -1,7 +1,7 @@
 .melt-menu-item__content {
     margin: 0.3rem 0.4rem;
     padding: 0.5rem 0.75rem;
-    color: var(--font-color);
+    color: var(--melt-font-color);
     cursor: pointer;
     border-radius: 0.25rem;
     font-size: 0.875rem;
@@ -12,10 +12,10 @@
 }
 
 .melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
-    background-color: var(--bg-color-hover);
+    background-color: var(--melt-background-color-hover);
 }
 
 .melt-menu-item__content--selected {
-    color: var(--font-color-active);
-    background-color: var(--bg-color);
+    color: var(--melt-font-color-active);
+    background-color: var(--melt-background-color);
 }
diff --git a/src/menu/menu_group.rs b/src/menu/menu_group.rs
index 813052a..f5fb39c 100644
--- a/src/menu/menu_group.rs
+++ b/src/menu/menu_group.rs
@@ -8,7 +8,7 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            css_vars.push_str(&format!("--font-color: {};", theme.menu.group_color));
+            css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.group_color));
         });
         css_vars
     });
diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs
index c033783..fd1e8ea 100644
--- a/src/menu/menu_item.rs
+++ b/src/menu/menu_item.rs
@@ -17,15 +17,16 @@ pub fn MenuItem(
 
     let css_vars = create_memo(move |_| {
         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-active: {font_color};"));
-        css_vars.push_str(&format!("--font-color: {};", theme.menu.color));
-        css_vars.push_str(&format!("--bg-color: {font_color}1a;"));
-        css_vars.push_str(&format!(
-            "--bg-color-hover: {};",
-            theme.menu.item_color_hover
-        ));
+        theme.with(|theme| {
+            let font_color = theme.common.color_primary.clone();
+            css_vars.push_str(&format!("--melt-font-color-active: {font_color};"));
+            css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.color));
+            css_vars.push_str(&format!("--melt-background-color: {font_color}1a;"));
+            css_vars.push_str(&format!(
+                "--melt-background-color-hover: {};",
+                theme.menu.item_color_hover
+            ));
+        });
         css_vars
     });
     view! {
diff --git a/src/message/message_provider.rs b/src/message/message_provider.rs
index 8f26bc7..dc33431 100644
--- a/src/message/message_provider.rs
+++ b/src/message/message_provider.rs
@@ -34,6 +34,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
                         }
                     }
                 />
+
             </div>
         </Teleport>
     }
diff --git a/src/mobile/tabbar/mod.rs b/src/mobile/tabbar/mod.rs
index a782cb2..73dc09e 100644
--- a/src/mobile/tabbar/mod.rs
+++ b/src/mobile/tabbar/mod.rs
@@ -43,7 +43,11 @@ pub fn Tabbar(
         }
     });
     provide_context(tabbar_injection_key);
-    view! { <div class="melt-tabbar" style=move || css_vars.get()>{children()}</div> }
+    view! {
+        <div class="melt-tabbar" style=move || css_vars.get()>
+            {children()}
+        </div>
+    }
 }
 
 #[derive(Clone)]
diff --git a/src/mobile/tabbar/tabbar-item.css b/src/mobile/tabbar/tabbar-item.css
index 8233f23..64bfcce 100644
--- a/src/mobile/tabbar/tabbar-item.css
+++ b/src/mobile/tabbar/tabbar-item.css
@@ -8,7 +8,7 @@
 }
 
 .melt-tabbar-item--selected {
-    color: var(--font-color-selected)
+    color: var(--melt-font-color-selected)
 }
 
 .melt-tabbar-item__content {
diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs
index 43c3e10..a4b0bf9 100644
--- a/src/mobile/tabbar/tabbar_item.rs
+++ b/src/mobile/tabbar/tabbar_item.rs
@@ -20,9 +20,10 @@ pub fn TabbarItem(
 
     let css_vars = create_memo(move |_| {
         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-selected: {font_color};"));
+        theme.with(|theme| {
+            let font_color = theme.common.color_primary.clone();
+            css_vars.push_str(&format!("--melt-font-color-selected: {font_color};"));
+        });
         css_vars
     });
 
diff --git a/src/progress/mod.rs b/src/progress/mod.rs
index 5b3dcbc..a9f496e 100644
--- a/src/progress/mod.rs
+++ b/src/progress/mod.rs
@@ -15,9 +15,7 @@ pub fn Progress(
     view! {
         <div class="melt-progress">
             <span class="melt-progress__tip-left">
-                <Show when=move || left_tip.with(|v| !v.is_empty())>
-                    {move || left_tip.get()}
-                </Show>
+                <Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
             </span>
             <span class="melt-progress__progress">
                 <span class="melt-progress__progress-inner" style=style>
@@ -25,9 +23,9 @@ pub fn Progress(
                 </span>
             </span>
             <span class="melt-progress__tip-right">
-                <Show when=move || right_tip.with(|v| !v.is_empty())>
-                    {move || right_tip.get()}
-                </Show>
+                <Show when=move || {
+                    right_tip.with(|v| !v.is_empty())
+                }>{move || right_tip.get()}</Show>
             </span>
         </div>
     }
diff --git a/src/radio/mod.rs b/src/radio/mod.rs
index 5e402ba..87d30e9 100644
--- a/src/radio/mod.rs
+++ b/src/radio/mod.rs
@@ -17,7 +17,7 @@ pub fn Radio(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let bg_color = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
+            css_vars.push_str(&format!("--melt-background-color-checked: {bg_color};"));
         });
 
         css_vars
diff --git a/src/radio/radio.css b/src/radio/radio.css
index 127bc17..ad429ac 100644
--- a/src/radio/radio.css
+++ b/src/radio/radio.css
@@ -21,7 +21,7 @@
 
 .melt-radio:hover .melt-radio__dot,
 .melt-radio--checked .melt-radio__dot {
-    border-color: var(--background-color-checked);
+    border-color: var(--melt-background-color-checked);
 }
 
 .melt-radio--checked .melt-radio__dot::before {
@@ -31,7 +31,7 @@
     bottom: 3px;
     left: 3px;
     right: 3px;
-    background-color: var(--background-color-checked);
+    background-color: var(--melt-background-color-checked);
     border-radius: 50%;
 }
 
diff --git a/src/select/mod.rs b/src/select/mod.rs
index d03f089..dca5d4d 100644
--- a/src/select/mod.rs
+++ b/src/select/mod.rs
@@ -125,11 +125,7 @@ where
             <div
                 class="melt-select-menu"
                 style=move || {
-                    if is_show_menu.get() {
-                        menu_css_vars.get()
-                    } else {
-                        "display: none;".into()
-                    }
+                    if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".into() }
                 }
 
                 ref=menu_ref
diff --git a/src/skeleton/mod.rs b/src/skeleton/mod.rs
index bf5b8ee..c659172 100644
--- a/src/skeleton/mod.rs
+++ b/src/skeleton/mod.rs
@@ -28,11 +28,11 @@ pub fn Skeleton(
 
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--background-color-start: {};",
+                "--melt-background-color-start: {};",
                 theme.skeletion.background_color_start
             ));
             css_vars.push_str(&format!(
-                "--background-color-end: {};",
+                "--melt-background-color-end: {};",
                 theme.skeletion.background_color_end
             ));
         });
diff --git a/src/skeleton/skeleton.css b/src/skeleton/skeleton.css
index 6effb96..352ae28 100644
--- a/src/skeleton/skeleton.css
+++ b/src/skeleton/skeleton.css
@@ -1,13 +1,13 @@
 .melt-skeleton {
     width: 100%;
     height: 1em;
-    background-color: var(--background-color-start);
+    background-color: var(--melt-background-color-start);
 
     background: linear-gradient(
         90deg,
-        var(--background-color-start) 25%,
-        var(--background-color-end) 37%,
-        var(--background-color-start) 63%
+        var(--melt-background-color-start) 25%,
+        var(--melt-background-color-end) 37%,
+        var(--melt-background-color-start) 63%
     );
     animation: meltSkeletonLoading 1.4s ease infinite;
     background-size: 400% 100%;
diff --git a/src/table/mod.rs b/src/table/mod.rs
index 177e5d4..82481ea 100644
--- a/src/table/mod.rs
+++ b/src/table/mod.rs
@@ -17,15 +17,21 @@ pub fn Table(
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--background-color: {};",
+                "--melt-background-color: {};",
                 theme.table.background_color
             ));
             css_vars.push_str(&format!(
-                "--background-color-striped: {};",
+                "--melt-background-color-striped: {};",
                 theme.table.background_color_striped
             ));
-            css_vars.push_str(&format!("--border-color: {};", theme.table.border_color));
-            css_vars.push_str(&format!("--border-radius: {};", theme.common.border_radius));
+            css_vars.push_str(&format!(
+                "--melt-border-color: {};",
+                theme.table.border_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-border-radius: {};",
+                theme.common.border_radius
+            ));
         });
 
         css_vars
diff --git a/src/table/table.css b/src/table/table.css
index eded8f3..5899504 100644
--- a/src/table/table.css
+++ b/src/table/table.css
@@ -2,21 +2,21 @@
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
-    background-color: var(--background-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius);
+    background-color: var(--melt-background-color);
+    border: 1px solid var(--melt-border-color);
+    border-radius: var(--melt-border-radius);
 }
 
 .melt-table th {
     text-align: inherit;
-    background-color: var(--background-color-striped);
+    background-color: var(--melt-background-color-striped);
 }
 
 .melt-table td,
 .melt-table th {
     padding: 12px;
-    border-right: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
+    border-right: 1px solid var(--melt-border-color);
+    border-bottom: 1px solid var(--melt-border-color);
 }
 
 .melt-table.melt-table--single-row td,
@@ -35,5 +35,5 @@
     border-bottom: none;
 }
 .melt-table tr {
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--melt-border-color);
 }
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index e4671b0..9b110bc 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -24,11 +24,12 @@ pub fn Tabs(
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        let theme = theme.get();
-        let color_primary = theme.common.color_primary.clone();
-        css_vars.push_str(&format!(
-            "--label-active-background-color: {color_primary};"
-        ));
+        theme.with(|theme| {
+            let color_primary = theme.common.color_primary.clone();
+            css_vars.push_str(&format!(
+                "--melt-label-active-background-color: {color_primary};"
+            ));
+        });
         css_vars
     });
 
@@ -90,6 +91,7 @@ pub fn Tabs(
                                     let key = key.clone();
                                     move |_| value.set(key.clone())
                                 }
+
                                 ref=label_ref
                             >
                                 {label}
diff --git a/src/tabs/tabs.css b/src/tabs/tabs.css
index 6e46bc2..d1c2add 100644
--- a/src/tabs/tabs.css
+++ b/src/tabs/tabs.css
@@ -13,7 +13,7 @@
 .melt-tabs-label__line {
     position: absolute;
     height: 3px;
-    background-color: var(--label-active-background-color);
+    background-color: var(--melt-label-active-background-color);
     border-radius: 3px;
     bottom: 0;
     left: 0;
diff --git a/src/tag/mod.rs b/src/tag/mod.rs
index 07bbe50..16ca648 100644
--- a/src/tag/mod.rs
+++ b/src/tag/mod.rs
@@ -52,15 +52,15 @@ pub fn Tag(
         theme.with(|theme| {
             let variant = variant.get();
             css_vars.push_str(&format!(
-                "--font-color: {};",
+                "--melt-font-color: {};",
                 variant.theme_font_color(theme)
             ));
             css_vars.push_str(&format!(
-                "--background-color: {};",
+                "--melt-background-color: {};",
                 variant.theme_background_color(theme)
             ));
             css_vars.push_str(&format!(
-                "--border-color: {};",
+                "--melt-border-color: {};",
                 variant.theme_border_color(theme)
             ));
         });
diff --git a/src/tag/tag.css b/src/tag/tag.css
index 704d4dc..288b4c0 100644
--- a/src/tag/tag.css
+++ b/src/tag/tag.css
@@ -4,8 +4,8 @@
     align-items: center;
     font-size: 14px;
     padding: 0 10px;
-    background-color: var(--background-color);
-    color: var(--font-color);
-    border: 1px solid var(--border-color);
+    background-color: var(--melt-background-color);
+    color: var(--melt-font-color);
+    border: 1px solid var(--melt-border-color);
     border-radius: 3px;
 }
diff --git a/src/upload/upload-dragger.css b/src/upload/upload-dragger.css
index 1c622e4..ddd5408 100644
--- a/src/upload/upload-dragger.css
+++ b/src/upload/upload-dragger.css
@@ -1,4 +1,5 @@
 .melt-upload-dragger {
+    width: 100%;
     padding: 20px;
     background-color: var(--melt-background-color);
     border: 1px dashed var(--melt-border-color);
@@ -6,6 +7,7 @@
     text-align: center;
     cursor: pointer;
     transition: border 0.3s;
+    box-sizing: border-box;
 }
 .melt-upload-dragger:hover,
 .melt-upload--drag-over .melt-upload-dragger {
diff --git a/src/upload/upload.css b/src/upload/upload.css
index 81fb12d..940487b 100644
--- a/src/upload/upload.css
+++ b/src/upload/upload.css
@@ -3,3 +3,7 @@
     height: 0;
     opacity: 0;
 }
+
+.melt-upload__trigger {
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/src/wave/mod.rs b/src/wave/mod.rs
index b2f04fd..b0885ec 100644
--- a/src/wave/mod.rs
+++ b/src/wave/mod.rs
@@ -38,7 +38,13 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView
     });
     comp_ref.load(WaveRef { play });
     view! {
-        <div class="melt-wave" class=("melt-wave--active", move || animation_timeout_handle.with(|handle| handle.is_some())) ref=wave_ref>
-        </div>
+        <div
+            class="melt-wave"
+            class=(
+                "melt-wave--active",
+                move || animation_timeout_handle.with(|handle| handle.is_some()),
+            )
+            ref=wave_ref
+        ></div>
     }
 }