diff --git a/ui/client-app/src/components/FileSystemNavigator.js b/ui/client-app/src/components/FileSystemNavigator.js
index c14f892..fcefd6b 100644
--- a/ui/client-app/src/components/FileSystemNavigator.js
+++ b/ui/client-app/src/components/FileSystemNavigator.js
@@ -12,6 +12,8 @@
     const [error, setError] = useState(null);
     const [selectedFile, setSelectedFile] = useState(null); // { path, content }
     const [isEditing, setIsEditing] = useState(false);
+    const [newItemModal, setNewItemModal] = useState(null); // { parentPath, isDir }
+    const [operationLoading, setOperationLoading] = useState(false);
 
     const fetchLevel = useCallback(async (path) => {
         const data = await nodeFsList(nodeId, path);
@@ -50,45 +52,61 @@
         }
     };
 
-    const handleCreate = async (parentPath, isDir) => {
-        const name = prompt(`Enter ${isDir ? 'folder' : 'file'} name:`);
-        if (!name) return;
+    const handleCreateFinal = async (name) => {
+        if (!name || !newItemModal) return;
+        const { parentPath, isDir } = newItemModal;
         const fullPath = parentPath === "." ? name : `${parentPath}/${name}`;
+        setOperationLoading(true);
+        setError(null);
         try {
             await nodeFsTouch(nodeId, fullPath, "", isDir);
+            setNewItemModal(null);
             loadRoot(); // Refresh
         } catch (err) {
-            alert(`Failed to create: ${err.message}`);
+            setError(`Failed to create: ${err.message}`);
+        } finally {
+            setOperationLoading(false);
         }
     };
 
     const handleDelete = async (path) => {
         if (!window.confirm(`Delete ${path}?`)) return;
+        setOperationLoading(true);
+        setError(null);
         try {
             await nodeFsRm(nodeId, path);
             loadRoot(); // Refresh
         } catch (err) {
-            alert(`Failed to delete: ${err.message}`);
+            setError(`Failed to delete: ${err.message}`);
+        } finally {
+            setOperationLoading(false);
         }
     };
 
     const handleView = async (path) => {
+        setOperationLoading(true);
+        setError(null);
         try {
             const res = await nodeFsCat(nodeId, path);
             setSelectedFile({ path, content: res.content });
             setIsEditing(false);
         } catch (err) {
-            alert(`Failed to read file: ${err.message}`);
+            setError(`Failed to read file: ${err.message}`);
+        } finally {
+            setOperationLoading(false);
         }
     };
 
     const handleSave = async () => {
+        setOperationLoading(true);
+        setError(null);
         try {
             await nodeFsTouch(nodeId, selectedFile.path, selectedFile.content, false);
-            alert("File saved!");
             setSelectedFile(null);
         } catch (err) {
-            alert(`Failed to save: ${err.message}`);
+            setError(`Failed to save: ${err.message}`);
+        } finally {
+            setOperationLoading(false);
         }
     };
 
@@ -127,7 +145,7 @@
 
                     <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                         {node.is_dir && (
-                            <button onClick={() => handleCreate(node.path, false)} className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-400 hover:text-indigo-500" title="New File">
+                            <button onClick={() => setNewItemModal({ parentPath: node.path, isDir: false })} className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded text-gray-400 hover:text-indigo-500" title="New File">
                                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                             </button>
                         )}
@@ -150,10 +168,10 @@
                     File Explorer
                 </h3>
                 <div className="flex space-x-2">
-                    <button onClick={() => handleCreate(".", false)} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors" title="New File">
+                    <button onClick={() => setNewItemModal({ parentPath: ".", isDir: false })} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors" title="New File">
                         <svg className="w-3.5 h-3.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                     </button>
-                    <button onClick={() => handleCreate(".", true)} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors" title="New Folder">
+                    <button onClick={() => setNewItemModal({ parentPath: ".", isDir: true })} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors" title="New Folder">
                         <svg className="w-3.5 h-3.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" /></svg>
                     </button>
                     <button onClick={loadRoot} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-colors" title="Refresh">
@@ -174,6 +192,55 @@
                 {renderNode(tree)}
             </div>
 
+            {/* Create Item Modal */}
+            {newItemModal && (
+                <div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+                    <div className="bg-white dark:bg-gray-900 rounded-2xl w-full max-w-md shadow-2xl border dark:border-gray-700 overflow-hidden">
+                        <div className="p-4 border-b dark:border-gray-800 flex justify-between items-center bg-gray-50 dark:bg-gray-800/50">
+                            <h4 className="text-sm font-bold text-gray-900 dark:text-white">
+                                {newItemModal.isDir ? 'Create New Folder' : 'Create New File'}
+                            </h4>
+                            <button onClick={() => setNewItemModal(null)} className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors">
+                                <svg className="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                            </button>
+                        </div>
+                        <form onSubmit={(e) => {
+                            e.preventDefault();
+                            handleCreateFinal(e.target.elements.name.value);
+                        }} className="p-4">
+                            <div className="mb-4">
+                                <label className="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Item Name</label>
+                                <input
+                                    name="name"
+                                    type="text"
+                                    autoFocus
+                                    autoComplete="off"
+                                    className="w-full p-2.5 bg-gray-50 dark:bg-gray-800 border dark:border-gray-700 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:text-white"
+                                    placeholder={newItemModal.isDir ? "folder_name" : "file_name.txt"}
+                                    required
+                                />
+                            </div>
+                            <div className="flex justify-end space-x-3">
+                                <button
+                                    type="button"
+                                    onClick={() => setNewItemModal(null)}
+                                    className="px-4 py-2 text-xs font-bold text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    type="submit"
+                                    disabled={operationLoading}
+                                    className="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-black shadow-lg shadow-indigo-500/20 transition-all disabled:opacity-50"
+                                >
+                                    {operationLoading ? 'Creating...' : 'Create Item'}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            )}
+
             {/* Editor Modal */}
             {selectedFile && (
                 <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">