diff --git a/ui/client-app/src/components/FileSystemNavigator.js b/ui/client-app/src/components/FileSystemNavigator.js
index cadbbbe..c01bf20 100644
--- a/ui/client-app/src/components/FileSystemNavigator.js
+++ b/ui/client-app/src/components/FileSystemNavigator.js
@@ -60,12 +60,18 @@
         const isExpanded = expanded[path];
         if (!isExpanded) {
             // Loading child depth...
-            const children = await fetchLevel(path);
-            setExpanded(prev => ({ ...prev, [path]: true }));
-            // We'll update the tree to include these children
-            // For a flat list manifest, we might need a more sophisticated tree mapper.
-            // But if the server returns EVERYTHING for the root, we don't need this.
-            // Currently, ls returns all files in the root_path.
+            try {
+                const children = await fetchLevel(path);
+                setExpanded(prev => ({ ...prev, [path]: true }));
+                // Merge children into tree (prevent duplicates)
+                setTree(prev => {
+                    const existingPaths = new Set(prev.map(f => f.path));
+                    const newOnes = children.filter(c => !existingPaths.has(c.path));
+                    return [...prev, ...newOnes];
+                });
+            } catch (err) {
+                setError(`Failed to open folder: ${err.message}`);
+            }
         } else {
             setExpanded(prev => ({ ...prev, [path]: false }));
         }
@@ -140,20 +146,33 @@
     };
 
     // Helper to render tree recursively
-    const renderNode = (nodes, depth = 0) => {
+    // Helper to render tree recursively
+    const renderSubTree = (currentPath, depth = 0) => {
+        // Find children of this path
+        const children = tree.filter(node => {
+            if (currentPath === initialPath || currentPath === "." || currentPath === "") {
+                const prefix = initialPath === "." || initialPath === "" ? "" : (initialPath.endsWith("/") ? initialPath : initialPath + "/");
+                if (!node.path.startsWith(prefix)) return false;
+                if (node.path === initialPath) return false;
+                const sub = node.path.slice(prefix.length);
+                return !sub.includes("/");
+            } else {
+                const prefix = currentPath.endsWith("/") ? currentPath : currentPath + "/";
+                if (!node.path.startsWith(prefix)) return false;
+                const sub = node.path.slice(prefix.length);
+                return !sub.includes("/");
+            }
+        });
+
         // Sort: Folders first, then Alphabetical
-        const sorted = [...nodes].sort((a, b) => {
-            if (a.is_dir !== b.is_dir) return b.is_dir ? 1 : -1;
+        const sorted = [...children].sort((a, b) => {
+            if (a.is_dir !== b.is_dir) return b.is_dir ? -1 : 1;
             return a.name.localeCompare(b.name);
         });
 
-        // Filter for hierarchical view (if needed)
-        // Since we currently get a flat list from ls for the specific root,
-        // we can just render them directly if we are browsing one level at a time.
-
         return sorted.map(node => (
-            <div key={node.path} style={{ paddingLeft: `${depth * 12}px` }} className="group">
-                <div className="flex items-center py-1 px-2 hover:bg-gray-100 dark:hover:bg-gray-700/50 rounded cursor-pointer transition-colors text-xs">
+            <div key={node.path} className="group">
+                <div style={{ paddingLeft: `${depth * 12}px` }} className="flex items-center py-1 px-2 hover:bg-gray-100 dark:hover:bg-gray-700/50 rounded cursor-pointer transition-colors text-xs">
                     <span
                         className="mr-2 text-gray-400"
                         onClick={() => node.is_dir ? toggleFolder(node.path) : handleView(node.path)}
@@ -178,7 +197,7 @@
                         {node.name}
                     </span>
 
-                    <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity ml-2">
                         {node.is_dir && (
                             <>
                                 <button onClick={(e) => { e.stopPropagation(); 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">
@@ -194,7 +213,11 @@
                         </button>
                     </div>
                 </div>
-                {/* Hierarchical expansion would go here if we fetch deeper levels */}
+                {node.is_dir && expanded[node.path] && (
+                    <div className="animate-in slide-in-from-left-2 duration-200">
+                        {renderSubTree(node.path, depth + 1)}
+                    </div>
+                )}
             </div>
         ));
     };
@@ -229,7 +252,7 @@
                         <p className="text-[10px]">No files found or node offline</p>
                     </div>
                 )}
-                {renderNode(tree)}
+                {renderSubTree(initialPath)}
             </div>
 
             {/* Create Item Modal */}