diff --git a/client/src/lib.rs b/client/src/lib.rs
index 1470aa4..295aa06 100644
--- a/client/src/lib.rs
+++ b/client/src/lib.rs
@@ -178,6 +178,9 @@ fn tasks_page() -> El {
         .child(El::new("button").text("about").classes(&["underline", "hover:opacity-50", "m-2"]).on("click", move |_| {
             ROUTER.with(|s| { s.borrow().navigate("/about"); });
         }))
+        .child(El::new("button").text("new page").classes(&["underline", "hover:opacity-50", "m-2"]).on("click", move |_| {
+            ROUTER.with(|s| { s.borrow().navigate("/newpage"); });
+        }))
         .child(container_component());
     layout_component(&[body])
 }
@@ -191,6 +194,29 @@ fn about_page() -> El {
     layout_component(&[body])
 }
 
+fn new_page() -> El {
+
+    let signal_text = Signal::new("-".to_owned());
+
+    let body = El::new("div")
+        .child(El::new("button").text("tasks").classes(&["underline", "hover:opacity-50", "m-2"]).on("click", move |_| {
+            ROUTER.with(|s| { s.borrow().navigate("/tasks"); });
+        }))
+        .child(El::new("br"))
+        .child(El::new("button").text("api call").classes(&["bg-blue-500", "text-white", "p-2", "rounded", "hover:opacity-50", "m-2"]).on_async("click", move |_| async {
+
+            let float = Js::invoke("return Math.random()", &[]).to_num().unwrap();
+            let url = format!("https://pokeapi.co/api/v2/pokemon/{}", (float * 151f64).round());
+            let result = fetch_json("GET", &url, None).await.unwrap();
+            signal_text.set(result["name"].to_string());
+        }))
+        .child(El::new("span").text("-").classes(&["ml-2"]).once(move |el| {
+            signal_text.on(move |v| { Js::invoke("{}.innerHTML = {}", &[el.into(), v.into()]); });
+        }))
+        .child(El::new("div").text("This is the new page").classes(&["m-2"]));
+    layout_component(&[body])
+}
+
 fn layout_component(children: &[El]) -> El {
     El::new("div")
         .classes(&["m-2", "mt-8", "text-center"])
@@ -203,6 +229,6 @@ pub fn main() {
     std::panic::set_hook(Box::new(|e| { Js::invoke("console.log({})", &[e.to_string().into()]); }));
 
     // init router
-    let pages = &[Page::new("/tasks", tasks_page()), Page::new("/about", about_page())];
+    let pages = &[Page::new("/tasks", tasks_page()), Page::new("/about", about_page()), Page::new("/newpage", new_page())];
     ROUTER.with(|s| { *s.borrow_mut() = Router::new("body", pages); });
 }