diff --git a/Cargo.toml b/Cargo.toml
index 091f8f8..349f4c4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,5 +16,5 @@ thaw_components = { version = "0.1.1", path = "./thaw_components" }
 thaw_macro = { version = "0.1.0", path = "./thaw_macro" }
 thaw_utils = { version = "0.0.3", path = "./thaw_utils" }
 
-leptos = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
-leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
\ No newline at end of file
+leptos = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
+leptos_meta = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
\ No newline at end of file
diff --git a/demo/Cargo.toml b/demo/Cargo.toml
index 7c357c5..e84b502 100644
--- a/demo/Cargo.toml
+++ b/demo/Cargo.toml
@@ -9,14 +9,14 @@ edition = "2021"
 [dependencies]
 leptos = { workspace = true }
 leptos_meta = { workspace = true }
-leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "ae0dc13c" }
+leptos_router = { git = "https://github.com/leptos-rs/leptos", rev = "e507945c" }
 thaw = { path = "../thaw" }
 demo_markdown = { path = "../demo_markdown" }
 icondata = "0.3.0"
 palette = "0.7.4"
 chrono = "0.4.33"
 cfg-if = "1.0.0"
-leptos-use = "0.10.10"
+# leptos-use = "0.10.10"
 send_wrapper = "0.6"
 
 [features]
