diff --git a/app/components/FileManager.tsx b/app/components/FileManager.tsx
index 04f6f82..75d1eb7 100644
--- a/app/components/FileManager.tsx
+++ b/app/components/FileManager.tsx
@@ -47,6 +47,7 @@ import {
   processDragDropItems,
   hasFiles as hasFilesInDrag,
   isUnsupportedFolderDrag,
+  ensureTrailingSlash,
 } from "../lib/helpers";
 import { shareResourceWithAcp } from "../lib/helpers/acpUtils";
 import {
@@ -774,6 +775,33 @@ export default function FileManager() {
     }
   };
 
+    // Navigate from the sidebar folder tree (storage root or subfolder).
+    const handleFolderNavigate = (folderUrl: string) => {
+      const normalizedUrl = ensureTrailingSlash(folderUrl);
+      const matchingStorage = storages.find(
+        (s) =>
+          normalizedUrl === ensureTrailingSlash(s.url) ||
+          normalizedUrl.startsWith(ensureTrailingSlash(s.url)),
+      );
+  
+      if (!matchingStorage) {
+        return;
+      }
+  
+      setSelectedStorageId(matchingStorage.id);
+      setSelectedFileIds([]);
+  
+      if (normalizedUrl === ensureTrailingSlash(matchingStorage.url)) {
+        setCurrentPath("/");
+        updateUrl(matchingStorage.url, true);
+      } else {
+        setCurrentPath(normalizedUrl);
+        updateUrl(normalizedUrl, true);
+      }
+  
+      setSidebarOpen(false);
+    };
+
   if (isLoadingStorages) {
     return (
       <AuthWrapper>
@@ -844,8 +872,9 @@ export default function FileManager() {
           <Sidebar
             isOpen={sidebarOpen}
             onClose={() => setSidebarOpen(false)}
-            activeTab="my-storages"
             currentContainerUrl={containerUrlToBrowse}
+            storages={storages}
+            onFolderNavigate={handleFolderNavigate}
             onNewFolderClick={() => setShowNewFolderDialog(true)}
             onFileUploadClick={() => setFileUploadTrigger((prev) => prev + 1)}
             onFolderUploadClick={() => setFolderUploadTrigger((prev) => prev + 1)}
diff --git a/app/components/FolderTree.tsx b/app/components/FolderTree.tsx
new file mode 100644
index 0000000..8ada3e3
--- /dev/null
+++ b/app/components/FolderTree.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { ChevronRightIcon, ChevronDownIcon, FolderIcon } from "@heroicons/react/24/outline";
+import { SolidStorage } from "../lib/hooks/useSolidStorages";
+import { fetchFolderChildren, FolderTreeChild, folderUrlsEqual, ensureTrailingSlash, getAuthenticatedSession } from "../lib/helpers";
+
+interface FolderTreeProps {
+    storages: SolidStorage[];
+    currentFolderUrl?: string | null;
+    onNavigate: (folderUrl: string) => void;
+}
+
+export default function FolderTree({
+    storages,
+    currentFolderUrl,
+    onNavigate
+}: FolderTreeProps) {
+    const [expandedUrls, setExpandedUrls] = useState<Set<string>>(new Set());
+    const [childrenByUrl, setChildrenByUrl] = useState<Record<string, FolderTreeChild[]>>({});
+    const [loadingUrls, setLoadingUrls] = useState<Set<string>>(new Set());
+    const [errorByUrl, setErrorByUrl] = useState<Record<string, string>>({});
+
+    // Keep the current folder URL in one shape so highlight checks stay reliable.
+    const normalizedCurrentFolderUrl = useMemo(() => (
+        currentFolderUrl ? ensureTrailingSlash(currentFolderUrl) : null
+    ), [currentFolderUrl]);
+
+    // Fetch child folders for one container and store them in the cache.
+    const loadChildren = useCallback(async (folderUrl: string) => {
+        const normalizedUrl = ensureTrailingSlash(folderUrl);
+
+        if (childrenByUrl[normalizedUrl]) {
+            return;
+        }
+
+        setLoadingUrls((prev) => {
+            const next = new Set(prev);
+            next.add(normalizedUrl);
+            return next;
+        });
+
+        setErrorByUrl((prev) => {
+            if (!(normalizedUrl in prev)) return prev;
+            const next = { ...prev };
+            delete next[normalizedUrl];
+            return next;
+        });
+
+        try {
+            const { fetch } = getAuthenticatedSession();
+            const children = await fetchFolderChildren(normalizedUrl, fetch);
+            setChildrenByUrl((prev) => ({ ...prev, [normalizedUrl]: children }));
+        } catch (error) {
+            const message = error instanceof Error ? error.message : "Failed to load folders";
+            setErrorByUrl((prev) => ({ ...prev, [normalizedUrl]: message }));
+        } finally {
+            setLoadingUrls((prev) => {
+                const next = new Set(prev);
+                next.delete(normalizedUrl);
+                return next;
+            });
+        }
+    }, [childrenByUrl]);
+
+    // Open or close a folder branch. Fetch children only when opening.
+    const toggleExpand = useCallback(async (folderUrl: string) => {
+        const normalizedUrl = ensureTrailingSlash(folderUrl);
+
+        const isExpanded = expandedUrls.has(normalizedUrl);
+        if (isExpanded) {
+            setExpandedUrls((prev) => {
+                const next = new Set(prev);
+                next.delete(normalizedUrl);
+                return next;
+            });
+            return;
+        }
+
+        setExpandedUrls((prev) => {
+            const next = new Set(prev);
+            next.add(normalizedUrl);
+            return next;
+        });
+
+        await loadChildren(normalizedUrl);
+    }, [expandedUrls, loadChildren]);
+
+    // Render one folder row and its nested children when expanded.
+    const renderNode = useCallback((node: FolderTreeChild, depth: number) => {
+        const nodeUrl = ensureTrailingSlash(node.url);
+        const isExpanded = expandedUrls.has(nodeUrl);
+        const isLoading = loadingUrls.has(nodeUrl);
+        const children = childrenByUrl[nodeUrl] || [];
+        const hasError = Boolean(errorByUrl[nodeUrl]);
+        const isCurrent = normalizedCurrentFolderUrl != null && folderUrlsEqual(normalizedCurrentFolderUrl, nodeUrl);
+
+        return (
+            <li key={nodeUrl}>
+                <div
+                    className={`group flex items-center gap-1 rounded-md px-2 py-1 text-sm ${isCurrent ? "bg-[#F3EDFF] text-black font-medium" : "text-gray-700 hover:bg-gray-100"
+                        }`}
+                    style={{ paddingLeft: `${depth * 12 + 8}px` }}
+                >
+                    <button
+                        type="button"
+                        onClick={() => void toggleExpand(nodeUrl)}
+                        className="rounded p-0.5 hover:bg-gray-200"
+                        aria-label={isExpanded ? `Collapse ${node.name}` : `Expand ${node.name}`}
+                        aria-expanded={isExpanded}
+                    >
+                        {isExpanded ? (
+                            <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                        ) : (
+                            <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
+                        )}
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={() => onNavigate(nodeUrl)}
+                        className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                        title={node.name}
+                        aria-current={isCurrent ? "page" : undefined}
+                    >
+                        <FolderIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+                        <span className="truncate">{node.name}</span>
+                    </button>
+                </div>
+
+                {isExpanded && (
+                    <ul className="space-y-0.5">
+                        {isLoading && (
+                            <li
+                                className="px-2 py-1 text-xs text-gray-500"
+                                style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
+                                aria-live="polite"
+                            >
+                                Loading...
+                            </li>
+                        )}
+
+                        {!isLoading && hasError && (
+                            <li
+                                className="px-2 py-1 text-xs text-red-600"
+                                style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
+                            >
+                                Failed to load folders
+                            </li>
+                        )}
+
+                        {!isLoading && !hasError && children.length === 0 && (
+                            <li
+                                className="px-2 py-1 text-xs text-gray-500"
+                                style={{ paddingLeft: `${(depth + 1) * 12 + 8}px` }}
+                            >
+                                No folders
+                            </li>
+                        )}
+
+                        {!isLoading && !hasError && children.map((child) => renderNode(child, depth + 1))}
+                    </ul>
+                )}
+            </li>
+        )
+    }, [
+        childrenByUrl,
+        errorByUrl,
+        expandedUrls,
+        loadingUrls,
+        normalizedCurrentFolderUrl,
+        onNavigate,
+        toggleExpand,
+    ],
+    );
+
+    // Turn storage roots into the same shape used by child folder nodes.
+    const rootNodes: FolderTreeChild[] = useMemo(
+        () =>
+            storages.map((storage) => ({
+                url: ensureTrailingSlash(storage.url),
+                name: storage.name || storage.url,
+            })), [storages],
+    );
+
+    if (rootNodes.length === 0) {
+        return <p className="px-3 py-2 text-sm text-gray-500">No storages found</p>
+    }
+
+    return (
+        <ul className="space-y-0.5" aria-label="My Storages">
+            {rootNodes.map((node) => renderNode(node, 0))}
+        </ul>
+    );
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 4faba7e..000c5ae 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -5,13 +5,16 @@ import Button from "./shared/Button";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import NewMenuButton from "./NewMenuButton";
 import GitHubLinks from "./shared/GitHubLinks";
+import FolderTree from "./FolderTree";
 import { useClickOutside } from "../lib/hooks";
+import { SolidStorage } from "../lib/hooks/useSolidStorages";
 
 interface SidebarProps {
   isOpen?: boolean;
   onClose?: () => void;
-  activeTab?: string;
   currentContainerUrl?: string | null;
+  storages?: SolidStorage[];
+  onFolderNavigate?: (folderUrl: string) => void;
   onNewFolderClick?: () => void;
   onFileUploadClick?: () => void;
   onFolderUploadClick?: () => void;
@@ -20,8 +23,9 @@ interface SidebarProps {
 export default function Sidebar({
   isOpen = true,
   onClose,
-  activeTab = "my-storages",
   currentContainerUrl,
+  storages,
+  onFolderNavigate,
   onNewFolderClick,
   onFileUploadClick,
   onFolderUploadClick,
@@ -40,9 +44,6 @@ export default function Sidebar({
     refs: [sidebarRef],
   });
 
-  const navigationTabs = [
-    { id: "my-storages", label: "My Storages" },
-  ];
 
   return (
     <>
@@ -58,9 +59,8 @@ export default function Sidebar({
       {/* Sidebar */}
       <aside
         ref={sidebarRef}
-        className={`fixed left-0 top-0 z-50 h-full w-64 border-r border-gray-200 bg-white shadow-lg transition-transform lg:relative lg:z-auto lg:shadow-none lg:translate-x-0 ${
-          isMobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
-        }`}
+        className={`fixed left-0 top-0 z-50 h-full w-64 border-r border-gray-200 bg-white shadow-lg transition-transform lg:relative lg:z-auto lg:shadow-none lg:translate-x-0 ${isMobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
+          }`}
       >
         <nav className="flex h-full flex-col p-2" aria-label="Navigation">
           {/* Header with close button on mobile */}
@@ -84,28 +84,17 @@ export default function Sidebar({
             onFileUploadClick={onFileUploadClick}
             onFolderUploadClick={onFolderUploadClick}
           />
-          
-          {/* Navigation Tabs */}
-          <ul className="space-y-1" role="list">
-            {navigationTabs.map((tab) => {
-              const isActive = activeTab === tab.id;
-              return (
-                <li key={tab.id}>
-                  <button
-                    type="button"
-                    className={`cursor-pointer w-full rounded-md px-3 py-2 text-left text-sm font-medium transition-colors ${
-                      isActive
-                        ? "bg-[#F3EDFF] text-black"
-                        : "text-gray-700 hover:bg-gray-100"
-                    }`}
-                    aria-current={isActive ? "page" : undefined}
-                  >
-                    {tab.label}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
+
+          <div className="mt-2 flex-1 overflow-y-auto">
+            <p className="px-3 py-1 text-xs font-medium text-gray-500">My Storages</p>
+            {storages && onFolderNavigate ? (
+              <FolderTree
+                storages={storages}
+                currentFolderUrl={currentContainerUrl}
+                onNavigate={onFolderNavigate}
+              />
+            ) : null}
+          </div>
 
           {/* Footer links - pushed to bottom */}
           <div className="mt-auto border-t border-gray-200 pt-4">
diff --git a/app/lib/helpers/folderTreeUtils.ts b/app/lib/helpers/folderTreeUtils.ts
new file mode 100644
index 0000000..5ab52fb
--- /dev/null
+++ b/app/lib/helpers/folderTreeUtils.ts
@@ -0,0 +1,107 @@
+import {
+  getSolidDataset,
+  getContainedResourceUrlAll,
+  isContainer,
+  UrlString,
+} from "@inrupt/solid-client";
+import { ensureTrailingSlash } from "./copyUtils";
+import { extractNameFromUrl } from "./urlUtils";
+
+export type FolderTreeChild = {
+  url: string;
+  name: string;
+};
+
+/**
+ * Returns true when folderUrl is the storage root or a folder inside it.
+ */
+export function isFolderUnderStorage(
+  folderUrl: string,
+  storageRootUrl: string,
+): boolean {
+  const folder = ensureTrailingSlash(folderUrl);
+  const storage = ensureTrailingSlash(storageRootUrl);
+  return folder === storage || folder.startsWith(storage);
+}
+
+/**
+ * Compares two folder URLs after normalizing trailing slashes.
+ */
+export function folderUrlsEqual(a: string, b: string): boolean {
+  return ensureTrailingSlash(a) === ensureTrailingSlash(b);
+}
+
+/**
+ * Folder container URLs that must be expanded so currentFolderUrl is visible in the tree.
+ * Used when navigation comes from the main view or breadcrumb.
+ */
+export function getAncestorFolderUrls(
+  currentFolderUrl: string,
+  storageRootUrl: string,
+): string[] {
+  const current = ensureTrailingSlash(currentFolderUrl);
+  const storage = ensureTrailingSlash(storageRootUrl);
+
+  if (!current.startsWith(storage)) {
+    return [];
+  }
+
+  if (current === storage) {
+    return [];
+  }
+
+  const storageUrl = new URL(storage);
+  const storagePath = storageUrl.pathname;
+  const currentPath = new URL(current).pathname;
+
+  const relative = currentPath
+    .slice(storagePath.length)
+    .replace(/^\/|\/$/g, "");
+
+  if (!relative) {
+    return [];
+  }
+
+  const segments = relative.split("/").filter(Boolean);
+  const ancestors: string[] = [storage];
+
+  for (let i = 0; i < segments.length - 1; i++) {
+    const pathParts = segments.slice(0, i + 1);
+    const path = `${storagePath}${pathParts.join("/")}/`;
+    ancestors.push(`${storageUrl.origin}${path}`);
+  }
+
+  return ancestors;
+}
+
+/**
+ * List direct child folders of a container. Files are omitted.
+ */
+export async function fetchFolderChildren(
+  containerUrl: string,
+  fetchFn: typeof fetch,
+): Promise<FolderTreeChild[]> {
+  const url = ensureTrailingSlash(containerUrl);
+  const dataset = await getSolidDataset(url as UrlString, { fetch: fetchFn });
+  const contained = getContainedResourceUrlAll(dataset);
+
+  const folders: FolderTreeChild[] = [];
+
+  for (const resourceUrl of contained) {
+    if (resourceUrl.endsWith(".acl") || resourceUrl.endsWith(".meta")) {
+      continue;
+    }
+    if (!isContainer(resourceUrl)) {
+      continue;
+    }
+
+    const folderUrl = ensureTrailingSlash(resourceUrl);
+    folders.push({
+      url: folderUrl,
+      name: extractNameFromUrl(folderUrl),
+    });
+  }
+
+  folders.sort((a, b) => a.name.localeCompare(b.name));
+  return folders;
+}
diff --git a/app/lib/helpers/index.ts b/app/lib/helpers/index.ts
index 0256562..88a4ff7 100644
--- a/app/lib/helpers/index.ts
+++ b/app/lib/helpers/index.ts
@@ -14,4 +14,5 @@ export * from "./uploadUtils";
 export * from "./urlStateUtils";
 export * from "./dragDropUtils";
 export * from "./contactUtils";
+export * from "./folderTreeUtils";
 export * from "./httpErrorUtils";