diff --git a/src/client/applications.rs b/src/client/applications.rs
index e5cd526..8fc67d8 100644
--- a/src/client/applications.rs
+++ b/src/client/applications.rs
@@ -8,6 +8,7 @@
 
 use leptos::prelude::*;
 use leptos::form::ActionForm;
+use leptos::html::Input;
 
 use crate::api::applications::{
     ApplicationWithCounts, CreateApplication, DeleteApplication,
@@ -21,9 +22,12 @@ fn AddApplicationModal(
     create_action: ServerAction<CreateApplication>,
     show_modal: RwSignal<bool>,
 ) -> impl IntoView {
+    let name_ref = NodeRef::<Input>::new();
+
+    // Focus the name field as soon as the modal is mounted.
     Effect::new(move |_| {
-        if let Some(Ok(_)) = create_action.value().get() {
-            show_modal.set(false);
+        if let Some(el) = name_ref.get() {
+            let _ = el.focus();
         }
     });
 
@@ -43,6 +47,7 @@ fn AddApplicationModal(
                         <label>
                             "Name"
                             <input
+                                node_ref=name_ref
                                 type="text"
                                 name="name"
                                 placeholder="e.g. Nginx, PostgreSQL, Prometheus"
@@ -132,6 +137,19 @@ pub fn ApplicationsPage() -> impl IntoView {
     // Name filter (client-side — list is typically small)
     let name_filter = RwSignal::new(String::new());
 
+    // Close the add modal when the action transitions pending→done with Ok.
+    // Lives in the parent so it is never recreated across modal open/close cycles,
+    // which avoids the stale-value re-trigger bug.
+    Effect::new(move |was_pending: Option<bool>| {
+        let is_pending = create_action.pending().get();
+        if was_pending == Some(true) && !is_pending {
+            if let Some(Ok(_)) = create_action.value().get() {
+                show_modal.set(false);
+            }
+        }
+        is_pending
+    });
+
     // Close the delete modal automatically after a successful deletion.
     Effect::new(move |_| {
         if let Some(Ok(_)) = delete_action.value().get() {
diff --git a/src/client/hosts.rs b/src/client/hosts.rs
index 9c03ee2..c8639e1 100644
--- a/src/client/hosts.rs
+++ b/src/client/hosts.rs
@@ -12,6 +12,7 @@
 
 use leptos::prelude::*;
 use leptos::form::ActionForm;
+use leptos::html::Input;
 
 use crate::api::{
     applications::get_applications,
@@ -76,10 +77,12 @@ fn AddHostModal(
     networks_res: LocalResource<Result<Vec<crate::models::Network>, ServerFnError>>,
     show_modal: RwSignal<bool>,
 ) -> impl IntoView {
-    // Close the modal automatically after a successful creation.
+    let name_ref = NodeRef::<Input>::new();
+
+    // Focus the name field as soon as the modal is mounted.
     Effect::new(move |_| {
-        if let Some(Ok(_)) = create_action.value().get() {
-            show_modal.set(false);
+        if let Some(el) = name_ref.get() {
+            let _ = el.focus();
         }
     });
 
@@ -100,7 +103,7 @@ fn AddHostModal(
                     <div class="add-form__fields">
                         <label>
                             "Name"
-                            <input type="text" name="name" placeholder="e.g. web-server-01" required/>
+                            <input node_ref=name_ref type="text" name="name" placeholder="e.g. web-server-01" required/>
                         </label>
                         <label>
                             "IP address"
@@ -364,6 +367,17 @@ pub fn HostsPage() -> impl IntoView {
     // None = no modal, Some((id, name)) = delete confirmation open.
     let pending_delete: RwSignal<Option<(i64, String)>> = RwSignal::new(None);
 
+    // Close the add modal on pending→done with Ok (lives in parent to avoid stale-value re-trigger).
+    Effect::new(move |was_pending: Option<bool>| {
+        let is_pending = create_action.pending().get();
+        if was_pending == Some(true) && !is_pending {
+            if let Some(Ok(_)) = create_action.value().get() {
+                show_modal.set(false);
+            }
+        }
+        is_pending
+    });
+
     // Close the delete modal automatically after a successful deletion.
     Effect::new(move |_| {
         if let Some(Ok(_)) = delete_action.value().get() {