diff --git a/README.md b/README.md
index 7a3d2e8..e359911 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,6 @@
 # rust-projects
-Some simple rust projects for learning
+
+This is a playground for quick-and-dirty projects in Rust for learning. Once a
+project matures, I usually moves it to its own repository.
+
+1. [Leptos UI](./leptos) a simple SPA using leptos.
diff --git a/leptos/Cargo.toml b/leptos/Cargo.toml
index 44fa2c1..e3455a4 100644
--- a/leptos/Cargo.toml
+++ b/leptos/Cargo.toml
@@ -6,15 +6,19 @@ edition = "2024"
 [dependencies]
 codee = { version = "0.3.0", features = ["json_serde"] }
 console_error_panic_hook = "0.1.7"
-leptos = { version = "0.7.7", features = ["csr", "nightly", "tracing"] }
+leptos = { version = "0.7.7", features = ["csr", "tracing"] }
 leptos-qr-scanner = { git = "https://github.com/dilawar/leptos-qr-scanner" }
-leptos-use = { version = "0.15.7", features = ["storage", "docs" ] }
+leptos-use = { version = "0.15.7", features = [
+  "storage",
+  "docs",
+  "use_user_media",
+] }
 leptos_meta = "0.7.7"
 leptos_router = { version = "0.7.7", features = ["tracing"] }
 reactive_stores = "0.1.8"
 serde = { workspace = true, features = ["derive"] }
 stylance = "0.5.5"
-thaw = { version = "0.4.4", features = ["csr", "nightly"] }
+thaw = { version = "0.4.4", features = ["csr"] }
 tracing.workspace = true
 tracing-subscriber.workspace = true
 tracing-subscriber-wasm = "0.1.0"
diff --git a/leptos/README.md b/leptos/README.md
new file mode 100644
index 0000000..2030146
--- /dev/null
+++ b/leptos/README.md
@@ -0,0 +1,6 @@
+# Leptos UI
+
+A simple SPA using leptos. 
+
+- A QR Scanner
+- A Audio Recorder
diff --git a/leptos/rust-toolchain.toml b/leptos/rust-toolchain.toml
index 962e35d..e7b48e6 100644
--- a/leptos/rust-toolchain.toml
+++ b/leptos/rust-toolchain.toml
@@ -1,3 +1,2 @@
 [toolchain]
-channel = "nightly"
 targets = ["wasm32-unknwon-unknown"]
diff --git a/leptos/src/app.rs b/leptos/src/app.rs
index 582168b..e8546d5 100644
--- a/leptos/src/app.rs
+++ b/leptos/src/app.rs
@@ -26,6 +26,7 @@ pub fn App() -> impl IntoView {
                     <a href="/">"Home"</a>
                     <a href="/form">"Form"</a>
                     <a href="/qr">"QR Scanner"</a>
+                    <a href="/audio">"Audio Rec"</a>
                     <Show when=move || { logged_in.get() }>
                         <login::Logout />
                     </Show>
@@ -34,6 +35,7 @@ pub fn App() -> impl IntoView {
                     <Routes fallback=|| "Page not found.">
                         <Route path=path!("/") view=Home />
                         <Route path=path!("/qr") view=QrScanner />
+                        <Route path=path!("/audio") view=AudioStream />
                     </Routes>
                 </main>
                 <div class=styles::loading>
diff --git a/leptos/src/components/audio.rs b/leptos/src/components/audio.rs
new file mode 100644
index 0000000..18aa5d8
--- /dev/null
+++ b/leptos/src/components/audio.rs
@@ -0,0 +1,61 @@
+//! Audio Streamer component
+
+use leptos::prelude::*;
+use leptos_use::{use_user_media_with_options, UseUserMediaOptions, UseUserMediaReturn};
+use thaw::*;
+
+use crate::css::styles;
+
+#[component]
+pub fn AudioStream() -> impl IntoView {
+    let node = NodeRef::<leptos::html::Audio>::new();
+
+    let start_rec = RwSignal::new(true);
+    let result = RwSignal::new_local("".to_string());
+
+    // Create options to fetch only audio stream.
+    let options = UseUserMediaOptions::default().video(false).audio(true);
+
+    let UseUserMediaReturn {
+        stream,
+        start,
+        stop,
+        ..
+    } = use_user_media_with_options(options);
+
+    // start/stop recording 
+    let _effect = Effect::watch(
+        move || start_rec.get(),
+        move |val, _prev, _| {
+            if !val {
+                tracing::info!("Stopping recording.");
+                stop();
+            } else {
+                tracing::info!("Starting recording.");
+                start();
+            }
+        },
+        true, /* Trigger it as soon as possible */
+    );
+
+    Effect::new(move |_| {
+        tracing::debug!("State of the recording: {}.", start_rec.get_untracked());
+        node.get().map(|v| match stream.get() {
+            Some(Ok(s)) => {
+                tracing::debug!("Setting stream {s:?} to src...");
+                v.set_src_object(Some(&s));
+            },
+            Some(Err(e)) => tracing::error!("Failed to get media stream: {e:?}"),
+            None => tracing::debug!("No stream yet"),
+        });
+    });
+
+    view! {
+        <Space vertical=true>
+            // Eventually I was to draw something related to audio stream here.
+            <canvas />
+            <audio node_ref=node controls  />
+            <Switch checked=start_rec label="Start Record" />
+        </Space>
+    }
+}
diff --git a/leptos/src/components/mod.rs b/leptos/src/components/mod.rs
index 48cd666..8ef4491 100644
--- a/leptos/src/components/mod.rs
+++ b/leptos/src/components/mod.rs
@@ -8,3 +8,6 @@ pub use login::*;
 
 pub(crate) mod qr;
 pub use qr::*;
+
+pub(crate) mod audio;
+pub use audio::*;