diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index b5b17f9..6039c4f 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -117,7 +117,7 @@ pub fn SiteHeader() -> impl IntoView {
                     icon=icondata::AiIcon::AiGithubOutlined
                     round=true
                     style="font-size: 22px; padding: 0px 6px;"
-                    on:click=move |_| {
+                    on_click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 />
diff --git a/demo/src/pages/button/mod.rs b/demo/src/pages/button/mod.rs
index dc4543a..25cddb6 100644
--- a/demo/src/pages/button/mod.rs
+++ b/demo/src/pages/button/mod.rs
@@ -136,18 +136,10 @@ pub fn ButtonPage() -> impl IntoView {
             <h3>"Size"</h3>
             <Demo>
                 <Space>
-                    <Button size=ButtonSize::Tiny>
-                        "Primary"
-                    </Button>
-                    <Button size=ButtonSize::Small>
-                        "Primary"
-                    </Button>
-                    <Button size=ButtonSize::Medium>
-                        "Primary"
-                    </Button>
-                    <Button size=ButtonSize::Large>
-                        "Primary"
-                    </Button>
+                    <Button size=ButtonSize::Tiny>"Primary"</Button>
+                    <Button size=ButtonSize::Small>"Primary"</Button>
+                    <Button size=ButtonSize::Medium>"Primary"</Button>
+                    <Button size=ButtonSize::Large>"Primary"</Button>
                 </Space>
                 <DemoCode slot>
 
@@ -177,26 +169,14 @@ pub fn ButtonPage() -> impl IntoView {
             <Demo>
                 <Space>
                     <ButtonGroup>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
                     </ButtonGroup>
                     <ButtonGroup vertical=true>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
-                        <Button variant=ButtonVariant::Solid>
-                            "Solid"
-                        </Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
+                        <Button variant=ButtonVariant::Solid>"Solid"</Button>
                     </ButtonGroup>
                 </Space>
                 <DemoCode slot>
diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index 5bc7575..02f98e7 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -24,7 +24,7 @@ pub fn Home() -> impl IntoView {
                 }>"Read the docs"</Button>
                 <Button
                     variant=ButtonVariant::Text
-                    on:click=move |_| {
+                    on_click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 >
diff --git a/demo/src/pages/loading_bar/mod.rs b/demo/src/pages/loading_bar/mod.rs
index 738163e..aac0f04 100644
--- a/demo/src/pages/loading_bar/mod.rs
+++ b/demo/src/pages/loading_bar/mod.rs
@@ -6,15 +6,15 @@ use thaw::*;
 #[component]
 pub fn LoadingBarPage() -> impl IntoView {
     let loading_bar = use_loading_bar();
-    let start = move |_| {
+    let start = Callback::new(move |_| {
         loading_bar.start();
-    };
-    let finish = move |_| {
+    });
+    let finish = Callback::new(move |_| {
         loading_bar.finish();
-    };
-    let error = move |_| {
+    });
+    let error = Callback::new(move |_| {
         loading_bar.error();
-    };
+    });
     view! {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Loading Bar"</h1>
diff --git a/demo/src/pages/message/mod.rs b/demo/src/pages/message/mod.rs
index 608f65a..6d440ef 100644
--- a/demo/src/pages/message/mod.rs
+++ b/demo/src/pages/message/mod.rs
@@ -31,9 +31,9 @@ pub fn MessagePage() -> impl IntoView {
             </Alert>
             <Demo>
                 <Space>
-                    <Button on:click=success>"Success"</Button>
-                    <Button on:click=warning>"Warning"</Button>
-                    <Button on:click=error>"Error"</Button>
+                    <Button on_click=success>"Success"</Button>
+                    <Button on_click=warning>"Warning"</Button>
+                    <Button on_click=error>"Error"</Button>
                 </Space>
                 <DemoCode slot>
 
@@ -59,9 +59,9 @@ pub fn MessagePage() -> impl IntoView {
                             };
                             view! {
                                 <Space>
-                                    <Button on:click=success>"Success"</Button>
-                                    <Button on:click=warning>"Warning"</Button>
-                                    <Button on:click=error>"Error"</Button>
+                                    <Button on_click=success>"Success"</Button>
+                                    <Button on_click=warning>"Warning"</Button>
+                                    <Button on_click=error>"Error"</Button>
                                 </Space>
                             }
                     "#,
diff --git a/demo/src/pages/modal/mod.rs b/demo/src/pages/modal/mod.rs
index 3a3575a..c51287e 100644
--- a/demo/src/pages/modal/mod.rs
+++ b/demo/src/pages/modal/mod.rs
@@ -10,7 +10,7 @@ pub fn ModalPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Modal"</h1>
             <Demo>
-                <Button on:click=move |_| show.set(true)>"Open Modal"</Button>
+                <Button on_click=move |_| show.set(true)>"Open Modal"</Button>
                 <Modal title="title" show>
                     "hello"
                 </Modal>
@@ -20,7 +20,7 @@ pub fn ModalPage() -> impl IntoView {
                         r#"
                         let show = create_rw_signal(false);
     
-                        <Button on:click=move |_| show.set(true)>
+                        <Button on_click=move |_| show.set(true)>
                             "open modal"
                         </Button>
                         <Modal title="title" show>
diff --git a/demo/src/pages/time_picker/mod.rs b/demo/src/pages/time_picker/mod.rs
index dfe3b87..dee2dfa 100644
--- a/demo/src/pages/time_picker/mod.rs
+++ b/demo/src/pages/time_picker/mod.rs
@@ -11,7 +11,7 @@ pub fn TimePickerPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Time Picker"</h1>
             <Demo>
-                <TimePicker value />
+                <TimePicker value/>
                 <DemoCode slot>
 
                     {highlight_str!(
@@ -41,7 +41,9 @@ pub fn TimePickerPage() -> impl IntoView {
                 <tbody>
                     <tr>
                         <td>"value"</td>
-                        <td><Text code=true>"RwSignal<Time>"</Text></td>
+                        <td>
+                            <Text code=true>"RwSignal<Time>"</Text>
+                        </td>
                         <td></td>
                         <td></td>
                     </tr>
diff --git a/demo/src/pages/toast/mod.rs b/demo/src/pages/toast/mod.rs
index 29e368f..6757a70 100644
--- a/demo/src/pages/toast/mod.rs
+++ b/demo/src/pages/toast/mod.rs
@@ -93,7 +93,7 @@ pub fn ToastDemoPage() -> impl IntoView {
     };
     view! {
         <div style="margin: 20px">
-            <Button on:click=onclick>"hi"</Button>
+            <Button on_click=onclick>"hi"</Button>
         </div>
     }
 }
diff --git a/src/auto_complete/mod.rs b/src/auto_complete/mod.rs
index bea9313..6964993 100644
--- a/src/auto_complete/mod.rs
+++ b/src/auto_complete/mod.rs
@@ -75,7 +75,7 @@ pub fn AutoComplete(
             return;
         }
         let key = event.key();
-        if key == "ArrowDown".to_string() {
+        if key == *"ArrowDown" {
             select_option_index.update(|index| {
                 if *index == options.with_untracked(|options| options.len()) - 1 {
                     *index = 0
@@ -83,7 +83,7 @@ pub fn AutoComplete(
                     *index += 1
                 }
             });
-        } else if key == "ArrowUp".to_string() {
+        } else if key == *"ArrowUp" {
             select_option_index.update(|index| {
                 if *index == 0 {
                     *index = options.with_untracked(|options| options.len()) - 1;
@@ -91,7 +91,7 @@ pub fn AutoComplete(
                     *index -= 1
                 }
             });
-        } else if key == "Enter".to_string() {
+        } else if key == *"Enter" {
             let option_value = options.with_untracked(|options| {
                 let index = select_option_index.get_untracked();
                 if options.len() > index {
@@ -175,6 +175,7 @@ pub fn AutoComplete(
                                             "thaw-auto-complete__menu-item--selected",
                                             move || index == select_option_index.get(),
                                         )
+
                                         on:click=on_click
                                         on:mousedown=on_mousedown
                                         on:mouseenter=on_mouseenter
diff --git a/src/calendar/mod.rs b/src/calendar/mod.rs
index b3a300d..9626f7c 100644
--- a/src/calendar/mod.rs
+++ b/src/calendar/mod.rs
@@ -121,8 +121,7 @@ pub fn Calendar(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) -> i
                         show_date
                             .with(|date| {
                                 format!(
-                                    "{} {}",
-                                    Month::try_from(date.month() as u8).unwrap().name(),
+                                    "{} {}", Month::try_from(date.month() as u8).unwrap().name(),
                                     date.year(),
                                 )
                             })
@@ -175,11 +174,11 @@ fn CalendarItem(
         let date = date.clone();
         move |_| value.with(|value_date| value_date.as_ref() == Some(date.deref()))
     });
-    let weekday_str = vec!["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    let weekday_str = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     let on_click = {
         let date = date.clone();
         move |_| {
-            value.set(Some(date.deref().clone()));
+            value.set(Some(*date.deref()));
         }
     };
     view! {
diff --git a/src/color_picker/mod.rs b/src/color_picker/mod.rs
index a046147..4c99756 100644
--- a/src/color_picker/mod.rs
+++ b/src/color_picker/mod.rs
@@ -174,9 +174,8 @@ fn ColorPanel(hue: ReadSignal<u16>, sv: RwSignal<(f64, f64)>) -> impl IntoView {
                 class="thaw-color-picker-popover__handle"
                 style=move || {
                     format!(
-                        "left: calc({}% - 6px); bottom: calc({}% - 6px)",
-                        sv.get().0 * 100.0,
-                        sv.get().1 * 100.0,
+                        "left: calc({}% - 6px); bottom: calc({}% - 6px)", sv.get().0 * 100.0, sv
+                        .get().1 * 100.0,
                     )
                 }
             >
diff --git a/src/message/message_provider.rs b/src/message/message_provider.rs
index d0465e0..3967abb 100644
--- a/src/message/message_provider.rs
+++ b/src/message/message_provider.rs
@@ -24,8 +24,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
         <Provider value=MessageInjection::new(
             message_list,
         )>
-            {children()}
-            <Teleport>
+            {children()} <Teleport>
                 <div class="thaw-message-container">
                     <For
                         each=move || message_list.get()
diff --git a/src/slider/mod.rs b/src/slider/mod.rs
index 4f09f55..75f9cc6 100644
--- a/src/slider/mod.rs
+++ b/src/slider/mod.rs
@@ -86,9 +86,8 @@ pub fn Slider(
                 class="thaw-slider-handle"
                 style=move || {
                     format!(
-                        "left: {}%; transform: translateX(-{}%)",
-                        percentage.get(),
-                        percentage.get(),
+                        "left: {}%; transform: translateX(-{}%)", percentage.get(), percentage
+                        .get(),
                     )
                 }
             >
diff --git a/src/time_picker/mod.rs b/src/time_picker/mod.rs
index 68a655f..d72ac3e 100644
--- a/src/time_picker/mod.rs
+++ b/src/time_picker/mod.rs
@@ -80,7 +80,12 @@ pub fn TimePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveTime>>) ->
                 </Input>
             </div>
             <Follower slot show=is_show_panel placement=FollowerPlacement::BottomStart>
-                <Panel selected_time=panel_selected_time close_panel time_picker_ref comp_ref=panel_ref/>
+                <Panel
+                    selected_time=panel_selected_time
+                    close_panel
+                    time_picker_ref
+                    comp_ref=panel_ref
+                />
             </Follower>
         </Binder>
     }
@@ -116,12 +121,12 @@ fn Panel(
         });
         css_vars
     });
-    let now = move |_| {
+    let now = Callback::new(move |_| {
         close_panel.call(Some(now_time()));
-    };
-    let ok = move |_| {
+    });
+    let ok = Callback::new(move |_| {
         close_panel.call(selected_time.get_untracked());
-    };
+    });
 
     let panel_ref = create_node_ref::<html::Div>();
     #[cfg(any(feature = "csr", feature = "hydrate"))]
@@ -170,7 +175,6 @@ fn Panel(
                 <div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
 
                     {(0..24)
-                        .into_iter()
                         .map(|hour| {
                             let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
                             let on_click = move |_| {
@@ -191,12 +195,12 @@ fn Panel(
                                 <PanelTimeItem value=hour on:click=on_click is_selected comp_ref/>
                             }
                         })
-                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                        .collect_view()}
+                    <div class="thaw-time-picker-panel__time-padding"></div>
                 </div>
                 <div class="thaw-time-picker-panel__time-minute" ref=minute_ref>
 
                     {(0..60)
-                        .into_iter()
                         .map(|minute| {
                             let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
                             let on_click = move |_| {
@@ -217,12 +221,12 @@ fn Panel(
                                 <PanelTimeItem value=minute on:click=on_click is_selected comp_ref/>
                             }
                         })
-                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                        .collect_view()}
+                    <div class="thaw-time-picker-panel__time-padding"></div>
                 </div>
                 <div class="thaw-time-picker-panel__time-second" ref=second_ref>
 
                     {(0..60)
-                        .into_iter()
                         .map(|second| {
                             let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
                             let on_click = move |_| {
@@ -243,7 +247,8 @@ fn Panel(
                                 <PanelTimeItem value=second on:click=on_click is_selected comp_ref/>
                             }
                         })
-                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                        .collect_view()}
+                    <div class="thaw-time-picker-panel__time-padding"></div>
                 </div>
             </div>
             <div class="thaw-time-picker-panel__footer">
diff --git a/src/typography/text.rs b/src/typography/text.rs
index a878567..bc49d0e 100644
--- a/src/typography/text.rs
+++ b/src/typography/text.rs
@@ -17,12 +17,12 @@ pub fn Text(#[prop(optional)] code: bool, children: Children) -> impl IntoView {
     });
 
     if code {
-        return view! {
+        view! {
             <code class="thaw-text thaw-text--code" style=move || css_vars.get()>
                 {children()}
             </code>
         }
-        .into_any();
+        .into_any()
     } else {
         view! { <span class="thaw-text">{children()}</span> }.into_any()
     }