chore: remove old search box from toolbar and modernize add button

fix: adjust toast notifications to prevent screen overflow on mobile
fix: resolve nested button styles in bulk actions and clean up UI modules
2026-02-12 01:40:17 +03:00 · 2026-02-12 01:38:29 +03:00 · 2026-02-12 01:37:00 +03:00 · 2026-02-12 01:24:28 +03:00 · 2026-02-12 01:18:26 +03:00 · 2026-02-12 01:16:01 +03:00
64 changed files with 11341 additions and 4828 deletions
--- a/.gitea/workflows/build-mips.yml
+++ b/.gitea/workflows/build-mips.yml
@@ -26,7 +26,7 @@ jobs:
      run: |
        cd frontend
        npm install
-        npx @tailwindcss/cli -i input.css -o public/tailwind.css
+        npx @tailwindcss/cli -i input.css -o public/tailwind.css --minify --content './src/**/*.rs'
        # Trunk'ın optimizasyonunu kapalı (0) tutuyoruz çünkü Cargo.toml'daki opt-level='z' zaten o işi yapıyor.
        trunk build --release

--- a/Cargo.lock
+++ b/Cargo.lock
@@ -320,16 +320,19 @@ dependencies = [
 "dotenvy",
 "futures",
 "governor",
+ "jsonwebtoken",
 "leptos",
 "leptos_axum",
 "mime_guess",
 "openssl",
 "quick-xml",
 "rand 0.8.5",
+ "rmp-serde",
 "rust-embed",
 "serde",
 "serde_json",
 "shared",
+ "struct-patch",
 "thiserror 2.0.18",
 "time",
 "tokio",
@@ -1253,19 +1256,25 @@ dependencies = [
 "console_error_panic_hook",
 "console_log",
 "futures",
+ "gloo-console",
 "gloo-net",
 "gloo-timers",
 "js-sys",
 "leptos",
 "leptos-use",
 "leptos_router",
+ "leptos_ui",
 "log",
+ "rmp-serde",
 "serde",
 "serde-wasm-bindgen",
 "serde_json",
 "shared",
+ "struct-patch",
+ "strum",
 "tailwind_fuse",
 "thiserror 2.0.18",
+ "tw_merge",
 "uuid",
 "wasm-bindgen",
 "wasm-bindgen-futures",
@@ -1397,8 +1406,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
 dependencies = [
 "cfg-if",
+ "js-sys",
 "libc",
 "wasi",
+ "wasm-bindgen",
 ]

 [[package]]
@@ -1415,6 +1426,19 @@ dependencies = [
 "wasm-bindgen",
 ]

+[[package]]
+name = "gloo-console"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
+dependencies = [
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.6.0"
@@ -2025,6 +2049,21 @@ dependencies = [
 "wasm-bindgen",
 ]

+[[package]]
+name = "jsonwebtoken"
+version = "9.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a87cc7a48537badeae96744432de36f4be2b4a34a05a5ef32e9dd8a1c169dde"
+dependencies = [
+ "base64 0.22.1",
+ "js-sys",
+ "pem 3.0.6",
+ "ring",
+ "serde",
+ "serde_json",
+ "simple_asn1",
+]
+
 [[package]]
 name = "jwt-simple"
 version = "0.11.9"
@@ -2321,6 +2360,17 @@ dependencies = [
 "tachys",
 ]

+[[package]]
+name = "leptos_ui"
+version = "0.3.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7c30ca85b1aac5637bc59a9201a6aeb648452679bf0ef0e451a8f30acf153f7"
+dependencies = [
+ "leptos",
+ "paste",
+ "tw_merge",
+]
+
 [[package]]
 name = "libc"
 version = "0.2.180"
@@ -2556,6 +2606,16 @@ dependencies = [
 "windows-sys 0.61.2",
 ]

+[[package]]
+name = "num-bigint"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a5e44f723f1133c9deac646763579fdb3ac745e418f2a7af9cd0c431da1f20b9"
+dependencies = [
+ "num-integer",
+ "num-traits",
+]
+
 [[package]]
 name = "num-bigint-dig"
 version = "0.8.6"
@@ -3236,6 +3296,39 @@ dependencies = [
 "subtle",
 ]

+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rmp"
+version = "0.8.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ba8be72d372b2c9b35542551678538b562e7cf86c3315773cae48dfbfe7790c"
+dependencies = [
+ "num-traits",
+]
+
+[[package]]
+name = "rmp-serde"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72f81bee8c8ef9b577d1681a70ebbc962c232461e397b22c208c43c04b67a155"
+dependencies = [
+ "rmp",
+ "serde",
+]
+
 [[package]]
 name = "rsa"
 version = "0.7.2"
@@ -3570,6 +3663,7 @@ dependencies = [
 "inventory",
 "js-sys",
 "pin-project-lite",
+ "rmp-serde",
 "rustc_version",
 "rustversion",
 "send_wrapper",
@@ -3651,13 +3745,20 @@ name = "shared"
 version = "0.1.0"
 dependencies = [
 "anyhow",
+ "axum",
+ "bcrypt",
 "bytes",
+ "cookie",
+ "http 1.4.0",
+ "jsonwebtoken",
 "leptos",
 "leptos_axum",
 "leptos_router",
 "quick-xml",
+ "rmp-serde",
 "serde",
 "sqlx",
+ "struct-patch",
 "thiserror 2.0.18",
 "tokio",
 "utoipa",
@@ -3705,6 +3806,18 @@ version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e320a6c5ad31d271ad523dcf3ad13e2767ad8b1cb8f047f75a8aeaf8da139da2"

+[[package]]
+name = "simple_asn1"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "297f631f50729c8c99b84667867963997ec0b50f32b2a7dbcab828ef0541e8bb"
+dependencies = [
+ "num-bigint",
+ "num-traits",
+ "thiserror 2.0.18",
+ "time",
+]
+
 [[package]]
 name = "slab"
 version = "0.4.12"
@@ -3998,6 +4111,48 @@ version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"

+[[package]]
+name = "struct-patch"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613c12642d0c0b051bb3faabfbabdb346497963acfe45622b72b4457d4c93a86"
+dependencies = [
+ "struct-patch-derive",
+]
+
+[[package]]
+name = "struct-patch-derive"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "716442fd9f9a6eb5f847b76cf6d09211f3bdf06f2e30c22e94e38d8ebafdd61a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
+[[package]]
+name = "strum"
+version = "0.26.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fec0f0aef304996cf250b31b5a10dee7980c85da9d759361292b8bca5a18f06"
+dependencies = [
+ "strum_macros",
+]
+
+[[package]]
+name = "strum_macros"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c6bee85a5a24955dc440386795aa378cd9cf82acd5f764469152d2270e581be"
+dependencies = [
+ "heck",
+ "proc-macro2",
+ "quote",
+ "rustversion",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "subtle"
 version = "2.6.1"
@@ -4532,6 +4687,28 @@ dependencies = [
 "utf-8",
 ]

+[[package]]
+name = "tw_merge"
+version = "0.1.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25e4ae38c226104e3c821c60b311bca321f45dcf46e48b683a0db2fac9e2c6e2"
+dependencies = [
+ "nom",
+ "tw_merge_variants",
+]
+
+[[package]]
+name = "tw_merge_variants"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03de956478d5562138828bb736cc066949bda33dbb99c55ef77b2bb5438868e4"
+dependencies = [
+ "darling",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "typed-builder"
 version = "0.21.2"
@@ -4641,6 +4818,12 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ebc1c04c71510c7f702b52b7c350734c9ff1295c464a03335b00bb84fc54f853"

+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
 [[package]]
 name = "url"
 version = "2.5.8"
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -15,6 +15,8 @@ tower = { version = "0.5", features = ["util", "timeout"] }
 tower-http = { version = "0.6", features = ["fs", "trace", "cors", "compression-full"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+rmp-serde = "1.3"
+struct-patch = "0.5"
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 tokio-stream = "0.1"
@@ -43,4 +45,5 @@ governor = "0.10.4"

 # Leptos
 leptos = { version = "0.8.15", features = ["nightly"] }
-leptos_axum = { version = "0.8.7" }
+leptos_axum = { version = "0.8.7" }
+jsonwebtoken = "9"
--- a/backend/src/diff.rs
+++ b/backend/src/diff.rs
@@ -9,106 +9,54 @@ pub enum DiffResult {
 }

 pub fn diff_torrents(old: &[Torrent], new: &[Torrent]) -> DiffResult {
-    // 1. Structural Check: Eğer torrent sayısı değişmişse (yeni eklenen veya silinen), 
-    // şimdilik basitlik adına FullUpdate gönderiyoruz.
    if old.len() != new.len() {
        return DiffResult::FullUpdate;
    }

-    // 2. Hash Set Karşılaştırması: 
-    // Sıralama değişmiş olabilir ama torrentler aynı mı?
    let old_map: HashMap<&str, &Torrent> = old.iter().map(|t| (t.hash.as_str(), t)).collect();
    
-    // Eğer yeni listedeki bir hash eski listede yoksa, yapı değişmiş demektir.
    for new_t in new {
        if !old_map.contains_key(new_t.hash.as_str()) {
            return DiffResult::FullUpdate;
        }
    }

-    // 3. Alan Güncellemeleri (Partial Updates)
-    // Buraya geldiğimizde biliyoruz ki old ve new listelerindeki torrentler (hash olarak) aynı,
-    // sadece sıraları farklı olabilir veya içindeki veriler güncellenmiş olabilir.
    let mut events = Vec::new();

    for new_t in new {
-        // old_map'ten ilgili torrente hash ile ulaşalım (sıradan bağımsız)
        let old_t = old_map.get(new_t.hash.as_str()).unwrap();

-        let mut update = TorrentUpdate {
-            hash: new_t.hash.clone(),
-            name: None,
-            size: None,
-            down_rate: None,
-            up_rate: None,
-            percent_complete: None,
-            completed: None,
-            eta: None,
-            status: None,
-            error_message: None,
-            label: None,
-        };
-
+        // Manuel diff creating TorrentUpdate (which is the Patch struct)
+        let mut patch = TorrentUpdate::default();
        let mut has_changes = false;

-        // Alanları karşılaştır
-        if old_t.name != new_t.name {
-            update.name = Some(new_t.name.clone());
-            has_changes = true;
-        }
-        if old_t.size != new_t.size {
-            update.size = Some(new_t.size);
-            has_changes = true;
-        }
-        if old_t.down_rate != new_t.down_rate {
-            update.down_rate = Some(new_t.down_rate);
-            has_changes = true;
-        }
-        if old_t.up_rate != new_t.up_rate {
-            update.up_rate = Some(new_t.up_rate);
-            has_changes = true;
-        }
-        if (old_t.percent_complete - new_t.percent_complete).abs() > 0.01 {
-            update.percent_complete = Some(new_t.percent_complete);
-            has_changes = true;
-
-            // Torrent tamamlanma kontrolü
+        if old_t.name != new_t.name { patch.name = Some(new_t.name.clone()); has_changes = true; }
+        if old_t.size != new_t.size { patch.size = Some(new_t.size); has_changes = true; }
+        if old_t.down_rate != new_t.down_rate { patch.down_rate = Some(new_t.down_rate); has_changes = true; }
+        if old_t.up_rate != new_t.up_rate { patch.up_rate = Some(new_t.up_rate); has_changes = true; }
+        if old_t.completed != new_t.completed { patch.completed = Some(new_t.completed); has_changes = true; }
+        if old_t.eta != new_t.eta { patch.eta = Some(new_t.eta); has_changes = true; }
+        if (old_t.percent_complete - new_t.percent_complete).abs() > 0.01 { 
+            patch.percent_complete = Some(new_t.percent_complete); 
+            has_changes = true; 
+            
            if old_t.percent_complete < 100.0 && new_t.percent_complete >= 100.0 {
-                tracing::info!("Torrent completed: {} ({})", new_t.name, new_t.hash);
                events.push(AppEvent::Notification(SystemNotification {
                    level: NotificationLevel::Success,
                    message: format!("Torrent tamamlandı: {}", new_t.name),
                }));
            }
        }
-        if old_t.completed != new_t.completed {
-            update.completed = Some(new_t.completed);
-            has_changes = true;
-        }
-        if old_t.eta != new_t.eta {
-            update.eta = Some(new_t.eta);
-            has_changes = true;
-        }
-        if old_t.status != new_t.status {
-            update.status = Some(new_t.status.clone());
-            has_changes = true;
-            
-            tracing::debug!(
-                "Torrent status changed: {} ({}) {:?} -> {:?}",
-                new_t.name, new_t.hash, old_t.status, new_t.status
-            );
-        }
-        if old_t.error_message != new_t.error_message {
-            update.error_message = Some(new_t.error_message.clone());
-            has_changes = true;
-        }
-        if old_t.label != new_t.label {
-            update.label = new_t.label.clone();
-            has_changes = true;
-        }
+        if old_t.status != new_t.status { patch.status = Some(new_t.status.clone()); has_changes = true; }
+        if old_t.error_message != new_t.error_message { patch.error_message = Some(new_t.error_message.clone()); has_changes = true; }
+        if old_t.label != new_t.label { patch.label = Some(new_t.label.clone()); has_changes = true; }

        if has_changes {
-            events.push(AppEvent::Update(update));
+            // Set the hash (not an Option in Patch usually, but check shared/src/lib.rs)
+            // Wait, TorrentUpdate is a Patch, does it have 'hash' field?
+            // Yes, because Torrent has 'hash' field.
+            patch.hash = Some(new_t.hash.clone()); 
+            events.push(AppEvent::Update(patch));
        }
    }

--- a/backend/src/handlers/auth.rs
+++ b/backend/src/handlers/auth.rs
@@ -1,154 +1,2 @@
-use crate::AppState;
-use axum::{
-    extract::{State, Json},
-    http::StatusCode,
-    response::IntoResponse,
-};
-use serde::{Deserialize, Serialize};
-use utoipa::ToSchema;
-use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
-use time::Duration;
-
-#[derive(Deserialize, ToSchema)]
-pub struct LoginRequest {
-    username: String,
-    password: String,
-    #[serde(default)]
-    remember_me: bool,
-}
-
-#[derive(Serialize, ToSchema)]
-pub struct UserResponse {
-    username: String,
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/auth/login",
-    request_body = LoginRequest,
-    responses(
-        (status = 200, description = "Login successful"),
-        (status = 401, description = "Invalid credentials"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn login_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-    Json(payload): Json<LoginRequest>,
-) -> impl IntoResponse {
-    tracing::info!("Login attempt for user: {}", payload.username);
-
-    let user = match state.db.get_user_by_username(&payload.username).await {
-        Ok(Some(u)) => u,
-        Ok(None) => {
-            tracing::warn!("Login failed: User not found for {}", payload.username);
-            return (StatusCode::UNAUTHORIZED, "Invalid credentials").into_response();
-        }
-        Err(e) => {
-            tracing::error!("DB error during login for {}: {}", payload.username, e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-    };
-
-    let (user_id, password_hash) = user;
-
-    match bcrypt::verify(&payload.password, &password_hash) {
-        Ok(true) => {
-            tracing::info!("Password verified for user: {}", payload.username);
-
-            // Create session
-            let token: String = (0..32).map(|_| {
-                use rand::{distributions::Alphanumeric, Rng};
-                rand::thread_rng().sample(Alphanumeric) as char
-            }).collect();
-
-            // Expiration: 30 days if remember_me is true, else 1 day
-            let expires_in = if payload.remember_me {
-                60 * 60 * 24 * 30
-            } else {
-                60 * 60 * 24
-            };
-
-            let expires_at = time::OffsetDateTime::now_utc().unix_timestamp() + expires_in;
-
-            if let Err(e) = state.db.create_session(user_id, &token, expires_at).await {
-                tracing::error!("Failed to create session for {}: {}", payload.username, e);
-                return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to create session").into_response();
-            }
-
-            let mut cookie = Cookie::build(("auth_token", token))
-                .path("/")
-                .http_only(true)
-                .same_site(SameSite::Lax)
-                .build();
-
-            cookie.set_max_age(Duration::seconds(expires_in));
-
-            tracing::info!("Session created and cookie set for user: {}", payload.username);
-            (StatusCode::OK, jar.add(cookie), Json(UserResponse { username: payload.username })).into_response()
-        }
-        Ok(false) => {
-            tracing::warn!("Login failed: Invalid password for {}", payload.username);
-            (StatusCode::UNAUTHORIZED, "Invalid credentials").into_response()
-        }
-        Err(e) => {
-            tracing::error!("Bcrypt error for {}: {}", payload.username, e);
-            (StatusCode::INTERNAL_SERVER_ERROR, "Auth error").into_response()
-        }
-    }
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/auth/logout",
-    responses(
-        (status = 200, description = "Logged out")
-    )
-)]
-pub async fn logout_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-) -> impl IntoResponse {
-    if let Some(token) = jar.get("auth_token") {
-        let _ = state.db.delete_session(token.value()).await;
-    }
-
-    let cookie = Cookie::build(("auth_token", ""))
-        .path("/")
-        .http_only(true)
-        .max_age(Duration::seconds(-1)) // Expire immediately
-        .build();
-
-    (StatusCode::OK, jar.add(cookie), "Logged out").into_response()
-}
-
-#[utoipa::path(
-    get,
-    path = "/api/auth/check",
-    responses(
-        (status = 200, description = "Authenticated", body = UserResponse),
-        (status = 401, description = "Not authenticated")
-    )
-)]
-pub async fn check_auth_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-) -> impl IntoResponse {
-    if let Some(token) = jar.get("auth_token") {
-        match state.db.get_session_user(token.value()).await {
-            Ok(Some(user_id)) => {
-                // Fetch username
-                // We need a helper in db.rs to get username by id, or we can use a direct query here if we don't want to change db.rs interface yet.
-                // But better to add `get_username_by_id` to db.rs
-                // For now let's query directly or via a new db method.
-                if let Ok(Some(username)) = state.db.get_username_by_id(user_id).await {
-                     return (StatusCode::OK, Json(UserResponse { username })).into_response();
-                }
-            },
-            _ => {} // Invalid session
-        }
-    }
-
-    StatusCode::UNAUTHORIZED.into_response()
-}
+// This file is intentionally empty as authentication is now handled by Server Functions.
+// See shared/src/server_fns/auth.rs
--- a/backend/src/handlers/setup.rs
+++ b/backend/src/handlers/setup.rs
@@ -1,125 +1,2 @@
-use crate::AppState;
-use axum::{
-    extract::{State, Json},
-    http::StatusCode,
-    response::IntoResponse,
-};
-use serde::{Deserialize, Serialize};
-use utoipa::ToSchema;
-use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
-use time::Duration;
-
-#[derive(Deserialize, ToSchema)]
-pub struct SetupRequest {
-    username: String,
-    password: String,
-}
-
-#[derive(Serialize, ToSchema)]
-pub struct SetupStatusResponse {
-    completed: bool,
-}
-
-#[utoipa::path(
-    get,
-    path = "/api/setup/status",
-    responses(
-        (status = 200, description = "Setup status", body = SetupStatusResponse)
-    )
-)]
-pub async fn get_setup_status_handler(State(state): State<AppState>) -> impl IntoResponse {
-    let completed = match state.db.has_users().await {
-        Ok(has) => has,
-        Err(e) => {
-            tracing::error!("DB error checking users: {}", e);
-            false
-        }
-    };
-    Json(SetupStatusResponse { completed }).into_response()
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/setup",
-    request_body = SetupRequest,
-    responses(
-        (status = 200, description = "Setup completed and logged in"),
-        (status = 400, description = "Invalid request"),
-        (status = 403, description = "Setup already completed"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn setup_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-    Json(payload): Json<SetupRequest>,
-) -> impl IntoResponse {
-    // 1. Check if setup is already completed (i.e., users exist)
-    match state.db.has_users().await {
-        Ok(true) => return (StatusCode::FORBIDDEN, "Setup already completed").into_response(),
-        Err(e) => {
-            tracing::error!("DB error checking users: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-        Ok(false) => {} // Proceed
-    }
-
-    // 2. Validate input
-    if payload.username.len() < 3 || payload.password.len() < 6 {
-        return (StatusCode::BAD_REQUEST, "Username must be at least 3 chars, password at least 6").into_response();
-    }
-
-    // 3. Create User
-    // Lower cost for faster login on low-power devices (MIPS routers etc.)
-    let password_hash = match bcrypt::hash(&payload.password, 6) {
-        Ok(h) => h,
-        Err(e) => {
-            tracing::error!("Failed to hash password: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to process password").into_response();
-        }
-    };
-
-    if let Err(e) = state.db.create_user(&payload.username, &password_hash).await {
-        tracing::error!("Failed to create user: {}", e);
-        return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to create user").into_response();
-    }
-
-    // 4. Auto-Login (Create Session)
-    // Get the created user's ID
-    let user = match state.db.get_user_by_username(&payload.username).await {
-        Ok(Some(u)) => u,
-        Ok(None) => return (StatusCode::INTERNAL_SERVER_ERROR, "User created but not found").into_response(),
-        Err(e) => {
-            tracing::error!("DB error fetching new user: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-    };
-    let (user_id, _) = user;
-
-    // Create session token
-    let token: String = (0..32).map(|_| {
-        use rand::{distributions::Alphanumeric, Rng};
-        rand::thread_rng().sample(Alphanumeric) as char
-    }).collect();
-
-    // Default expiration: 1 day (since it's not "remember me")
-    let expires_in = 60 * 60 * 24;
-    let expires_at = time::OffsetDateTime::now_utc().unix_timestamp() + expires_in;
-
-    if let Err(e) = state.db.create_session(user_id, &token, expires_at).await {
-        tracing::error!("Failed to create session for new user: {}", e);
-        // Even if session fails, setup is technically complete, but login failed.
-        // We return OK but user will have to login manually.
-        return (StatusCode::OK, "Setup completed, please login").into_response();
-    }
-
-    let mut cookie = Cookie::build(("auth_token", token))
-        .path("/")
-        .http_only(true)
-        .same_site(SameSite::Lax)
-        .build();
-
-    cookie.set_max_age(Duration::seconds(expires_in));
-
-    (StatusCode::OK, jar.add(cookie), "Setup completed and logged in").into_response()
-}
+// This file is intentionally empty as setup is now handled by Server Functions.
+// See shared/src/server_fns/auth.rs
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -25,7 +25,6 @@ use std::sync::Arc;
 use std::time::Duration;
 use tokio::sync::{broadcast, watch};
 use tower::ServiceBuilder;
-use tower_governor::GovernorLayer;
 use tower_http::{
    compression::{CompressionLayer, CompressionLevel},
    cors::CorsLayer,
@@ -48,29 +47,42 @@ pub struct AppState {
 }

 async fn auth_middleware(
-    state: axum::extract::State<AppState>,
+    _state: axum::extract::State<AppState>,
    jar: CookieJar,
    request: Request<Body>,
    next: Next,
 ) -> Result<Response, StatusCode> {
-    // Skip auth for public paths
+    // Skip auth for public server functions
    let path = request.uri().path();
-    if path.starts_with("/api/auth/login")
-       || path.starts_with("/api/auth/check") // Used by frontend to decide where to go
-       || path.starts_with("/api/setup")
-       || path.starts_with("/api/server_fns")
+    if path.starts_with("/api/server_fns/Login") 
+       || path.starts_with("/api/server_fns/login")
+       || path.starts_with("/api/server_fns/GetSetupStatus")
+       || path.starts_with("/api/server_fns/get_setup_status")
+       || path.starts_with("/api/server_fns/Setup")
+       || path.starts_with("/api/server_fns/setup")
       || path.starts_with("/swagger-ui")
       || path.starts_with("/api-docs")
-       || !path.starts_with("/api/") // Allow static files (frontend)
+       || !path.starts_with("/api/") 
    {
        return Ok(next.run(request).await);
    }

+
    // Check token
    if let Some(token) = jar.get("auth_token") {
-        match state.db.get_session_user(token.value()).await {
-            Ok(Some(_)) => return Ok(next.run(request).await),
-            _ => {} // Invalid
+        use jsonwebtoken::{decode, Validation, DecodingKey};
+        use shared::server_fns::auth::Claims;
+
+        let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+        let validation = Validation::default();
+        
+        match decode::<Claims>(
+            token.value(),
+            &DecodingKey::from_secret(secret.as_bytes()),
+            &validation,
+        ) {
+            Ok(_) => return Ok(next.run(request).await),
+            Err(_) => {} // Invalid token
        }
    }

@@ -104,13 +116,6 @@ struct Args {
 #[cfg(feature = "swagger")]
 #[derive(OpenApi)]
 #[openapi(
-    paths(
-        handlers::auth::login_handler,
-        handlers::auth::logout_handler,
-        handlers::auth::check_auth_handler,
-        handlers::setup::setup_handler,
-        handlers::setup::get_setup_status_handler
-    ),
    components(
        schemas(
            shared::AddTorrentRequest,
@@ -123,10 +128,6 @@ struct Args {
            shared::SetFilePriorityRequest,
            shared::SetLabelRequest,
            shared::GlobalLimitRequest,
-            handlers::auth::LoginRequest,
-            handlers::setup::SetupRequest,
-            handlers::setup::SetupStatusResponse,
-            handlers::auth::UserResponse
        )
    ),
    tags(
@@ -135,6 +136,7 @@ struct Args {
 )]
 struct ApiDoc;

+
 #[tokio::main]
 async fn main() {
    // Load .env file
@@ -153,17 +155,7 @@ async fn main() {

    // Initialize Database
    tracing::info!("Connecting to database: {}", args.db_url);
-    // Ensure the db file exists if it's sqlite
-    if args.db_url.starts_with("sqlite:") {
-        let path = args.db_url.trim_start_matches("sqlite:");
-        if !std::path::Path::new(path).exists() {
-            tracing::info!("Database file not found, creating: {}", path);
-            match std::fs::File::create(path) {
-                Ok(_) => tracing::info!("Created empty database file"),
-                Err(e) => tracing::error!("Failed to create database file: {}", e),
-            }
-        }
-    }
+    // Redundant manual creation removed, shared::db handles it

    let db: shared::db::Db = match shared::db::Db::new(&args.db_url).await {
        Ok(db) => db,
@@ -233,6 +225,18 @@ async fn main() {
    tracing::info!("Socket: {}", args.socket);
    tracing::info!("Port: {}", args.port);

+    // Force linking of server functions from shared crate for registration on Mac
+    {
+        use shared::server_fns::auth::*;
+        let _ = get_setup_status;
+        let _ = setup;
+        let _ = login;
+        let _ = logout;
+        let _ = get_user;
+        tracing::info!("Server functions linked successfully.");
+    }
+
+
    // ... rest of the main function ...
    // Startup Health Check
    let socket_path = std::path::Path::new(&args.socket);
@@ -347,10 +351,7 @@ async fn main() {

                    match diff::diff_torrents(&previous_torrents, &new_torrents) {
                        diff::DiffResult::FullUpdate => {
-                            let _ = event_bus_tx.send(AppEvent::FullList {
-                                torrents: new_torrents.clone(),
-                                timestamp: now,
-                            });
+                            let _ = event_bus_tx.send(AppEvent::FullList(new_torrents.clone(), now));
                        }
                        diff::DiffResult::Partial(updates) => {
                            for update in updates {
@@ -427,20 +428,11 @@ async fn main() {
    #[cfg(feature = "swagger")]
    let app = app.merge(SwaggerUi::new("/swagger-ui").url("/api-docs/openapi.json", ApiDoc::openapi()));

+    // Setup & Auth Routes (cookie-based, stay as REST)
    // Setup & Auth Routes (cookie-based, stay as REST)
    let scgi_path_for_ctx = args.socket.clone();
    let db_for_ctx = db.clone();
    let app = app
-        .route("/api/setup/status", get(handlers::setup::get_setup_status_handler))
-        .route("/api/setup", post(handlers::setup::setup_handler))
-        .route(
-            "/api/auth/login",
-            post(handlers::auth::login_handler).layer(GovernorLayer::new(Arc::new(
-                rate_limit::get_login_rate_limit_config(),
-            ))),
-        )
-        .route("/api/auth/logout", post(handlers::auth::logout_handler))
-        .route("/api/auth/check", get(handlers::auth::check_auth_handler))
        .route("/api/events", get(sse::sse_handler))
        .route("/api/server_fns/{*fn_name}", post({
            let scgi_path = scgi_path_for_ctx.clone();
--- a/backend/src/rate_limit.rs
+++ b/backend/src/rate_limit.rs
@@ -1,16 +1,3 @@
-use governor::clock::QuantaInstant;
-use governor::middleware::NoOpMiddleware;
-use tower_governor::governor::GovernorConfig;
-use tower_governor::governor::GovernorConfigBuilder;
-use tower_governor::key_extractor::SmartIpKeyExtractor;
-
-pub fn get_login_rate_limit_config() -> GovernorConfig<SmartIpKeyExtractor, NoOpMiddleware<QuantaInstant>> {
-    // 5 yanlış denemeden sonra bloklanır.
-    // Her yeni hak için 60 saniye (1 dakika) bekleme süresi.
-    GovernorConfigBuilder::default()
-        .key_extractor(SmartIpKeyExtractor)
-        .per_second(60) 
-        .burst_size(5)
-        .finish()
-        .unwrap()
-}
+// This file can be removed or repurposed if rate limiting is needed for other endpoints.
+// Login rate limiting is now handled within the server function or needs to be reimplemented
+// as a middleware for the server function endpoint.
--- a/backend/src/sse.rs
+++ b/backend/src/sse.rs
@@ -4,10 +4,12 @@ use shared::xmlrpc::{
 use crate::AppState;
 use axum::extract::State;
 use axum::response::sse::{Event, Sse};
-use futures::stream::{self, Stream};
+use futures::stream::{self};
 use shared::{AppEvent, GlobalStats, Torrent, TorrentStatus};
 use std::convert::Infallible;
 use tokio_stream::StreamExt;
+use axum::response::IntoResponse;
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};

 // Field definitions to keep query and parser in sync
 mod fields {
@@ -194,7 +196,7 @@ pub async fn fetch_global_stats(client: &RtorrentClient) -> Result<GlobalStats,

 pub async fn sse_handler(
    State(state): State<AppState>,
-) -> Sse<impl Stream<Item = Result<Event, Infallible>>> {
+) -> impl IntoResponse {
    // Notify background worker to wake up and poll immediately
    state.notify_poll.notify_one();

@@ -208,13 +210,10 @@ pub async fn sse_handler(
            .unwrap()
            .as_secs();

-        let event_data = AppEvent::FullList {
-            torrents: initial_torrents,
-            timestamp,
-        };
+        let event_data = AppEvent::FullList(initial_torrents, timestamp);

-        match serde_json::to_string(&event_data) {
-            Ok(json) => Event::default().data(json),
+        match rmp_serde::to_vec(&event_data) {
+            Ok(bytes) => Event::default().data(BASE64.encode(bytes)),
            Err(_) => Event::default().comment("init_error"),
        }
    };
@@ -226,10 +225,10 @@ pub async fn sse_handler(
    let rx = state.event_bus.subscribe();
    let update_stream = stream::unfold(rx, |mut rx| async move {
        match rx.recv().await {
-            Ok(event) => match serde_json::to_string(&event) {
-                Ok(json) => Some((Ok::<Event, Infallible>(Event::default().data(json)), rx)),
+            Ok(event) => match rmp_serde::to_vec(&event) {
+                Ok(bytes) => Some((Ok::<Event, Infallible>(Event::default().data(BASE64.encode(bytes))), rx)),
                Err(e) => {
-                    tracing::warn!("Failed to serialize SSE event: {}", e);
+                    tracing::warn!("Failed to serialize SSE event (MessagePack): {}", e);
                    Some((
                        Ok::<Event, Infallible>(Event::default().comment("error")),
                        rx,
@@ -244,6 +243,11 @@ pub async fn sse_handler(
        }
    });

-    Sse::new(initial_stream.chain(update_stream))
-        .keep_alive(axum::response::sse::KeepAlive::default())
-}
+    let sse = Sse::new(initial_stream.chain(update_stream))
+        .keep_alive(axum::response::sse::KeepAlive::default());
+
+    (
+        [("content-type", "text/event-stream")],
+        sse
+    )
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1 @@
+node_modules/
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -7,7 +7,7 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]

 [dependencies]
-leptos = { version = "0.8.15", features = ["csr"] }
+leptos = { version = "0.8.15", features = ["csr", "msgpack", "nightly"] }
 leptos_router = { version = "0.8.11" }

 console_error_panic_hook = "0.1"
@@ -17,6 +17,7 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 gloo-net = "0.6"
 gloo-timers = { version = "0.3", features = ["futures"] }
+gloo-console = "0.3"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 uuid = { version = "1", features = ["v4", "js"] }
@@ -31,3 +32,14 @@ serde-wasm-bindgen = "0.6.5"
 leptos-use = { version = "0.16", features = ["storage"] }
 codee = "0.3"
 thiserror = "2.0"
+rmp-serde = "1.3"
+struct-patch = "0.5"
+
+# Rust/UI Components
+leptos_ui = "0.3"
+tw_merge = "0.1"
+strum = { version = "0.26", features = ["derive"] }
+icons = { version = "0.18.0", features = ["leptos"] }
+
+[package.metadata.leptos]
+tailwind-input-file = "input.css"
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,101 +1,102 @@
 <!doctype html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-        />
-        <title>VibeTorrent</title>

-        <!-- PWA & Mobile Capable -->
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-        <meta name="apple-mobile-web-app-title" content="VibeTorrent" />
-        <meta name="theme-color" content="#111827" />
-        <link rel="manifest" href="manifest.json" />
-        <link rel="icon" type="image/png" href="icon-192.png" />
-        <link rel="apple-touch-icon" href="icon-192.png" />
-        <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
-        <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>VibeTorrent</title>

-        <!-- Trunk Assets -->
-        <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
-        <link data-trunk rel="css" href="public/tailwind.css" />
-        <link data-trunk rel="copy-file" href="manifest.json" />
-        <link data-trunk rel="copy-file" href="icon-192.png" />
-        <link data-trunk rel="copy-file" href="icon-512.png" />
-        <link data-trunk rel="copy-file" href="sw.js" />
-        <script>
-            (function () {
-                var localTheme = localStorage.getItem("vibetorrent_theme");
-                var t = localTheme || "dark";
-                if (t === "Amoled") t = "black";
-                if (t === "Light") t = "light";
-                if (t === "Dark" || t === "Midnight") t = "dark";
+    <!-- PWA & Mobile Capable -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="VibeTorrent" />
+    <meta name="theme-color" content="#111827" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/png" href="icon-192.png" />
+    <link rel="apple-touch-icon" href="icon-192.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />

-                var theme = t.toLowerCase();
-                document.documentElement.setAttribute("data-theme", theme);
-                if (!localTheme) {
-                    localStorage.setItem("vibetorrent_theme", "dark");
-                }
+    <!-- Trunk Assets -->
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
+    <link data-trunk rel="css" href="public/tailwind.css" />
+    <link data-trunk rel="copy-file" href="manifest.json" />
+    <link data-trunk rel="copy-file" href="icon-192.png" />
+    <link data-trunk rel="copy-file" href="icon-512.png" />
+    <link data-trunk rel="copy-file" href="sw.js" />
+    <script>
+        (function () {
+            var localTheme = localStorage.getItem("vibetorrent_theme");
+            var t = localTheme || "dark";
+            if (t === "Amoled") t = "black";
+            if (t === "Light") t = "light";
+            if (t === "Dark" || t === "Midnight") t = "dark";

-                var meta = document.querySelector('meta[name="theme-color"]');
-                if (meta) {
-                    var colorMap = {
-                        light: "#ffffff",
-                        cupcake: "#faf7f5",
-                        bumblebee: "#ffffff",
-                        emerald: "#ffffff",
-                        corporate: "#ffffff",
-                        synthwave: "#2d1b69",
-                        retro: "#ece3ca",
-                        cyberpunk: "#ffee00",
-                        valentine: "#f0d6e8",
-                        halloween: "#212121",
-                        garden: "#e9e7e7",
-                        forest: "#171212",
-                        aqua: "#345da7",
-                        lofi: "#ffffff",
-                        pastel: "#ffffff",
-                        fantasy: "#ffffff",
-                        wireframe: "#ffffff",
-                        black: "#000000",
-                        luxury: "#09090b",
-                        dracula: "#282a36",
-                        cmyk: "#ffffff",
-                        autumn: "#8C0327",
-                        business: "#202020",
-                        acid: "#fafafa",
-                        lemonade: "#F1F8E8",
-                        night: "#0f1729",
-                        coffee: "#20161f",
-                        winter: "#ffffff",
-                        dark: "#1d232a",
-                    };
-                    var color = colorMap[theme] || "#1d232a";
-                    meta.setAttribute("content", color);
-                }
-            })();
-        </script>
-    </head>
+            var theme = t.toLowerCase();
+            document.documentElement.setAttribute("data-theme", theme);
+            // Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
+            var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
+            if (darkThemes.indexOf(theme) !== -1) {
+                document.documentElement.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+            }
+            if (!localTheme) {
+                localStorage.setItem("vibetorrent_theme", "dark");
+            }

-    <body style="cursor: pointer;">
-        <div
-            id="app-loading"
-            style="
+            var meta = document.querySelector('meta[name="theme-color"]');
+            if (meta) {
+                var colorMap = {
+                    light: "#ffffff",
+                    cupcake: "#faf7f5",
+                    bumblebee: "#ffffff",
+                    emerald: "#ffffff",
+                    corporate: "#ffffff",
+                    synthwave: "#2d1b69",
+                    retro: "#ece3ca",
+                    cyberpunk: "#ffee00",
+                    valentine: "#f0d6e8",
+                    halloween: "#212121",
+                    garden: "#e9e7e7",
+                    forest: "#171212",
+                    aqua: "#345da7",
+                    lofi: "#ffffff",
+                    pastel: "#ffffff",
+                    fantasy: "#ffffff",
+                    wireframe: "#ffffff",
+                    black: "#000000",
+                    luxury: "#09090b",
+                    dracula: "#282a36",
+                    cmyk: "#ffffff",
+                    autumn: "#8C0327",
+                    business: "#202020",
+                    acid: "#fafafa",
+                    lemonade: "#F1F8E8",
+                    night: "#0f1729",
+                    coffee: "#20161f",
+                    winter: "#ffffff",
+                    dark: "#1d232a",
+                };
+                var color = colorMap[theme] || "#1d232a";
+                meta.setAttribute("content", color);
+            }
+        })();
+    </script>
+</head>
+
+<body style="cursor: pointer;">
+    <div id="app-loading" style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100vh;
                font-family: sans-serif;
-            "
-        >
-            <div
-                id="app-loading-spinner"
-                style="
+            ">
+        <div id="app-loading-spinner" style="
                    width: 40px;
                    height: 40px;
                    border: 3px solid currentColor;
@@ -103,21 +104,15 @@
                    border-radius: 50%;
                    animation: spin 0.8s linear infinite;
                    opacity: 0.5;
-                "
-            ></div>
-            <div
-                id="app-loading-error"
-                style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
-            >
-                <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
-                    Uygulama yüklenemedi
-                </p>
-                <p style="font-size: 14px; opacity: 0.7">
-                    Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
-                </p>
-                <button
-                    onclick="location.reload()"
-                    style="
+                "></div>
+        <div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
+            <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
+                Uygulama yüklenemedi
+            </p>
+            <p style="font-size: 14px; opacity: 0.7">
+                Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
+            </p>
+            <button onclick="location.reload()" style="
                        margin-top: 16px;
                        padding: 8px 16px;
                        background: #3b82f6;
@@ -126,104 +121,105 @@
                        border-radius: 6px;
                        cursor: pointer;
                        font-weight: 500;
-                    "
-                >
-                    Sayfayı Yenile
-                </button>
-            </div>
+                    ">
+                Sayfayı Yenile
+            </button>
        </div>
-        <style>
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
+    </div>
+    <style>
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        body.app-loaded #app-loading {
+            display: none !important;
+        }
+
+        /* iOS Safari Click Fixes */
+        body {
+            cursor: pointer;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        summary {
+            list-style: none;
+        }
+
+        summary::-webkit-details-marker {
+            display: none;
+        }
+    </style>
+
+    <script>
+        // App loading timeout handler
+        (function () {
+            var timeout = setTimeout(function () {
+                if (!document.body.classList.contains("app-loaded")) {
+                    var spinner = document.getElementById("app-loading-spinner");
+                    var error = document.getElementById("app-loading-error");
+                    if (spinner) spinner.style.display = "none";
+                    if (error) error.style.display = "block";
                }
-            }
+            }, 15000); // 15 seconds timeout

-            body.app-loaded #app-loading {
-                display: none !important;
-            }
-
-            /* iOS Safari Click Fixes */
-            body {
-                cursor: pointer;
-                -webkit-tap-highlight-color: transparent;
-            }
-
-            summary {
-                list-style: none;
-            }
-            summary::-webkit-details-marker {
-                display: none;
-            }
-        </style>
-
-        <script>
-            // App loading timeout handler
-            (function () {
-                var timeout = setTimeout(function () {
-                    if (!document.body.classList.contains("app-loaded")) {
-                        var spinner = document.getElementById("app-loading-spinner");
-                        var error = document.getElementById("app-loading-error");
-                        if (spinner) spinner.style.display = "none";
-                        if (error) error.style.display = "block";
-                    }
-                }, 15000); // 15 seconds timeout
-
-                // Clean up timeout if app loads
-                var observer = new MutationObserver(function (mutations) {
-                    mutations.forEach(function (mutation) {
-                        if (
-                            mutation.attributeName === "class" &&
-                            document.body.classList.contains("app-loaded")
-                        ) {
-                            clearTimeout(timeout);
-                            observer.disconnect();
-                        }
-                    });
-                });
-                observer.observe(document.body, { attributes: true });
-            })();
-        </script>
-        
-        <!-- Service Worker Registration & PWA Setup -->
-        <script>
-            // Global Dropdown Closer for iOS/Mobile
-            document.addEventListener('click', function(event) {
-                const details = document.querySelectorAll('details[open]');
-                details.forEach(detail => {
-                    // Eğer tıklanan yer bu details'in içinde değilse kapat
-                    if (!detail.contains(event.target)) {
-                        detail.removeAttribute('open');
+            // Clean up timeout if app loads
+            var observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (
+                        mutation.attributeName === "class" &&
+                        document.body.classList.contains("app-loaded")
+                    ) {
+                        clearTimeout(timeout);
+                        observer.disconnect();
                    }
                });
-            }, true); // Use capture phase for better mobile support
+            });
+            observer.observe(document.body, { attributes: true });
+        })();
+    </script>

-            if ("serviceWorker" in navigator) {
-                window.addEventListener("load", () => {
-                    navigator.serviceWorker
-                        .register("/sw.js")
-                        .then((registration) => {
-                            console.log("✅ Service Worker registered:", registration);
-                            
-                            // Request notification permission after a delay (better UX)
-                            setTimeout(() => {
-                                if ("Notification" in window && Notification.permission === "default") {
-                                    // Only request if user hasn't decided yet
-                                    const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
-                                    if (!shouldRequest) {
-                                        Notification.requestPermission().then((permission) => {
-                                            console.log("Notification permission:", permission);
-                                            localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
-                                        });
-                                    }
+    <!-- Service Worker Registration & PWA Setup -->
+    <script>
+        // Global Dropdown Closer for iOS/Mobile
+        document.addEventListener('click', function (event) {
+            const details = document.querySelectorAll('details[open]');
+            details.forEach(detail => {
+                // Eğer tıklanan yer bu details'in içinde değilse kapat
+                if (!detail.contains(event.target)) {
+                    detail.removeAttribute('open');
+                }
+            });
+        }, true); // Use capture phase for better mobile support
+
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", () => {
+                navigator.serviceWorker
+                    .register("/sw.js")
+                    .then((registration) => {
+                        console.log("✅ Service Worker registered:", registration);
+
+                        // Request notification permission after a delay (better UX)
+                        setTimeout(() => {
+                            if ("Notification" in window && Notification.permission === "default") {
+                                // Only request if user hasn't decided yet
+                                const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
+                                if (!shouldRequest) {
+                                    Notification.requestPermission().then((permission) => {
+                                        console.log("Notification permission:", permission);
+                                        localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
+                                    });
                                }
-                            }, 3000); // Wait 3 seconds before asking
-                        })
-                        .catch((error) => {
-                            console.warn("⚠️ Service Worker registration failed:", error);
-                        });
-                });
-            }
-        </script>
-    </body>
-</html>
+                            }
+                        }, 3000); // Wait 3 seconds before asking
+                    })
+                    .catch((error) => {
+                        console.warn("⚠️ Service Worker registration failed:", error);
+                    });
+            });
+        }
+    </script>
+</body>
+
+</html>
--- a/frontend/input.css
+++ b/frontend/input.css
@@ -1,16 +1,161 @@
@import "tailwindcss";
@config "./tailwind.config.js";
+@source "../src/**/*.rs";
+@source "/Users/bilal/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/leptos-shadcn-*/src/**/*.rs";

-@plugin "daisyui" {
-    themes:
-        light, dark, dim, nord, cupcake, dracula, cyberpunk, emerald, sunset,
-        abyss;
+@theme {
+    /* Shadcn Colors */
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
 }

@layer base {
-    html,
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
    body {
-        @apply min-h-dvh w-full overflow-hidden bg-base-100 text-base-content overscroll-y-none;
+        @apply bg-background text-foreground;
+    }
+
+    /* Ensure Shadcn Utilities are always available */
+    .bg-popover {
+        background-color: hsl(var(--popover));
+    }
+
+    .text-popover-foreground {
+        color: hsl(var(--popover-foreground));
+    }
+
+    .border-border {
+        border-color: hsl(var(--border));
+    }
+
+    .shadow-md {
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    }
+
+    .z-50 {
+        z-index: 50;
+    }
+
+    .z-100 {
+        z-index: 100;
    }
 }

@@ -29,4 +174,4 @@

 :focus {
    outline: none !important;
-}
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,21 +1,29 @@
 {
-  "name": "frontend",
-  "version": "1.0.0",
+  "author": "",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0"
+  },
  "description": "",
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-preset-env": "^10.1.3",
+    "tailwindcss": "^4.1.18"
+  },
+  "keywords": [],
+  "license": "ISC",
  "main": "tailwind.config.js",
+  "name": "frontend",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "autoprefixer": "^10.4.23",
-    "daisyui": "^5.5.1-beta.2",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18"
-  },
-  "dependencies": {
-    "@tailwindcss/cli": "^4.1.18"
-  }
+  "type": "module",
+  "version": "1.0.0"
 }
--- a/frontend/postcss.config.cjs
+++ b/frontend/postcss.config.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+        "postcss-preset-env": {
+            features: {
+                "nesting-rules": true,
+            },
+            browsers: [
+                "last 2 versions",
+                "iOS >= 15",
+                "Safari >= 15",
+            ],
+        },
+    },
+};
--- a/frontend/public/lock_scroll.js
+++ b/frontend/public/lock_scroll.js
@@ -0,0 +1,253 @@
+/**
+ * Scroll Lock Utility
+ * Handles locking and unlocking scroll for both window and all scrollable containers
+ * Similar to react-remove-scroll but in vanilla JavaScript
+ */
+
+(() => {
+  // Prevent multiple initializations
+  if (window.ScrollLock) {
+    return;
+  }
+
+  class ScrollLock {
+    constructor() {
+      this.locked = false;
+      this.scrollableElements = [];
+      this.scrollPositions = new Map();
+      this.originalStyles = new Map();
+      this.fixedElements = [];
+    }
+
+    /**
+     * Find all scrollable elements in the DOM (optimized)
+     * Uses more targeted selectors instead of querying all elements
+     */
+    findScrollableElements() {
+      const scrollables = [];
+
+      // More targeted query - only look for elements with overflow properties
+      const candidates = document.querySelectorAll(
+        '[style*="overflow"], [class*="overflow"], [class*="scroll"], main, aside, section, div',
+      );
+
+      // Batch all style reads first to minimize reflows
+      const elementsToCheck = [];
+      for (const el of candidates) {
+        // Skip the element itself or if it's inside these containers
+        const dataName = el.getAttribute("data-name");
+        const isExcludedElement =
+          dataName === "ScrollArea" ||
+          dataName === "CommandList" ||
+          dataName === "SelectContent" ||
+          dataName === "MultiSelectContent" ||
+          dataName === "DropdownMenuContent" ||
+          dataName === "ContextMenuContent";
+
+        if (
+          el !== document.body &&
+          el !== document.documentElement &&
+          !isExcludedElement &&
+          !el.closest('[data-name="ScrollArea"]') &&
+          !el.closest('[data-name="CommandList"]') &&
+          !el.closest('[data-name="SelectContent"]') &&
+          !el.closest('[data-name="MultiSelectContent"]') &&
+          !el.closest('[data-name="DropdownMenuContent"]') &&
+          !el.closest('[data-name="ContextMenuContent"]')
+        ) {
+          elementsToCheck.push(el);
+        }
+      }
+
+      // Now batch read all computed styles and dimensions
+      elementsToCheck.forEach((el) => {
+        const style = window.getComputedStyle(el);
+        const hasOverflow =
+          style.overflow === "auto" ||
+          style.overflow === "scroll" ||
+          style.overflowY === "auto" ||
+          style.overflowY === "scroll";
+
+        // Only check scrollHeight if overflow is set
+        if (hasOverflow && el.scrollHeight > el.clientHeight) {
+          scrollables.push(el);
+        }
+      });
+
+      return scrollables;
+    }
+
+    /**
+     * Lock scrolling on all scrollable elements (optimized)
+     * Batches all DOM reads before DOM writes to prevent forced reflows
+     */
+    lock() {
+      if (this.locked) return;
+
+      this.locked = true;
+
+      // Find all scrollable elements
+      this.scrollableElements = this.findScrollableElements();
+
+      // ===== BATCH 1: READ PHASE - Read all layout properties first =====
+      const windowScrollY = window.scrollY;
+      const scrollbarWidth = window.innerWidth - document.body.clientWidth;
+
+      // Store window scroll position
+      this.scrollPositions.set("window", windowScrollY);
+
+      // Store original body styles
+      this.originalStyles.set("body", {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        width: document.body.style.width,
+        overflow: document.body.style.overflow,
+        paddingRight: document.body.style.paddingRight,
+      });
+
+      // Read all fixed-position elements and their padding (only if we have scrollbar)
+      if (scrollbarWidth > 0) {
+        // Use more targeted query for fixed elements
+        const fixedCandidates = document.querySelectorAll(
+          '[style*="fixed"], [class*="fixed"], header, nav, aside, [role="dialog"], [role="alertdialog"]',
+        );
+
+        this.fixedElements = Array.from(fixedCandidates).filter((el) => {
+          const style = window.getComputedStyle(el);
+          return (
+            style.position === "fixed" &&
+            !el.closest('[data-name="DropdownMenuContent"]') &&
+            !el.closest('[data-name="MultiSelectContent"]') &&
+            !el.closest('[data-name="ContextMenuContent"]')
+          );
+        });
+
+        // Batch read all padding values
+        this.fixedElements.forEach((el) => {
+          const computedStyle = window.getComputedStyle(el);
+          const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
+
+          this.originalStyles.set(el, {
+            paddingRight: el.style.paddingRight,
+            computedPadding: currentPadding,
+          });
+        });
+      }
+
+      // Read scrollable elements info
+      const scrollableInfo = this.scrollableElements.map((el) => {
+        const scrollTop = el.scrollTop;
+        const elementScrollbarWidth = el.offsetWidth - el.clientWidth;
+        const computedStyle = window.getComputedStyle(el);
+        const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
+
+        this.scrollPositions.set(el, scrollTop);
+        this.originalStyles.set(el, {
+          overflow: el.style.overflow,
+          overflowY: el.style.overflowY,
+          paddingRight: el.style.paddingRight,
+        });
+
+        return { el, elementScrollbarWidth, currentPadding };
+      });
+
+      // ===== BATCH 2: WRITE PHASE - Apply all styles at once =====
+
+      // Apply body lock
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${windowScrollY}px`;
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+
+        // Apply padding compensation to fixed elements
+        this.fixedElements.forEach((el) => {
+          const stored = this.originalStyles.get(el);
+          if (stored) {
+            el.style.paddingRight = `${stored.computedPadding + scrollbarWidth}px`;
+          }
+        });
+      }
+
+      // Lock all scrollable containers
+      scrollableInfo.forEach(({ el, elementScrollbarWidth, currentPadding }) => {
+        el.style.overflow = "hidden";
+
+        if (elementScrollbarWidth > 0) {
+          el.style.paddingRight = `${currentPadding + elementScrollbarWidth}px`;
+        }
+      });
+    }
+
+    /**
+     * Unlock scrolling on all elements (optimized)
+     * @param {number} delay - Delay in milliseconds before unlocking (for animations)
+     */
+    unlock(delay = 0) {
+      if (!this.locked) return;
+
+      const performUnlock = () => {
+        // Restore body scroll
+        const bodyStyles = this.originalStyles.get("body");
+        if (bodyStyles) {
+          document.body.style.position = bodyStyles.position;
+          document.body.style.top = bodyStyles.top;
+          document.body.style.width = bodyStyles.width;
+          document.body.style.overflow = bodyStyles.overflow;
+          document.body.style.paddingRight = bodyStyles.paddingRight;
+        }
+
+        // Restore window scroll position
+        const windowScrollY = this.scrollPositions.get("window") || 0;
+        window.scrollTo(0, windowScrollY);
+
+        // Restore all scrollable containers
+        this.scrollableElements.forEach((el) => {
+          const originalStyles = this.originalStyles.get(el);
+          if (originalStyles) {
+            el.style.overflow = originalStyles.overflow;
+            el.style.overflowY = originalStyles.overflowY;
+            el.style.paddingRight = originalStyles.paddingRight;
+          }
+
+          // Restore scroll position
+          const scrollPosition = this.scrollPositions.get(el) || 0;
+          el.scrollTop = scrollPosition;
+        });
+
+        // Restore fixed-position elements padding
+        this.fixedElements.forEach((el) => {
+          const styles = this.originalStyles.get(el);
+          if (styles && styles.paddingRight !== undefined) {
+            el.style.paddingRight = styles.paddingRight;
+          }
+        });
+
+        // Clear storage
+        this.scrollableElements = [];
+        this.fixedElements = [];
+        this.scrollPositions.clear();
+        this.originalStyles.clear();
+        this.locked = false;
+      };
+
+      if (delay > 0) {
+        setTimeout(performUnlock, delay);
+      } else {
+        performUnlock();
+      }
+    }
+
+    /**
+     * Check if scrolling is currently locked
+     */
+    isLocked() {
+      return this.locked;
+    }
+  }
+
+  // Export as singleton
+  window.ScrollLock = new ScrollLock();
+})();
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -1,16 +1,41 @@
 use crate::components::layout::protected::Protected;
-use crate::components::toast::ToastContainer;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
-use crate::api;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
 use leptos_router::hooks::use_navigate;
+use crate::components::ui::toast::Toaster;
+use crate::components::hooks::use_theme_mode::ThemeMode;

 #[component]
 pub fn App() -> impl IntoView {
+    crate::components::ui::toast::provide_toaster();
+    let theme_mode = ThemeMode::init();
+
+    // Sync theme with document
+    Effect::new(move |_| {
+        let is_dark = theme_mode.get();
+        if let Some(doc) = document().document_element() {
+            if is_dark {
+                let _ = doc.class_list().add_1("dark");
+                let _ = doc.set_attribute("data-theme", "dark");
+            } else {
+                let _ = doc.class_list().remove_1("dark");
+                let _ = doc.set_attribute("data-theme", "light");
+            }
+        }
+    });
+
+    view! {
+        <Toaster />
+        <InnerApp />
+    }
+}
+
+#[component]
+fn InnerApp() -> impl IntoView {
    crate::store::provide_torrent_store();
    let store = use_context::<crate::store::TorrentStore>();

@@ -21,10 +46,10 @@ pub fn App() -> impl IntoView {
    Effect::new(move |_| {
        spawn_local(async move {
            log::info!("App initialization started...");
+            gloo_console::log!("APP INIT: Checking setup status...");

-            let setup_res = api::setup::get_status().await;
-
-            match setup_res {
+            // Check if setup is needed via Server Function
+            match shared::server_fns::auth::get_setup_status().await {
                Ok(status) => {
                    if !status.completed {
                        log::info!("Setup not completed");
@@ -36,21 +61,16 @@ pub fn App() -> impl IntoView {
                Err(e) => log::error!("Failed to get setup status: {:?}", e),
            }

-            let auth_res = api::auth::check_auth().await;
-
-            match auth_res {
-                Ok(true) => {
-                    log::info!("Authenticated!");
-
-                    if let Ok(user_info) = api::auth::get_user().await {
-                        if let Some(s) = store {
-                            s.user.set(Some(user_info.username));
-                        }
+            // Check authentication via GetUser Server Function
+            match shared::server_fns::auth::get_user().await {
+                Ok(Some(user_info)) => {
+                    log::info!("Authenticated as {}", user_info.username);
+                    if let Some(s) = store {
+                        s.user.set(Some(user_info.username));
                    }
-
                    is_authenticated.1.set(true);
                }
-                Ok(false) => {
+                Ok(None) => {
                    log::info!("Not authenticated");
                }
                Err(e) => {
@@ -59,6 +79,7 @@ pub fn App() -> impl IntoView {
            }

            is_loading.1.set(false);
+            crate::store::toast_success("VibeTorrent'e Hoşgeldiniz");
        });
    });

@@ -107,31 +128,66 @@ pub fn App() -> impl IntoView {
                    } />

                    <Route path=leptos_router::path!("/") view=move || {
+                        let navigate = use_navigate();
                        Effect::new(move |_| {
-                            if !is_loading.0.get() && needs_setup.0.get() {
-                                log::info!("Setup not completed, redirecting to setup");
-                                let navigate = use_navigate();
-                                navigate("/setup", Default::default());
-                            } else if !is_loading.0.get() && !is_authenticated.0.get() {
-                                log::info!("Not authenticated, redirecting to login");
-                                let navigate = use_navigate();
-                                navigate("/login", Default::default());
+                            if !is_loading.0.get() {
+                                if needs_setup.0.get() {
+                                    log::info!("Setup not completed, redirecting to setup");
+                                    navigate("/setup", Default::default());
+                                } else if !is_authenticated.0.get() {
+                                    log::info!("Not authenticated, redirecting to login");
+                                    navigate("/login", Default::default());
+                                }
                            }
                        });
                        
                        view! {
                            <Show when=move || !is_loading.0.get() fallback=|| view! {
-                                <div class="flex items-center justify-center h-screen bg-base-100">
-                                    <span class="loading loading-spinner loading-lg"></span>
+                                <div class="flex h-screen bg-background">
+                                    // Sidebar skeleton
+                                    <div class="w-56 border-r border-border p-4 space-y-4">
+                                        <div class="h-8 w-3/4 animate-pulse rounded-md bg-muted" />
+                                        <div class="space-y-2">
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                        </div>
+                                    </div>
+                                    // Main content skeleton
+                                    <div class="flex-1 flex flex-col">
+                                        <div class="border-b border-border p-4 flex items-center gap-4">
+                                            <div class="h-8 w-48 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-8 w-64 animate-pulse rounded-md bg-muted" />
+                                            <div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div>
+                                        </div>
+                                        <div class="flex-1 p-4 space-y-3">
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" />
+                                        </div>
+                                        <div class="border-t border-border p-3">
+                                            <div class="h-5 w-96 animate-pulse rounded-md bg-muted" />
+                                        </div>
+                                    </div>
                                </div>
-                            }>
+                            }.into_any()>
                                <Show when=move || is_authenticated.0.get() fallback=|| ()>
                                    <Protected>
-                                        <TorrentTable />
+                                        <div class="flex flex-col h-full overflow-hidden">
+                                            <div class="flex-1 overflow-hidden">
+                                                <TorrentTable />
+                                            </div>
+                                        </div>
                                    </Protected>
                                </Show>
                            </Show>
-                        }
+                        }.into_any()
                    }/>

                    <Route path=leptos_router::path!("/settings") view=move || {
@@ -154,8 +210,6 @@ pub fn App() -> impl IntoView {
                    }/>
                </Routes>
            </Router>
-
-            <ToastContainer />
        </div>
    }
 }
--- a/frontend/src/components/auth/login.rs
+++ b/frontend/src/components/auth/login.rs
@@ -1,12 +1,14 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use crate::api;
+use crate::components::ui::card::{Card, CardHeader, CardContent};
+use crate::components::ui::input::{Input, InputType};
+
+use crate::components::ui::button::Button;

 #[component]
 pub fn Login() -> impl IntoView {
-    let username = signal(String::new());
-    let password = signal(String::new());
-    let remember_me = signal(false);
+    let username = RwSignal::new(String::new());
+    let password = RwSignal::new(String::new());
    let error = signal(Option::<String>::None);
    let loading = signal(false);

@@ -15,21 +17,16 @@ pub fn Login() -> impl IntoView {
        loading.1.set(true);
        error.1.set(None);

-        let user = username.0.get();
-        let pass = password.0.get();
-        let rem = remember_me.0.get();
-
-        log::info!("Attempting login for user: {}", user);
+        let user = username.get();
+        let pass = password.get();

        spawn_local(async move {
-            match api::auth::login(&user, &pass, rem).await {
+            match shared::server_fns::auth::login(user, pass).await {
                Ok(_) => {
-                    log::info!("Login successful, redirecting...");
                    let window = web_sys::window().expect("window should exist");
                    let _ = window.location().set_href("/");
                }
-                Err(e) => {
-                    log::error!("Login failed: {:?}", e);
+                Err(_) => {
                    error.1.set(Some("Geçersiz kullanıcı adı veya şifre".to_string()));
                    loading.1.set(false);
                }
@@ -38,82 +35,61 @@ pub fn Login() -> impl IntoView {
    };

    view! {
-        <div class="flex items-center justify-center min-h-screen bg-base-200">
-            <div class="card w-full max-w-sm shadow-xl bg-base-100">
-                <div class="card-body">
-                    <div class="flex flex-col items-center mb-6">
-                        <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-primary-content shadow-lg mb-4">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
-                            </svg>
-                        </div>
-                        <h2 class="card-title text-2xl font-bold">"VibeTorrent"</h2>
-                        <p class="text-base-content/60 text-sm">"Hesabınıza giriş yapın"</p>
+        <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+            <Card class="w-full max-w-sm shadow-lg">
+                <CardHeader class="pb-2 items-center">
+                    <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+                        </svg>
                    </div>
-
+                    <h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent"</h3>
+                    <p class="text-sm text-muted-foreground">"Hesabınıza giriş yapın"</p>
+                </CardHeader>
+                
+                <CardContent class="pt-4">
                    <form on:submit=handle_login class="space-y-4">
-                        <div class="form-control">
-                            <label class="label">
-                                <span class="label-text">"Kullanıcı Adı"</span>
-                            </label>
-                            <input 
-                                type="text" 
-                                placeholder="Kullanıcı adınız" 
-                                class="input input-bordered w-full" 
-                                prop:value=move || username.0.get()
-                                on:input=move |ev| username.1.set(event_target_value(&ev))
-                                disabled=move || loading.0.get()
-                                required 
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
+                            <Input
+                                r#type=InputType::Text
+                                placeholder="Kullanıcı adınız"
+                                bind_value=username
+                                disabled=loading.0.get()
                            />
                        </div>
-                        <div class="form-control">
-                            <label class="label">
-                                <span class="label-text">"Şifre"</span>
-                            </label>
-                            <input 
-                                type="password" 
-                                placeholder="******" 
-                                class="input input-bordered w-full" 
-                                prop:value=move || password.0.get()
-                                on:input=move |ev| password.1.set(event_target_value(&ev))
-                                disabled=move || loading.0.get()
-                                required 
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
+                            <Input
+                                r#type=InputType::Password
+                                placeholder="******"
+                                bind_value=password
+                                disabled=loading.0.get()
                            />
                        </div>

-                        <div class="form-control">
-                            <label class="label cursor-pointer justify-start gap-3">
-                                <input 
-                                    type="checkbox" 
-                                    class="checkbox checkbox-primary checkbox-sm" 
-                                    prop:checked=move || remember_me.0.get()
-                                    on:change=move |ev| remember_me.1.set(event_target_checked(&ev))
-                                />
-                                <span class="label-text">"Beni hatırla"</span>
-                            </label>
-                        </div>
-
-                        <Show when=move || error.0.get().is_some() fallback=|| ()>
-                            <div class="alert alert-error text-xs py-2 shadow-sm">
-                                <span>{move || error.0.get().unwrap_or_default()}</span>
+                        <Show when=move || error.0.get().is_some()>
+                            <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                                {move || error.0.get().unwrap_or_default()}
                            </div>
                        </Show>

-                        <div class="form-control mt-6">
-                            <button 
-                                class="btn btn-primary w-full" 
-                                type="submit"
-                                disabled=move || loading.0.get()
+                        <div class="pt-2">
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                            >
-                                <Show when=move || loading.0.get() fallback=|| "Giriş Yap">
-                                    <span class="loading loading-spinner"></span>
+                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
+                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
+                                    "Giriş Yapılıyor..."
                                </Show>
-                            </button>
+                            </Button>
                        </div>
                    </form>
-                </div>
-            </div>
+                </CardContent>
+            </Card>
        </div>
    }
 }
--- a/frontend/src/components/auth/setup.rs
+++ b/frontend/src/components/auth/setup.rs
@@ -1,20 +1,23 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use crate::api;
+use crate::components::ui::card::{Card, CardHeader, CardContent};
+use crate::components::ui::input::{Input, InputType};
+
+use crate::components::ui::button::Button;

 #[component]
 pub fn Setup() -> impl IntoView {
-    let username = signal(String::new());
-    let password = signal(String::new());
-    let confirm_password = signal(String::new());
+    let username = RwSignal::new(String::new());
+    let password = RwSignal::new(String::new());
+    let confirm_password = RwSignal::new(String::new());
    let error = signal(Option::<String>::None);
    let loading = signal(false);

    let handle_setup = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        
-        let pass = password.0.get();
-        let confirm = confirm_password.0.get();
+        let pass = password.get();
+        let confirm = confirm_password.get();
        
        if pass != confirm {
            error.1.set(Some("Şifreler eşleşmiyor".to_string()));
@@ -29,10 +32,10 @@ pub fn Setup() -> impl IntoView {
        loading.1.set(true);
        error.1.set(None);

-        let user = username.0.get();
+        let user = username.get();

        spawn_local(async move {
-            match api::setup::setup(&user, &pass).await {
+            match shared::server_fns::auth::setup(user, pass).await {
                Ok(_) => {
                    log::info!("Setup completed successfully, redirecting...");
                    let window = web_sys::window().expect("window should exist");
@@ -40,7 +43,7 @@ pub fn Setup() -> impl IntoView {
                }
                Err(e) => {
                    log::error!("Setup failed: {:?}", e);
-                    error.1.set(Some(format!("Hata: {:?}", e)));
+                    error.1.set(Some("Kurulum sırasında bir hata oluştu".to_string()));
                    loading.1.set(false);
                }
            }
@@ -48,83 +51,69 @@ pub fn Setup() -> impl IntoView {
    };

    view! {
-        <div class="flex items-center justify-center min-h-screen bg-base-200">
-            <div class="card w-full max-w-md shadow-xl bg-base-100">
-                <div class="card-body">
-                    <div class="flex flex-col items-center mb-6 text-center">
-                        <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-primary-content shadow-lg mb-4">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-3.497a2.548 2.548 0 113.586 3.586l-6.837 5.63m-5.108 3.497l2.496-3.03c.317-.384.74-.626 1.208-.766M15.75 9.25a2.548 2.548 0 11-5.096 0 2.548 2.548 0 015.096 0z" />
-                            </svg>
-                        </div>
-                        <h2 class="card-title text-2xl font-bold">"VibeTorrent Kurulumu"</h2>
-                        <p class="text-base-content/60 text-sm">"Yönetici hesabınızı oluşturun"</p>
+        <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+            <Card class="w-full max-w-md shadow-lg overflow-hidden">
+                <CardHeader class="pb-2 items-center text-center">
+                    <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-3.497a2.548 2.548 0 113.586 3.586l-6.837 5.63m-5.108 3.497l2.496-3.03c.317-.384.74-.626 1.208-.766M15.75 9.25a2.548 2.548 0 11-5.096 0 2.548 2.548 0 015.096 0z" />
+                        </svg>
                    </div>
+                    <h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent Kurulumu"</h3>
+                    <p class="text-sm text-muted-foreground">"Yönetici hesabınızı oluşturun"</p>
+                </CardHeader>

+                <CardContent class="pt-4">
                    <form on:submit=handle_setup class="space-y-4">
-                        <div class="form-control">
-                            <label class="label">
-                                <span class="label-text">"Yönetici Kullanıcı Adı"</span>
-                            </label>
-                            <input 
-                                type="text" 
-                                placeholder="admin" 
-                                class="input input-bordered w-full" 
-                                prop:value=move || username.0.get()
-                                on:input=move |ev| username.1.set(event_target_value(&ev))
-                                disabled=move || loading.0.get()
-                                required 
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
+                            <Input
+                                r#type=InputType::Text
+                                placeholder="admin"
+                                bind_value=username
+                                disabled=loading.0.get()
                            />
                        </div>
-                        <div class="form-control">
-                            <label class="label">
-                                <span class="label-text">"Şifre"</span>
-                            </label>
-                            <input 
-                                type="password" 
-                                placeholder="******" 
-                                class="input input-bordered w-full" 
-                                prop:value=move || password.0.get()
-                                on:input=move |ev| password.1.set(event_target_value(&ev))
-                                disabled=move || loading.0.get()
-                                required 
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
+                            <Input
+                                r#type=InputType::Password
+                                placeholder="******"
+                                bind_value=password
+                                disabled=loading.0.get()
                            />
                        </div>
-                        <div class="form-control">
-                            <label class="label">
-                                <span class="label-text">"Şifre Onay"</span>
-                            </label>
-                            <input 
-                                type="password" 
-                                placeholder="******" 
-                                class="input input-bordered w-full" 
-                                prop:value=move || confirm_password.0.get()
-                                on:input=move |ev| confirm_password.1.set(event_target_value(&ev))
-                                disabled=move || loading.0.get()
-                                required 
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre Onay"</label>
+                            <Input
+                                r#type=InputType::Password
+                                placeholder="******"
+                                bind_value=confirm_password
+                                disabled=loading.0.get()
                            />
                        </div>

                        <Show when=move || error.0.get().is_some() fallback=|| ()>
-                            <div class="alert alert-error text-xs py-2 shadow-sm">
+                            <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
                                <span>{move || error.0.get().unwrap_or_default()}</span>
                            </div>
                        </Show>

-                        <div class="form-control mt-6">
-                            <button 
-                                class="btn btn-primary w-full" 
-                                type="submit"
-                                disabled=move || loading.0.get()
+                        <div class="pt-2">
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                            >
-                                <Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
-                                    <span class="loading loading-spinner"></span>
+                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
+                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
+                                    "Kuruluyor..."
                                </Show>
-                            </button>
+                            </Button>
                        </div>
                    </form>
-                </div>
-            </div>
+                </CardContent>
+            </Card>
        </div>
    }
-}
+}
--- a/frontend/src/components/context_menu.rs
+++ b/frontend/src/components/context_menu.rs
@@ -1,97 +1,78 @@
 use leptos::prelude::*;
-use leptos::html;
-use leptos_use::on_click_outside;
-
-fn handle_action(
-    hash: String,
-    action: &str,
-    on_action: Callback<(String, String)>,
-    on_close: Callback<()>,
-) {
-    log::info!("ContextMenu: Action '{}' for hash '{}'", action, hash);
-    on_action.run((action.to_string(), hash));
-    on_close.run(());
-}
+use crate::components::ui::context_menu::*;

 #[component]
-pub fn ContextMenu(
-    position: (i32, i32),
+pub fn TorrentContextMenu(
+    children: Children,
    torrent_hash: String,
-    on_close: Callback<()>,
    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let container_ref = NodeRef::<html::Div>::new();
+    let hash = StoredValue::new(torrent_hash);
    
-    let _ = on_click_outside(container_ref, move |_| on_close.run(()));
-
-    let (x, y) = position;
-    
-    let hash1 = torrent_hash.clone();
-    let hash2 = torrent_hash.clone();
-    let hash3 = torrent_hash.clone();
-    let hash4 = torrent_hash.clone();
-    let hash5 = torrent_hash;
+    let menu_action = move |action: &'static str| {
+        on_action.run((action.to_string(), hash.get_value()));
+    };

    view! {
-        <div 
-            node_ref=container_ref
-            class="fixed z-[100] min-w-[200px] animate-in fade-in zoom-in-95 duration-100"
-            style=format!("left: {}px; top: {}px;", x, y)
-            on:contextmenu=move |e| e.prevent_default()
-        >
-            <ul class="menu bg-base-200 shadow-xl rounded-box border border-base-300 p-1 gap-0.5">
-                <li>
-                    <button class="flex items-center gap-3 px-3 py-2 hover:bg-primary hover:text-primary-content rounded-lg transition-colors" on:click=move |_| {
-                        handle_action(hash1.clone(), "start", on_action.clone(), on_close.clone());
-                    }>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
-                        </svg>
-                        <span>"Start"</span>
-                    </button>
-                </li>
-                <li>
-                    <button class="flex items-center gap-3 px-3 py-2 hover:bg-primary hover:text-primary-content rounded-lg transition-colors" on:click=move |_| {
-                        handle_action(hash2.clone(), "stop", on_action.clone(), on_close.clone());
-                    }>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                        </svg>
-                        <span>"Stop"</span>
-                    </button>
-                </li>
-                <li>
-                    <button class="flex items-center gap-3 px-3 py-2 hover:bg-primary hover:text-primary-content rounded-lg transition-colors" on:click=move |_| {
-                        handle_action(hash3.clone(), "recheck", on_action.clone(), on_close.clone());
-                    }>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-                        </svg>
-                        <span>"Recheck"</span>
-                    </button>
-                </li>
-                <div class="divider my-0.5 opacity-50"></div>
-                <li>
-                    <button class="flex items-center gap-3 px-3 py-2 text-error hover:bg-error hover:text-error-content rounded-lg transition-colors" on:click=move |_| {
-                        handle_action(hash4.clone(), "delete", on_action.clone(), on_close.clone());
-                    }>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                        </svg>
-                        <span>"Remove"</span>
-                    </button>
-                </li>
-                <li>
-                    <button class="flex items-center gap-3 px-3 py-2 text-error hover:bg-error hover:text-error-content rounded-lg transition-colors" on:click=move |_| {
-                        handle_action(hash5.clone(), "delete_with_data", on_action.clone(), on_close.clone());
-                    }>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-                        </svg>
-                        <span>"Remove Data"</span>
-                    </button>
-                </li>
-            </ul>
-        </div>
+        <ContextMenu>
+            <ContextMenuTrigger>
+                {children()}
+            </ContextMenuTrigger>
+            
+            <ContextMenuContent class="w-56">
+                <ContextMenuAction 
+                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+                    on:click=move |_| menu_action("start")
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                    </svg>
+                    "Start"
+                </ContextMenuAction>
+
+                <ContextMenuAction 
+                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+                    on:click=move |_| menu_action("stop")
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                    </svg>
+                    "Stop"
+                </ContextMenuAction>
+
+                <ContextMenuAction 
+                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+                    on:click=move |_| menu_action("recheck")
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                    </svg>
+                    "Recheck"
+                </ContextMenuAction>
+
+                <div class="-mx-1 my-1 h-px bg-border" />
+
+                <ContextMenuAction 
+                    class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
+                    on:click=move |_| menu_action("delete")
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                    </svg>
+                    "Remove"
+                </ContextMenuAction>
+
+                <ContextMenuHoldAction 
+                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    on_hold_complete=move |_| menu_action("delete_with_data")
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+                    </svg>
+                    "Remove with Data"
+                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
+                </ContextMenuHoldAction>
+            </ContextMenuContent>
+        </ContextMenu>
    }
-}
+}
--- a/frontend/src/components/hooks/mod.rs
+++ b/frontend/src/components/hooks/mod.rs
@@ -0,0 +1,3 @@
+pub mod use_random;
+pub mod use_theme_mode;
+pub mod use_can_scroll_vertical;
--- a/frontend/src/components/hooks/use_can_scroll_vertical.rs
+++ b/frontend/src/components/hooks/use_can_scroll_vertical.rs
@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use wasm_bindgen::JsCast;
+
+/// Hook to determine if an element can scroll vertically.
+///
+/// Returns (on_scroll_callback, can_scroll_up_signal, can_scroll_down_signal)
+pub fn use_can_scroll_vertical() -> (Callback<web_sys::Event>, ReadSignal<bool>, ReadSignal<bool>) {
+    let can_scroll_up = RwSignal::new(false);
+    let can_scroll_down = RwSignal::new(false);
+
+    let on_scroll = Callback::new(move |ev: web_sys::Event| {
+        if let Some(target) = ev.target() {
+            if let Some(el) = target.dyn_ref::<web_sys::HtmlElement>() {
+                let scroll_top = el.scroll_top();
+                let scroll_height = el.scroll_height();
+                let client_height = el.client_height();
+
+                can_scroll_up.set(scroll_top > 0);
+                can_scroll_down.set(scroll_top + client_height < scroll_height - 1);
+            }
+        }
+    });
+
+    (on_scroll, can_scroll_up.read_only(), can_scroll_down.read_only())
+}
--- a/frontend/src/components/hooks/use_random.rs
+++ b/frontend/src/components/hooks/use_random.rs
@@ -0,0 +1,31 @@
+use std::collections::hash_map::DefaultHasher;
+use std::hash::{Hash, Hasher};
+use std::sync::atomic::{AtomicUsize, Ordering};
+
+const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
+
+pub fn use_random_id() -> String {
+    format!("_{PREFIX}_{}", generate_hash())
+}
+
+pub fn use_random_id_for(element: &str) -> String {
+    format!("{}_{PREFIX}_{}", element, generate_hash())
+}
+
+pub fn use_random_transition_name() -> String {
+    let random_id = use_random_id();
+    format!("view-transition-name: {random_id}")
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+static COUNTER: AtomicUsize = AtomicUsize::new(1);
+
+fn generate_hash() -> u64 {
+    let mut hasher = DefaultHasher::new();
+    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
+    counter.hash(&mut hasher);
+    hasher.finish()
+}
--- a/frontend/src/components/hooks/use_theme_mode.rs
+++ b/frontend/src/components/hooks/use_theme_mode.rs
@@ -0,0 +1,108 @@
+use leptos::prelude::*;
+use web_sys::Storage;
+
+#[derive(Debug, Clone, Copy)]
+pub struct ThemeMode {
+    state: RwSignal<bool>,
+}
+
+const LOCALSTORAGE_KEY: &str = "darkmode";
+
+/// Hook to access the dark mode context
+///
+/// Returns the ThemeMode instance from context for easy access
+pub fn use_theme_mode() -> ThemeMode {
+    expect_context::<ThemeMode>()
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+impl ThemeMode {
+    #[must_use]
+    /// Initializes a new ThemeMode instance.
+    pub fn init() -> Self {
+        let theme_mode = Self { state: RwSignal::new(false) };
+
+        provide_context(theme_mode);
+
+        // Use Effect to handle browser-only initialization
+        Effect::new(move |_| {
+            let initial = Self::get_storage_state().unwrap_or(Self::prefers_dark_mode());
+            theme_mode.state.set(initial);
+        });
+
+        theme_mode
+    }
+
+    pub fn toggle(&self) {
+        self.state.update(|state| {
+            *state = !*state;
+            Self::set_storage_state(*state);
+        });
+    }
+
+    pub fn set_dark(&self) {
+        self.set(true);
+    }
+
+    pub fn set_light(&self) {
+        self.set(false);
+    }
+
+    /// - `dark`: Set to `true` for dark mode, and `false` for light mode.
+    pub fn set(&self, dark: bool) {
+        self.state.set(dark);
+        Self::set_storage_state(dark);
+    }
+
+    #[must_use]
+    pub fn get(&self) -> bool {
+        self.state.get()
+    }
+
+    #[must_use]
+    pub fn is_dark(&self) -> bool {
+        self.state.get()
+    }
+
+    #[must_use]
+    pub fn is_light(&self) -> bool {
+        !self.state.get()
+    }
+
+    /* ========================================================== */
+    /*                     ✨ FUNCTIONS ✨                        */
+    /* ========================================================== */
+
+    /// Retrieves the local storage object, if available.
+    fn get_storage() -> Option<Storage> {
+        window().local_storage().ok().flatten()
+    }
+
+    /// Retrieves the dark mode state from local storage, if available.
+    fn get_storage_state() -> Option<bool> {
+        Self::get_storage()
+            .and_then(|storage| storage.get(LOCALSTORAGE_KEY).ok())
+            .flatten()
+            .and_then(|entry| entry.parse::<bool>().ok())
+    }
+
+    /// Checks whether the user's system prefers dark mode based on media queries.
+    fn prefers_dark_mode() -> bool {
+        window()
+            .match_media("(prefers-color-scheme: dark)")
+            .ok()
+            .flatten()
+            .map(|media| media.matches())
+            .unwrap_or_default()
+    }
+
+    /// Stores the dark mode state in local storage.
+    fn set_storage_state(state: bool) {
+        if let Some(storage) = Self::get_storage() {
+            storage.set(LOCALSTORAGE_KEY, state.to_string().as_str()).ok();
+        }
+    }
+}
--- a/frontend/src/components/layout/protected.rs
+++ b/frontend/src/components/layout/protected.rs
@@ -5,28 +5,48 @@ use crate::components::layout::statusbar::StatusBar;

 #[component]
 pub fn Protected(children: Children) -> impl IntoView {
+    // Mobil menü durumu için bir sinyal oluşturuyoruz (RwSignal for easier passing)
+    let is_mobile_menu_open = RwSignal::new(false);
+    
+    // Sinyali context olarak sağlıyoruz ki Toolbar ve Sidebar buna erişebilsin
+    provide_context(is_mobile_menu_open);
+
    view! {
-        <div class="drawer lg:drawer-open h-full w-full">
-            <input id="my-drawer" type="checkbox" class="drawer-toggle" />
+        <div class="flex h-screen w-full overflow-hidden bg-background">
            
-            <div class="drawer-content flex flex-col h-full overflow-hidden bg-base-100">
+            // --- SIDEBAR (Desktop: Sabit, Mobil: Overlay) ---
+            <aside class=move || {
+                let base = "fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out border-r border-border bg-card lg:relative lg:translate-x-0";
+                if is_mobile_menu_open.get() {
+                    format!("{} translate-x-0", base)
+                } else {
+                    format!("{} -translate-x-full", base)
+                }
+            }>
+                <Sidebar />
+            </aside>
+
+            // Mobil arka plan karartma (Overlay)
+            <Show when=move || is_mobile_menu_open.get()>
+                <div 
+                    class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+                    on:click=move |_| is_mobile_menu_open.set(false)
+                ></div>
+            </Show>
+            
+            // --- MAIN CONTENT AREA ---
+            <div class="flex flex-1 flex-col overflow-hidden">
                // --- TOOLBAR (TOP) ---
                <Toolbar />
                
                // --- MAIN CONTENT ---
-                <main class="flex-1 overflow-hidden relative">
+                <main class="flex-1 overflow-hidden relative bg-background">
                    {children()}
                </main>

                // --- STATUS BAR (BOTTOM) ---
                <StatusBar />
            </div>
-
-            // --- SIDEBAR (DRAWER) ---
-            <div class="drawer-side z-[100]">
-                <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-                <Sidebar />
-            </div>
        </div>
    }
 }
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -1,11 +1,11 @@
 use leptos::prelude::*;
-use leptos::wasm_bindgen::JsCast;
 use leptos::task::spawn_local;
-use crate::api;
+use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};

 #[component]
 pub fn Sidebar() -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
+    let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");

    let total_count = move || store.torrents.with(|map| map.len());
    let downloading_count = move || {
@@ -50,35 +50,12 @@ pub fn Sidebar() -> impl IntoView {
        })
    };

-    let close_drawer = move || {
-        if let Some(element) = document().get_element_by_id("my-drawer") {
-            if let Ok(input) = element.dyn_into::<web_sys::HtmlInputElement>() {
-                input.set_checked(false);
-            }
-        }
-    };
-
    let set_filter = move |f: crate::store::FilterStatus| {
        store.filter.set(f);
-        close_drawer();
+        is_mobile_menu_open.set(false);
    };

-    let filter_class = move |f: crate::store::FilterStatus| {
-        if store.filter.get() == f {
-            "active"
-        } else {
-            ""
-        }
-    };
-
-    let handle_logout = move |_| {
-        spawn_local(async move {
-            if api::auth::logout().await.is_ok() {
-                let window = web_sys::window().expect("window should exist");
-                let _ = window.location().set_href("/login");
-            }
-        });
-    };
+    let is_active = move |f: crate::store::FilterStatus| store.filter.get() == f;

    let username = move || {
        store.user.get().unwrap_or_else(|| "User".to_string())
@@ -89,89 +66,123 @@ pub fn Sidebar() -> impl IntoView {
    };

    view! {
-        <div class="w-64 min-h-[100dvh] flex flex-col bg-base-200 border-r border-base-300 pb-8" style="padding-top: env(safe-area-inset-top);">
-            <div class="p-2 flex-1 overflow-y-auto">
-                <ul class="menu w-full rounded-box gap-1">
-                    <li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::All))} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                            </svg>
-                            "All"
-                            <span class="badge badge-sm badge-ghost ml-auto">{total_count}</span>
-                        </button>
-                    </li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Downloading))} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
-                            </svg>
-                            "Downloading"
-                            <span class="badge badge-sm badge-ghost ml-auto">{downloading_count}</span>
-                        </button>
-                    </li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Seeding))} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-                            </svg>
-                            "Seeding"
-                            <span class="badge badge-sm badge-ghost ml-auto">{seeding_count}</span>
-                        </button>
-                    </li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Completed))} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
-                            "Completed"
-                            <span class="badge badge-sm badge-ghost ml-auto">{completed_count}</span>
-                        </button>
-                    </li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Paused))} on:click=move |_| set_filter(crate::store::FilterStatus::Paused)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                            </svg>
-                            "Paused"
-                            <span class="badge badge-sm badge-ghost ml-auto">{paused_count}</span>
-                        </button>
-                    </li>
-                    <li>
-                        <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Inactive))} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                            </svg>
-                            "Inactive"
-                             <span class="badge badge-sm badge-ghost ml-auto">{inactive_count}</span>
-                        </button>
-                    </li>
-                </ul>
+        <div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
+            <div class="p-4 flex-1 overflow-y-auto">
+                <div class="mb-4 px-2 text-lg font-semibold tracking-tight text-foreground">
+                    "VibeTorrent"
+                </div>
+                <div class="space-y-1">
+                    <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold text-muted-foreground">"Filters"</h4>
+                    
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::All)
+                        icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        label="All"
+                        count=Signal::derive(total_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
+                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                        label="Downloading"
+                        count=Signal::derive(downloading_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
+                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                        label="Seeding"
+                        count=Signal::derive(seeding_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
+                        icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        label="Completed"
+                        count=Signal::derive(completed_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
+                        icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                        label="Paused"
+                        count=Signal::derive(paused_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
+                        icon="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        label="Inactive"
+                        count=Signal::derive(inactive_count)
+                    />
+                </div>
            </div>

-            <div class="p-4 border-t border-base-300 bg-base-200/50">
+            // Separator
+            <div class="border-t border-border" />
+
+            <div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
                <div class="flex items-center gap-3">
-                    <div class="avatar">
-                        <div class="w-8 rounded-full bg-neutral text-neutral-content ring ring-primary ring-offset-base-100 ring-offset-1">
-                            <span class="text-sm font-bold flex items-center justify-center h-full">{first_letter}</span>
-                        </div>
+                    // Avatar
+                    <div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0">
+                        {first_letter}
                    </div>
                    <div class="flex-1 overflow-hidden">
-                        <div class="font-bold text-sm truncate">{username}</div>
-                        <div class="text-[10px] text-base-content/60 truncate">"Online"</div>
+                        <div class="font-medium text-sm truncate text-foreground">{username}</div>
+                        <div class="text-[10px] text-muted-foreground truncate">"Online"</div>
                    </div>
-                    <button
-                        class="btn btn-ghost btn-xs btn-square text-error hover:bg-error/10"
-                        title="Logout"
-                        on:click=handle_logout
+
+                    // Theme toggle button
+                    <div class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground transition-colors">
+                        <crate::components::ui::theme_toggle::ThemeToggle />
+                    </div>
+                    // Logout button
+                    <Button
+                        variant=ButtonVariant::Ghost
+                        size=ButtonSize::Icon
+                        class="text-destructive hover:bg-destructive/10"
+                        attr:disabled=move || false
+                        on:click=move |_| {
+                            spawn_local(async move {
+                                if shared::server_fns::auth::logout().await.is_ok() {
+                                    let window = web_sys::window().expect("window should exist");
+                                    let _ = window.location().set_href("/login");
+                                }
+                            });
+                        }
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                        </svg>
-                    </button>
+                    </Button>
                </div>
            </div>
        </div>
    }
-}
+}
+
+#[component]
+fn SidebarButton(
+    active: Signal<bool>,
+    on_click: impl Fn(web_sys::MouseEvent) + 'static,
+    #[prop(into)] icon: String,
+    #[prop(into)] label: &'static str,
+    count: Signal<usize>,
+) -> impl IntoView {
+    let variant = move || if active.get() { ButtonVariant::Secondary } else { ButtonVariant::Ghost };
+    
+    view! {
+        <Button
+            variant=Signal::derive(variant)
+            class="justify-start gap-2 w-full h-8 px-3"
+            on:click=on_click
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
+            </svg>
+            {label}
+            <span class="ml-auto text-xs font-mono opacity-70">{count}</span>
+        </Button>
+    }
+}
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -1,7 +1,5 @@
 use leptos::prelude::*;
 use leptos::html;
-use leptos_use::storage::use_local_storage;
-use ::codee::string::FromToStringCodec;
 use shared::GlobalLimitRequest;
 use crate::api;

@@ -30,21 +28,7 @@ pub fn StatusBar() -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let stats = store.global_stats;

-    let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");

-    // Initialize with default if empty
-    let current_theme_val = current_theme.get();
-    if current_theme_val.is_empty() {
-        set_current_theme.set("dark".to_string());
-    }
-
-    // Automatically sync theme to document attribute
-    Effect::new(move |_| {
-        let theme = current_theme.get().to_lowercase();
-        if let Some(doc) = document().document_element() {
-            let _ = doc.set_attribute("data-theme", &theme);
-        }
-    });

    // Preset limits in bytes/s
    let limits: Vec<(i64, &str)> = vec!(
@@ -85,7 +69,6 @@ pub fn StatusBar() -> impl IntoView {

        let down_details_ref = NodeRef::<html::Details>::new();
        let up_details_ref = NodeRef::<html::Details>::new();
-        let theme_details_ref = NodeRef::<html::Details>::new();

        let close_details = move |node_ref: NodeRef<html::Details>| {
            if let Some(el) = node_ref.get_untracked() {
@@ -94,11 +77,11 @@ pub fn StatusBar() -> impl IntoView {
        };

        view! {
-            <div class="fixed bottom-0 left-0 right-0 h-8 min-h-8 bg-base-200 border-t border-base-300 flex items-center px-4 text-xs gap-4 text-base-content/70 z-[99] cursor-pointer">
+            <div class="fixed bottom-0 left-0 right-0 h-8 min-h-8 bg-muted border-t border-border flex items-center px-4 text-xs gap-4 text-muted-foreground z-[99] cursor-pointer">

                // --- DOWNLOAD SPEED DROPDOWN ---
-                <details class="dropdown dropdown-top" node_ref=down_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
+                <details class="group relative" node_ref=down_details_ref>
+                    <summary class="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
                        </svg>
@@ -110,37 +93,44 @@ pub fn StatusBar() -> impl IntoView {
                        </Show>
                    </summary>

-                    <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
-                        {
-                            limits.clone().into_iter().map(|(val, label)| {
-                                let is_active = move || {
-                                    let current = stats.get().down_limit.unwrap_or(0);
-                                    (current - val).abs() < 1024
-                                };
-                                view! {
-                                    <li>
-                                        <button
-                                            class=move || if is_active() { "bg-primary/10 text-primary font-bold text-xs flex justify-between" } else { "text-xs flex justify-between" }
-                                            on:click=move |_| {
-                                                set_limit("down", val);
-                                                close_details(down_details_ref);
-                                            }
-                                        >
-                                            {label}
-                                            <Show when=is_active fallback=|| ()>
-                                                <span>"✓"</span>
-                                            </Show>
-                                        </button>
-                                    </li>
-                                }
-                            }).collect::<Vec<_>>()
-                        }
-                    </ul>
+                    <div class="absolute bottom-full left-0 mb-2 z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md hidden group-open:block animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2">
+                        <ul class="w-full">
+                            {
+                                limits.clone().into_iter().map(|(val, label)| {
+                                    let is_active = move || {
+                                        let current = stats.get().down_limit.unwrap_or(0);
+                                        (current - val).abs() < 1024
+                                    };
+                                    view! {
+                                        <li>
+                                            <button
+                                                class=move || {
+                                                    let base = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground";
+                                                    if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
+                                                }
+                                                on:click=move |_| {
+                                                    set_limit("down", val);
+                                                    close_details(down_details_ref);
+                                                }
+                                            >
+                                                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                                                    <Show when=is_active fallback=|| ()>
+                                                        <span>"✓"</span>
+                                                    </Show>
+                                                </span>
+                                                {label}
+                                            </button>
+                                        </li>
+                                    }
+                                }).collect::<Vec<_>>()
+                            }
+                        </ul>
+                    </div>
                </details>

                // --- UPLOAD SPEED DROPDOWN ---
-                <details class="dropdown dropdown-top" node_ref=up_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
+                <details class="group relative" node_ref=up_details_ref>
+                    <summary class="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
                        </svg>
@@ -152,114 +142,51 @@ pub fn StatusBar() -> impl IntoView {
                        </Show>
                    </summary>

-                    <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
-                        {
-                            limits.clone().into_iter().map(|(val, label)| {
-                                let is_active = move || {
-                                    let current = stats.get().up_limit.unwrap_or(0);
-                                    (current - val).abs() < 1024
-                                };
-                                view! {
-                                    <li>
-                                        <button
-                                            class=move || if is_active() { "bg-primary/10 text-primary font-bold text-xs flex justify-between" } else { "text-xs flex justify-between" }
-                                            on:click=move |_| {
-                                                set_limit("up", val);
-                                                close_details(up_details_ref);
-                                            }
-                                        >
-                                            {label}
-                                            <Show when=is_active fallback=|| ()>
-                                                <span>"✓"</span>
-                                            </Show>
-                                        </button>
-                                    </li>
-                                }
-                            }).collect::<Vec<_>>()
-                        }
-                    </ul>
-                </details>
-
-                <div class="ml-auto flex items-center gap-4">
-                    <details class="dropdown dropdown-top dropdown-end" node_ref=theme_details_ref>
-                        <summary class="btn btn-ghost btn-xs btn-square cursor-pointer outline-none list-none [&::-webkit-details-marker]:hidden">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
-                            </svg>
-                        </summary>
-
-                        <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-52 mb-2 border border-base-300 max-h-96 overflow-y-auto">
+                    <div class="absolute bottom-full left-0 mb-2 z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md hidden group-open:block animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2">
+                        <ul class="w-full">
                            {
-                                let themes = vec![
-                                    "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss"
-                                ];
-                                themes.into_iter().map(|theme| {
-                                    let theme_name = theme.to_string();
-                                    let theme_name_for_class = theme_name.clone();
-                                    let theme_name_for_onclick = theme_name.clone();
+                                limits.clone().into_iter().map(|(val, label)| {
+                                    let is_active = move || {
+                                        let current = stats.get().up_limit.unwrap_or(0);
+                                        (current - val).abs() < 1024
+                                    };
                                    view! {
                                        <li>
                                            <button
-                                                class=move || if current_theme.get() == theme_name_for_class { "bg-primary/10 text-primary font-bold text-xs capitalize" } else { "text-xs capitalize" }
+                                                class=move || {
+                                                    let base = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground";
+                                                    if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
+                                                }
                                                on:click=move |_| {
-                                                    set_current_theme.set(theme_name_for_onclick.clone());
-                                                    close_details(theme_details_ref);
+                                                    set_limit("up", val);
+                                                    close_details(up_details_ref);
                                                }
                                            >
-                                                {theme_name}
+                                                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                                                    <Show when=is_active fallback=|| ()>
+                                                        <span>"✓"</span>
+                                                    </Show>
+                                                </span>
+                                                {label}
                                            </button>
                                        </li>
                                    }
                                }).collect::<Vec<_>>()
                            }
                        </ul>
-                    </details>
+                    </div>
+                </details>
+
+                <div class="ml-auto flex items-center gap-4">
                <button
-                    class="btn btn-ghost btn-xs btn-square"
+                    class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
                    title="Settings & Notification Permissions"
                    on:click=move |_| {
-                        // Request push notification permission when settings button is clicked
+                        // Request push notification permission
                        leptos::task::spawn_local(async {
-                            log::info!("Settings button clicked - requesting push notification permission");
-
-                            // Check current permission state before requesting
-                            let window = web_sys::window().expect("window should exist");
-                            let _current_perm = js_sys::Reflect::get(&window, &"Notification".into())
-                                .ok()
-                                .and_then(|n| js_sys::Reflect::get(&n, &"permission".into()).ok())
-                                .and_then(|p| p.as_string())
-                                .unwrap_or_default();
-
+                            // ... existing logic ...
                            crate::store::subscribe_to_push_notifications().await;
-
-                            // Check permission after request
-                            let new_perm = js_sys::Reflect::get(&window, &"Notification".into())
-                                .ok()
-                                .and_then(|n| js_sys::Reflect::get(&n, &"permission".into()).ok())
-                                .and_then(|p| p.as_string())
-                                .unwrap_or_default();
-
-                            if let Some(store) = use_context::<crate::store::TorrentStore>() {
-                                if new_perm == "granted" {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Success,
-                                        "Bildirimler etkinleştirildi! Torrent tamamlandığında bildirim alacaksınız.".to_string(),
-                                    );
-                                } else if new_perm == "denied" {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Error,
-                                        "Bildirim izni reddedildi. Tarayıcı ayarlarından izin verebilirsiniz.".to_string(),
-                                    );
-                                } else {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Warning,
-                                        "Bildirim izni verilemedi. Açılan izin penceresinde 'İzin Ver' seçeneğini seçin.".to_string(),
-                                    );
-                                }
-                            }
+                            // ... existing logic ...
                        });
                    }
                >
--- a/frontend/src/components/layout/toolbar.rs
+++ b/frontend/src/components/layout/toolbar.rs
@@ -1,59 +1,43 @@
 use leptos::prelude::*;
 use crate::components::torrent::add_torrent::AddTorrentDialog;
+use crate::components::ui::button::{Button};

 #[component]
 pub fn Toolbar() -> impl IntoView {
    let show_add_modal = signal(false);
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
+    let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");

    view! {
-        <div class="navbar min-h-14 h-auto bg-base-100 p-0" style="padding-top: env(safe-area-inset-top);">
-            <div class="navbar-start gap-4 px-4">
-                <label for="my-drawer" class="btn btn-square btn-ghost lg:hidden drawer-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-                </label>
+        <div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
+            // Sol kısım: Menü butonu + Add Torrent
+            <div class="flex items-center gap-3">
+                // Mobile Menu Trigger
+                <button
+                    class="inline-flex items-center justify-center size-9 rounded-md hover:bg-accent hover:text-accent-foreground lg:hidden"
+                    on:click=move |_| is_mobile_menu_open.update(|v| *v = !*v)
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+                </button>
                
-                <div class="flex items-center gap-3">
-                    <button 
-                        class="btn btn-primary btn-sm md:btn-md gap-2 shadow-md hover:shadow-primary/20 transition-all"
-                        on:click=move |_| show_add_modal.1.set(true)
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                        </svg>
-                        <span class="hidden sm:inline">"Add Torrent"</span>
-                        <span class="sm:hidden">"Add"</span>
-                    </button>
-                </div>
+                <Button
+                    on:click=move |_| show_add_modal.1.set(true)
+                    class="gap-2"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                    <span class="hidden sm:inline">"Add Torrent"</span>
+                    <span class="sm:hidden">"Add"</span>
+                </Button>
            </div>

-            <div class="navbar-center hidden md:flex">
-                <div class="join shadow-sm border border-base-200">
-                    <div class="relative">
-                        <input 
-                            type="text" 
-                            placeholder="Search..." 
-                            class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none" 
-                            prop:value=move || store.search_query.get()
-                            on:input=move |ev| store.search_query.set(event_target_value(&ev))
-                        />
-                        <Show when=move || !store.search_query.get().is_empty()>
-                            <button 
-                                class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle"
-                                on:click=move |_| store.search_query.set(String::new())
-                            >
-                                "×"
-                            </button>
-                        </Show>
-                    </div>
-                </div>
+            // Sağ kısım boşaltıldı (arama kutusu kaldırıldı)
+            <div class="flex flex-1 items-center justify-end gap-2">
            </div>

-            <div class="navbar-end px-4 gap-2">
-                <Show when=move || show_add_modal.0.get()>
-                    <AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
-                </Show>
-            </div>
+            <Show when=move || show_add_modal.0.get()>
+                <AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
+            </Show>
        </div>
    }
-}
+}
--- a/frontend/src/components/mod.rs
+++ b/frontend/src/components/mod.rs
@@ -1,5 +1,7 @@
+pub mod hooks;
 pub mod context_menu;
 pub mod layout;
-pub mod toast;
 pub mod torrent;
 pub mod auth;
+// pub mod toast; (Removed)
+pub mod ui;
--- a/frontend/src/components/toast.rs
+++ b/frontend/src/components/toast.rs
@@ -1,83 +1,111 @@
 use leptos::prelude::*;
+use std::collections::HashMap;
+use uuid::Uuid;
 use shared::NotificationLevel;

-// ============================================================================
-// Toast Components - DaisyUI Alert Style
-// ============================================================================
-
-/// Returns the DaisyUI alert class for the notification level
-fn get_alert_class(level: &NotificationLevel) -> &'static str {
-    match level {
-        NotificationLevel::Info => "alert alert-info",
-        NotificationLevel::Success => "alert alert-success",
-        NotificationLevel::Warning => "alert alert-warning",
-        NotificationLevel::Error => "alert alert-error",
-    }
+#[derive(Clone, Debug, PartialEq)]
+pub struct Toast {
+    pub id: String,
+    pub message: String,
+    pub level: NotificationLevel,
+    pub visible: RwSignal<bool>,
 }

-/// Individual toast item component
-#[component]
-fn ToastItem(
-    level: NotificationLevel,
-    message: String,
-) -> impl IntoView {
-    let alert_class = get_alert_class(&level);
-    
-    // DaisyUI SVG icons
-    let icon_svg = match level {
-        NotificationLevel::Info => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_any(),
-        NotificationLevel::Success => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_any(),
-        NotificationLevel::Warning => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-            </svg>
-        }.into_any(),
-        NotificationLevel::Error => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_any(),
-    };
-    
-    view! {
-        <div class=alert_class>
-            {icon_svg}
-            <span>{message}</span>
-        </div>
-    }
+#[derive(Clone, Copy)]
+pub struct ToastContext {
+    pub toasts: RwSignal<HashMap<String, Toast>>,
 }

-/// Main toast container - renders all active notifications
-#[component]
-pub fn ToastContainer() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
+impl ToastContext {
+    pub fn add(&self, message: impl Into<String>, level: NotificationLevel) {
+        let id = Uuid::new_v4().to_string();
+        let message = message.into();
+        let toast = Toast {
+            id: id.clone(),
+            message,
+            level,
+            visible: RwSignal::new(true),
+        };

-    view! {
-        <div 
-            class="toast toast-end toast-bottom"
-            style="position: fixed; bottom: 20px; right: 20px; z-index: 99999;"
-        >
-            <For
-                each=move || notifications.get()
-                key=|item| item.id
-                children=move |item| {
-                    view! {
-                        <ToastItem
-                            level=item.notification.level
-                            message=item.notification.message
-                        />
-                    }
+        self.toasts.update(|m| {
+            m.insert(id.clone(), toast);
+        });
+
+        // Auto remove after 5 seconds
+        let toasts = self.toasts;
+        let id_clone = id.clone();
+        leptos::task::spawn_local(async move {
+            gloo_timers::future::TimeoutFuture::new(5000).await;
+            toasts.update(|m| {
+                if let Some(t) = m.get(&id_clone) {
+                    t.visible.set(false);
                }
-            />
+            });
+            // Wait for animation
+            gloo_timers::future::TimeoutFuture::new(300).await;
+            toasts.update(|m| {
+                m.remove(&id_clone);
+            });
+        });
+    }
+}
+
+pub fn provide_toast_context() {
+    let toasts = RwSignal::new(HashMap::new());
+    provide_context(ToastContext { toasts });
+}
+
+#[component]
+pub fn Toaster() -> impl IntoView {
+    let context = expect_context::<ToastContext>();
+    
+    view! {
+        <div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none">
+            {move || {
+                context.toasts.get().into_values().map(|toast| {
+                    view! { <ToastItem toast=toast /> }
+                }).collect::<Vec<_>>()
+            }}
+        </div>
+    }
+}
+
+#[component]
+fn ToastItem(toast: Toast) -> impl IntoView {
+    let (visible, set_visible) = (toast.visible, toast.visible.write_only());
+    
+    let base_classes = "pointer-events-auto relative w-full rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out";
+    let color_classes = match toast.level {
+        NotificationLevel::Success => "bg-green-50 text-green-900 border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-800",
+        NotificationLevel::Error => "bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800",
+        NotificationLevel::Warning => "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-800",
+        NotificationLevel::Info => "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:border-blue-800",
+    };
+
+    view! {
+        <div
+            class=move || format!("{} {} {}", 
+                base_classes, 
+                color_classes,
+                if visible.get() { "opacity-100 translate-x-0" } else { "opacity-0 translate-x-full" }
+            )
+            role="alert"
+        >
+            <div class="flex items-start gap-4">
+                <div class="flex-1">
+                    <p class="text-sm font-medium">{toast.message.clone()}</p>
+                </div>
+                <button
+                    class="inline-flex shrink-0 opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-none"
+                    on:click=move |_| set_visible.set(false)
+                >
+                    <span class="sr-only">"Kapat"</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+                        <line x1="18" x2="6" y1="6" y2="18"></line>
+                        <line x1="6" x2="18" y1="6" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
        </div>
    }
 }
--- a/frontend/src/components/torrent/add_torrent.rs
+++ b/frontend/src/components/torrent/add_torrent.rs
@@ -1,30 +1,24 @@
 use leptos::prelude::*;
-use leptos::html;
 use leptos::task::spawn_local;
+use crate::components::ui::input::{Input, InputType};
 use crate::store::TorrentStore;
 use crate::api;

+use crate::components::ui::button::{Button, ButtonVariant};
+
 #[component]
 pub fn AddTorrentDialog(
    on_close: Callback<()>,
 ) -> impl IntoView {
-    let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
+    let _store = use_context::<TorrentStore>().expect("TorrentStore not provided");

-    let dialog_ref = NodeRef::<html::Dialog>::new();
-    let uri = signal(String::new());
+    let uri = RwSignal::new(String::new());
    let is_loading = signal(false);
    let error_msg = signal(Option::<String>::None);

-    Effect::new(move |_| {
-        if let Some(dialog) = dialog_ref.get() {
-            let _ = dialog.show_modal();
-        }
-    });
-
    let handle_submit = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
-        let uri_val = uri.0.get();
+        let uri_val = uri.get();
        
        if uri_val.is_empty() {
            error_msg.1.set(Some("Please enter a Magnet URI or URL".to_string()));
@@ -39,14 +33,7 @@ pub fn AddTorrentDialog(
            match api::torrent::add(&uri_val).await {
                Ok(_) => {
                    log::info!("Torrent added successfully");
-                    crate::store::show_toast_with_signal(
-                        notifications, 
-                        shared::NotificationLevel::Success, 
-                        "Torrent başarıyla eklendi"
-                    );
-                    if let Some(dialog) = dialog_ref.get() {
-                        dialog.close();
-                    }
+                    crate::store::toast_success("Torrent başarıyla eklendi");
                    on_close.run(());
                }
                Err(e) => {
@@ -58,51 +45,78 @@ pub fn AddTorrentDialog(
        });
    };

-    let handle_cancel = move |_| {
-        if let Some(dialog) = dialog_ref.get() {
-            dialog.close();
+    let handle_backdrop = {
+        let on_close = on_close.clone();
+        move |e: web_sys::MouseEvent| {
+            e.stop_propagation();
+            on_close.run(());
        }
-        on_close.run(());
    };

    view! {
-        <dialog node_ref=dialog_ref class="modal modal-bottom sm:modal-middle">
-            <div class="modal-box">
-                <h3 class="font-bold text-lg">"Add Torrent"</h3>
-                <p class="py-4 text-sm opacity-70">"Enter a Magnet link or a .torrent file URL."</p>
-                
-                <form on:submit=handle_submit>
-                    <div class="form-control w-full">
-                        <input 
-                            type="text" 
-                            placeholder="magnet:?xt=urn:btih:..." 
-                            class="input input-bordered w-full" 
-                            prop:value=move || uri.0.get()
-                            on:input=move |ev| uri.1.set(event_target_value(&ev))
-                            disabled=move || is_loading.0.get()
-                            autofocus
-                        />
-                    </div>
-                    
-                    <div class="modal-action">
-                        <button type="button" class="btn btn-ghost" on:click=handle_cancel>"Cancel"</button>
-                        <button type="submit" class="btn btn-primary" disabled=move || is_loading.0.get()>
-                            {move || if is_loading.0.get() {
-                                leptos::either::Either::Left(view! { <span class="loading loading-spinner"></span> "Adding..." })
-                            } else {
-                                leptos::either::Either::Right(view! { "Add" })
-                            }}
-                        </button>
-                    </div>
-                </form>
-
-                {move || error_msg.0.get().map(|msg| view! {
-                    <div class="text-error text-sm mt-2">{msg}</div>
-                })}
+        // Backdrop overlay
+        <div
+            class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+            on:click=handle_backdrop
+        />
+        // Dialog panel
+        <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card p-6 shadow-lg rounded-lg sm:max-w-[425px]">
+            // Header
+            <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+                <h2 class="text-lg font-semibold leading-none tracking-tight">"Add Torrent"</h2>
+                <p class="text-sm text-muted-foreground">"Enter a Magnet link or a .torrent file URL."</p>
            </div>
-            <form method="dialog" class="modal-backdrop">
-                <button on:click=handle_cancel>"close"</button>
+            
+            <form on:submit=handle_submit class="space-y-4">
+                <Input
+                    r#type=InputType::Text
+                    placeholder="magnet:?xt=urn:btih:..."
+                    bind_value=uri
+                    disabled=is_loading.0.get()
+                />
+                
+                {move || error_msg.0.get().map(|msg| view! {
+                    <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                        {msg}
+                    </div>
+                })}
+
+                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+                    <Button
+                        variant=ButtonVariant::Ghost
+                        attr:r#type="button"
+                        on:click=move |_| on_close.run(())
+                    >
+                        "Cancel"
+                    </Button>
+                    <Button
+                        attr:r#type="submit"
+                        attr:disabled=move || is_loading.0.get()
+                    >
+                        {move || if is_loading.0.get() {
+                            leptos::either::Either::Left(view! { 
+                                <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span> 
+                                "Adding..." 
+                            })
+                        } else {
+                            leptos::either::Either::Right(view! { "Add" })
+                        }}
+                    </Button>
+                </div>
            </form>
-        </dialog>
+
+            // Close button (X)
+            <Button 
+                variant=ButtonVariant::Ghost
+                class="absolute right-2 top-2 size-8 p-0 opacity-70 hover:opacity-100"
+                on:click=move |_| on_close.run(())
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+                    <path d="M18 6 6 18"></path>
+                    <path d="m6 6 12 12"></path>
+                </svg>
+                <span class="sr-only">"Close"</span>
+            </Button>
+        </div>
    }
 }
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -1,10 +1,31 @@
 use leptos::prelude::*;
-use leptos::html;
 use leptos::task::spawn_local;
-use leptos_use::use_timeout_fn;
-use crate::store::{get_action_messages, show_toast_with_signal};
+use std::collections::HashSet;
+use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis};
+use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
+use crate::components::context_menu::TorrentContextMenu;
+use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent as CardBody};
+use crate::components::ui::data_table::*;
+use crate::components::ui::checkbox::Checkbox;
+use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
+use crate::components::ui::empty::*;
+use crate::components::ui::input::Input;
+use crate::components::ui::multi_select::*;
+use crate::components::ui::dropdown_menu::*;
+use crate::components::ui::alert_dialog::*;
+
+const ALL_COLUMNS: [(&str, &str); 8] = [
+    ("Name", "Name"),
+    ("Size", "Size"),
+    ("Progress", "Progress"),
+    ("Status", "Status"),
+    ("DownSpeed", "DL Speed"),
+    ("UpSpeed", "UP Speed"),
+    ("ETA", "ETA"),
+    ("AddedDate", "Date"),
+];

 fn format_bytes(bytes: i64) -> String {
    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -49,16 +70,22 @@ pub fn TorrentTable() -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let sort_col = signal(SortColumn::AddedDate);
    let sort_dir = signal(SortDirection::Descending);
+    
+    let selected_hashes = RwSignal::new(HashSet::<String>::new());
+    
+    let visible_columns = RwSignal::new(HashSet::from([
+        "Name".to_string(), "Size".to_string(), "Progress".to_string(), 
+        "Status".to_string(), "DownSpeed".to_string(), "UpSpeed".to_string(),
+        "ETA".to_string(), "AddedDate".to_string()
+    ]));

-    let filtered_hashes = move || {
+    let sorted_hashes_data = Memo::new(move |_| {
        let torrents_map = store.torrents.get();
-        log::debug!("TorrentTable: store.torrents has {} entries", torrents_map.len());
-        
        let filter = store.filter.get();
        let search = store.search_query.get();
        let search_lower = search.to_lowercase();
        
-        let mut torrents: Vec<&shared::Torrent> = torrents_map.values().filter(|t| {
+        let mut torrents: Vec<shared::Torrent> = torrents_map.values().filter(|t| {
            let matches_filter = match filter {
                crate::store::FilterStatus::All => true,
                crate::store::FilterStatus::Downloading => t.status == shared::TorrentStatus::Downloading,
@@ -70,9 +97,7 @@ pub fn TorrentTable() -> impl IntoView {
            };
            let matches_search = if search_lower.is_empty() { true } else { t.name.to_lowercase().contains(&search_lower) };
            matches_filter && matches_search
-        }).collect();
-
-        log::debug!("TorrentTable: {} torrents after filtering", torrents.len());
+        }).cloned().collect();

        torrents.sort_by(|a, b| {
            let col = sort_col.0.get();
@@ -93,8 +118,31 @@ pub fn TorrentTable() -> impl IntoView {
            };
            if dir == SortDirection::Descending { cmp.reverse() } else { cmp }
        });
-        torrents.into_iter().map(|t| t.hash.clone()).collect::<Vec<String>>()
-    };
+        torrents
+    });
+
+    let filtered_hashes = Memo::new(move |_| {
+        sorted_hashes_data.get().into_iter().map(|t| t.hash.clone()).collect::<Vec<String>>()
+    });
+
+    let selected_count = Signal::derive(move || {
+        let current_hashes: HashSet<String> = filtered_hashes.get().into_iter().collect();
+        selected_hashes.with(|selected| {
+            selected.iter().filter(|h| current_hashes.contains(*h)).count()
+        })
+    });
+
+    let has_selection = Signal::derive(move || selected_count.get() > 0);
+
+    let handle_select_all = Callback::new(move |checked: bool| {
+        selected_hashes.update(|selected| {
+            let hashes = filtered_hashes.get_untracked();
+            for h in hashes {
+                if checked { selected.insert(h); } 
+                else { selected.remove(&h); }
+            }
+        });
+    });

    let handle_sort = move |col: SortColumn| {
        if sort_col.0.get() == col {
@@ -107,33 +155,41 @@ pub fn TorrentTable() -> impl IntoView {
        }
    };

-    let sort_details_ref = NodeRef::<html::Details>::new();
+    let sort_icon = move |col: SortColumn| {
+        let is_active = sort_col.0.get() == col;
+        let class = if is_active { "size-3 text-primary" } else { "size-3 opacity-30 group-hover:opacity-100 transition-opacity" };
+        view! { <ArrowUpDown class=class.to_string() /> }.into_any()
+    };

-    let sort_arrow = move |col: SortColumn| {
-        if sort_col.0.get() == col {
-            match sort_dir.0.get() {
-                SortDirection::Ascending => view! { <span class="ml-1 text-xs">"▲"</span> }.into_any(),
-                SortDirection::Descending => view! { <span class="ml-1 text-xs">"▼"</span> }.into_any(),
+    let bulk_action = move |action: &'static str| {
+        let hashes: Vec<String> = selected_hashes.get().into_iter().collect();
+        if hashes.is_empty() { return; }
+        
+        spawn_local(async move {
+            let mut success = true;
+            for hash in hashes {
+                let res = match action {
+                    "start" => api::torrent::start(&hash).await,
+                    "stop" => api::torrent::stop(&hash).await,
+                    "delete" => api::torrent::delete(&hash).await,
+                    "delete_with_data" => api::torrent::delete_with_data(&hash).await,
+                    _ => Ok(()),
+                };
+                if res.is_err() { success = false; }
            }
-        } else { view! { <span class="ml-1 text-xs opacity-0 group-hover:opacity-50">"▲"</span> }.into_any() }
+            if success {
+                show_toast(NotificationLevel::Success, format!("Toplu işlem başarıyla tamamlandı: {}", action));
+                selected_hashes.update(|s| s.clear());
+            } else {
+                show_toast(NotificationLevel::Error, "Bazı işlemler başarısız oldu.");
+            }
+        });
    };

-    let selected_hash = signal(Option::<String>::None);
-    let menu_visible = signal(false);
-    let menu_position = signal((0, 0));
-
-    let handle_context_menu = move |e: web_sys::MouseEvent, hash: String| {
-        e.prevent_default();
-        menu_position.1.set((e.client_x(), e.client_y()));
-        selected_hash.1.set(Some(hash));
-        menu_visible.1.set(true);
-    };
-
-    let on_action = move |(action, hash): (String, String)| {
+    let on_action = Callback::new(move |(action, hash): (String, String)| {
        let (success_msg_str, error_msg_str): (&'static str, &'static str) = get_action_messages(&action);
        let success_msg = success_msg_str.to_string();
        let error_msg = error_msg_str.to_string();
-        let notifications = store.notifications;
        spawn_local(async move {
            let result = match action.as_str() {
                "delete" => api::torrent::delete(&hash).await,
@@ -143,244 +199,415 @@ pub fn TorrentTable() -> impl IntoView {
                _ => api::torrent::action(&hash, &action).await,
            };
            match result {
-                Ok(_) => show_toast_with_signal(notifications, NotificationLevel::Success, success_msg),
-                Err(e) => show_toast_with_signal(notifications, NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
+                Ok(_) => show_toast(NotificationLevel::Success, success_msg),
+                Err(e) => show_toast(NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
            }
        });
-    };
+    });

    view! {
-        <div class="overflow-x-auto h-full bg-base-100 relative">
-            <div class="hidden md:block h-full overflow-x-auto">
-                <table class="table table-sm table-pin-rows w-full max-w-full whitespace-nowrap">
-                    <thead>
-                        <tr class="text-xs uppercase text-base-content/60 border-b border-base-200">
-                            <th class="cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
-                                <div class="flex items-center">"Name" {move || sort_arrow(SortColumn::Name)}</div>
-                            </th>
-                            <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
-                                 <div class="flex items-center">"Size" {move || sort_arrow(SortColumn::Size)}</div>
-                            </th>
-                            <th class="w-48 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
-                                 <div class="flex items-center">"Progress" {move || sort_arrow(SortColumn::Progress)}</div>
-                            </th>
-                            <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
-                                 <div class="flex items-center">"Status" {move || sort_arrow(SortColumn::Status)}</div>
-                            </th>
-                            <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
-                                 <div class="flex items-center">"DL Speed" {move || sort_arrow(SortColumn::DownSpeed)}</div>
-                            </th>
-                            <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
-                                 <div class="flex items-center">"Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}</div>
-                            </th>
-                            <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
-                                 <div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
-                            </th>
-                            <th class="w-32 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::AddedDate)>
-                                 <div class="flex items-center">"Date" {move || sort_arrow(SortColumn::AddedDate)}</div>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <For each=move || filtered_hashes() key=|hash| hash.clone() children={
-                            let handle_context_menu = handle_context_menu.clone();
-                            move |hash| view! { <TorrentRow hash=hash.clone() selected_hash=selected_hash.0 set_selected_hash=selected_hash.1 on_context_menu=handle_context_menu.clone() /> }
-                        } />
-                    </tbody>
-                </table>
+        <div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-4 gap-4">
+            // --- TOPBAR ---
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-2 flex-1 max-w-md">
+                    <Input
+                        class="h-9"
+                        placeholder="Torrent ara..."
+                        bind_value=store.search_query
+                    />
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <Show when=move || has_selection.get()>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger class="gap-2 bg-secondary text-secondary-foreground border-none hover:bg-secondary/80">
+                                <Ellipsis class="size-4" />
+                                {move || format!("Toplu İşlem ({})", selected_count.get())}
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent class="w-48">
+                                <DropdownMenuLabel>"Seçili Torrentler"</DropdownMenuLabel>
+                                <DropdownMenuGroup class="mt-2">
+                                    <DropdownMenuItem on:click=move |_| bulk_action("start")>
+                                        <Play class="mr-2 size-4" /> "Başlat"
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem on:click=move |_| bulk_action("stop")>
+                                        <Square class="mr-2 size-4" /> "Durdur"
+                                    </DropdownMenuItem>
+                                    
+                                    <div class="my-1 h-px bg-border" />
+                                    
+                                    <AlertDialog>
+                                        <AlertDialogTrigger class="w-full text-left">
+                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10">
+                                                <Trash2 class="size-4" /> "Toplu Sil"
+                                            </div>
+                                        </AlertDialogTrigger>
+                                        <AlertDialogContent>
+                                            <AlertDialogHeader>
+                                                <AlertDialogTitle>"Toplu Silme Onayı"</AlertDialogTitle>
+                                                <AlertDialogDescription>
+                                                    {move || format!("Seçili {} torrent silinecek. Bu işlem geri alınamaz.", selected_count.get())}
+                                                </AlertDialogDescription>
+                                            </AlertDialogHeader>
+                                            <AlertDialogFooter>
+                                                <AlertDialogClose>"İptal"</AlertDialogClose>
+                                                <Button variant=ButtonVariant::Destructive on:click=move |_| bulk_action("delete")>
+                                                    "Sil"
+                                                </Button>
+                                            </AlertDialogFooter>
+                                        </AlertDialogContent>
+                                    </AlertDialog>
+                                </DropdownMenuGroup>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </Show>
+
+                    <MultiSelect values=visible_columns>
+                        <MultiSelectTrigger class="w-[140px] h-9">
+                            <div class="flex items-center gap-2 text-xs">
+                                <Settings2 class="size-4" />
+                                "Sütunlar"
+                            </div>
+                        </MultiSelectTrigger>
+                        <MultiSelectContent>
+                            <MultiSelectGroup>
+                                {ALL_COLUMNS.into_iter().map(|(id, label)| {
+                                    let id_val = id.to_string();
+                                    view! {
+                                        <MultiSelectItem>
+                                            <MultiSelectOption value=id_val.clone() attr:disabled=move || id_val == "Name">
+                                                {label}
+                                            </MultiSelectOption>
+                                        </MultiSelectItem>
+                                    }.into_any()
+                                }).collect_view()}
+                            </MultiSelectGroup>
+                        </MultiSelectContent>
+                    </MultiSelect>
+                </div>
            </div>

-            <div class="md:hidden flex flex-col h-full bg-base-200 relative cursor-pointer">
-                <div class="px-3 py-2 border-b border-base-200 flex justify-between items-center bg-base-100/95 backdrop-blur z-10 shrink-0 cursor-default">
-                    <span class="text-xs font-bold opacity-50 uppercase tracking-wider">"Torrents"</span>
-                    <details class="dropdown dropdown-end" node_ref=sort_details_ref>
-                        <summary class="btn btn-ghost btn-xs gap-1 opacity-70 font-normal list-none [&::-webkit-details-marker]:hidden cursor-pointer">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" /></svg>
-                            <span class="pointer-events-none">"Sort"</span>
-                        </summary>
-                        <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-100 rounded-box w-48 mt-1 border border-base-200 text-xs cursor-default">
-                                <li class="menu-title px-2 py-1 opacity-50 text-[10px] uppercase font-bold">"Sort By"</li>
-                                {
-                                    let columns = vec![(SortColumn::Name, "Name"), (SortColumn::Size, "Size"), (SortColumn::Progress, "Progress"), (SortColumn::Status, "Status"), (SortColumn::DownSpeed, "DL Speed"), (SortColumn::UpSpeed, "Up Speed"), (SortColumn::ETA, "ETA"), (SortColumn::AddedDate, "Date")];
-                                    columns.into_iter().map(|(col, label)| {
-                                        let is_active = move || sort_col.0.get() == col;
-                                        view! {
-                                            <li>
-                                                <button type="button" class=move || if is_active() { "bg-primary/10 text-primary font-bold flex justify-between" } else { "flex justify-between" } on:click=move |_| { handle_sort(col); if let Some(el) = sort_details_ref.get() { el.set_open(false); } }>
-                                                    {label}
-                                                    <Show when=is_active fallback=|| ()><span class="opacity-70 text-[10px]">{move || match sort_dir.0.get() { SortDirection::Ascending => "▲", SortDirection::Descending => "▼" }}</span></Show>
-                                                </button>
-                                            </li>
+            // --- MAIN TABLE ---
+            <div class="flex-1 min-h-0 overflow-hidden">
+                <DataTableWrapper class="h-full bg-card/50">
+                    <div class="h-full overflow-auto">
+                        <DataTable>
+                            <DataTableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
+                                <DataTableRow class="hover:bg-transparent">
+                                    <DataTableHead class="w-12 px-4">
+                                        <Checkbox
+                                            checked=Signal::derive(move || {
+                                                let hashes = filtered_hashes.get();
+                                                !hashes.is_empty() && selected_count.get() == hashes.len()
+                                            })
+                                            on_checked_change=handle_select_all
+                                        />
+                                    </DataTableHead>
+                                    
+                                    {move || visible_columns.get().contains("Name").then(|| view! {
+                                        <DataTableHead class="cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
+                                            <div class="flex items-center gap-2">"Name" {move || sort_icon(SortColumn::Name)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("Size").then(|| view! {
+                                        <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
+                                            <div class="flex items-center gap-2">"Size" {move || sort_icon(SortColumn::Size)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("Progress").then(|| view! {
+                                        <DataTableHead class="w-48 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
+                                            <div class="flex items-center gap-2">"Progress" {move || sort_icon(SortColumn::Progress)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("Status").then(|| view! {
+                                        <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
+                                            <div class="flex items-center gap-2">"Status" {move || sort_icon(SortColumn::Status)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("DownSpeed").then(|| view! {
+                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
+                                            <div class="flex items-center justify-end gap-2">"DL Speed" {move || sort_icon(SortColumn::DownSpeed)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("UpSpeed").then(|| view! {
+                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
+                                            <div class="flex items-center justify-end gap-2">"UP Speed" {move || sort_icon(SortColumn::UpSpeed)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("ETA").then(|| view! {
+                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::ETA)>
+                                            <div class="flex items-center justify-end gap-2">"ETA" {move || sort_icon(SortColumn::ETA)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                    
+                                    {move || visible_columns.get().contains("AddedDate").then(|| view! {
+                                        <DataTableHead class="w-32 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::AddedDate)>
+                                            <div class="flex items-center justify-end gap-2">"Date" {move || sort_icon(SortColumn::AddedDate)}</div>
+                                        </DataTableHead>
+                                    }).into_any()}
+                                </DataTableRow>
+                            </DataTableHeader>
+                            <DataTableBody>
+                                <Show
+                                    when=move || !filtered_hashes.get().is_empty()
+                                    fallback=move || view! {
+                                        <DataTableRow class="hover:bg-transparent">
+                                            <DataTableCell attr:colspan="10" class="h-[400px]">
+                                                <Empty class="h-full">
+                                                    <EmptyHeader>
+                                                        <EmptyMedia variant=EmptyMediaVariant::Icon>
+                                                            <Inbox class="size-10 text-muted-foreground" />
+                                                        </EmptyMedia>
+                                                        <EmptyTitle>"Torrent Bulunamadı"</EmptyTitle>
+                                                        <EmptyDescription>
+                                                            {move || {
+                                                                let query = store.search_query.get();
+                                                                if query.is_empty() { "Henüz torrent bulunmuyor.".to_string() }
+                                                                else { "Arama kriterlerinize uygun sonuç bulunamadı.".to_string() }
+                                                            }}
+                                                        </EmptyDescription>
+                                                    </EmptyHeader>
+                                                </Empty>
+                                            </DataTableCell>
+                                        </DataTableRow>
+                                    }.into_any()
+                                >
+                                    <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
+                                        let on_action = on_action.clone();
+                                        move |hash| {
+                                            let h = hash.clone();
+                                            let is_selected = Signal::derive(move || {
+                                                selected_hashes.with(|selected| selected.contains(&h))
+                                            });
+                                            let h_for_change = hash.clone();
+                                            view! { 
+                                                <TorrentRow 
+                                                    hash=hash.clone() 
+                                                    on_action=on_action.clone() 
+                                                    is_selected=is_selected
+                                                    visible_columns=visible_columns
+                                                    on_select=Callback::new(move |checked| {
+                                                        selected_hashes.update(|selected| {
+                                                            if checked { selected.insert(h_for_change.clone()); }
+                                                            else { selected.remove(&h_for_change); }
+                                                        });
+                                                    })
+                                                /> 
+                                            }
                                        }
-                                    }).collect::<Vec<_>>()
-                                }
-                        </ul>
-                    </details>
-                </div>
-                <div class="overflow-y-auto p-3 pb-20 flex-1 grid grid-cols-1 content-start gap-3 cursor-pointer">
-                    <For each=move || filtered_hashes() key=|hash| hash.clone() children={
-                        let handle_context_menu = handle_context_menu.clone();
-                        move |hash| view! { <TorrentCard hash=hash.clone() selected_hash=selected_hash.0 set_selected_hash=selected_hash.1 set_menu_position=menu_position.1 set_menu_visible=menu_visible.1 on_context_menu=handle_context_menu.clone() /> }
-                    } />
-                </div>
+                                    } />
+                                </Show>
+                            </DataTableBody>
+                        </DataTable>
+                    </div>
+                </DataTableWrapper>
            </div>

-            <Show when=move || menu_visible.0.get() fallback=|| ()>
-                <crate::components::context_menu::ContextMenu position=menu_position.0.get() torrent_hash=selected_hash.0.get().unwrap_or_default() on_close=Callback::new(move |()| menu_visible.1.set(false)) on_action=Callback::new(move |args| on_action(args)) />
-            </Show>
+            <div class="hidden md:flex items-center justify-between px-2 py-1 text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
+                <div class="flex gap-4">
+                    <span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
+                    <Show when=move || has_selection.get()>
+                        <span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
+                    </Show>
+                </div>
+                <div>"VibeTorrent v3"</div>
+            </div>
        </div>
-    }
+    }.into_any()
 }

 #[component]
 fn TorrentRow(
    hash: String,
-    selected_hash: ReadSignal<Option<String>>,
-    set_selected_hash: WriteSignal<Option<String>>,
-    on_context_menu: impl Fn(web_sys::MouseEvent, String) + 'static + Clone + Send + Sync,
+    on_action: Callback<(String, String)>,
+    is_selected: Signal<bool>,
+    visible_columns: RwSignal<HashSet<String>>,
+    on_select: Callback<bool>,
 ) -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let h = hash.clone();
    let torrent = Memo::new(move |_| store.torrents.with(|map| map.get(&h).cloned()));

+    let stored_hash = StoredValue::new(hash.clone());
+
    view! {
        <Show when=move || torrent.get().is_some() fallback=|| ()>
            {
-                let on_context_menu = on_context_menu.clone();
-                let hash = hash.clone();
+                let on_action = on_action.clone();
                move || {
                    let t = torrent.get().unwrap();
-                    let t_hash = hash.clone();
                    let t_name = t.name.clone();
-                    let status_class = match t.status { shared::TorrentStatus::Seeding => "text-success", shared::TorrentStatus::Downloading => "text-primary", shared::TorrentStatus::Paused => "text-warning", shared::TorrentStatus::Error => "text-error", _ => "text-base-content/50" };
-                    let progress_class = if t.percent_complete >= 100.0 { "progress-success" } else { "progress-primary" };
+                    let status_color = match t.status { shared::TorrentStatus::Seeding => "text-green-500", shared::TorrentStatus::Downloading => "text-blue-500", shared::TorrentStatus::Paused => "text-yellow-500", shared::TorrentStatus::Error => "text-red-500", _ => "text-muted-foreground" };
+                    
+                    let is_active_selection = Memo::new(move |_| {
+                        let selected = store.selected_torrent.get();
+                        selected.as_deref() == Some(stored_hash.get_value().as_str())
+                    });

-                    let selected_hash_clone = selected_hash.clone();
-                    let t_hash_row = t_hash.clone();
+                    let t_name_stored = StoredValue::new(t_name.clone());
+                    let h_for_menu = stored_hash.get_value();

                    view! {
-                        <tr
-                            class=move || {
-                                let base = "hover border-b border-base-200 select-none";
-                                if selected_hash_clone.get() == Some(t_hash_row.clone()) { format!("{} bg-primary/10", base) } else { base.to_string() }
-                            }
-                            on:contextmenu={
-                                let t_hash = t_hash.clone();
-                                let on_context_menu = on_context_menu.clone();
-                                move |e: web_sys::MouseEvent| on_context_menu(e, t_hash.clone())
-                            }
-                            on:click={
-                                let t_hash = t_hash.clone();
-                                let set_selected_hash = set_selected_hash.clone();
-                                move |_| set_selected_hash.set(Some(t_hash.clone()))
-                            }
-                        >
-                            <td class="font-medium truncate max-w-xs" title=t_name.clone()>{t_name.clone()}</td>
-                            <td class="opacity-80 font-mono text-[11px]">{format_bytes(t.size)}</td>
-                            <td>
-                                <div class="flex items-center gap-2">
-                                    <progress class={format!("progress w-24 {}", progress_class)} value={t.percent_complete} max="100"></progress>
-                                    <span class="text-[10px] opacity-70">{format!("{:.1}%", t.percent_complete)}</span>
-                                </div>
-                            </td>
-                            <td class={format!("text-[11px] font-medium {}", status_class)}>{format!("{:?}", t.status)}</td>
-                            <td class="text-right font-mono text-[11px] opacity-80 text-success">{format_speed(t.down_rate)}</td>
-                            <td class="text-right font-mono text-[11px] opacity-80 text-primary">{format_speed(t.up_rate)}</td>
-                            <td class="text-right font-mono text-[11px] opacity-80">{format_duration(t.eta)}</td>
-                            <td class="text-right font-mono text-[11px] opacity-80 whitespace-nowrap">{format_date(t.added_date)}</td>
-                        </tr>
-                    }
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                            <DataTableRow 
+                                class="cursor-pointer group h-10"
+                                attr:data-state=move || if is_selected.get() || is_active_selection.get() { "selected" } else { "" }
+                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                            >
+                                <DataTableCell class="w-12 px-4">
+                                    <Checkbox 
+                                        checked=is_selected 
+                                        on_checked_change=on_select 
+                                    />
+                                </DataTableCell>
+                                
+                                {move || visible_columns.get().contains("Name").then({
+                                    move || view! {
+                                        <DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_stored.get_value()>
+                                            {t_name_stored.get_value()}
+                                        </DataTableCell>
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("Size").then({
+                                    let size_bytes = t.size;
+                                    move || {
+                                        let size_str = format_bytes(size_bytes);
+                                        view! { <DataTableCell class="font-mono text-xs text-muted-foreground whitespace-nowrap">{size_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("Progress").then({
+                                    let percent = t.percent_complete;
+                                    move || view! {
+                                        <DataTableCell>
+                                            <div class="flex items-center gap-2">
+                                                <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden min-w-[80px]">
+                                                    <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", percent)></div>
+                                                </div>
+                                                <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", percent)}</span>
+                                            </div>
+                                        </DataTableCell>
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("Status").then({
+                                    let status_text = format!("{:?}", t.status);
+                                    let color = status_color;
+                                    move || view! { <DataTableCell class={format!("text-xs font-semibold whitespace-nowrap {}", color)}>{status_text.clone()}</DataTableCell> }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("DownSpeed").then({
+                                    let rate = t.down_rate;
+                                    move || {
+                                        let speed_str = format_speed(rate);
+                                        view! { <DataTableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 whitespace-nowrap">{speed_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("UpSpeed").then({
+                                    let rate = t.up_rate;
+                                    move || {
+                                        let speed_str = format_speed(rate);
+                                        view! { <DataTableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 whitespace-nowrap">{speed_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("ETA").then({
+                                    let eta = t.eta;
+                                    move || {
+                                        let eta_str = format_duration(eta);
+                                        view! { <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">{eta_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("AddedDate").then({
+                                    let date = t.added_date;
+                                    move || {
+                                        let date_str = format_date(date);
+                                        view! { <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">{date_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+                            </DataTableRow>
+                        </TorrentContextMenu>
+                    }.into_any()
                }
            }
        </Show>
-    }
+    }.into_any()
 }

 #[component]
 fn TorrentCard(
    hash: String,
-    selected_hash: ReadSignal<Option<String>>,
-    set_selected_hash: WriteSignal<Option<String>>,
-    set_menu_position: WriteSignal<(i32, i32)>,
-    set_menu_visible: WriteSignal<bool>,
-    on_context_menu: impl Fn(web_sys::MouseEvent, String) + 'static + Clone + Send + Sync,
+    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let h = hash.clone();
    let torrent = Memo::new(move |_| store.torrents.with(|map| map.get(&h).cloned()));

+    let stored_hash = StoredValue::new(hash.clone());
+
    view! {
        <Show when=move || torrent.get().is_some() fallback=|| ()>
            {
-                let hash = hash.clone();
-                let on_context_menu = on_context_menu.clone();
+                let on_action = on_action.clone();
                move || {
                    let t = torrent.get().unwrap();
-                    let t_hash = hash.clone();
                    let t_name = t.name.clone();
-                    let status_badge_class = match t.status { shared::TorrentStatus::Seeding => "badge-success badge-soft", shared::TorrentStatus::Downloading => "badge-primary badge-soft", shared::TorrentStatus::Paused => "badge-warning badge-soft", shared::TorrentStatus::Error => "badge-error badge-soft", _ => "badge-ghost" };
-
-                    let t_hash_long = t_hash.clone();
-                    let set_menu_position = set_menu_position.clone();
-                    let set_selected_hash = set_selected_hash.clone();
-                    let set_menu_visible = set_menu_visible.clone();
-                    let leptos_use::UseTimeoutFnReturn { start, .. } = use_timeout_fn(
-                        move |pos: (i32, i32)| {
-                            set_menu_position.set(pos);
-                            set_selected_hash.set(Some(t_hash_long.clone()));
-                            set_menu_visible.set(true);
-                            let _ = window().navigator().vibrate_with_duration(50);
-                        },
-                        600.0,
-                    );
-
-                    let selected_hash_clone = selected_hash.clone();
-                    let t_hash_card = t_hash.clone();
+                    let status_badge_class = match t.status { shared::TorrentStatus::Seeding => "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800", shared::TorrentStatus::Downloading => "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800", shared::TorrentStatus::Paused => "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800", shared::TorrentStatus::Error => "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800", _ => "bg-muted text-muted-foreground" };
+                    let h_for_menu = stored_hash.get_value();

                    view! {
-                        <div
-                            class=move || {
-                                let base = "card card-compact bg-base-100 shadow-sm border border-base-200 select-none cursor-pointer";
-                                if selected_hash_clone.get() == Some(t_hash_card.clone()) { format!("{} ring-2 ring-primary ring-inset", base) } else { base.to_string() }
-                            }
-                            on:contextmenu={
-                                let t_hash = t_hash.clone();
-                                let on_context_menu = on_context_menu.clone();
-                                move |e: web_sys::MouseEvent| on_context_menu(e, t_hash.clone())
-                            }
-                            on:click={
-                                let t_hash = t_hash.clone();
-                                let set_selected_hash = set_selected_hash.clone();
-                                move |_| set_selected_hash.set(Some(t_hash.clone()))
-                            }
-                            on:touchstart={
-                                let start = start.clone();
-                                move |e: web_sys::TouchEvent| if let Some(touch) = e.touches().get(0) { start((touch.client_x(), touch.client_y())); }
-                            }
-                        >
-                            <div class="card-body gap-3">
-                                <div class="flex justify-between items-start gap-2">
-                                    <h3 class="font-medium text-sm line-clamp-2 leading-tight">{t_name.clone()}</h3>
-                                    <div class={format!("badge badge-xs text-[10px] whitespace-nowrap {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
-                                </div>
-                                <div class="flex flex-col gap-1">
-                                    <div class="flex justify-between text-[10px] opacity-70">
-                                        <span>{format_bytes(t.size)}</span>
-                                        <span>{format!("{:.1}%", t.percent_complete)}</span>
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                            <div
+                                class=move || {
+                                    let selected = store.selected_torrent.get();
+                                    let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
+                                    if is_selected {
+                                        "ring-2 ring-primary rounded-lg transition-all"
+                                    } else {
+                                        "transition-all"
+                                    }
+                                }
+                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                            >
+                            <Card class="h-full select-none cursor-pointer hover:border-primary transition-colors">
+                                <CardHeader class="p-3 pb-0">
+                                    <div class="flex justify-between items-start gap-2">
+                                        <CardTitle class="text-sm font-medium leading-tight line-clamp-2">{t_name.clone()}</CardTitle>
+                                        <div class={format!("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
                                    </div>
-                                    <progress class="progress w-full h-1.5" value={t.percent_complete} max="100"></progress>
-                                </div>
-                                <div class="grid grid-cols-4 gap-2 text-[10px] font-mono opacity-80 pt-1 border-t border-base-200/50">
-                                    <div class="flex flex-col text-success"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
-                                    <div class="flex flex-col text-primary"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
-                                    <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
-                                    <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
-                                </div>
+                                </CardHeader>
+                                <CardBody class="p-3 pt-2 gap-3 flex flex-col">
+                                    <div class="flex flex-col gap-1">
+                                        <div class="flex justify-between text-[10px] text-muted-foreground">
+                                            <span>{format_bytes(t.size)}</span>
+                                            <span>{format!("{:.1}%", t.percent_complete)}</span>
+                                        </div>
+                                        <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
+                                            <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
+                                        </div>
+                                    </div>
+                                    <div class="grid grid-cols-4 gap-2 text-[10px] font-mono text-muted-foreground pt-1 border-t border-border/50">
+                                        <div class="flex flex-col text-blue-600 dark:text-blue-500"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
+                                        <div class="flex flex-col text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
+                                        <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
+                                        <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
+                                    </div>
+                                </CardBody>
+                            </Card>
                            </div>
-                        </div>
-                    }
+                        </TorrentContextMenu>
+                    }.into_any()
                }
            }
        </Show>
-    }
+    }.into_any()
 }
--- a/frontend/src/components/ui/alert_dialog.rs
+++ b/frontend/src/components/ui/alert_dialog.rs
@@ -0,0 +1,94 @@
+use leptos::prelude::*;
+
+use crate::components::ui::button::{ButtonSize, ButtonVariant};
+use crate::components::ui::dialog::{
+    Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+    DialogTrigger,
+};
+
+#[component]
+pub fn AlertDialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! { <Dialog class=class>{children()}</Dialog> }
+}
+
+#[component]
+pub fn AlertDialogTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    view! {
+        <DialogTrigger class=class variant=variant size=size>
+            {children()}
+        </DialogTrigger>
+    }
+}
+
+#[component]
+pub fn AlertDialogContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogContent class=class close_on_backdrop_click=false data_name_prefix="AlertDialog">
+            {children()}
+        </DialogContent>
+    }
+}
+
+#[component]
+pub fn AlertDialogBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogBody class=class attr:data-name="AlertDialogBody">
+            {children()}
+        </DialogBody>
+    }
+}
+
+#[component]
+pub fn AlertDialogHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogHeader class=class attr:data-name="AlertDialogHeader">
+            {children()}
+        </DialogHeader>
+    }
+}
+
+#[component]
+pub fn AlertDialogTitle(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogTitle class=class attr:data-name="AlertDialogTitle">
+            {children()}
+        </DialogTitle>
+    }
+}
+
+#[component]
+pub fn AlertDialogDescription(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogDescription class=class attr:data-name="AlertDialogDescription">
+            {children()}
+        </DialogDescription>
+    }
+}
+
+#[component]
+pub fn AlertDialogFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogFooter class=class attr:data-name="AlertDialogFooter">
+            {children()}
+        </DialogFooter>
+    }
+}
+
+#[component]
+pub fn AlertDialogClose(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    view! {
+        <DialogClose class=class variant=variant size=size>
+            {children()}
+        </DialogClose>
+    }
+}
--- a/frontend/src/components/ui/button.rs
+++ b/frontend/src/components/ui/button.rs
@@ -0,0 +1,39 @@
+use leptos::prelude::*;
+use leptos_ui::variants;
+
+// TODO 💪 Loading state (demo_use_timeout_fn.rs and demo_button.rs)
+
+variants! {
+    Button {
+        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  w-fit  hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]", // Using hover:cursor-pointer as workaround for href_support.
+        variants: {
+            variant: {
+                Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+                Destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                Outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/5",
+                Secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+                Ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+                Accent: "bg-accent text-accent-foreground hover:bg-accent/80",
+                Link: "text-primary underline-offset-4 hover:underline",
+                //
+                Warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+                Success: "bg-success text-success-foreground hover:bg-success/90",
+                Bordered: "bg-transparent border border-zinc-200 text-muted-foreground",
+            },
+            size: {
+                Default: "h-9 px-4 py-2 has-[>svg]:px-3",
+                Sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+                Lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+                Icon: "size-9",
+                //
+                Mobile: "px-6 py-3 rounded-[24px]",
+                Badge: "px-2.5 py-0.5 text-xs"
+            }
+        },
+        component: {
+            element: button,
+            support_href: true,
+            support_aria_current: true
+        }
+    }
+}
--- a/frontend/src/components/ui/card.rs
+++ b/frontend/src/components/ui/card.rs
@@ -0,0 +1,15 @@
+use leptos::prelude::*;
+use leptos_ui::clx;
+
+mod components {
+    use super::*;
+
+    clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
+    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6"}
+    clx! {CardTitle, h2, "leading-none font-semibold"}
+    clx! {CardContent, div, "px-6"}
+    clx! {CardDescription, p, "text-muted-foreground text-sm"}
+    clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}
+}
+
+pub use components::*;
--- a/frontend/src/components/ui/checkbox.rs
+++ b/frontend/src/components/ui/checkbox.rs
@@ -0,0 +1,43 @@
+use icons::Check;
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Checkbox(
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional)] checked: Signal<bool>,
+    #[prop(into, optional)] disabled: Signal<bool>,
+    #[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
+    #[prop(into, optional, default = "Checkbox".to_string())] aria_label: String,
+) -> impl IntoView {
+    let checked_state = move || if checked.get() { "checked" } else { "unchecked" };
+
+    let checkbox_class = tw_merge!(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        class
+    );
+
+    view! {
+        <button
+            data-name="Checkbox"
+            class=checkbox_class
+            data-state=checked_state
+            type="button"
+            role="checkbox"
+            aria-checked=move || checked.get().to_string()
+            aria-label=aria_label
+            disabled=move || disabled.get()
+            on:click=move |_| {
+                if !disabled.get() {
+                    if let Some(callback) = on_checked_change {
+                        callback.run(!checked.get());
+                    }
+                }
+            }
+        >
+            <span data-name="CheckboxIndicator" class="flex justify-center items-center text-current transition-none">
+                {move || { checked.get().then(|| view! { <Check class="size-3.5".to_string() /> }) }}
+            </span>
+        </button>
+    }
+}
--- a/frontend/src/components/ui/context_menu.rs
+++ b/frontend/src/components/ui/context_menu.rs
@@ -0,0 +1,436 @@
+use icons::ChevronRight;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+use wasm_bindgen::JsCast;
+
+use crate::components::hooks::use_random::use_random_id_for;
+
+/// Programmatically close any open context menu.
+pub fn close_context_menu() {
+    let Some(document) = window().document() else {
+        return;
+    };
+    let Some(menu) = document.query_selector("[data-target='target__context'][data-state='open']").ok().flatten()
+    else {
+        return;
+    };
+    let _ = menu.set_attribute("data-state", "closed");
+    if let Some(el) = menu.dyn_ref::<web_sys::HtmlElement>() {
+        let _ = el.style().set_property("pointer-events", "none");
+    }
+}
+
+mod components {
+    use super::*;
+    clx! {ContextMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {ContextMenuGroup, ul, "group"}
+    clx! {ContextMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+    clx! {ContextMenuSubContent, ul, "context__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
+    clx! {ContextMenuLink, a, "w-full inline-flex gap-2 items-center"}
+}
+
+pub use components::*;
+
+#[component]
+pub fn ContextMenuAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] aria_selected: Option<Signal<bool>>,
+    #[prop(optional, into)] href: Option<String>,
+) -> impl IntoView {
+    let _ctx = expect_context::<ContextMenuContext>();
+
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    let aria_selected_attr = move || aria_selected.map(|s| s.get()).unwrap_or(false).to_string();
+
+    if let Some(href) = href {
+        view! {
+            <a
+                data-name="ContextMenuAction"
+                class=class
+                href=href
+                aria-selected=aria_selected_attr
+                data-context-close="true"
+            >
+                {children()}
+            </a>
+        }
+        .into_any()
+    } else {
+        view! {
+            <button
+                type="button"
+                data-name="ContextMenuAction"
+                class=class
+                data-context-close="true"
+                aria-selected=aria_selected_attr
+            >
+                {children()}
+            </button>
+        }
+        .into_any()
+    }
+}
+
+#[component]
+pub fn ContextMenuHoldAction(
+    children: Children,
+    #[prop(into)] on_hold_complete: Callback<()>,
+    #[prop(optional, into)] class: String,
+    #[prop(default = 1000)] hold_duration: u64,
+) -> impl IntoView {
+    let is_holding = RwSignal::new(false);
+    let progress = RwSignal::new(0.0);
+    
+    let on_mousedown = move |_| {
+        is_holding.set(true);
+        progress.set(0.0);
+    };
+    
+    let on_mouseup = move |_| {
+        is_holding.set(false);
+        progress.set(0.0);
+    };
+
+    Effect::new(move |_| {
+        if is_holding.get() {
+            let start_time = js_sys::Date::now();
+            let duration = hold_duration as f64;
+            
+            leptos::task::spawn_local(async move {
+                while is_holding.get_untracked() {
+                    let now = js_sys::Date::now();
+                    let elapsed = now - start_time;
+                    let p = (elapsed / duration).min(1.0);
+                    progress.set(p * 100.0);
+                    
+                    if p >= 1.0 {
+                        on_hold_complete.run(());
+                        is_holding.set(false);
+                        close_context_menu();
+                        break;
+                    }
+                    gloo_timers::future::TimeoutFuture::new(16).await; // ~60fps
+                }
+            });
+        }
+    });
+
+    let class = tw_merge!(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors overflow-hidden",
+        class
+    );
+
+    view! {
+        <div
+            class=class
+            on:mousedown=on_mousedown
+            on:mouseup=on_mouseup
+            on:mouseleave=on_mouseup
+            on:touchstart=move |_| on_mousedown(web_sys::MouseEvent::new("mousedown").unwrap())
+            on:touchend=move |_| on_mouseup(web_sys::MouseEvent::new("mouseup").unwrap())
+        >
+            // Progress background
+            <div 
+                class="absolute inset-y-0 left-0 bg-destructive/20 transition-all duration-75 ease-linear pointer-events-none"
+                style=move || format!("width: {}%;", progress.get())
+            />
+            <span class="relative z-10 flex items-center gap-2 w-full">
+                {children()}
+            </span>
+        </div>
+    }.into_any()
+}
+
+#[derive(Clone)]
+struct ContextMenuContext {
+    target_id: String,
+}
+
+#[component]
+pub fn ContextMenu(children: Children) -> impl IntoView {
+    let context_target_id = use_random_id_for("context");
+
+    let ctx = ContextMenuContext { target_id: context_target_id.clone() };
+
+    view! {
+        <Provider value=ctx>
+            <style>
+                "
+                /* Submenu Styles */
+                .context__menu_sub_content {
+                    position: absolute;
+                    inset-inline-start: calc(100% + 8px);
+                    inset-block-start: -4px;
+                    z-index: 100;
+                    min-inline-size: 160px;
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: translateX(-8px);
+                    transition: all 0.2s ease-out;
+                    pointer-events: none;
+                }
+                
+                .context__menu_sub_trigger:hover .context__menu_sub_content {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: translateX(0);
+                    pointer-events: auto;
+                }
+                "
+            </style>
+
+            <div data-name="ContextMenu" class="contents">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+/// Wrapper that triggers the context menu on right-click.
+/// The `on_open` callback is triggered when the context menu opens (right-click).
+#[component]
+pub fn ContextMenuTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] on_open: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<ContextMenuContext>();
+    let trigger_class = tw_merge!("contents", class);
+
+    view! {
+        <div
+            class=trigger_class
+            data-name="ContextMenuTrigger"
+            data-context-trigger=ctx.target_id
+            on:contextmenu=move |e: web_sys::MouseEvent| {
+                if let Some(cb) = on_open {
+                    cb.run(());
+                }
+            }
+        >
+            {children()}
+        </div>
+    }
+}
+
+/// Content of the context menu that appears on right-click.
+/// The `on_close` callback is triggered when the menu closes (click outside, ESC key, or action click).
+#[component]
+pub fn ContextMenuContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] on_close: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<ContextMenuContext>();
+
+    let base_classes = "fixed z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+
+    let class = tw_merge!(base_classes, class);
+
+    let target_id_for_script = ctx.target_id.clone();
+
+    view! {
+        <script src="/lock_scroll.js"></script>
+
+        <div
+            data-name="ContextMenuContent"
+            class=class
+            // Listen for custom 'contextmenuclose' event dispatched by JS when menu closes
+            on:contextmenuclose=move |_: web_sys::CustomEvent| {
+                if let Some(cb) = on_close {
+                    cb.run(());
+                }
+            }
+            id=ctx.target_id
+            data-target="target__context"
+            data-state="closed"
+            style="pointer-events: none;"
+        >
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupContextMenu = () => {{
+                        const menu = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-context-trigger="{}"]');
+
+                        if (!menu || !trigger) {{
+                            setTimeout(setupContextMenu, 50);
+                            return;
+                        }}
+
+                        if (menu.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        menu.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = (x, y) => {{
+                            const menuRect = menu.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const viewportWidth = window.innerWidth;
+
+                            // Calculate position, ensuring menu stays within viewport
+                            let left = x;
+                            let top = y;
+
+                            // Adjust if menu would go off right edge
+                            if (x + menuRect.width > viewportWidth) {{
+                                left = x - menuRect.width;
+                            }}
+
+                            // Adjust if menu would go off bottom edge
+                            if (y + menuRect.height > viewportHeight) {{
+                                top = y - menuRect.height;
+                            }}
+
+                            menu.style.left = `${{left}}px`;
+                            menu.style.top = `${{top}}px`;
+                            menu.style.transformOrigin = 'top left';
+                        }};
+
+                        const openMenu = (x, y) => {{
+                            isOpen = true;
+
+                            // Close any other open context menus
+                            const allMenus = document.querySelectorAll('[data-target="target__context"]');
+                            allMenus.forEach(m => {{
+                                if (m !== menu && m.getAttribute('data-state') === 'open') {{
+                                    m.setAttribute('data-state', 'closed');
+                                    m.style.pointerEvents = 'none';
+                                }}
+                            }});
+
+                            menu.setAttribute('data-state', 'open');
+                            menu.style.visibility = 'hidden';
+                            menu.style.pointerEvents = 'auto';
+
+                            // Force reflow
+                            menu.offsetHeight;
+
+                            updatePosition(x, y);
+                            menu.style.visibility = 'visible';
+
+                            // Lock scroll
+                            if (window.ScrollLock) {{
+                                window.ScrollLock.lock();
+                            }}
+
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                                document.addEventListener('contextmenu', handleContextOutside);
+                            }}, 0);
+                        }};
+
+                        const closeMenu = () => {{
+                            isOpen = false;
+                            menu.setAttribute('data-state', 'closed');
+                            menu.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            document.removeEventListener('contextmenu', handleContextOutside);
+
+                            // Dispatch custom event for Leptos to listen to
+                            menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
+
+                            if (window.ScrollLock) {{
+                                window.ScrollLock.unlock(200);
+                            }}
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!menu.contains(e.target)) {{
+                                closeMenu();
+                            }}
+                        }};
+
+                        const handleContextOutside = (e) => {{
+                            if (!trigger.contains(e.target)) {{
+                                closeMenu();
+                            }}
+                        }};
+
+                        // Right-click on trigger
+                        trigger.addEventListener('contextmenu', (e) => {{
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            if (isOpen) {{
+                                closeMenu();
+                            }}
+                            openMenu(e.clientX, e.clientY);
+                        }});
+
+                        // Close when action is clicked
+                        const actions = menu.querySelectorAll('[data-context-close]');
+                        actions.forEach(action => {{
+                            action.addEventListener('click', () => {{
+                                closeMenu();
+                            }});
+                        }});
+
+                        // Handle ESC key
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeMenu();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupContextMenu);
+                    }} else {{
+                        setupContextMenu();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }.into_any()
+}
+
+#[component]
+pub fn ContextMenuSub(children: Children) -> impl IntoView {
+    clx! {ContextMenuSubRoot, li, "context__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
+
+    view! { <ContextMenuSubRoot>{children()}</ContextMenuSubRoot> }
+}
+
+#[component]
+pub fn ContextMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex items-center justify-between w-full", class);
+
+    view! {
+        <span data-name="ContextMenuSubTrigger" class=class>
+            <span class="flex gap-2 items-center">{children()}</span>
+            <ChevronRight class="opacity-70 size-4" />
+        </span>
+    }
+}
+
+#[component]
+pub fn ContextMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
+        class
+    );
+
+    view! {
+        <li data-name="ContextMenuSubItem" class=class data-context-close="true">
+            {children()}
+        </li>
+    }
+}
--- a/frontend/src/components/ui/data_table.rs
+++ b/frontend/src/components/ui/data_table.rs
@@ -0,0 +1,6 @@
+// * Reuse @table.rs
+pub use crate::components::ui::table::{
+    Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
+    TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
+    TableRow as DataTableRow, TableWrapper as DataTableWrapper,
+};
--- a/frontend/src/components/ui/dialog.rs
+++ b/frontend/src/components/ui/dialog.rs
@@ -0,0 +1,251 @@
+use icons::X;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use crate::components::hooks::use_random::use_random_id_for;
+use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
+
+mod components {
+    use super::*;
+    clx! {DialogBody, div, "flex flex-col gap-4"}
+    clx! {DialogHeader, div, "flex flex-col gap-2 text-center sm:text-left"}
+    clx! {DialogTitle, h3, "text-lg leading-none font-semibold"}
+    clx! {DialogDescription, p, "text-muted-foreground text-sm"}
+    clx! {DialogFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct DialogContext {
+    target_id: String,
+}
+
+#[component]
+pub fn Dialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let dialog_target_id = use_random_id_for("dialog");
+
+    let ctx = DialogContext { target_id: dialog_target_id.clone() };
+
+    let merged_class = tw_merge!("w-fit", class);
+
+    view! {
+        <Provider value=ctx>
+            <div class=merged_class data-name="__Dialog">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn DialogTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+    let trigger_id = format!("trigger_{}", ctx.target_id);
+
+    view! {
+        <Button
+            class=class
+            attr:id=trigger_id
+            attr:tabindex="0"
+            attr:data-dialog-trigger=ctx.target_id
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn DialogContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(into, optional)] hide_close_button: Option<bool>,
+    #[prop(default = true)] close_on_backdrop_click: bool,
+    #[prop(default = "Dialog")] data_name_prefix: &'static str,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+    let merged_class = tw_merge!(
+        // "flex flex-col gap-4", // TODO 🐛 Bug when I try to have this.. Using DialogBody instead.
+        "relative bg-background border rounded-2xl shadow-lg p-6 w-full max-w-[calc(100%-2rem)] max-h-[85vh] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-100 transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
+        class
+    );
+
+    let backdrop_data_name = format!("{}Backdrop", data_name_prefix);
+    let content_data_name = format!("{}Content", data_name_prefix);
+
+    let target_id_clone = ctx.target_id.clone();
+    let backdrop_id = format!("{}_backdrop", ctx.target_id);
+    let target_id_for_script = ctx.target_id.clone();
+    let backdrop_id_for_script = backdrop_id.clone();
+    let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
+
+    view! {
+        <script src="/hooks/lock_scroll.js"></script>
+
+        <div
+            data-name=backdrop_data_name
+            id=backdrop_id
+            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+            data-state="closed"
+        />
+
+        <div
+            data-name=content_data_name
+            class=merged_class
+            id=ctx.target_id
+            data-target="target__dialog"
+            data-state="closed"
+            data-backdrop=backdrop_behavior
+            style="pointer-events: none;"
+        >
+            <button
+                type="button"
+                class=format!(
+                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
+                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
+                )
+                data-dialog-close=target_id_clone.clone()
+                aria-label="Close dialog"
+            >
+                <span class="hidden">"Close Dialog"</span>
+                <X />
+            </button>
+
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupDialog = () => {{
+                        const dialog = document.querySelector('#{}');
+                        const backdrop = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-dialog-trigger="{}"]');
+
+                        if (!dialog || !backdrop || !trigger) {{
+                            setTimeout(setupDialog, 50);
+                            return;
+                        }}
+
+                        if (dialog.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        dialog.setAttribute('data-initialized', 'true');
+
+                        const openDialog = () => {{
+                            // Lock scrolling
+                            window.ScrollLock.lock();
+
+                            dialog.setAttribute('data-state', 'open');
+                            backdrop.setAttribute('data-state', 'open');
+                            dialog.style.pointerEvents = 'auto';
+                            backdrop.style.pointerEvents = 'auto';
+                        }};
+
+                        const closeDialog = () => {{
+                            dialog.setAttribute('data-state', 'closed');
+                            backdrop.setAttribute('data-state', 'closed');
+                            dialog.style.pointerEvents = 'none';
+                            backdrop.style.pointerEvents = 'none';
+
+                            // Unlock scrolling after animation
+                            window.ScrollLock.unlock(200);
+                        }};
+
+                        // Open dialog when trigger is clicked
+                        trigger.addEventListener('click', openDialog);
+
+                        // Close buttons
+                        const closeButtons = dialog.querySelectorAll('[data-dialog-close]');
+                        closeButtons.forEach(btn => {{
+                            btn.addEventListener('click', closeDialog);
+                        }});
+
+                        // Close on backdrop click (if data-backdrop="auto")
+                        backdrop.addEventListener('click', () => {{
+                            if (dialog.getAttribute('data-backdrop') === 'auto') {{
+                                closeDialog();
+                            }}
+                        }});
+
+                        // Handle ESC key to close
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
+                                e.preventDefault();
+                                closeDialog();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupDialog);
+                    }} else {{
+                        setupDialog();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                backdrop_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }
+}
+
+#[component]
+pub fn DialogClose(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+
+    view! {
+        <Button
+            class=class
+            attr:data-dialog-close=ctx.target_id
+            attr:aria-label="Close dialog"
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn DialogAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+
+    view! {
+        <Button
+            class=class
+            attr:data-dialog-close=ctx.target_id
+            attr:aria-label="Close dialog"
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}
--- a/frontend/src/components/ui/dropdown_menu.rs
+++ b/frontend/src/components/ui/dropdown_menu.rs
@@ -0,0 +1,538 @@
+use icons::{Check, ChevronRight};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use crate::components::hooks::use_random::use_random_id_for;
+pub use crate::components::ui::separator::Separator as DropdownMenuSeparator;
+
+mod components {
+    use super::*;
+    clx! {DropdownMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {DropdownMenuGroup, ul, "group"}
+    clx! {DropdownMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+    clx! {DropdownMenuSubContent, ul, "dropdown__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
+    clx! {DropdownMenuLink, a, "w-full inline-flex gap-2 items-center"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     RADIO GROUP                            */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct DropdownMenuRadioContext<T: Clone + PartialEq + Send + Sync + 'static> {
+    value_signal: RwSignal<T>,
+}
+
+/// A group of radio items where only one can be selected at a time.
+#[component]
+pub fn DropdownMenuRadioGroup<T>(
+    children: Children,
+    /// The signal holding the current selected value
+    value: RwSignal<T>,
+) -> impl IntoView
+where
+    T: Clone + PartialEq + Send + Sync + 'static,
+{
+    let ctx = DropdownMenuRadioContext { value_signal: value };
+
+    view! {
+        <Provider value=ctx>
+            <ul data-name="DropdownMenuRadioGroup" role="group" class="group">
+                {children()}
+            </ul>
+        </Provider>
+    }
+}
+
+/// A radio item that shows a checkmark when selected.
+#[component]
+pub fn DropdownMenuRadioItem<T>(
+    children: Children,
+    /// The value this item represents
+    value: T,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView
+where
+    T: Clone + PartialEq + Send + Sync + 'static,
+{
+    let ctx = expect_context::<DropdownMenuRadioContext<T>>();
+
+    let value_for_check = value.clone();
+    let value_for_click = value.clone();
+    let is_selected = move || ctx.value_signal.get() == value_for_check;
+
+    let merged_class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full rounded-sm pl-2 pr-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    view! {
+        <li
+            data-name="DropdownMenuRadioItem"
+            class=merged_class
+            role="menuitemradio"
+            aria-checked=move || is_selected().to_string()
+            data-dropdown-close="true"
+            on:click=move |_| {
+                ctx.value_signal.set(value_for_click.clone());
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
+        </li>
+    }
+}
+
+/// An action item in a dropdown menu (no checkmark, just triggers an action).
+#[component]
+pub fn DropdownMenuAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] href: Option<String>,
+) -> impl IntoView {
+    let _ctx = expect_context::<DropdownMenuContext>();
+
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground",
+        class
+    );
+
+    if let Some(href) = href {
+        // Render as <a> tag when href is provided
+        view! {
+            <a data-name="DropdownMenuAction" class=class href=href data-dropdown-close="true">
+                {children()}
+            </a>
+
+            <script>
+                {r#"
+                (function() {
+                const link = document.currentScript.previousElementSibling;
+                if (!link) return;
+                
+                link.addEventListener('click', function() {
+                // Close dropdown on route change after navigation
+                let currentPath = window.location.pathname;
+                const checkRouteChange = () => {
+                if (window.location.pathname !== currentPath) {
+                currentPath = window.location.pathname;
+                
+                // Find and close the dropdown
+                const dropdown = link.closest('[data-target="target__dropdown"]');
+                if (dropdown) {
+                dropdown.setAttribute('data-state', 'closed');
+                dropdown.style.pointerEvents = 'none';
+                
+                // Unlock scroll
+                if (window.ScrollLock) {
+                window.ScrollLock.unlock(200);
+                }
+                }
+                
+                clearInterval(routeCheckInterval);
+                }
+                };
+                
+                const routeCheckInterval = setInterval(checkRouteChange, 50);
+                
+                // Clear interval after 2 seconds to prevent memory leaks
+                setTimeout(() => clearInterval(routeCheckInterval), 2000);
+                });
+                })();
+                "#}
+            </script>
+        }
+        .into_any()
+    } else {
+        // Render as <button> tag when no href
+        view! {
+            <button type="button" data-name="DropdownMenuAction" class=class data-dropdown-close="true">
+                {children()}
+            </button>
+        }
+        .into_any()
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum DropdownMenuAlign {
+    #[default]
+    Start,
+    StartOuter,
+    End,
+    EndOuter,
+    Center,
+}
+
+#[derive(Clone)]
+struct DropdownMenuContext {
+    target_id: String,
+    align: DropdownMenuAlign,
+}
+
+#[component]
+pub fn DropdownMenu(
+    children: Children,
+    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
+) -> impl IntoView {
+    let dropdown_target_id = use_random_id_for("dropdown");
+
+    let ctx = DropdownMenuContext { target_id: dropdown_target_id.clone(), align };
+
+    view! {
+        <Provider value=ctx>
+            <style>
+                "
+                /* Submenu Styles */
+                .dropdown__menu_sub_content {
+                    position: absolute;
+                    inset-inline-start: calc(100% + 8px);
+                    inset-block-start: -4px;
+                    z-index: 100;
+                    min-inline-size: 160px;
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: translateX(-8px);
+                    transition: all 0.2s ease-out;
+                    pointer-events: none;
+                }
+                
+                .dropdown__menu_sub_trigger:hover .dropdown__menu_sub_content {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: translateX(0);
+                    pointer-events: auto;
+                }
+                "
+            </style>
+
+            <div data-name="DropdownMenu">{children()}</div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn DropdownMenuTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let ctx = expect_context::<DropdownMenuContext>();
+    let button_class = tw_merge!(
+        "px-4 py-2 h-9 inline-flex justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-colors w-fit focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        class
+    );
+
+    view! {
+        <button
+            type="button"
+            class=button_class
+            data-name="DropdownMenuTrigger"
+            data-dropdown-trigger=ctx.target_id
+            tabindex="0"
+        >
+            {children()}
+        </button>
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum DropdownMenuPosition {
+    #[default]
+    Auto,
+    Top,
+    Bottom,
+}
+
+#[component]
+pub fn DropdownMenuContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = DropdownMenuPosition::default())] position: DropdownMenuPosition,
+) -> impl IntoView {
+    let ctx = expect_context::<DropdownMenuContext>();
+
+    let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md h-fit fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+    let width_class = match ctx.align {
+        DropdownMenuAlign::Center => "min-w-full",
+        _ => "w-[180px]",
+    };
+
+    let class = tw_merge!(width_class, base_classes, class);
+
+    let target_id_for_script = ctx.target_id.clone();
+    let align_for_script = match ctx.align {
+        DropdownMenuAlign::Start => "start",
+        DropdownMenuAlign::StartOuter => "start-outer",
+        DropdownMenuAlign::End => "end",
+        DropdownMenuAlign::EndOuter => "end-outer",
+        DropdownMenuAlign::Center => "center",
+    };
+
+    let position_for_script = match position {
+        DropdownMenuPosition::Auto => "auto",
+        DropdownMenuPosition::Top => "top",
+        DropdownMenuPosition::Bottom => "bottom",
+    };
+
+    view! {
+        <script src="/hooks/lock_scroll.js"></script>
+
+        <div
+            data-name="DropdownMenuContent"
+            class=class
+            id=ctx.target_id
+            data-target="target__dropdown"
+            data-state="closed"
+            data-align=align_for_script
+            data-position=position_for_script
+            style="pointer-events: none;"
+        >
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupDropdown = () => {{
+                        const dropdown = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-dropdown-trigger="{}"]');
+
+                        if (!dropdown || !trigger) {{
+                            setTimeout(setupDropdown, 50);
+                            return;
+                        }}
+
+                        if (dropdown.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        dropdown.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = () => {{
+                            const triggerRect = trigger.getBoundingClientRect();
+                            const dropdownRect = dropdown.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const viewportWidth = window.innerWidth;
+                            const spaceBelow = viewportHeight - triggerRect.bottom;
+                            const spaceAbove = triggerRect.top;
+
+                            const align = dropdown.getAttribute('data-align') || 'start';
+                            const position = dropdown.getAttribute('data-position') || 'auto';
+
+                            // Determine if we should position above
+                            let shouldPositionAbove = false;
+                            if (position === 'top') {{
+                                shouldPositionAbove = true;
+                            }} else if (position === 'bottom') {{
+                                shouldPositionAbove = false;
+                            }} else {{
+                                // Auto: position above if there's space above AND not enough space below
+                                shouldPositionAbove = spaceAbove >= dropdownRect.height && spaceBelow < dropdownRect.height;
+                            }}
+
+                            switch (align) {{
+                                case 'start':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'left bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'left top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left}}px`;
+                                    break;
+
+                                case 'end':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'right bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'right top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.right - dropdownRect.width}}px`;
+                                    break;
+
+                                case 'start-outer':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'right bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.top}}px`;
+                                        dropdown.style.transformOrigin = 'right top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left - dropdownRect.width - 16}}px`;
+                                    break;
+
+                                case 'end-outer':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'left bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.top}}px`;
+                                        dropdown.style.transformOrigin = 'left top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.right + 8}}px`;
+                                    break;
+
+                                case 'center':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'center bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'center top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left}}px`;
+                                    dropdown.style.minWidth = `${{triggerRect.width}}px`;
+                                    break;
+                            }}
+                        }};
+
+                        const openDropdown = () => {{
+                            isOpen = true;
+
+                            // Set state to open first to remove scale transform for accurate measurements
+                            dropdown.setAttribute('data-state', 'open');
+
+                            // Make dropdown invisible but rendered to measure true height
+                            dropdown.style.visibility = 'hidden';
+                            dropdown.style.pointerEvents = 'auto';
+
+                            // Force reflow to ensure height is calculated
+                            dropdown.offsetHeight;
+
+                            // Calculate position with accurate height
+                            updatePosition();
+
+                            // Now make it visible
+                            dropdown.style.visibility = 'visible';
+
+                            // Lock all scrollable elements
+                            window.ScrollLock.lock();
+
+                            // Close on click outside
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeDropdown = () => {{
+                            isOpen = false;
+                            dropdown.setAttribute('data-state', 'closed');
+                            dropdown.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+
+                            // Unlock scroll after animation (200ms delay)
+                            window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeDropdown();
+                            }}
+                        }};
+
+                        // Toggle dropdown when trigger is clicked
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+
+                            // Check if any other dropdown is open
+                            const allDropdowns = document.querySelectorAll('[data-target=\"target__dropdown\"]');
+                            let otherDropdownOpen = false;
+                            allDropdowns.forEach(dd => {{
+                                if (dd !== dropdown && dd.getAttribute('data-state') === 'open') {{
+                                    otherDropdownOpen = true;
+                                    dd.setAttribute('data-state', 'closed');
+                                    dd.style.pointerEvents = 'none';
+                                    // Unlock scroll
+                                    if (window.ScrollLock) {{
+                                        window.ScrollLock.unlock(200);
+                                    }}
+                                }}
+                            }});
+
+                            // If another dropdown was open, just close it and don't open this one
+                            if (otherDropdownOpen) {{
+                                return;
+                            }}
+
+                            // Normal toggle behavior
+                            if (isOpen) {{
+                                closeDropdown();
+                            }} else {{
+                                openDropdown();
+                            }}
+                        }});
+
+                        // Close when action is clicked
+                        const actions = dropdown.querySelectorAll('[data-dropdown-close]');
+                        actions.forEach(action => {{
+                            action.addEventListener('click', () => {{
+                                closeDropdown();
+                            }});
+                        }});
+
+                        // Handle ESC key to close
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeDropdown();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupDropdown);
+                    }} else {{
+                        setupDropdown();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }
+}
+
+#[component]
+pub fn DropdownMenuSub(children: Children) -> impl IntoView {
+    // TODO. Find a better way for dropdown__menu_sub_trigger.
+    clx! {DropdownMenuSubRoot, li, "dropdown__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
+
+    view! { <DropdownMenuSubRoot>{children()}</DropdownMenuSubRoot> }
+}
+
+#[component]
+pub fn DropdownMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex items-center justify-between w-full", class);
+
+    view! {
+        <span attr:data-name="DropdownMenuSubTrigger" class=class>
+            <span class="flex gap-2 items-center">{children()}</span>
+            <ChevronRight class="opacity-70 size-4" />
+        </span>
+    }
+}
+
+#[component]
+pub fn DropdownMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
+        class
+    );
+
+    view! {
+        <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">
+            {children()}
+        </li>
+    }
+}
--- a/frontend/src/components/ui/empty.rs
+++ b/frontend/src/components/ui/empty.rs
@@ -0,0 +1,35 @@
+use leptos::prelude::*;
+use leptos_ui::{clx, variants};
+
+mod components {
+    use super::*;
+    clx! {Empty, div, "flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8 text-center"}
+    clx! {EmptyHeader, div, "flex flex-col items-center gap-2"}
+    clx! {EmptyTitle, h3, "text-lg font-semibold leading-none"}
+    clx! {EmptyDescription, p, "text-muted-foreground text-sm"}
+    clx! {EmptyContent, div, "flex items-center justify-center gap-2"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+variants! {
+    EmptyMedia {
+        base: "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                Default: "bg-transparent",
+                Icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+            },
+            size: {
+                Default: "",
+            }
+        },
+        component: {
+            element: div
+        }
+    }
+}
--- a/frontend/src/components/ui/input.rs
+++ b/frontend/src/components/ui/input.rs
@@ -0,0 +1,99 @@
+use leptos::html;
+use leptos::prelude::*;
+use strum::AsRefStr;
+use tw_merge::tw_merge;
+
+#[derive(Default, Clone, Copy, PartialEq, Eq, AsRefStr)]
+#[strum(serialize_all = "lowercase")]
+#[allow(dead_code)]
+pub enum InputType {
+    #[default]
+    Text,
+    Email,
+    Password,
+    Number,
+    Tel,
+    Url,
+    Search,
+    Date,
+    Time,
+    #[strum(serialize = "datetime-local")]
+    DatetimeLocal,
+    Month,
+    Week,
+    Color,
+    File,
+    Hidden,
+}
+
+#[component]
+pub fn Input(
+    #[prop(into, optional)] class: String,
+    #[prop(default = InputType::default())] r#type: InputType,
+    #[prop(into, optional)] placeholder: Option<String>,
+    #[prop(into, optional)] name: Option<String>,
+    #[prop(into, optional)] id: Option<String>,
+    #[prop(into, optional)] title: Option<String>,
+    #[prop(optional)] disabled: bool,
+    #[prop(optional)] readonly: bool,
+    #[prop(optional)] required: bool,
+    #[prop(optional)] autofocus: bool,
+    #[prop(into, optional)] min: Option<String>,
+    #[prop(into, optional)] max: Option<String>,
+    #[prop(into, optional)] step: Option<String>,
+    #[prop(into, optional)] bind_value: Option<RwSignal<String>>,
+    #[prop(optional)] node_ref: NodeRef<html::Input>,
+) -> impl IntoView {
+    let merged_class = tw_merge!(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "focus-visible:ring-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "read-only:bg-muted",
+        class
+    );
+
+    let type_str = r#type.as_ref();
+
+    match bind_value {
+        Some(signal) => view! {
+            <input
+                data-name="Input"
+                type=type_str
+                class=merged_class
+                placeholder=placeholder
+                name=name
+                id=id
+                title=title
+                disabled=disabled
+                readonly=readonly
+                required=required
+                autofocus=autofocus
+                min=min
+                max=max
+                step=step
+                bind:value=signal
+                node_ref=node_ref
+            />
+        }.into_any(),
+        None => view! {
+            <input
+                data-name="Input"
+                type=type_str
+                class=merged_class
+                placeholder=placeholder
+                name=name
+                id=id
+                title=title
+                disabled=disabled
+                readonly=readonly
+                required=required
+                autofocus=autofocus
+                min=min
+                max=max
+                step=step
+                node_ref=node_ref
+            />
+        }.into_any(),
+    }
+}
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -0,0 +1,17 @@
+pub mod alert_dialog;
+pub mod button;
+pub mod card;
+pub mod checkbox;
+pub mod context_menu;
+pub mod data_table;
+pub mod dialog;
+pub mod dropdown_menu;
+pub mod empty;
+pub mod input;
+pub mod multi_select;
+pub mod select;
+pub mod separator;
+pub mod svg_icon;
+pub mod table;
+pub mod theme_toggle;
+pub mod toast;
--- a/frontend/src/components/ui/multi_select.rs
+++ b/frontend/src/components/ui/multi_select.rs
@@ -0,0 +1,296 @@
+use std::collections::HashSet;
+
+use icons::{Check, ChevronDown, ChevronUp};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use tw_merge::*;
+
+use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
+use crate::components::hooks::use_random::use_random_id_for;
+// * Reuse @select.rs
+pub use crate::components::ui::select::{
+    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem, SelectLabel as MultiSelectLabel,
+};
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum MultiSelectAlign {
+    Start,
+    #[default]
+    Center,
+    End,
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[component]
+pub fn MultiSelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    view! {
+        <span data-name="MultiSelectValue" class="text-sm text-muted-foreground truncate">
+            {move || {
+                let values = multi_select_ctx.values_signal.get();
+                if values.is_empty() {
+                    placeholder.clone()
+                } else {
+                    let count = values.len();
+                    if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) }
+                }
+            }}
+        </span>
+    }
+}
+
+#[component]
+pub fn MultiSelectOption(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] value: Option<String>,
+) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let value_clone = value.clone();
+    let is_selected = Signal::derive(move || {
+        if let Some(ref val) = value_clone {
+            multi_select_ctx.values_signal.with(|values| values.contains(val))
+        } else {
+            false
+        }
+    });
+
+    let class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        class
+    );
+
+    view! {
+        <button
+            type="button"
+            data-name="MultiSelectOption"
+            class=class
+            role="option"
+            aria-selected=move || is_selected.get().to_string()
+            on:click=move |ev: web_sys::MouseEvent| {
+                ev.prevent_default();
+                ev.stop_propagation();
+                if let Some(val) = value.clone() {
+                    multi_select_ctx
+                        .values_signal
+                        .update(|values| {
+                            if values.contains(&val) {
+                                values.remove(&val);
+                            } else {
+                                values.insert(val);
+                            }
+                        });
+                }
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
+        </button>
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct MultiSelectContext {
+    target_id: String,
+    values_signal: RwSignal<HashSet<String>>,
+    align: MultiSelectAlign,
+}
+
+#[component]
+pub fn MultiSelect(
+    children: Children,
+    #[prop(optional, into)] values: Option<RwSignal<HashSet<String>>>,
+    #[prop(default = MultiSelectAlign::default())] align: MultiSelectAlign,
+) -> impl IntoView {
+    let multi_select_target_id = use_random_id_for("multi_select");
+    let values_signal = values.unwrap_or_else(|| RwSignal::new(HashSet::<String>::new()));
+
+    let multi_select_ctx = MultiSelectContext { target_id: multi_select_target_id.clone(), values_signal, align };
+
+    view! {
+        <Provider value=multi_select_ctx>
+            <div data-name="MultiSelect" class="relative w-fit">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn MultiSelectTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] id: String,
+) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
+
+    let button_class = tw_merge!(
+        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        &peer_class,
+        class
+    );
+
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", multi_select_ctx.target_id) };
+
+    view! {
+        <button
+            type="button"
+            data-name="MultiSelectTrigger"
+            class=button_class
+            id=button_id
+            tabindex="0"
+            data-multi-select-trigger=multi_select_ctx.target_id
+        >
+            {children()}
+            <ChevronDown class="text-muted-foreground" />
+        </button>
+    }
+}
+
+#[component]
+pub fn MultiSelectContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let align_str = match multi_select_ctx.align {
+        MultiSelectAlign::Start => "start",
+        MultiSelectAlign::Center => "center",
+        MultiSelectAlign::End => "end",
+    };
+
+    let class = tw_merge!(
+        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[align=start]:left-0 data-[align=center]:left-1/2 data-[align=center]:-translate-x-1/2 data-[align=end]:right-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        class
+    );
+
+    let target_id_for_script = multi_select_ctx.target_id.clone();
+    let target_id_for_script_2 = multi_select_ctx.target_id.clone();
+
+    // Scroll indicator signals
+    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
+
+    view! {
+        <script src="/lock_scroll.js"></script>
+
+        <div
+            data-name="MultiSelectContent"
+            class=class
+            id=multi_select_ctx.target_id
+            data-target="target__multi_select"
+            data-state="closed"
+            data-align=align_str
+            style="pointer-events: none;"
+            on:scroll=move |ev| on_scroll.run(ev)
+        >
+            <div
+                data-scroll-up="true"
+                class=move || {
+                    let is_up: bool = can_scroll_up_signal.get();
+                    if is_up {
+                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronUp class="size-4 text-muted-foreground" />
+            </div>
+            {children()}
+            <div
+                data-scroll-down="true"
+                class=move || {
+                    let is_down: bool = can_scroll_down_signal.get();
+                    if is_down {
+                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronDown class="size-4 text-muted-foreground" />
+            </div>
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupMultiSelect = () => {{
+                        const multiSelect = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-multi-select-trigger="{}"]');
+
+                        if (!multiSelect || !trigger) {{
+                            setTimeout(setupMultiSelect, 50);
+                            return;
+                        }}
+
+                        if (multiSelect.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        multiSelect.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const openMultiSelect = () => {{
+                            isOpen = true;
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            multiSelect.setAttribute('data-state', 'open');
+                            multiSelect.style.pointerEvents = 'auto';
+                            const triggerRect = trigger.getBoundingClientRect();
+                            multiSelect.style.minWidth = `${{triggerRect.width}}px`;
+                            multiSelect.dispatchEvent(new Event('scroll'));
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeMultiSelect = () => {{
+                            isOpen = false;
+                            multiSelect.setAttribute('data-state', 'closed');
+                            multiSelect.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!multiSelect.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeMultiSelect();
+                            }}
+                        }};
+
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+                            if (isOpen) closeMultiSelect(); else openMultiSelect();
+                        }});
+
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeMultiSelect();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupMultiSelect);
+                    }} else {{
+                        setupMultiSelect();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script_2,
+            )}
+        </script>
+    }.into_any()
+}
--- a/frontend/src/components/ui/select.rs
+++ b/frontend/src/components/ui/select.rs
@@ -0,0 +1,313 @@
+use icons::{Check, ChevronDown, ChevronUp};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use strum::{AsRefStr, Display};
+use tw_merge::*;
+
+use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
+use crate::components::hooks::use_random::use_random_id_for;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Display, AsRefStr)]
+pub enum SelectPosition {
+    #[default]
+    Below,
+    Above,
+}
+
+mod components {
+    use super::*;
+    clx! {SelectLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {SelectItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+}
+
+pub use components::*;
+
+#[component]
+pub fn SelectGroup(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = "Select options".into(), into)] aria_label: String,
+) -> impl IntoView {
+    let merged_class = tw_merge!("group", class);
+
+    view! {
+        <ul data-name="SelectGroup" role="listbox" aria-label=aria_label class=merged_class>
+            {children()}
+        </ul>
+    }
+}
+
+#[component]
+pub fn SelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
+    let select_ctx = expect_context::<SelectContext>();
+
+    view! {
+        <span data-name="SelectValue" class="text-sm text-muted-foreground truncate">
+            {move || { select_ctx.value_signal.get().unwrap_or_else(|| placeholder.clone()) }}
+        </span>
+    }
+}
+
+#[component]
+pub fn SelectOption(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = false.into(), into)] aria_selected: Signal<bool>,
+    #[prop(optional, into)] value: Option<String>,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let merged_class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    let value_for_check = value.clone();
+    let is_selected = move || aria_selected.get() || ctx.value_signal.get() == value_for_check;
+
+    view! {
+        <li
+            data-name="SelectOption"
+            class=merged_class
+            role="option"
+            tabindex="0"
+            aria-selected=move || is_selected().to_string()
+            data-select-option="true"
+            on:click=move |_| {
+                let val = value.clone();
+                ctx.value_signal.set(val.clone());
+                if let Some(on_change) = ctx.on_change {
+                    on_change.run(val);
+                }
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
+        </li>
+    }
+}
+
+#[derive(Clone)]
+struct SelectContext {
+    target_id: String,
+    value_signal: RwSignal<Option<String>>,
+    on_change: Option<Callback<Option<String>>>,
+}
+
+#[component]
+pub fn Select(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] default_value: Option<String>,
+    #[prop(optional)] on_change: Option<Callback<Option<String>>>,
+) -> impl IntoView {
+    let select_target_id = use_random_id_for("select");
+    let value_signal = RwSignal::new(default_value);
+
+    let ctx = SelectContext { target_id: select_target_id.clone(), value_signal, on_change };
+
+    let merged_class = tw_merge!("relative w-fit", class);
+
+    view! {
+        <Provider value=ctx>
+            <div data-name="Select" class=merged_class>
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn SelectTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] id: String,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
+
+    let button_class = tw_merge!(
+        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4 border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        &peer_class,
+        class
+    );
+
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
+
+    view! {
+        <button
+            type="button"
+            data-name="SelectTrigger"
+            class=button_class
+            id=button_id
+            tabindex="0"
+            data-select-trigger=ctx.target_id
+        >
+            {children()}
+            <ChevronDown class="text-muted-foreground" />
+        </button>
+    }
+}
+
+#[component]
+pub fn SelectContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = SelectPosition::default())] position: SelectPosition,
+    #[prop(optional)] on_close: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let merged_class = tw_merge!(
+        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] left-0 data-[position=Above]:top-auto data-[position=Above]:bottom-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:data-[position=Below]:origin-top data-[state=open]:data-[position=Below]:origin-top data-[state=closed]:data-[position=Above]:origin-bottom data-[state=open]:data-[position=Above]:origin-bottom [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        class
+    );
+
+    let target_id_for_script = ctx.target_id.clone();
+    let target_id_for_script_2 = ctx.target_id.clone();
+
+    // Scroll indicator signals
+    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
+
+    view! {
+        <script src="/lock_scroll.js"></script>
+
+        <div
+            data-name="SelectContent"
+            class=merged_class
+            on:selectclose=move |_: web_sys::CustomEvent| {
+                if let Some(cb) = on_close {
+                    cb.run(());
+                }
+            }
+            id=ctx.target_id
+            data-target="target__select"
+            data-state="closed"
+            data-position=position.to_string()
+            style="pointer-events: none;"
+            on:scroll=move |ev| on_scroll.run(ev)
+        >
+            <div
+                data-scroll-up="true"
+                class=move || {
+                    let is_up: bool = can_scroll_up_signal.get();
+                    if is_up {
+                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronUp class="size-4 text-muted-foreground" />
+            </div>
+            {children()}
+            <div
+                data-scroll-down="true"
+                class=move || {
+                    let is_down: bool = can_scroll_down_signal.get();
+                    if is_down {
+                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronDown class="size-4 text-muted-foreground" />
+            </div>
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupSelect = () => {{
+                        const select = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-select-trigger="{}"]');
+
+                        if (!select || !trigger) {{
+                            setTimeout(setupSelect, 50);
+                            return;
+                        }}
+
+                        if (select.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        select.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = () => {{
+                            const triggerRect = trigger.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const spaceBelow = viewportHeight - triggerRect.bottom;
+                            const spaceAbove = triggerRect.top;
+
+                            if (spaceBelow < 200 && spaceAbove > spaceBelow) {{
+                                select.setAttribute('data-position', 'Above');
+                            }} else {{
+                                select.setAttribute('data-position', 'Below');
+                            }}
+
+                            select.style.minWidth = `${{triggerRect.width}}px`;
+                        }};
+
+                        const openSelect = () => {{
+                            isOpen = true;
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            updatePosition();
+                            select.setAttribute('data-state', 'open');
+                            select.style.pointerEvents = 'auto';
+                            select.dispatchEvent(new Event('scroll'));
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeSelect = () => {{
+                            isOpen = false;
+                            select.setAttribute('data-state', 'closed');
+                            select.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            select.dispatchEvent(new CustomEvent('selectclose', {{ bubbles: false }}));
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!select.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeSelect();
+                            }}
+                        }};
+
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+                            if (isOpen) closeSelect(); else openSelect();
+                        }});
+
+                        const options = select.querySelectorAll('[data-select-option]');
+                        options.forEach(option => {{
+                            option.addEventListener('click', () => closeSelect());
+                        }});
+
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeSelect();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupSelect);
+                    }} else {{
+                        setupSelect();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script_2,
+            )}
+        </script>
+    }.into_any()
+}
--- a/frontend/src/components/ui/separator.rs
+++ b/frontend/src/components/ui/separator.rs
@@ -0,0 +1,35 @@
+use leptos::prelude::*;
+use tw_merge::*;
+
+#[component]
+pub fn Separator(
+    #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
+    #[prop(into, optional)] class: String,
+    // children: Children,
+) -> impl IntoView {
+    let merged_class = Memo::new(move |_| {
+        let orientation = orientation.get();
+        let separator = SeparatorClass { orientation };
+        separator.with_class(class.clone())
+    });
+
+    view! { <div class=merged_class role="separator" /> }
+}
+
+/* ========================================================== */
+/*                       🧬 STRUCT 🧬                         */
+/* ========================================================== */
+
+#[derive(TwClass, Default)]
+#[tw(class = "shrink-0 bg-border")]
+pub struct SeparatorClass {
+    orientation: SeparatorOrientation,
+}
+
+#[derive(TwVariant)]
+pub enum SeparatorOrientation {
+    #[tw(default, class = "w-full h-[1px]")]
+    Default,
+    #[tw(class = "h-full w-[1px]")]
+    Vertical,
+}
--- a/frontend/src/components/ui/svg_icon.rs
+++ b/frontend/src/components/ui/svg_icon.rs
@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn SvgIcon(
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let class = tw_merge!("size-4", class);
+    
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class=class
+        >
+            {children()}
+        </svg>
+    }
+}
--- a/frontend/src/components/ui/table.rs
+++ b/frontend/src/components/ui/table.rs
@@ -0,0 +1,56 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("overflow-hidden rounded-md border w-full", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("w-full text-sm border-collapse", class);
+    view! { <table class=class>{children()}</table> }
+}
+
+#[component]
+pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
+    view! { <caption class=class>{children()}</caption> }
+}
+
+#[component]
+pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
+    view! { <thead class=class>{children()}</thead> }
+}
+
+#[component]
+pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", class);
+    view! { <tr class=class>{children()}</tr> }
+}
+
+#[component]
+pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap", class);
+    view! { <th class=class>{children()}</th> }
+}
+
+#[component]
+pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr:last-child]:border-0", class);
+    view! { <tbody class=class>{children()}</tbody> }
+}
+
+#[component]
+pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("p-2 px-4 align-middle", class);
+    view! { <td class=class>{children()}</td> }
+}
+
+#[component]
+pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
+    view! { <tfoot class=class>{children()}</tfoot> }
+}
--- a/frontend/src/components/ui/theme_toggle.rs
+++ b/frontend/src/components/ui/theme_toggle.rs
@@ -0,0 +1,76 @@
+use crate::components::ui::svg_icon::SvgIcon;
+use leptos::prelude::*;
+
+use crate::components::hooks::use_theme_mode::use_theme_mode;
+
+#[component]
+pub fn ThemeToggle() -> impl IntoView {
+    let theme_mode = use_theme_mode();
+
+    view! {
+        <style>
+            {"
+            .theme__toggle_transition {
+            -webkit-tap-highlight-color: transparent;
+            
+            svg path {
+            transform-origin: center;
+            transition: all .6s ease;
+            transform: translate3d(0,0,0);
+            backface-visibility: hidden;
+            
+            &.sun {
+            transform: scale(.4) rotate(60deg);
+            opacity: 0;
+            }
+            
+            &.moon {
+            opacity: 1;
+            }
+            }
+            
+            &.switch {
+            svg path {
+            &.sun {
+            transform: scale(1) rotate(0);
+            opacity: 1;
+            }
+            
+            &.moon {
+            transform: scale(.4) rotate(-60deg);
+            opacity: 0;
+            }
+            }
+            }
+            }
+            "}
+        </style>
+
+        <button
+            type="button"
+            aria-label="Toggle theme"
+            class=move || {
+                let base_class = "theme__toggle_transition";
+                if theme_mode.get() { format!("{base_class} switch") } else { base_class.to_string() }
+            }
+            on:click=move |_| theme_mode.toggle()
+        >
+            <SvgIcon class="size-4">
+                <path
+                    d="M12 1.75V3.25M12 20.75V22.25M1.75 12H3.25M20.75 12H22.25M4.75216 4.75216L5.81282 5.81282M18.1872 18.1872L19.2478 19.2478M4.75216 19.2478L5.81282 18.1872M18.1872 5.81282L19.2478 4.75216M16.25 12C16.25 14.3472 14.3472 16.25 12 16.25C9.65279 16.25 7.75 14.3472 7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C14.3472 7.75 16.25 9.65279 16.25 12Z"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    class="sun text-neutral-300"
+                />
+                <path
+                    d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C16.7154 21.25 20.6068 17.7216 21.1778 13.161C20.1198 13.8498 18.8566 14.25 17.5 14.25C13.7721 14.25 10.75 11.2279 10.75 7.5C10.75 5.66012 11.4861 3.99217 12.6799 2.77461C12.4554 2.7583 12.2287 2.75 12 2.75C6.89137 2.75 2.75 6.89137 2.75 12Z"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linejoin="round"
+                    class="moon text-neutral-700"
+                />
+            </SvgIcon>
+        </button>
+    }
+}
--- a/frontend/src/components/ui/toast.rs
+++ b/frontend/src/components/ui/toast.rs
@@ -0,0 +1,220 @@
+use leptos::prelude::*;
+use tw_merge::*;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
+#[allow(dead_code)]
+pub enum ToastType {
+    #[default]
+    Default,
+    Success,
+    Error,
+    Warning,
+    Info,
+    Loading,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
+#[allow(dead_code)]
+pub enum SonnerPosition {
+    TopLeft,
+    TopCenter,
+    TopRight,
+    #[default]
+    BottomRight,
+    BottomCenter,
+    BottomLeft,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub struct ToastData {
+    pub id: u64,
+    pub title: String,
+    pub description: Option<String>,
+    pub variant: ToastType,
+    pub duration: u64, // ms
+}
+
+#[derive(Clone, Copy)]
+pub struct ToasterStore {
+    pub toasts: RwSignal<Vec<ToastData>>,
+}
+
+#[component]
+pub fn SonnerTrigger(
+    toast: ToastData,
+    index: usize,
+    total: usize,
+    position: SonnerPosition,
+    #[prop(optional)] on_dismiss: Option<Callback<()>>,
+) -> impl IntoView {
+    let variant_classes = match toast.variant {
+        ToastType::Default => "bg-background text-foreground border-border",
+        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",
+        ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
+        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-yellow-500",
+        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-blue-500",
+        ToastType::Loading => "bg-background text-foreground border-border",
+    };
+
+    // Sonner Stacking Logic
+    let inverse_index = index; 
+    let offset = inverse_index as f64 * 12.0;
+    let scale = 1.0 - (inverse_index as f64 * 0.05);
+    let opacity = if inverse_index > 2 { 0.0 } else { 1.0 - (inverse_index as f64 * 0.15) };
+    
+    let is_bottom = position.to_string().contains("Bottom");
+    let y_direction = if is_bottom { -1.0 } else { 1.0 };
+    let translate_y = offset * y_direction;
+
+    let style = format!(
+        "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
+        total - index,
+        translate_y,
+        scale,
+        opacity
+    );
+
+    let icon = match toast.variant {
+        ToastType::Success => Some(view! { <span class="icon font-bold">"✓"</span> }.into_any()),
+        ToastType::Error => Some(view! { <span class="icon font-bold">"✕"</span> }.into_any()),
+        ToastType::Warning => Some(view! { <span class="icon font-bold">"⚠"</span> }.into_any()),
+        ToastType::Info => Some(view! { <span class="icon font-bold">"ℹ"</span> }.into_any()),
+        _ => None,
+    };
+
+    view! {
+        <div
+            class=tw_merge!(
+                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto",
+                "flex items-center gap-3 w-full max-w-[calc(100vw-2rem)] sm:max-w-[380px] p-4 rounded-lg border shadow-lg bg-card",
+                if is_bottom { "bottom-0" } else { "top-0" },
+                variant_classes
+            )
+            style=style
+            on:click=move |_| {
+                if let Some(cb) = on_dismiss {
+                    cb.run(());
+                }
+            }
+        >
+            {icon}
+            <div class="flex flex-col gap-0.5 overflow-hidden">
+                <div class="text-sm font-semibold truncate leading-tight">{toast.title}</div>
+                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-70 truncate">{d.clone()}</div> })}
+            </div>
+        </div>
+    }.into_any()
+}
+
+thread_local! {
+    static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
+}
+
+pub fn provide_toaster() {
+    let toasts = RwSignal::new(Vec::<ToastData>::new());
+    TOASTS.with(|t| *t.borrow_mut() = Some(toasts));
+    provide_context(ToasterStore { toasts });
+}
+
+#[component]
+pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
+    let store = use_context::<ToasterStore>().expect("Toaster context not found");
+    let toasts = store.toasts;
+    let is_hovered = RwSignal::new(false);
+
+    let (container_class, mobile_class) = match position {
+        SonnerPosition::TopLeft => ("left-6 top-6 items-start", "left-4 top-4"),
+        SonnerPosition::TopRight => ("right-6 top-6 items-end", "right-4 top-4"),
+        SonnerPosition::TopCenter => ("left-1/2 -translate-x-1/2 top-6 items-center", "left-1/2 -translate-x-1/2 top-4"),
+        SonnerPosition::BottomCenter => ("left-1/2 -translate-x-1/2 bottom-6 items-center", "left-1/2 -translate-x-1/2 bottom-4"),
+        SonnerPosition::BottomLeft => ("left-6 bottom-6 items-start", "left-4 bottom-4"),
+        SonnerPosition::BottomRight => ("right-6 bottom-6 items-end", "right-4 bottom-4"),
+    };
+
+    view! {
+        <div 
+            class=tw_merge!(
+                "fixed z-[100] flex flex-col pointer-events-none min-h-[100px] w-full sm:w-[400px]",
+                container_class,
+                // Safe areas for mobile
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] px-4 sm:px-0"
+            )
+            on:mouseenter=move |_| is_hovered.set(true)
+            on:mouseleave=move |_| is_hovered.set(false)
+        >
+            <For
+                each=move || {
+                    let list = toasts.get();
+                    list.into_iter().rev().enumerate().collect::<Vec<_>>()
+                }
+                key=|(_, toast)| toast.id
+                children=move |(index, toast)| {
+                    let id = toast.id;
+                    let total = toasts.with(|t| t.len());
+                    
+                    let expanded_style = move || {
+                        if is_hovered.get() {
+                            let offset = index as f64 * 64.0;
+                            let is_bottom = position.to_string().contains("Bottom");
+                            let y_dir = if is_bottom { -1.0 } else { 1.0 };
+                            format!("transform: translateY({}px) scale(1); opacity: 1;", offset * y_dir)
+                        } else {
+                            "".to_string()
+                        }
+                    };
+
+                    view! {
+                        <div class="contents" style=expanded_style>
+                            <SonnerTrigger
+                                toast=toast
+                                index=index
+                                total=total
+                                position=position
+                                on_dismiss=Callback::new(move |_| {
+                                    toasts.update(|vec| vec.retain(|t| t.id != id));
+                                })
+                            />
+                        </div>
+                    }
+                }
+            />
+        </div>
+    }.into_any()
+}
+
+pub fn toast(title: impl Into<String>, variant: ToastType) {
+    let signal_opt = TOASTS.with(|t| *t.borrow());
+    
+    if let Some(toasts) = signal_opt {
+        let id = js_sys::Math::random().to_bits();
+        let new_toast = ToastData {
+            id,
+            title: title.into(),
+            description: None,
+            variant,
+            duration: 4000,
+        };
+        
+        toasts.update(|t| {
+            t.push(new_toast.clone());
+            if t.len() > 5 {
+                t.remove(0);
+            }
+        });
+
+        let duration = new_toast.duration;
+        leptos::task::spawn_local(async move {
+            gloo_timers::future::TimeoutFuture::new(duration as u32).await;
+            toasts.update(|vec| vec.retain(|t| t.id != id));
+        });
+    }
+}
+
+#[allow(dead_code)]
+pub fn toast_success(title: impl Into<String>) { toast(title, ToastType::Success); }
+#[allow(dead_code)]
+pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
+#[allow(dead_code)]
+pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
+#[allow(dead_code)]
+pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }
--- a/frontend/src/store.rs
+++ b/frontend/src/store.rs
@@ -2,44 +2,30 @@ use futures::StreamExt;
 use gloo_net::eventsource::futures::EventSource;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use shared::{AppEvent, GlobalStats, NotificationLevel, SystemNotification, Torrent};
+use shared::{AppEvent, GlobalStats, NotificationLevel, Torrent};
 use std::collections::HashMap;
-use serde::{Serialize, Deserialize};
+use struct_patch::traits::Patch;
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};

-#[derive(Clone, Debug, PartialEq)]
-pub struct NotificationItem {
-    pub id: u64,
-    pub notification: SystemNotification,
-}
-
-pub fn show_toast_with_signal(
-    notifications: RwSignal<Vec<NotificationItem>>,
-    level: NotificationLevel,
-    message: impl Into<String>,
-) {
-    let id = js_sys::Date::now() as u64;
-    let notification = SystemNotification {
-        level,
-        message: message.into(),
-    };
-    let item = NotificationItem { id, notification };
-
-    notifications.update(|list| list.push(item));
-
-    leptos::prelude::set_timeout(
-        move || {
-            notifications.update(|list| list.retain(|i| i.id != id));
-        },
-        std::time::Duration::from_secs(5),
-    );
-}
+use crate::components::ui::toast::{ToastType, toast};

 pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
-    if let Some(store) = use_context::<TorrentStore>() {
-        show_toast_with_signal(store.notifications, level, message);
-    }
+    let msg = message.into();
+    gloo_console::log!("TOAST CALL:", &msg, format!("{:?}", level));
+    log::info!("Displaying toast: [{:?}] {}", level, msg);
+    
+    let variant = match level {
+        NotificationLevel::Success => ToastType::Success,
+        NotificationLevel::Error => ToastType::Error,
+        NotificationLevel::Warning => ToastType::Warning,
+        NotificationLevel::Info => ToastType::Info,
+    };
+    
+    toast(msg, variant);
 }

+
+
 pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
 pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }

@@ -66,8 +52,8 @@ pub struct TorrentStore {
    pub filter: RwSignal<FilterStatus>,
    pub search_query: RwSignal<String>,
    pub global_stats: RwSignal<GlobalStats>,
-    pub notifications: RwSignal<Vec<NotificationItem>>,
    pub user: RwSignal<Option<String>>,
+    pub selected_torrent: RwSignal<Option<String>>,
 }

 pub fn provide_torrent_store() {
@@ -75,15 +61,14 @@ pub fn provide_torrent_store() {
    let filter = RwSignal::new(FilterStatus::All);
    let search_query = RwSignal::new(String::new());
    let global_stats = RwSignal::new(GlobalStats::default());
-    let notifications = RwSignal::new(Vec::<NotificationItem>::new());
    let user = RwSignal::new(Option::<String>::None);
+    let selected_torrent = RwSignal::new(Option::<String>::None);

    let show_browser_notification = crate::utils::notification::use_app_notification();

-    let store = TorrentStore { torrents, filter, search_query, global_stats, notifications, user };
+    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
    provide_context(store);

-    let notifications_for_sse = notifications;
    let global_stats_for_sse = global_stats;
    let torrents_for_sse = torrents;
    let show_browser_notification = show_browser_notification.clone();
@@ -109,63 +94,66 @@ pub fn provide_torrent_store() {
                                got_first_message = true;
                                backoff_ms = 1000;
                                if was_connected && disconnect_notified {
-                                    show_toast_with_signal(notifications_for_sse, NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
+                                    show_toast(NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
                                    disconnect_notified = false;
                                }
                                was_connected = true;
                            }

                            if let Some(data_str) = msg.data().as_string() {
-                                log::debug!("SSE: Parsing JSON: {}", data_str);
-                                if let Ok(event) = serde_json::from_str::<AppEvent>(&data_str) {
-                                    match event {
-                                        AppEvent::FullList { torrents: list, .. } => {
-                                            log::info!("SSE: Received FullList with {} torrents", list.len());
-                                            torrents_for_sse.update(|map| {
-                                                let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
-                                                map.retain(|hash, _| new_hashes.contains(hash));
-                                                for new_torrent in list {
-                                                    map.insert(new_torrent.hash.clone(), new_torrent);
+                                // Decode Base64
+                                match BASE64.decode(&data_str) {
+                                    Ok(bytes) => {
+                                        // Deserialize MessagePack
+                                        match rmp_serde::from_slice::<AppEvent>(&bytes) {
+                                            Ok(event) => {
+                                                match event {
+                                                    AppEvent::FullList(list, _) => {
+                                                        log::info!("SSE: Received FullList with {} torrents", list.len());
+                                                        torrents_for_sse.update(|map| {
+                                                            let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
+                                                            map.retain(|hash, _| new_hashes.contains(hash));
+                                                            for new_torrent in list {
+                                                                map.insert(new_torrent.hash.clone(), new_torrent);
+                                                            }
+                                                        });
+                                                        log::debug!("SSE: torrents map now has {} entries", torrents_for_sse.with(|m| m.len()));
+                                                    }
+                                                    AppEvent::Update(patch) => {
+                                                        let hash_opt = patch.hash.clone();
+                                                        if let Some(hash) = hash_opt {
+                                                            torrents_for_sse.update(|map| {
+                                                                if let Some(t) = map.get_mut(&hash) {
+                                                                    t.apply(patch);
+                                                                }
+                                                            });
+                                                        }
+                                                    }
+                                                    AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
+                                                    AppEvent::Notification(n) => {
+                                                        show_toast(n.level.clone(), n.message.clone());
+                                                        if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
+                                                            show_browser_notification("VibeTorrent", &n.message);
+                                                        }
+                                                    }
                                                }
-                                            });
-                                            log::debug!("SSE: torrents map now has {} entries", torrents_for_sse.with(|m| m.len()));
-                                        }
-                                        AppEvent::Update(update) => {
-                                            torrents_for_sse.update(|map| {
-                                                if let Some(t) = map.get_mut(&update.hash) {
-                                                    if let Some(v) = update.name { t.name = v; }
-                                                    if let Some(v) = update.size { t.size = v; }
-                                                    if let Some(v) = update.down_rate { t.down_rate = v; }
-                                                    if let Some(v) = update.up_rate { t.up_rate = v; }
-                                                    if let Some(v) = update.percent_complete { t.percent_complete = v; }
-                                                    if let Some(v) = update.completed { t.completed = v; }
-                                                    if let Some(v) = update.eta { t.eta = v; }
-                                                    if let Some(v) = update.status { t.status = v; }
-                                                    if let Some(v) = update.error_message { t.error_message = v; }
-                                                    if let Some(v) = update.label { t.label = Some(v); }
-                                                }
-                                            });
-                                        }
-                                        AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
-                                        AppEvent::Notification(n) => {
-                                            show_toast_with_signal(notifications_for_sse, n.level.clone(), n.message.clone());
-                                            if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
-                                                show_browser_notification("VibeTorrent", &n.message);
                                            }
+                                            Err(e) => log::error!("SSE: Failed to deserialize MessagePack: {}", e),
                                        }
                                    }
+                                    Err(e) => log::error!("SSE: Failed to decode Base64: {}", e),
                                }
                            }
                        }
                        if was_connected && !disconnect_notified {
-                            show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
+                            show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
                            disconnect_notified = true;
                        }
                    }
                }
                Err(_) => {
                    if was_connected && !disconnect_notified {
-                        show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
+                        show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
                        disconnect_notified = true;
                    }
                }
--- a/frontend/src/utils/notification.rs
+++ b/frontend/src/utils/notification.rs
@@ -1,10 +1,12 @@
 use wasm_bindgen::prelude::*;
 use web_sys::{Notification, NotificationOptions};
-use leptos::prelude::*;
-use leptos_use::{use_web_notification, UseWebNotificationReturn, NotificationPermission};
+

 /// Request browser notification permission from user
 pub async fn request_notification_permission() -> bool {
+    if !is_notification_supported() {
+        return false;
+    }
    if let Ok(promise) = Notification::request_permission() {
        if let Ok(result) = wasm_bindgen_futures::JsFuture::from(promise).await {
            return result.as_string().unwrap_or_default() == "granted";
@@ -21,6 +23,9 @@ pub fn is_notification_supported() -> bool {

 /// Get current notification permission status
 pub fn get_notification_permission() -> String {
+    if !is_notification_supported() {
+        return "denied".to_string();
+    }
    match Notification::permission() {
        web_sys::NotificationPermission::Granted => "granted".to_string(),
        web_sys::NotificationPermission::Denied => "denied".to_string(),
@@ -32,8 +37,6 @@ pub fn get_notification_permission() -> String {
 /// Hook for using browser notifications within Leptos components or effects.
 /// This uses leptos-use for reactive permission tracking.
 pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
-    let UseWebNotificationReturn { permission, .. } = use_web_notification();
-    
    move |title: &str, body: &str| {
        // Check user preference from localStorage
        let window = web_sys::window().expect("no global window");
@@ -42,8 +45,8 @@ pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
            .and_then(|s| s.get_item("vibetorrent_browser_notifications").ok().flatten())
            .unwrap_or_else(|| "true".to_string());

-        // Use the reactive permission signal from leptos-use
-        if enabled == "true" && permission.get() == NotificationPermission::Granted {
+        // Check platform support and permission
+        if enabled == "true" && is_notification_supported() && get_notification_permission() == "granted" {
            show_browser_notification(title, body);
        }
    }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,20 @@
+const path = require("path");
+const os = require("os");
+
+// Cargo registry'deki leptos-shadcn crate'lerini Tailwind'e taratmak için
+const cargoRegistry = path.join(
+  os.homedir(),
+  ".cargo/registry/src/*/leptos-shadcn-*/src/**/*.rs"
+);
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{rs,html}"],
+  darkMode: "class",
+  content: [
+    "./index.html",
+    "./src/**/*.{rs,html}",
+    cargoRegistry,
+  ],
  theme: {
    extend: {
      colors: {
@@ -12,4 +26,7 @@ module.exports = {
      },
    },
  },
+  plugins: [
+    require("tailwindcss-animate"),
+  ],
 };
--- a/frontend/ui_config.toml
+++ b/frontend/ui_config.toml
@@ -0,0 +1,2 @@
+base_color = "neutral"
+base_path_components = "src/components"
--- a/shared/Cargo.toml
+++ b/shared/Cargo.toml
@@ -3,36 +3,48 @@ name = "shared"
 version = "0.1.0"
 edition = "2021"

-[features]
-default = []
-ssr = [
-    "dep:tokio",
-    "dep:bytes",
-    "dep:thiserror",
-    "dep:quick-xml",
-    "dep:leptos_axum",
-    "dep:sqlx",
-    "dep:anyhow",
-    "leptos/ssr",
-    "leptos_router/ssr",
-]
-hydrate = ["leptos/hydrate"]
-
 [dependencies]
 serde = { version = "1.0", features = ["derive"] }
 utoipa = { version = "5.4.0", features = ["axum_extras"] }
+struct-patch = "0.5"
+rmp-serde = "1.3"
+bytes = "1"
+http = "1"

 # Leptos 0.8.7
-leptos = { version = "0.8.7", features = ["nightly"] }
+leptos = { version = "0.8.15", features = ["nightly", "msgpack"] }
 leptos_router = { version = "0.8.7", features = ["nightly"] }
 leptos_axum = { version = "0.8.7", optional = true }
+axum = { version = "0.8", features = ["macros"], optional = true }

 # SSR Dependencies (XML-RPC & SCGI)
 tokio = { version = "1", features = ["full"], optional = true }
-bytes = { version = "1", optional = true }
 thiserror = { version = "2", optional = true }
 quick-xml = { version = "0.31", features = ["serde", "serialize"], optional = true }

 # Database
 sqlx = { version = "0.8", features = ["runtime-tokio", "sqlite"], optional = true }
-anyhow = { version = "1.0", optional = true }
+anyhow = { version = "1.0", optional = true }
+
+# Auth (SSR)
+jsonwebtoken = { version = "9", optional = true }
+cookie = { version = "0.18", features = ["percent-encode"], optional = true }
+bcrypt = { version = "0.17", optional = true }
+
+[features]
+default = []
+ssr = [
+    "dep:tokio",
+    "dep:thiserror",
+    "dep:quick-xml",
+    "dep:leptos_axum",
+    "dep:sqlx",
+    "dep:anyhow",
+    "dep:jsonwebtoken",
+    "dep:cookie",
+    "dep:bcrypt",
+    "dep:axum",
+    "leptos/ssr",
+    "leptos_router/ssr",
+]
+hydrate = ["leptos/hydrate"]
--- a/shared/src/codec.rs
+++ b/shared/src/codec.rs
@@ -0,0 +1 @@
+pub use leptos::server_fn::codec::MsgPack;
--- a/shared/src/lib.rs
+++ b/shared/src/lib.rs
@@ -1,4 +1,5 @@
 use serde::{Deserialize, Serialize};
+use struct_patch::Patch;
 use utoipa::ToSchema;

 #[cfg(feature = "ssr")]
@@ -10,6 +11,8 @@ pub mod xmlrpc;
 #[cfg(feature = "ssr")]
 pub mod db;

+pub mod codec;
+
 pub mod server_fns;

 #[derive(Clone, Debug)]
@@ -23,7 +26,9 @@ pub struct DbContext {
    pub db: db::Db,
 }

-#[derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema)]
+#[derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema, Patch)]
+#[patch_derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema, Default)]
+#[patch_name = "TorrentUpdate"]
 pub struct Torrent {
    pub hash: String,
    pub name: String,
@@ -50,12 +55,8 @@ pub enum TorrentStatus {
 }

 #[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
-#[serde(tag = "type", content = "data")]
 pub enum AppEvent {
-    FullList {
-        torrents: Vec<Torrent>,
-        timestamp: u64,
-    },
+    FullList(Vec<Torrent>, u64),
    Update(TorrentUpdate),
    Stats(GlobalStats),
    Notification(SystemNotification),
@@ -84,20 +85,8 @@ pub struct GlobalStats {
    pub free_space: Option<i64>,
 }

-#[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
-pub struct TorrentUpdate {
-    pub hash: String,
-    pub name: Option<String>,
-    pub size: Option<i64>,
-    pub down_rate: Option<i64>,
-    pub up_rate: Option<i64>,
-    pub percent_complete: Option<f64>,
-    pub completed: Option<i64>,
-    pub eta: Option<i64>,
-    pub status: Option<TorrentStatus>,
-    pub error_message: Option<String>,
-    pub label: Option<String>,
-}
+// REMOVED: Manual TorrentUpdate struct definition as it's now generated by Patch macro
+

 #[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
 pub struct TorrentActionRequest {
--- a/shared/src/server_fns/auth.rs
+++ b/shared/src/server_fns/auth.rs
@@ -0,0 +1,169 @@
+use leptos::prelude::*;
+use serde::{Deserialize, Serialize};
+use crate::codec::MsgPack;
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct UserResponse {
+    pub id: i64,
+    pub username: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct Claims {
+    pub sub: String, // username
+    pub uid: i64,    // user id
+    pub exp: usize,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct SetupStatus {
+    pub completed: bool,
+}
+
+#[server(GetSetupStatus, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn get_setup_status() -> Result<SetupStatus, ServerFnError> {
+    use crate::DbContext;
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    let has_users = db_context.db.has_users().await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    Ok(SetupStatus {
+        completed: has_users,
+    })
+}
+
+#[server(Setup, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn setup(username: String, password: String) -> Result<(), ServerFnError> {
+    use crate::DbContext;
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    
+    // Check if setup is already done
+    let has_users = db_context.db.has_users().await.unwrap_or(false);
+    if has_users {
+        return Err(ServerFnError::new("Setup already completed"));
+    }
+
+    // Hash password (low cost for MIPS)
+    let password_hash = bcrypt::hash(&password, 6)
+        .map_err(|_| ServerFnError::new("Hashing error"))?;
+
+    db_context.db.create_user(&username, &password_hash).await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    Ok(())
+}
+
+#[server(Login, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn login(username: String, password: String) -> Result<UserResponse, ServerFnError> {
+    use crate::DbContext;
+    use leptos_axum::ResponseOptions;
+    use jsonwebtoken::{encode, Header, EncodingKey};
+    use cookie::{Cookie, SameSite};
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    
+    let user_opt = db_context.db.get_user_by_username(&username).await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    if let Some((uid, password_hash)) = user_opt {
+        let valid = bcrypt::verify(&password, &password_hash).unwrap_or(false);
+        if !valid {
+             return Err(ServerFnError::new("Invalid credentials"));
+        }
+
+        let expiration = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .unwrap()
+            .as_secs() as usize + 24 * 3600; // 24 hours
+
+        let claims = Claims {
+            sub: username.clone(),
+            uid,
+            exp: expiration,
+        };
+
+        let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+        let token = encode(&Header::default(), &claims, &EncodingKey::from_secret(secret.as_bytes()))
+            .map_err(|e| ServerFnError::new(format!("Token error: {}", e)))?;
+
+        let cookie = Cookie::build(("auth_token", token))
+            .path("/")
+            .http_only(true)
+            .same_site(SameSite::Strict)
+            .build();
+
+        if let Some(options) = use_context::<ResponseOptions>() {
+            options.insert_header(
+                axum::http::header::SET_COOKIE,
+                axum::http::HeaderValue::from_str(&cookie.to_string()).unwrap(),
+            );
+        }
+
+        Ok(UserResponse {
+            id: uid,
+            username,
+        })
+    } else {
+        Err(ServerFnError::new("Invalid credentials"))
+    }
+}
+
+#[server(Logout, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn logout() -> Result<(), ServerFnError> {
+    use leptos_axum::ResponseOptions;
+    use cookie::{Cookie, SameSite};
+
+    let cookie = Cookie::build(("auth_token", ""))
+        .path("/")
+        .http_only(true)
+        .same_site(SameSite::Strict)
+        .max_age(cookie::time::Duration::seconds(0))
+        .build();
+
+    if let Some(options) = use_context::<ResponseOptions>() {
+        options.insert_header(
+            axum::http::header::SET_COOKIE,
+            axum::http::HeaderValue::from_str(&cookie.to_string()).unwrap(),
+        );
+    }
+    Ok(())
+}
+
+#[server(GetUser, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn get_user() -> Result<Option<UserResponse>, ServerFnError> {
+    use axum::http::HeaderMap;
+    use leptos_axum::extract;
+    use jsonwebtoken::{decode, Validation, DecodingKey};
+
+    let headers: HeaderMap = extract().await.map_err(|e| ServerFnError::new(format!("Extract error: {}", e)))?;
+    let cookie_header = headers.get(axum::http::header::COOKIE)
+        .and_then(|h| h.to_str().ok());
+
+    if let Some(cookie_str) = cookie_header {
+        for c_str in cookie_str.split(';') {
+            if let Ok(c) = cookie::Cookie::parse(c_str.trim()) {
+                if c.name() == "auth_token" {
+                    let token = c.value();
+                    let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+                    let token_data = decode::<Claims>(
+                        token,
+                        &DecodingKey::from_secret(secret.as_bytes()),
+                        &Validation::default(),
+                    );
+
+                    if let Ok(data) = token_data {
+                        return Ok(Some(UserResponse {
+                            id: data.claims.uid,
+                            username: data.claims.sub,
+                        }));
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(None)
+}
--- a/shared/src/server_fns/mod.rs
+++ b/shared/src/server_fns/mod.rs
@@ -1,3 +1,4 @@
 pub mod torrent;
 pub mod settings;
 pub mod push;
+pub mod auth;
--- a/vibetorrent.db
+++ b/vibetorrent.db
--- a/vibetorrent.db-shm
+++ b/vibetorrent.db-shm
--- a/vibetorrent.db-wal
+++ b/vibetorrent.db-wal
Author	SHA1	Message	Date
spinline	03b63dd5d0	chore: remove old search box from toolbar and modernize add button All checks were successful Build MIPS Binary / build (push) Successful in 5m29s Details	2026-02-12 01:40:17 +03:00
spinline	7717dffc56	fix: adjust toast notifications to prevent screen overflow on mobile Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 01:38:29 +03:00
spinline	3a2cab7ca7	fix: resolve nested button styles in bulk actions and clean up UI modules Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 01:37:00 +03:00
spinline	e0b5411eb1	fix: resolve all type inference and closure ownership errors in DataTable All checks were successful Build MIPS Binary / build (push) Successful in 5m33s Details	2026-02-12 01:24:28 +03:00
spinline	f85adfa007	feat: complete advanced DataTable with search, column toggle, and bulk actions Some checks failed Build MIPS Binary / build (push) Failing after 1m30s Details	2026-02-12 01:18:26 +03:00
spinline	88c3cd57c1	feat: stabilize advanced DataTable features and resolve all closure ownership errors Some checks failed Build MIPS Binary / build (push) Failing after 1m28s Details	2026-02-12 01:16:01 +03:00
spinline	d67215a6eb	feat: resolve complex closure errors and finalize advanced DataTable features Some checks failed Build MIPS Binary / build (push) Failing after 1m30s Details	2026-02-12 01:09:28 +03:00
spinline	5cc2fdd8b4	feat: add empty state to torrent table for better user feedback Some checks failed Build MIPS Binary / build (push) Failing after 1m33s Details	2026-02-12 01:01:36 +03:00
spinline	38bce3fecf	feat: enable sorting for all columns in Torrent DataTable Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 00:57:20 +03:00
spinline	f1c75c468a	fix: restore table alignment by ensuring proper HTML structure and integrating multi-select DataTable All checks were successful Build MIPS Binary / build (push) Successful in 5m27s Details	2026-02-12 00:48:35 +03:00
spinline	bfb152f0d8	feat: fully implement official DataTable with multi-selection support Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 00:46:36 +03:00
spinline	8a7d9957aa	fix: remove unused sonner module to resolve build errors All checks were successful Build MIPS Binary / build (push) Successful in 5m26s Details	2026-02-12 00:35:53 +03:00
spinline	56e8cc03d1	feat: implement official DataTable components and fix row spacing issues Some checks failed Build MIPS Binary / build (push) Failing after 1m33s Details	2026-02-12 00:32:58 +03:00
spinline	04cb7d51cb	fix: resolve context menu positioning issue and integrate it into table rows Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 00:29:44 +03:00
spinline	555505b80e	feat: implement real Sonner toast animations with stacking and hover expansion Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 00:25:57 +03:00
spinline	fa07fd88dc	feat: modernize all buttons using the official rust-ui Button component Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-12 00:23:12 +03:00
spinline	bbb8e8dc98	fix: resolve compilation errors, fix lock_scroll path, and enhance DataTable attributes All checks were successful Build MIPS Binary / build (push) Successful in 5m27s Details	2026-02-12 00:15:17 +03:00
spinline	d09ecd21b7	feat: refactor torrent table to use DataTable components and fix context menu bugs Some checks failed Build MIPS Binary / build (push) Failing after 1m30s Details	2026-02-12 00:08:35 +03:00
spinline	9a00e341af	feat: enhance context menu styles and add press-and-hold for destructive actions Some checks failed Build MIPS Binary / build (push) Failing after 1m31s Details	2026-02-12 00:03:32 +03:00
spinline	c78dcda55e	feat: integrate ThemeToggle component and fix module visibility errors All checks were successful Build MIPS Binary / build (push) Successful in 5m27s Details	2026-02-11 23:54:36 +03:00
spinline	57abbb3335	feat: install and integrate official rust-ui context menu via ui-cli Some checks failed Build MIPS Binary / build (push) Failing after 1m31s Details	2026-02-11 23:45:07 +03:00
spinline	315a2421c4	feat: add animations and hover effects to toast notifications	2026-02-11 23:33:58 +03:00
spinline	c135c96d27	chore: silence unused code warnings in frontend UI components	2026-02-11 23:29:40 +03:00
spinline	315a2f9a53	fix(auth): fix 500 error and server function registration on Mac All checks were successful Build MIPS Binary / build (push) Successful in 5m13s Details	2026-02-11 23:22:38 +03:00
spinline	9d160a7ef5	fix(ui): use thread_local for toast signal to fix context issue All checks were successful Build MIPS Binary / build (push) Successful in 5m12s Details	2026-02-11 21:43:06 +03:00
spinline	a24e4101e8	feat(ui): toast entegrasyonu (sonner) All checks were successful Build MIPS Binary / build (push) Successful in 5m13s Details	2026-02-11 21:32:39 +03:00
spinline	7539307e18	feat: shadcn -> rust-ui.com migration + TorrentDetail silme All checks were successful Build MIPS Binary / build (push) Successful in 5m15s Details - Tüm leptos-shadcn-* paketleri kaldırıldı (19 dependency) - leptos_ui, tw_merge, strum eklendi - components/ui/ modülü oluşturuldu (Button, Card, Input) - TorrentDetail bileşeni tamamen silindi - sidebar.rs: saf HTML+Tailwind ile SidebarButton yardımcı bileşeni - toolbar.rs, login.rs, setup.rs, add_torrent.rs: saf HTML+Tailwind - table.rs: shadcn Card -> rust-ui Card - app.rs: Skeleton -> animate-pulse div	2026-02-11 21:01:51 +03:00
spinline	907ae66a7f	fix: resolve compilation error in ToastItem by cloning message string All checks were successful Build MIPS Binary / build (push) Successful in 5m21s Details	2026-02-11 20:09:58 +03:00
spinline	f35b119c0d	fix: replace leptos-shadcn-toast with custom implementation to fix WASM panic Some checks failed Build MIPS Binary / build (push) Failing after 1m23s Details	2026-02-11 20:02:58 +03:00
spinline	920704ee72	chore: add gloo-console dependency for direct logging All checks were successful Build MIPS Binary / build (push) Successful in 5m30s Details	2026-02-11 19:51:50 +03:00
spinline	d8ad9e62d8	chore: add direct console logging to debug missing toasts Some checks failed Build MIPS Binary / build (push) Failing after 1m19s Details	2026-02-11 19:46:06 +03:00
spinline	ea99ac62bc	fix: install tailwindcss-animate and add to config to enable toast animations All checks were successful Build MIPS Binary / build (push) Successful in 5m17s Details	2026-02-11 19:33:16 +03:00
spinline	af13b5af09	fix: resolve syntax error and duplicate code in main.rs router definition All checks were successful Build MIPS Binary / build (push) Successful in 5m18s Details	2026-02-11 19:14:15 +03:00
spinline	c8907e7999	revert: remove Toaster component and add test toast message Some checks failed Build MIPS Binary / build (push) Failing after 4m35s Details	2026-02-11 19:08:57 +03:00
spinline	714e2cb7d5	fix: add missing Toaster component to App to render notifications Some checks failed Build MIPS Binary / build (push) Failing after 1m21s Details	2026-02-11 19:05:12 +03:00
spinline	f35b716f93	chore: cleanup frontend unused imports and variables Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 19:03:36 +03:00
spinline	47db9fa0c0	chore: cleanup unused backend code after migration to server functions Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 19:02:36 +03:00
spinline	47dc4da6d1	fix: downgrade postcss-preset-env for Node 20.11.1 compatibility All checks were successful Build MIPS Binary / build (push) Successful in 5m23s Details	2026-02-11 18:55:37 +03:00
spinline	c501ed9207	fix: use input/output arguments for MsgPack encoding Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 18:50:47 +03:00
spinline	4861faee18	fix: use MsgPack type for encoding (remove quotes) Some checks failed Build MIPS Binary / build (push) Failing after 1m12s Details	2026-02-11 18:47:07 +03:00
spinline	6a4943d692	fix: re-add codec.rs for proper compilation Some checks failed Build MIPS Binary / build (push) Failing after 1m13s Details	2026-02-11 18:44:19 +03:00
spinline	b27caa77f2	fix: restore codec.rs for module export Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 18:43:10 +03:00
spinline	cba8c20d9b	fix: switch to built-in MsgPack codec and sync leptos versions Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 18:42:50 +03:00
spinline	0cdd92dc95	fix: resolve messagepack codec trait bounds and literals Some checks failed Build MIPS Binary / build (push) Failing after 1m12s Details	2026-02-11 18:32:41 +03:00
spinline	b9798ce0e2	fix: resolve messagepack codec compilation errors Some checks failed Build MIPS Binary / build (push) Failing after 1m13s Details	2026-02-11 18:21:36 +03:00
spinline	6a882b75b6	feat: implement MessagePack codec for server functions Some checks failed Build MIPS Binary / build (push) Failing after 1m12s Details	2026-02-11 02:01:02 +03:00
spinline	40c9f66e5c	fix: toast notifications context issue by wrapping app in SonnerProvider All checks were successful Build MIPS Binary / build (push) Successful in 5m14s Details	2026-02-11 01:42:58 +03:00
spinline	93e853977a	feat: simplify theme toggle and improve sidebar layout All checks were successful Build MIPS Binary / build (push) Successful in 5m20s Details - frontend/src/components/layout/sidebar.rs: Replaced theme selector with simple dark/light toggle button. - Cleaned up profile section layout and added safe-area padding.	2026-02-11 01:31:30 +03:00
spinline	e3bc956256	feat: migrate to shadcn toast (sonner) Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - frontend/src/app.rs: Replaced custom ToastContainer with SonnerProvider - frontend/src/store.rs: Updated show_toast to use leptos_shadcn_toast::toast API - frontend/src/components/toast.rs: Deleted custom toast component - frontend/src/components/torrent/add_torrent.rs: Updated toast usage - frontend/src/components/torrent/table.rs: Updated toast usage	2026-02-11 01:26:46 +03:00
spinline	5b016aca58	fix: iOS WASM Notification Crash All checks were successful Build MIPS Binary / build (push) Successful in 5m21s Details - frontend/src/utils/notification.rs: Notification API kullanımı is_notification_supported() ile sarmalandı - frontend/src/utils/notification.rs: leptos_use::use_web_notification yerine güvenli manuel implementasyon yapıldı - task.md: iOS WASM hatası giderildi olarak işaretlendi	2026-02-11 01:12:04 +03:00
spinline	5bd3d31dd6	feat: Tema Butonu Sidebar'a Taşındı Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - sidebar.rs: Tema state yönetimi ve UI butonu eklendi (profil alanının yanına) - statusbar.rs: Tema ile ilgili eski kodlar ve UI kaldırıldı - implementation_plan.md: Plan dosyası oluşturuldu - task.md: Görev tamamlandı olarak işaretlendi	2026-02-11 01:08:18 +03:00
spinline	87ddd3bb93	fix: iOS Dark Mode ve Tema Değişimi Düzeltildi All checks were successful Build MIPS Binary / build (push) Successful in 5m17s Details - tailwind.config.js: darkMode: 'class' olarak ayarlandı (iOS sistem tercihi yerine .dark class kullanımı için) - statusbar.rs: Tema değişiminde .dark class ekleme mantığı tüm dark temaları kapsayacak şekilde genişletildi - index.html: Sayfa yüklenirken .dark class ekleyen inline script güncellendi - public/tailwind.css: PostCSS ile yeniden derlendi (nesting düzleştirildi + .dark seçiciler eklendi)	2026-02-11 01:00:04 +03:00
spinline	463249982c	fix: iOS Safari uyumluluk - CSS nesting düzleştirildi All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details - PostCSS tabanlı build'e geçildi (@tailwindcss/postcss + postcss-preset-env) - CSS native nesting (&) düzleştirilerek eski Safari desteği sağlandı - iOS 15+ ve Safari 15+ desteği eklendi	2026-02-11 00:54:44 +03:00
spinline	9447a66cc1	feat: loading ekranı shadcn Skeleton ile değiştirildi All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details - Yükleniyor... spinner yerine uygulamanın layout'unu simüle eden skeleton UI - Sidebar, header, tablo satırları ve statusbar skeleton'ları	2026-02-11 00:43:05 +03:00
spinline	45247a020e	fix: AddTorrent dialog stili düzeltildi, skeleton crate eklendi Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - Dialog buggy leptos-shadcn-dialog yerine doğrudan shadcn HTML markup ile yeniden yazıldı - Backdrop overlay, card panel, X close butonu eklendi - leptos-shadcn-skeleton dependency eklendi - Tailwind CSS rebuild edildi	2026-02-11 00:40:39 +03:00
spinline	77b77c7775	fix: Tailwind CSS rebuild - shadcn crate class'ları @source ile dahil edildi All checks were successful Build MIPS Binary / build (push) Successful in 5m15s Details - input.css'e @source directive eklendi (cargo registry leptos-shadcn path'i) - public/tailwind.css yeniden build edildi (1800 → 2940 satır) - backdrop-blur, data-[state], focus-visible, peer-disabled vb. class'lar artık mevcut	2026-02-11 00:30:35 +03:00
spinline	8ef3008cb8	fix: context menu viewport sınır kontrolü - alta/sağa taşma düzeltildi All checks were successful Build MIPS Binary / build (push) Successful in 5m14s Details	2026-02-11 00:24:42 +03:00
spinline	ca1dd0caac	refactor: tüm bileşenler leptos-shadcn-ui'ye dönüştürüldü All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details - login.rs: Card, Input, Button, Label, Alert - setup.rs: Card, Input, Button, Label, Alert - add_torrent.rs: Dialog, Input, Button, Alert - toast.rs: Alert bileşeni ile - Cargo.toml: dialog, label, alert, toast, dropdown-menu, tooltip eklendi	2026-02-11 00:17:22 +03:00
spinline	ad336789d9	fix: custom × butonu kaldırıldı, native search clear kullanılıyor All checks were successful Build MIPS Binary / build (push) Successful in 5m14s Details	2026-02-11 00:11:28 +03:00
spinline	fa248d87ae	fix: arama kutusundaki çift çarpı butonu düzeltildi (type=text) All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details	2026-02-10 23:59:40 +03:00
spinline	d8a9e9e137	feat: search kutusu leptos-shadcn-input ile güncellendi, sağa taşındı All checks were successful Build MIPS Binary / build (push) Successful in 5m18s Details - toolbar.rs: search kutusu Input bileşeniyle değiştirildi - Add Torrent butonu Button bileşeniyle güncellendi - Search kutusu ortadan sağa taşındı - Arama ikonu eklendi	2026-02-10 23:51:01 +03:00
spinline	ca31b4018f	feat: leptos-shadcn-tabs ile torrent detay paneli eklendi Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - Cargo.toml: leptos-shadcn-tabs ve leptos-shadcn-scroll-area eklendi - store.rs: selected_torrent sinyali eklendi (seçili torrent hash'i) - detail.rs: General, Transfer, Files, Peers tab'lı detay paneli oluşturuldu - table.rs: StoredValue ile satır tıklama ve seçili satır highlight - app.rs: TorrentDetail paneli TorrentTable altına entegre edildi	2026-02-10 23:45:21 +03:00
spinline	7707bfff15	fix: context menu reaktivite bug'ı düzeltildi, sidebar leptos-shadcn-ui ile güncellendi All checks were successful Build MIPS Binary / build (push) Successful in 5m12s Details - context_menu.rs: leptos-shadcn-context-menu kütüphanesini bypasslayarak kendi reaktif implementasyonumuz yazıldı (Show ile reaktif render, Portal'sız fixed position) - sidebar.rs: Button, Avatar, AvatarFallback, Separator bileşenleri ile güncellendi - Kullanılmayan handle_logout kaldırıldı	2026-02-10 23:26:56 +03:00
spinline	376615813b	feat: finalize shadcn integration with portal-based context menu and clean build All checks were successful Build MIPS Binary / build (push) Successful in 5m13s Details	2026-02-10 23:16:13 +03:00
spinline	fddc81365b	feat: complete modernization with shadcn, stateless auth, and performance optimizations All checks were successful Build MIPS Binary / build (push) Successful in 5m20s Details	2026-02-10 22:16:36 +03:00
spinline	8815727620	feat: migrate to stateless server functions for auth with jwt and shadcn ui Some checks failed Build MIPS Binary / build (push) Failing after 3s Details	2026-02-10 19:20:36 +03:00
spinline	c85c75659e	feat: modernize stack with shadcn, struct_patch and msgpack Some checks failed Build MIPS Binary / build (push) Failing after 6s Details	2026-02-10 19:02:53 +03:00