diff --git a/Cargo.lock b/Cargo.lock
index b71b5c2..de13562 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1274,6 +1274,7 @@ dependencies = [
  "leptos-shadcn-scroll-area",
  "leptos-shadcn-separator",
  "leptos-shadcn-sheet",
+ "leptos-shadcn-skeleton",
  "leptos-shadcn-tabs",
  "leptos-shadcn-toast",
  "leptos-shadcn-tooltip",
@@ -2390,6 +2391,21 @@ dependencies = [
  "thiserror 1.0.69",
 ]
 
+[[package]]
+name = "leptos-shadcn-skeleton"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c14b6bd0f2fe191e3e114a34cee889fc983546ad488e76e76511e3d75ea3f86"
+dependencies = [
+ "leptos",
+ "leptos-node-ref",
+ "leptos-shadcn-signal-management",
+ "leptos-struct-component",
+ "leptos-style",
+ "tailwind_fuse",
+ "web-sys",
+]
+
 [[package]]
 name = "leptos-shadcn-tabs"
 version = "0.8.1"
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index 5a52764..6f59215 100644
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -51,4 +51,5 @@ leptos-shadcn-label = "0.8"
 leptos-shadcn-alert = "0.8"
 leptos-shadcn-toast = "0.8"
 leptos-shadcn-dropdown-menu = "0.8"
-leptos-shadcn-tooltip = "0.8"
\ No newline at end of file
+leptos-shadcn-tooltip = "0.8"
+leptos-shadcn-skeleton = "0.8"
\ No newline at end of file
diff --git a/frontend/public/tailwind.css b/frontend/public/tailwind.css
index d48725b..7859045 100644
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -79,7 +79,6 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
-    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
@@ -1578,6 +1577,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-shadow {
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
diff --git a/frontend/src/components/torrent/add_torrent.rs b/frontend/src/components/torrent/add_torrent.rs
index ace38f3..7d7178d 100644
--- a/frontend/src/components/torrent/add_torrent.rs
+++ b/frontend/src/components/torrent/add_torrent.rs
@@ -1,6 +1,5 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use leptos_shadcn_dialog::{Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter};
 use leptos_shadcn_input::Input;
 use leptos_shadcn_button::{Button, ButtonVariant};
 use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
@@ -17,7 +16,6 @@ pub fn AddTorrentDialog(
     let uri = signal(String::new());
     let is_loading = signal(false);
     let error_msg = signal(Option::<String>::None);
-    let is_open = signal(true);
 
     let handle_submit = move |ev: web_sys::SubmitEvent| {
         ev.prevent_default();
@@ -41,7 +39,6 @@ pub fn AddTorrentDialog(
                         shared::NotificationLevel::Success, 
                         "Torrent başarıyla eklendi"
                     );
-                    is_open.1.set(false);
                     on_close.run(());
                 }
                 Err(e) => {
@@ -53,58 +50,76 @@ pub fn AddTorrentDialog(
         });
     };
 
+    let handle_backdrop = {
+        let on_close = on_close.clone();
+        move |e: web_sys::MouseEvent| {
+            e.stop_propagation();
+            on_close.run(());
+        }
+    };
 
     view! {
-        <Dialog
-            open=Signal::derive(move || is_open.0.get())
-            on_open_change=Callback::new(move |open: bool| {
-                is_open.1.set(open);
-                if !open {
-                    on_close.run(());
-                }
-            })
-        >
-            <DialogContent class="sm:max-w-[425px]">
-                <DialogHeader>
-                    <DialogTitle>"Add Torrent"</DialogTitle>
-                    <DialogDescription>"Enter a Magnet link or a .torrent file URL."</DialogDescription>
-                </DialogHeader>
+        // 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 on:submit=handle_submit class="space-y-4">
+                <Input
+                    input_type="text"
+                    placeholder="magnet:?xt=urn:btih:..."
+                    value=MaybeProp::derive(move || Some(uri.0.get()))
+                    on_change=Callback::new(move |val: String| uri.1.set(val))
+                    disabled=Signal::derive(move || is_loading.0.get())
+                />
                 
-                <form on:submit=handle_submit class="space-y-4">
-                    <Input
-                        input_type="text"
-                        placeholder="magnet:?xt=urn:btih:..."
-                        value=MaybeProp::derive(move || Some(uri.0.get()))
-                        on_change=Callback::new(move |val: String| uri.1.set(val))
-                        disabled=Signal::derive(move || is_loading.0.get())
-                    />
-                    
-                    {move || error_msg.0.get().map(|msg| view! {
-                        <Alert variant=AlertVariant::Destructive>
-                            <AlertDescription>{msg}</AlertDescription>
-                        </Alert>
-                    })}
+                {move || error_msg.0.get().map(|msg| view! {
+                    <Alert variant=AlertVariant::Destructive>
+                        <AlertDescription>{msg}</AlertDescription>
+                    </Alert>
+                })}
 
-                    <DialogFooter>
-                        <Button
-                            variant=ButtonVariant::Ghost
-                            on_click=Callback::new(move |()| {
-                                is_open.1.set(false);
-                                on_close.run(());
+                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+                    <Button
+                        variant=ButtonVariant::Ghost
+                        on_click=Callback::new(move |()| {
+                            on_close.run(());
+                        })
+                    >
+                        "Cancel"
+                    </Button>
+                    <Button disabled=Signal::derive(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..." 
                             })
-                        >
-                            "Cancel"
-                        </Button>
-                        <Button disabled=Signal::derive(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>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
+                        } else {
+                            leptos::either::Either::Right(view! { "Add" })
+                        }}
+                    </Button>
+                </div>
+            </form>
+
+            // Close button (X)
+            <button 
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
+                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>
     }
 }
\ No newline at end of file