diff --git a/Cargo.lock b/Cargo.lock
index 03630d4..b7c5468 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2037,6 +2037,41 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "leptos_router"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4f1784486ebf36805dac22faee21e3e610aa64b6662a7386f065eeec27ae8"
+dependencies = [
+ "any_spawner",
+ "either_of",
+ "futures",
+ "gloo-net",
+ "js-sys",
+ "leptos",
+ "leptos_router_macro",
+ "once_cell",
+ "or_poisoned",
+ "reactive_graph",
+ "send_wrapper",
+ "tachys",
+ "thiserror 2.0.4",
+ "url",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "leptos_router_macro"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eee7ecef3f1c69b51864190c564e4873d84f200e44efb37934208f9525f02a5f"
+dependencies = [
+ "proc-macro-error2",
+ "proc-macro2",
+ "quote",
+]
+
 [[package]]
 name = "leptos_server"
 version = "0.7.0"
@@ -2534,6 +2569,7 @@ dependencies = [
  "futures",
  "leptos",
  "leptos-use",
+ "leptos_router",
  "opendal",
  "parquet",
  "serde",
diff --git a/Cargo.toml b/Cargo.toml
index d904cfb..4144130 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -43,6 +43,7 @@ leptos-use = { version = "0.14.0", features = [
 	"use_websocket",
 ] }
 codee = { version = "0.2", features = ["msgpack_serde"] }
+leptos_router = { version = "0.7.0", features = ["nightly"] }
 
 [profile.release]
 strip = true
diff --git a/src/file_reader.rs b/src/file_reader.rs
index 50163fd..546b301 100644
--- a/src/file_reader.rs
+++ b/src/file_reader.rs
@@ -1,6 +1,7 @@
 use bytes::Bytes;
 use leptos::prelude::*;
 use leptos::wasm_bindgen::{prelude::Closure, JsCast};
+use leptos_router::hooks::query_signal;
 use opendal::{services::Http, services::S3, Operator};
 use web_sys::{js_sys, Url};
 
@@ -34,25 +35,101 @@ pub fn FileReader(
     set_file_bytes: WriteSignal<Option<Bytes>>,
     set_file_name: WriteSignal<String>,
 ) -> impl IntoView {
-    let default_url = "https://raw.githubusercontent.com/RobinL/iris_parquet/main/gridwatch/gridwatch_2023-01-08.parquet";
-    let (url, set_url) = signal(default_url.to_string());
-    let (active_tab, set_active_tab) = signal("file".to_string());
+    let (active_tab, set_active_tab) = query_signal::<String>("tab");
+
+    let (url_query, set_url_query) = query_signal::<String>("url");
+    let default_url = {
+        if let Some(url) = url_query.get() {
+            url
+        } else {
+            "https://raw.githubusercontent.com/RobinL/iris_parquet/main/gridwatch/gridwatch_2023-01-08.parquet".to_string()
+        }
+    };
+    let (url, set_url) = signal(default_url);
+
     let (s3_endpoint, _) = signal(get_stored_value(
         S3_ENDPOINT_KEY,
         "https://s3.amazonaws.com",
     ));
     let (s3_access_key_id, _) = signal(get_stored_value(S3_ACCESS_KEY_ID_KEY, ""));
     let (s3_secret_key, _) = signal(get_stored_value(S3_SECRET_KEY_KEY, ""));
-    let (s3_bucket, set_s3_bucket) = signal(get_stored_value(S3_BUCKET_KEY, ""));
-    let (s3_region, set_s3_region) = signal(get_stored_value(S3_REGION_KEY, "us-east-1"));
-    let (s3_file_path, set_s3_file_path) = signal(get_stored_value(S3_FILE_PATH_KEY, ""));
+
+    let (s3_bucket_query, set_s3_bucket_query) = query_signal::<String>("bucket");
+    let default_bucket = {
+        if let Some(bucket) = s3_bucket_query.get() {
+            bucket
+        } else {
+            get_stored_value(S3_BUCKET_KEY, "")
+        }
+    };
+    let (s3_bucket, set_s3_bucket) = signal(default_bucket);
+
+    let (s3_region_query, set_s3_region_query) = query_signal::<String>("region");
+    let default_region = {
+        if let Some(region) = s3_region_query.get() {
+            region
+        } else {
+            get_stored_value(S3_REGION_KEY, "us-east-1")
+        }
+    };
+    let (s3_region, set_s3_region) = signal(default_region);
+
+    let (s3_file_path_query, set_s3_file_path_query) = query_signal::<String>("file_path");
+    let default_file_path = {
+        if let Some(file_path) = s3_file_path_query.get() {
+            file_path
+        } else {
+            get_stored_value(S3_FILE_PATH_KEY, "")
+        }
+    };
+    let (s3_file_path, set_s3_file_path) = signal(default_file_path);
+
     let (is_folded, set_is_folded) = signal(false);
 
-    let set_active_tab = move |tab: &str| {
-        if active_tab.get() == tab {
-            set_is_folded.set(!is_folded.get());
+    Effect::watch(
+        url,
+        move |url, _, _| {
+            let Some(active_tab) = active_tab.get() else {
+                return;
+            };
+            if active_tab == "url" {
+                set_url_query.set(Some(url.clone()));
+            }
+        },
+        true,
+    );
+
+    let set_active_tab_fn = move |tab: &str| {
+        match tab {
+            "file" => {
+                set_url_query.set(None);
+                set_s3_bucket_query.set(None);
+                set_s3_region_query.set(None);
+                set_s3_file_path_query.set(None);
+            }
+            "url" => {
+                set_url_query.set(Some(url.get()));
+                set_s3_bucket_query.set(None);
+                set_s3_region_query.set(None);
+                set_s3_file_path_query.set(None);
+            }
+            "s3" => {
+                set_url_query.set(None);
+                set_s3_bucket_query.set(Some(s3_bucket.get()));
+                set_s3_region_query.set(Some(s3_region.get()));
+                set_s3_file_path_query.set(Some(s3_file_path.get()));
+            }
+            _ => {}
+        }
+        if let Some(active_t) = active_tab.get() {
+            if active_t == tab {
+                set_is_folded.set(!is_folded.get());
+            } else {
+                set_active_tab.set(Some(tab.to_string()));
+                set_is_folded.set(false);
+            }
         } else {
-            set_active_tab.set(tab.to_string());
+            set_active_tab.set(Some(tab.to_string()));
             set_is_folded.set(false);
         }
     };
@@ -85,8 +162,7 @@ pub fn FileReader(
         set_file_name.set(table_name);
     };
 
-    let on_url_submit = move |ev: web_sys::SubmitEvent| {
-        ev.prevent_default();
+    let on_url_submit = move || {
         let url_str = url.get();
         set_error_message.set(None);
 
@@ -128,8 +204,7 @@ pub fn FileReader(
         });
     };
 
-    let on_s3_submit = move |ev: web_sys::SubmitEvent| {
-        ev.prevent_default();
+    let on_s3_submit = move || {
         set_error_message.set(None);
 
         let endpoint = s3_endpoint.get();
@@ -181,6 +256,15 @@ pub fn FileReader(
         });
     };
 
+    match active_tab.get() {
+        Some(tab) => match tab.as_str() {
+            "url" => on_url_submit(),
+            "s3" => on_s3_submit(),
+            _ => {}
+        },
+        None => set_active_tab_fn("file"),
+    }
+
     let on_s3_bucket_change = move |ev| {
         let value = event_target_value(&ev);
         save_to_storage(S3_BUCKET_KEY, &value);
@@ -206,48 +290,51 @@ pub fn FileReader(
                     <button
                         class=move || {
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
-                            if active_tab.get() == "file" {
-                                format!("{} border-blue-500 text-blue-600", base)
-                            } else {
-                                format!(
-                                    "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                                    base,
-                                )
+                            if let Some(active_t) = active_tab.get() {
+                                if active_t == "file" {
+                                    return format!("{} border-blue-500 text-blue-600", base);
+                                }
                             }
+                            format!(
+                                "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                                base,
+                            )
                         }
-                        on:click=move |_| set_active_tab("file")
+                        on:click=move |_| set_active_tab_fn("file")
                     >
                         "From file"
                     </button>
                     <button
                         class=move || {
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
-                            if active_tab.get() == "url" {
-                                format!("{} border-blue-500 text-blue-600", base)
-                            } else {
-                                format!(
-                                    "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                                    base,
-                                )
+                            if let Some(active_t) = active_tab.get() {
+                                if active_t == "url" {
+                                    return format!("{} border-blue-500 text-blue-600", base);
+                                }
                             }
+                            format!(
+                                "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                                base,
+                            )
                         }
-                        on:click=move |_| set_active_tab("url")
+                        on:click=move |_| set_active_tab_fn("url")
                     >
                         "From URL"
                     </button>
                     <button
                         class=move || {
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
-                            if active_tab.get() == "s3" {
-                                format!("{} border-blue-500 text-blue-600", base)
-                            } else {
-                                format!(
-                                    "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                                    base,
-                                )
+                            if let Some(active_t) = active_tab.get() {
+                                if active_t == "s3" {
+                                    return format!("{} border-blue-500 text-blue-600", base);
+                                }
                             }
+                            format!(
+                                "{} border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                                base,
+                            )
                         }
-                        on:click=move |_| set_active_tab("s3")
+                        on:click=move |_| set_active_tab_fn("s3")
                     >
                         "From S3"
                     </button>
@@ -260,8 +347,13 @@ pub fn FileReader(
                 } else {
                     "max-h-[500px] overflow-hidden transition-all duration-300 ease-in-out p-6"
                 };
-                match active_tab.get().as_str() {
+                let active_tab = active_tab.get();
+                let Some(active_tab) = active_tab else {
+                    return ().into_any();
+                };
+                match active_tab.as_str() {
                     "file" => {
+
                         view! {
                             <div class=move || transition_class.to_string()>
                                 <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center space-y-4">
@@ -290,7 +382,13 @@ pub fn FileReader(
                         view! {
                             <div class=move || transition_class.to_string()>
                                 <div class="h-full flex items-center">
-                                    <form on:submit=on_url_submit class="w-full">
+                                    <form
+                                        on:submit=move |ev| {
+                                            ev.prevent_default();
+                                            on_url_submit();
+                                        }
+                                        class="w-full"
+                                    >
                                         <div class="flex space-x-2">
                                             <input
                                                 type="url"
@@ -321,7 +419,13 @@ pub fn FileReader(
                     "s3" => {
                         view! {
                             <div class=move || transition_class.to_string()>
-                                <form on:submit=on_s3_submit class="space-y-4 w-full">
+                                <form
+                                    on:submit=move |ev| {
+                                        ev.prevent_default();
+                                        on_s3_submit();
+                                    }
+                                    class="space-y-4 w-full"
+                                >
                                     <div class="flex flex-wrap gap-4">
                                         <div class="flex-1 min-w-[250px]">
                                             <label class="block text-sm font-medium text-gray-700 mb-1">
diff --git a/src/main.rs b/src/main.rs
index 5826c02..a154382 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -2,6 +2,7 @@ mod schema;
 use codee::string::FromToStringCodec;
 use datafusion::physical_plan::ExecutionPlan;
 use file_reader::{get_stored_value, FileReader};
+use leptos_router::{components::Router, hooks::query_signal};
 use leptos_use::{
     use_interval_fn, use_timestamp, use_websocket_with_options, ReconnectLimit,
     UseWebSocketOptions, UseWebSocketReturn,
@@ -244,7 +245,8 @@ impl Display for ConnectionInfo {
 fn App() -> impl IntoView {
     let (error_message, set_error_message) = signal(Option::<String>::None);
     let (file_bytes, set_file_bytes) = signal(None::<Bytes>);
-    let (user_input, set_user_input) = signal(String::new());
+    let (user_input, set_user_input) = query_signal::<String>("query");
+
     let (sql_query, set_sql_query) = signal(String::new());
     let (query_result, set_query_result) = signal(Vec::<arrow::array::RecordBatch>::new());
     let (file_name, set_file_name) = signal(String::from("uploaded"));
@@ -284,7 +286,7 @@ fn App() -> impl IntoView {
                         // Send acknowledgment
                         let ack_json = AckMessage::new_json();
                         send(&ack_json);
-                        set_user_input.set(query.clone());
+                        set_user_input.set(Some(query.clone()));
                     }
                     WebSocketMessage::ParquetFile {
                         file_name,
@@ -329,10 +331,17 @@ fn App() -> impl IntoView {
         parquet_info,
         move |info, _, _| {
             if let Some(info) = info {
-                logging::log!("{}", info.to_string());
-                let default_query =
-                    format!("select * from \"{}\" limit 10", file_name.get_untracked());
-                set_user_input.set(default_query);
+                match user_input.get() {
+                    Some(user_input) => {
+                        set_user_input.set(Some(user_input.clone()));
+                    }
+                    None => {
+                        logging::log!("{}", info.to_string());
+                        let default_query =
+                            format!("select * from \"{}\" limit 10", file_name.get_untracked());
+                        set_user_input.set(Some(default_query));
+                    }
+                }
             }
         },
         true,
@@ -341,7 +350,11 @@ fn App() -> impl IntoView {
     Effect::watch(
         user_input,
         move |user_input, _, _| {
-            let user_input = user_input.clone();
+            let Some(user_input_str) = user_input else {
+                return;
+            };
+            set_user_input.set(Some(user_input_str.clone()));
+            let user_input = user_input_str.clone();
             let api_key = api_key.clone();
             leptos::task::spawn_local(async move {
                 let Some(parquet_info) = parquet_info() else {
@@ -575,5 +588,11 @@ fn App() -> impl IntoView {
 
 fn main() {
     console_error_panic_hook::set_once();
-    mount_to_body(|| view! { <App /> })
+    mount_to_body(|| {
+        view! {
+            <Router>
+                <App />
+            </Router>
+        }
+    })
 }
diff --git a/src/query_input.rs b/src/query_input.rs
index 29537c6..b2ea904 100644
--- a/src/query_input.rs
+++ b/src/query_input.rs
@@ -11,8 +11,11 @@ use datafusion::{
     },
     prelude::SessionConfig,
 };
-use leptos::wasm_bindgen::{JsCast, JsValue};
 use leptos::{logging, prelude::*};
+use leptos::{
+    reactive::wrappers::write::SignalSetter,
+    wasm_bindgen::{JsCast, JsValue},
+};
 use parquet::arrow::arrow_reader::ParquetRecordBatchReaderBuilder;
 use serde_json::json;
 use wasm_bindgen_futures::JsFuture;
@@ -81,8 +84,8 @@ pub(crate) async fn execute_query_inner(
 
 #[component]
 pub fn QueryInput(
-    user_input: ReadSignal<String>,
-    set_user_input: WriteSignal<String>,
+    user_input: Memo<Option<String>>,
+    set_user_input: SignalSetter<Option<String>>,
 ) -> impl IntoView {
     let (api_key, _) = signal({
         let window = web_sys::window().unwrap();
@@ -126,7 +129,7 @@ pub fn QueryInput(
             <div class="w-full flex gap-2 items-center">
                 <input
                     type="text"
-                    on:input=move |ev| set_input_value(event_target_value(&ev))
+                    on:input=move |ev| set_input_value(Some(event_target_value(&ev)))
                     prop:value=input_value
                     on:keydown=key_down
                     class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"