diff --git a/frontend/src/components/torrent/table.rs b/frontend/src/components/torrent/table.rs
index a9f7a7b..26aec13 100644
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -5,7 +5,7 @@ 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::table::*;
+use crate::components::ui::data_table::*;
 
 fn format_bytes(bytes: i64) -> String {
     const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -136,38 +136,38 @@ pub fn TorrentTable() -> impl IntoView {
         <div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-2">
             // --- DESKTOP VIEW ---
             <div class="hidden md:flex flex-col h-full overflow-hidden">
-                <TableWrapper class="flex-1 flex flex-col min-h-0 bg-card/50">
-                    <div class="flex-1 overflow-y-auto overflow-x-hidden">
-                        <Table class="w-full">
-                            <TableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
-                                <TableRow class="hover:bg-transparent">
-                                    <TableHead class="cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Name)>
+                <DataTableWrapper class="flex-1 min-h-0 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="cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
                                         <div class="flex items-center">"Name" {move || sort_arrow(SortColumn::Name)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Size)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
                                         <div class="flex items-center">"Size" {move || sort_arrow(SortColumn::Size)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-48 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Progress)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-48 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
                                         <div class="flex items-center">"Progress" {move || sort_arrow(SortColumn::Progress)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Status)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
                                         <div class="flex items-center">"Status" {move || sort_arrow(SortColumn::Status)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
                                         <div class="flex items-center">"DL Speed" {move || sort_arrow(SortColumn::DownSpeed)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
                                         <div class="flex items-center">"Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::ETA)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
                                         <div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-32 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::AddedDate)>
+                                    </DataTableHead>
+                                    <DataTableHead class="w-32 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::AddedDate)>
                                         <div class="flex items-center">"Date" {move || sort_arrow(SortColumn::AddedDate)}</div>
-                                    </TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
+                                    </DataTableHead>
+                                </DataTableRow>
+                            </DataTableHeader>
+                            <DataTableBody>
                                 <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
                                     let on_action = on_action.clone();
                                     move |hash| {
@@ -176,10 +176,10 @@ pub fn TorrentTable() -> impl IntoView {
                                         }
                                     }
                                 } />
-                            </TableBody>
-                        </Table>
+                            </DataTableBody>
+                        </DataTable>
                     </div>
-                </TableWrapper>
+                </DataTableWrapper>
             </div>
 
             // --- MOBILE VIEW ---
@@ -232,41 +232,41 @@ fn TorrentRow(
 
                     view! {
                         <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
-                            <TableRow 
-                                class="cursor-pointer h-12"
+                            <DataTableRow 
+                                class="cursor-pointer group"
                                 attr:data-state=move || if is_selected.get() { "selected" } else { "" }
                                 on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
                             >
-                                <TableCell class="font-medium truncate max-w-[200px] lg:max-w-md px-2 py-0 h-12 flex items-center border-0" attr:title=t_name_for_title>
+                                <DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_for_title>
                                     {t_name_for_content}
-                                </TableCell>
-                                <TableCell class="font-mono text-xs text-muted-foreground px-2">
+                                </DataTableCell>
+                                <DataTableCell class="font-mono text-xs text-muted-foreground">
                                     {format_bytes(t.size)}
-                                </TableCell>
-                                <TableCell class="px-2">
+                                </DataTableCell>
+                                <DataTableCell>
                                     <div class="flex items-center gap-2">
                                         <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>
                                         <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", t.percent_complete)}</span>
                                     </div>
-                                </TableCell>
-                                <TableCell class={format!("px-2 text-xs font-semibold {}", status_color)}>
+                                </DataTableCell>
+                                <DataTableCell class={format!("text-xs font-semibold {}", status_color)}>
                                     {format!("{:?}", t.status)}
-                                </TableCell>
-                                <TableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 px-2 whitespace-nowrap">
+                                </DataTableCell>
+                                <DataTableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 whitespace-nowrap">
                                     {format_speed(t.down_rate)}
-                                </TableCell>
-                                <TableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 px-2 whitespace-nowrap">
+                                </DataTableCell>
+                                <DataTableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 whitespace-nowrap">
                                     {format_speed(t.up_rate)}
-                                </TableCell>
-                                <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
+                                </DataTableCell>
+                                <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
                                     {format_duration(t.eta)}
-                                </TableCell>
-                                <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
+                                </DataTableCell>
+                                <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
                                     {format_date(t.added_date)}
-                                </TableCell>
-                            </TableRow>
+                                </DataTableCell>
+                            </DataTableRow>
                         </TorrentContextMenu>
                     }.into_any()
                 }
@@ -342,4 +342,4 @@ fn TorrentCard(
             }
         </Show>
     }.into_any()
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/data_table.rs b/frontend/src/components/ui/data_table.rs
new file mode 100644
index 0000000..25a6407
--- /dev/null
+++ 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,
+};
\ No newline at end of file
diff --git a/frontend/src/components/ui/mod.rs b/frontend/src/components/ui/mod.rs
index 567ef02..0c95971 100644
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -5,4 +5,6 @@ pub mod toast;
 pub mod context_menu;
 pub mod theme_toggle;
 pub mod svg_icon;
-pub mod table;
\ No newline at end of file
+pub mod table;
+pub mod data_table;
+pub mod sonner;
\ No newline at end of file
diff --git a/frontend/src/components/ui/table.rs b/frontend/src/components/ui/table.rs
index 9a874ee..92a5beb 100644
--- a/frontend/src/components/ui/table.rs
+++ b/frontend/src/components/ui/table.rs
@@ -3,19 +3,25 @@ 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", class);
+    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 caption-bottom", class);
+    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", class);
+    let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
     view! { <thead class=class>{children()}</thead> }
 }
 
@@ -27,7 +33,7 @@ pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> im
 
 #[component]
 pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground", class);
+    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> }
 }
 
@@ -39,6 +45,12 @@ pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> i
 
 #[component]
 pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("p-2 align-middle", class);
+    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> }
+}