diff --git a/src/app/FileTree.tsx b/src/app/FileTree.tsx
new file mode 100644
index 0000000..10c2c03
--- /dev/null
+++ b/src/app/FileTree.tsx
@@ -0,0 +1,21 @@
+export { FileTree };
+
+type TreeNode = { name: string; children?: TreeNode[] };
+
+const USER_ID = 1;
+
+const FileTree = () => {
+  const paths: string[] = [];
+  const nodes: TreeNode[] = [];
+
+  return (
+    <div className="mb-4">
+      <h3 className="text-lg font-bold mb-2">File Tree</h3>
+      <FileNodes nodes={nodes} />
+    </div>
+  );
+};
+
+const FileNodes = ({ nodes }: { nodes: TreeNode[] }) => {
+  return nodes.map((node) => <p key={node.name}>{node.name}</p>);
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ec6c095..884379b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
+import { FileTree } from "./FileTree";
 import { UploadFiles } from "./UploadFiles";
 
 export default function Home() {
   return (
     <div className="container mx-auto px-4 py-10">
       <h1 className="text-2xl font-bold mb-6">Enlaye Files</h1>
+      <FileTree />
       <UploadFiles />
     </div>
   );