diff --git a/frontend/src/components/context_menu.rs b/frontend/src/components/context_menu.rs
index 3e07341..c38457e 100644
--- a/frontend/src/components/context_menu.rs
+++ b/frontend/src/components/context_menu.rs
@@ -10,26 +10,33 @@ pub fn TorrentContextMenu(
     on_action: Callback<(String, String)>,
 ) -> impl IntoView {
     let hash = torrent_hash.clone();
+    let on_action_stored = StoredValue::new(on_action);
+
     let on_click = move |action: &str| {
-        on_action.run((action.to_string(), hash.clone()));
+        on_action_stored.get_value().run((action.to_string(), hash.clone()));
     };
 
+    let start_click = { let on_click = on_click.clone(); move |_| on_click("start") };
+    let stop_click = { let on_click = on_click.clone(); move |_| on_click("stop") };
+    let delete_click = { let on_click = on_click.clone(); move |_| on_click("delete") };
+    let delete_data_click = { let on_click = on_click.clone(); move |_| on_click("delete_with_data") };
+
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
             <ContextMenuContent class="w-48">
-                <ContextMenuItem on:click=move |_| on_click("start")>
+                <ContextMenuItem on:click=start_click>
                     "Başlat"
                 </ContextMenuItem>
-                <ContextMenuItem on:click=move |_| on_click("stop")>
+                <ContextMenuItem on:click=stop_click>
                     "Durdur"
                 </ContextMenuItem>
-                <ContextMenuItem class="text-destructive" on:click=move |_| on_click("delete")>
+                <ContextMenuItem class="text-destructive" on:click=delete_click>
                     "Sil"
                 </ContextMenuItem>
-                <ContextMenuItem class="text-destructive font-bold" on:click=move |_| on_click("delete_with_data")>
+                <ContextMenuItem class="text-destructive font-bold" on:click=delete_data_click>
                     "Verilerle Birlikte Sil"
                 </ContextMenuItem>
             </ContextMenuContent>
diff --git a/frontend/src/components/ui/select.rs b/frontend/src/components/ui/select.rs
index 206c990..273d996 100644
--- a/frontend/src/components/ui/select.rs
+++ b/frontend/src/components/ui/select.rs
@@ -1,9 +1,7 @@
-use icons::{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;
+
+#[component] pub fn SelectGroup(children: Children) -> impl IntoView { view! { <div class="px-1 py-1">{children()}</div> } }
+#[component] pub fn SelectItem(children: Children) -> impl IntoView { view! { <div class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground">{children()}</div> } }
 
 #[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
 #[allow(dead_code)]
@@ -11,55 +9,26 @@ pub enum SelectPosition { #[default] Below, Above }
 
 #[component]
 pub fn SelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
-    let _ = placeholder;
-    view! { <span data-name="SelectValue">"Select..."</span> }
+    view! { <span class="text-sm text-muted-foreground">{placeholder}</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 _ = (class, aria_selected, value);
+pub fn SelectOption(children: Children, #[prop(optional, into)] value: Option<String>) -> impl IntoView {
+    let _ = value;
     view! { <div role="option">{children()}</div> }
 }
 
-#[derive(Clone)]
-struct SelectContext {}
-
 #[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 _ = (class, default_value, on_change);
-    view! { <Provider value=SelectContext {}>{children()}</Provider> }
+pub fn Select(children: Children) -> impl IntoView {
+    view! { <div>{children()}</div> }
 }
 
 #[component]
-pub fn SelectTrigger(children: Children, #[prop(optional, into)] class: String, #[prop(optional, into)] id: String) -> impl IntoView {
-    let _ = (class, id);
+pub fn SelectTrigger(children: Children) -> impl IntoView {
     view! { <button type="button">{children()}</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 _ = (class, position, on_close);
-    let (on_scroll, can_scroll_up, can_scroll_down) = use_can_scroll_vertical();
-    view! {
-        <div data-name="SelectContent" on:scroll=move |ev| on_scroll.run(ev)>
-            <div class=move || if can_scroll_up.get() { "sticky" } else { "hidden" }><ChevronUp /></div>
-            {children()}
-            <div class=move || if can_scroll_down.get() { "sticky" } else { "hidden" }><ChevronDown /></div>
-        </div>
-    }
+pub fn SelectContent(children: Children) -> impl IntoView {
+    view! { <div>{children()}</div> }
 }
diff --git a/frontend/src/components/ui/separator.rs b/frontend/src/components/ui/separator.rs
index 6d86960..ae044a0 100644
--- a/frontend/src/components/ui/separator.rs
+++ b/frontend/src/components/ui/separator.rs
@@ -2,7 +2,6 @@ use leptos::prelude::*;
 use tailwind_fuse::tw_merge;
 
 #[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
-#[allow(dead_code)]
 pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
 
 #[component]
@@ -10,13 +9,13 @@ pub fn Separator(
     #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
     #[prop(into, optional)] class: String,
 ) -> impl IntoView {
-    let class = tw_merge!(
+    let class_signal = move || tw_merge!(
         "shrink-0 bg-border",
-        move || match orientation.get() {
+        match orientation.get() {
             SeparatorOrientation::Horizontal => "h-[1px] w-full",
             SeparatorOrientation::Vertical => "h-full w-[1px]",
         },
-        class
+        class.clone()
     );
-    view! { <div class=class role="none" /> }
+    view! { <div class=class_signal role="none" /> }
 }
diff --git a/frontend/src/components/ui/sidenav.rs b/frontend/src/components/ui/sidenav.rs
index 723cc1d..deb3127 100644
--- a/frontend/src/components/ui/sidenav.rs
+++ b/frontend/src/components/ui/sidenav.rs
@@ -1,24 +1,15 @@
 use leptos::prelude::*;
 use tw_merge::tw_merge;
-use crate::components::hooks::use_random::use_random_id_for;
 
-#[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
 #[allow(dead_code)]
-pub enum SidenavSide { Left, Right }
-
-#[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
-#[allow(dead_code)]
-pub enum SidenavCollapsible { Off, Icon }
+pub enum SidenavState { #[default] Expanded, Collapsed }
 
 #[derive(Clone)]
 pub struct SidenavContext {
     pub state: RwSignal<SidenavState>,
 }
 
-#[derive(Clone, Copy, PartialEq, Eq, Default)]
-#[allow(dead_code)]
-pub enum SidenavState { #[default] Expanded, Collapsed }
-
 #[component]
 pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let state = RwSignal::new(SidenavState::Expanded);
@@ -30,15 +21,15 @@ pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String)
 #[component]
 pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
     let ctx = expect_context::<SidenavContext>();
-    let class = tw_merge!(
+    let class_signal = move || tw_merge!(
         "hidden md:flex flex-col border-r bg-card transition-all duration-300",
-        move || match ctx.state.get() {
+        match ctx.state.get() {
             SidenavState::Expanded => "w-[var(--sidenav-width)]",
             SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
         },
-        class
+        class.clone()
     );
-    view! { <aside class=class>{children()}</aside> }
+    view! { <aside class=class_signal>{children()}</aside> }
 }
 
 #[component]
@@ -47,19 +38,32 @@ pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -
     view! { <main class=class>{children()}</main> }
 }
 
-#[component]
-pub fn SidenavLink(children: Children, #[prop(into)] href: String, #[prop(optional, into)] class: String) -> impl IntoView {
-    let _ = (href, class);
-    view! { <div>{children()}</div> }
-}
+#[component] pub fn SidenavHeader(children: Children) -> impl IntoView { view! { <div class="flex flex-col">{children()}</div> } }
+#[component] pub fn SidenavContent(children: Children) -> impl IntoView { view! { <div class="flex-1 overflow-auto">{children()}</div> } }
+#[component] pub fn SidenavFooter(children: Children) -> impl IntoView { view! { <div class="mt-auto">{children()}</div> } }
+#[component] pub fn SidenavGroup(children: Children) -> impl IntoView { view! { <div class="px-2 py-2">{children()}</div> } }
+#[component] pub fn SidenavGroupLabel(children: Children) -> impl IntoView { view! { <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{children()}</div> } }
+#[component] pub fn SidenavGroupContent(children: Children) -> impl IntoView { view! { <div class="space-y-1">{children()}</div> } }
+#[component] pub fn SidenavMenu(children: Children) -> impl IntoView { view! { <nav class="grid gap-1">{children()}</nav> } }
+#[component] pub fn SidenavMenuItem(children: Children) -> impl IntoView { view! { <div>{children()}</div> } }
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum SidenavMenuButtonVariant { #[default] Default, Outline }
 
 #[component]
-pub fn SidenavTrigger(children: Children) -> impl IntoView {
-    let _ = children;
-    let ctx = expect_context::<SidenavContext>();
-    view! {
-        <button on:click=move |_| ctx.state.update(|s| *s = if *s == SidenavState::Expanded { SidenavState::Collapsed } else { SidenavState::Expanded })>
-            "Toggle"
-        </button>
-    }
+pub fn SidenavMenuButton(
+    children: Children,
+    #[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
+    #[prop(into, optional)] class: String,
+) -> impl IntoView {
+    let class_signal = move || tw_merge!(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+        if variant.get() == SidenavMenuButtonVariant::Outline { "border border-input bg-background shadow-xs" } else { "" },
+        class.clone()
+    );
+    view! { <button class=class_signal>{children()}</button> }
+}
+
+#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
+    view! { <a href=href class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent">{children()}</a> }
 }