diff --git a/demo/src/app.rs b/demo/src/app.rs
index 1b483a7..b10d97d 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -30,7 +30,7 @@ pub fn App() -> impl IntoView {
 
 #[component]
 fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
-    let loading_bar = use_loading_bar();
+    let loading_bar = LoadingBarInjection::expect_use();
     _ = is_routing.watch(move |is_routing| {
         if *is_routing {
             loading_bar.start();
diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index 58d3085..7bba7e9 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
                 <Button
                     appearance=ButtonAppearance::Primary
                     on_click=move |_| {
-                    let navigate = use_navigate();
+                        let navigate = use_navigate();
                         navigate("/components/button", Default::default());
                     }
                 >
diff --git a/demo_markdown/docs/loading_bar/mod.md b/demo_markdown/docs/loading_bar/mod.md
index 56e1a68..19badd2 100644
--- a/demo_markdown/docs/loading_bar/mod.md
+++ b/demo_markdown/docs/loading_bar/mod.md
@@ -10,16 +10,16 @@
 </MessageBar>
 
 ```rust demo
-let loading_bar = use_loading_bar();
-let start = Callback::new(move |_| {
+let loading_bar = LoadingBarInjection::expect_use();
+let start = move |_| {
     loading_bar.start();
-});
-let finish = Callback::new(move |_| {
+};
+let finish = move |_| {
     loading_bar.finish();
-});
-let error = Callback::new(move |_| {
+};
+let error = move |_| {
     loading_bar.error();
-});
+};
 
 view! {
     <Space>
diff --git a/thaw/Cargo.toml b/thaw/Cargo.toml
index 75b0561..aa09cea 100644
--- a/thaw/Cargo.toml
+++ b/thaw/Cargo.toml
@@ -28,7 +28,7 @@ web-sys = { version = "0.3.69", features = [
 wasm-bindgen = "0.2.92"
 icondata_core = "0.1.0"
 icondata_ai = "0.0.10"
-uuid = { version = "1.7.0", features = ["v4"] }
+uuid = { version = "1.10.0", features = ["v4", "js"] }
 cfg-if = "1.0.0"
 chrono = "0.4.35"
 palette = "0.7.5"
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index cf6eb4e..a870470 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -132,9 +132,9 @@ pub fn AutoComplete(
     //}
     //}
     //};
-    input_ref.on_load(move |_| {
-        comp_ref.load(AutoCompleteRef { input_ref });
-    });
+    comp_ref.load(AutoCompleteRef { input_ref });
+    // input_ref.on_load(move |_| {
+    // });
 
     view! {
             <Binder target_ref=auto_complete_ref>
diff --git a/thaw/src/badge/badge.rs b/thaw/src/badge/badge.rs
index 699876c..9e7bb24 100644
--- a/thaw/src/badge/badge.rs
+++ b/thaw/src/badge/badge.rs
@@ -1,5 +1,4 @@
-use leptos::prelude::*;
-use thaw_components::OptionComp;
+use leptos::{either::Either, prelude::*};
 use thaw_utils::{class_list, mount_style};
 
 #[component]
@@ -26,9 +25,13 @@ pub fn Badge(
             move || format!("thaw-badge--{}", color.get().as_str()),
             class
         ]>
-            <OptionComp value=children let:children>
-                {children()}
-            </OptionComp>
+            {
+                if let Some(children) = children {
+                    Either::Left(children())
+                } else {
+                    Either::Right(())
+                }
+            }
         </div>
     }
 }
diff --git a/thaw/src/loading_bar/loading_bar_provider.rs b/thaw/src/loading_bar/loading_bar_provider.rs
index 2b3f7f0..d01b7a4 100644
--- a/thaw/src/loading_bar/loading_bar_provider.rs
+++ b/thaw/src/loading_bar/loading_bar_provider.rs
@@ -26,6 +26,10 @@ pub struct LoadingBarInjection {
 impl Copy for LoadingBarInjection {}
 
 impl LoadingBarInjection {
+    pub fn expect_use() -> Self {
+        expect_context::<Self>()
+    }
+
     pub fn start(&self) {
         if let Some(loading_bar_ref) = self.loading_bar_ref.get_untracked() {
             loading_bar_ref.start();
@@ -44,7 +48,3 @@ impl LoadingBarInjection {
         }
     }
 }
-
-pub fn use_loading_bar() -> LoadingBarInjection {
-    expect_context::<LoadingBarInjection>()
-}
diff --git a/thaw/src/loading_bar/mod.rs b/thaw/src/loading_bar/mod.rs
index dd07356..bd699ea 100644
--- a/thaw/src/loading_bar/mod.rs
+++ b/thaw/src/loading_bar/mod.rs
@@ -1,6 +1,6 @@
 mod loading_bar_provider;
 
-pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
+pub use loading_bar_provider::*;
 
 use crate::ConfigInjection;
 use leptos::{html, prelude::*};
@@ -26,7 +26,7 @@ impl LoadingBarRef {
 }
 
 #[component]
-pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
+fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
     mount_style("loading-bar", include_str!("./loading-bar.css"));
     let config_provider = ConfigInjection::use_();
     let loading_bar_ref = NodeRef::<html::Div>::new();
@@ -83,7 +83,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
         <div
             class="thaw-config-provider thaw-loading-bar-container"
             data-thaw-id=config_provider.id().clone()
-            style=move || (!loading.get()).then_some("display: none;").unwrap_or_default()
+            style=move || if loading.get() { "" } else { "display: none;" }
         >
             <div
                 class="thaw-loading-bar"
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index 44a07f0..2c16954 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -105,6 +105,7 @@ impl SpaceJustify {
 
 #[cfg(test)]
 mod test {
+    #[test]
     fn main() {
         use leptos::prelude::*;
         use super::Space;
diff --git a/thaw_components/Cargo.toml b/thaw_components/Cargo.toml
index 636076a..8942e83 100644
--- a/thaw_components/Cargo.toml
+++ b/thaw_components/Cargo.toml
@@ -16,7 +16,7 @@ leptos = { workspace = true }
 thaw_utils = { workspace = true }
 web-sys = { version = "0.3.69", features = ["DomRect"] }
 cfg-if = "1.0.0"
-uuid = { version = "1.7.0", features = ["v4"] }
+uuid = { version = "1.10.0", features = ["v4", "js"] }
 send_wrapper = "0.6"
 
 [features]
diff --git a/thaw_components/src/teleport/mod.rs b/thaw_components/src/teleport/mod.rs
index 06dacdd..61421fc 100644
--- a/thaw_components/src/teleport/mod.rs
+++ b/thaw_components/src/teleport/mod.rs
@@ -30,28 +30,35 @@ pub fn Teleport(
             let render_root = element;
             let mut mountable = render_root.build();
             mountable.mount(&mount, None);
-            // TODO
-            // on_cleanup(move || {
-            //     mountable.unmount();
-            // });
+            on_cleanup({
+                let mut mountable = send_wrapper::SendWrapper::new(mountable);
+                move || {
+                    mountable.unmount();
+                }
+            });
         } else if let Some(children) = children.take() {
             let container = document()
                 .create_element("div")
                 .expect("element creation to work");
 
-            thaw_utils::with_hydration_off(|| {
-                // use leptos::leptos_dom::Mountable;
-                // let _ = container.append_child(&children().into_view().get_mountable_node());
+            let mountable = thaw_utils::with_hydration_off(|| {
                 let view = children().into_view();
                 let mut mountable = view.build();
                 mountable.mount(&container, None);
+                mountable
             });
 
             let render_root = container;
             let _ = mount.append_child(&render_root);
-            // on_cleanup(move || {
-            //     let _ = mount.remove_child(&render_root);
-            // });
+            on_cleanup({
+                let mount = send_wrapper::SendWrapper::new(mount);
+                let render_root = send_wrapper::SendWrapper::new(render_root);
+                let mut mountable = send_wrapper::SendWrapper::new(mountable);
+                move || {
+                    mountable.unmount();
+                    let _ = mount.remove_child(&render_root);
+                }
+            });
         }
     })));
 
diff --git a/thaw_utils/Cargo.toml b/thaw_utils/Cargo.toml
index 584f4ea..3f3613e 100644
--- a/thaw_utils/Cargo.toml
+++ b/thaw_utils/Cargo.toml
@@ -13,7 +13,7 @@ license = "MIT"
 
 [dependencies]
 leptos = { workspace = true }
-leptos_meta = { version = "0.6.10", optional = true }
+leptos_meta = { workspace = true, optional = true }
 web-sys = "0.3.69"
 wasm-bindgen = "0.2.92"
 cfg-if = "1.0.0"
diff --git a/thaw_utils/src/hooks/use_lock_html_scroll.rs b/thaw_utils/src/hooks/use_lock_html_scroll.rs
index 3e81714..266ba5d 100644
--- a/thaw_utils/src/hooks/use_lock_html_scroll.rs
+++ b/thaw_utils/src/hooks/use_lock_html_scroll.rs
@@ -3,7 +3,6 @@ use leptos::reactive_graph::wrappers::read::MaybeSignal;
 pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
     #[cfg(any(feature = "csr", feature = "hydrate"))]
     {
-        // use leptos::{create_render_effect, document, on_cleanup, SignalGet, StoredValue};
         use leptos::prelude::{
             document, effect::RenderEffect, on_cleanup, traits::Get, StoredValue,
         };
@@ -19,7 +18,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
             });
         };
 
-        let _ = RenderEffect::new(move |_| {
+        let effect = RenderEffect::new(move |_| {
             if is_lock.get() {
                 let head = document().head().expect("head no exist");
                 let style = document()
@@ -36,7 +35,10 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
             }
         });
 
-        on_cleanup(remove_style_el)
+        on_cleanup(move || {
+            drop(effect);
+            remove_style_el();
+        });
     }
 
     #[cfg(not(any(feature = "csr", feature = "hydrate")))]
diff --git a/thaw_utils/src/hooks/use_next_frame.rs b/thaw_utils/src/hooks/use_next_frame.rs
index 1e13781..8f5f408 100644
--- a/thaw_utils/src/hooks/use_next_frame.rs
+++ b/thaw_utils/src/hooks/use_next_frame.rs
@@ -4,9 +4,10 @@
 // };
 
 use leptos::{
-    prelude::{request_animation_frame_with_handle, AnimationFrameRequestHandle},
+    prelude::window,
     reactive_graph::owner::{on_cleanup, StoredValue},
 };
+use wasm_bindgen::{closure::Closure, JsCast, JsValue, UnwrapThrowExt};
 
 #[derive(Clone)]
 pub struct NextFrame(StoredValue<Option<AnimationFrameRequestHandle>>);
@@ -35,10 +36,9 @@ impl NextFrame {
 
         let next_frame_hadnle = self.0.clone();
         let handle = request_animation_frame_with_handle(move || {
-            let handle = request_animation_frame_with_handle(cb).unwrap();
+            let handle = request_animation_frame_with_handle(cb);
             next_frame_hadnle.set_value(Some(handle));
-        })
-        .unwrap();
+        });
         self.0.set_value(Some(handle));
     }
 
@@ -50,3 +50,33 @@ impl NextFrame {
         });
     }
 }
+
+#[derive(Copy, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct AnimationFrameRequestHandle(i32);
+
+impl AnimationFrameRequestHandle {
+    pub fn cancel(&self) {
+        let _ = window().cancel_animation_frame(self.0);
+    }
+}
+
+fn request_animation_frame_with_handle(cb: impl FnOnce() + 'static) -> AnimationFrameRequestHandle {
+    #[inline(never)]
+    fn raf(cb: JsValue) -> Result<AnimationFrameRequestHandle, JsValue> {
+        window()
+            .request_animation_frame(cb.as_ref().unchecked_ref())
+            .map(AnimationFrameRequestHandle)
+    }
+
+    raf(closure_once(cb)).expect_throw("request_animation_frame_with_handle")
+}
+
+fn closure_once(cb: impl FnOnce() + 'static) -> JsValue {
+    let mut wrapped_cb: Option<Box<dyn FnOnce()>> = Some(Box::new(cb));
+    let closure = Closure::new(move || {
+        if let Some(cb) = wrapped_cb.take() {
+            cb()
+        }
+    });
+    closure.into_js_value()
+}