diff --git a/gadget-code/frontend/src/components/FileTree.tsx b/gadget-code/frontend/src/components/FileTree.tsx
index bc7151b..5c2905a 100644
--- a/gadget-code/frontend/src/components/FileTree.tsx
+++ b/gadget-code/frontend/src/components/FileTree.tsx
@@ -136,16 +136,16 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
 
   // Build tree structure from flat entries
   const buildTree = useCallback((entries: FileTreeEntry[], depth: number = 0) => {
-    return entries.map(entry => {
+    const nodes: JSX.Element[] = [];
+    
+    for (const entry of entries) {
       const isExpanded = state.expandedPaths.has(entry.path);
       const isLoading = state.loadingPaths.has(entry.path);
       const error = state.errors.get(entry.path);
       const hasChildren = entry.type === 'directory';
-      const children = hasChildren && isExpanded && state.directoryCache.has(entry.path)
-        ? buildTree(state.directoryCache.get(entry.path)!, depth + 1)
-        : null;
 
-      return (
+      // Render the node
+      nodes.push(
         <FileTreeNode
           key={entry.path}
           entry={entry}
@@ -158,7 +158,15 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
           onSelect={handleFileSelect}
         />
       );
-    });
+
+      // If directory is expanded, render children immediately after
+      if (hasChildren && isExpanded && state.directoryCache.has(entry.path)) {
+        const children = buildTree(state.directoryCache.get(entry.path)!, depth + 1);
+        nodes.push(...children);
+      }
+    }
+    
+    return nodes;
   }, [state.expandedPaths, state.loadingPaths, state.errors, state.directoryCache, toggleExpand, handleFileSelect]);
 
   const rootEntries = state.directoryCache.get('') || [];