diff --git a/components/utilities/files/FileBrowserPanel.tsx b/components/utilities/files/FileBrowserPanel.tsx
index 546368c6..4c5db41a 100644
--- a/components/utilities/files/FileBrowserPanel.tsx
+++ b/components/utilities/files/FileBrowserPanel.tsx
@@ -1,166 +1,242 @@
-// components/utilities/files/FileBrowserPanel.tsx
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ChevronRight, Home, Loader2 } from "lucide-react";
-import FilesTable from "./FilesTable";
-import FilePreview from "./FilePreview";
-import { FsEntry, list, parentDir, download, SortDir, SortKey } from "./api";
+import React, { useEffect, useMemo, useState, useCallback } from "react";
+import { Loader2, Download, Folder, FileText, RefreshCw, ArrowUp, Home } from "lucide-react";
+
+type FileItem = {
+    name: string;
+    type: "dir" | "file";
+    size?: number;
+    mtimeMs?: number;
+};
+
+type ListResponse =
+| { path: string; items: FileItem[] }                       // current API shape
+| { path: string; entries: FileItem[] }                     // legacy fallback
+| { items?: FileItem[]; entries?: FileItem[]; path?: string };
+
+const BASE =
+(process.env.NEXT_PUBLIC_FILE_API_BASE_URL || "").replace(/\/$/, "") || ""; // same-origin fallback
+
+function joinPath(a: string, b: string) {
+    if (!a || a === "/") return b.startsWith("/") ? b : `/${b}`;
+    return `${a.replace(/\/$/, "")}/${b.replace(/^\//, "")}`;
+}
+
+function parentPath(path: string) {
+    if (!path || path === "/") return "/";
+    const parts = path.replace(/\/+$/, "").split("/");
+    parts.pop();
+    const p = parts.join("/");
+    return p === "" ? "/" : p;
+}
+
+function formatSize(bytes?: number) {
+    if (bytes == null) return "—";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let v = bytes;
+    let u = 0;
+    while (v >= 1024 && u < units.length - 1) {
+        v /= 1024;
+        u++;
+    }
+    return `${v.toFixed(u ? 1 : 0)} ${units[u]}`;
+}
 
 export default function FileBrowserPanel() {
-    const [cwd, setCwd] = useState<string>("/");
-    const [entries, setEntries] = useState<FsEntry[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
+    const [path, setPath] = useState<string>("/");
+    const [items, setItems] = useState<FileItem[]>([]);
+    const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [previewHref, setPreviewHref] = useState<string | null>(null);
 
-    const [selected, setSelected] = useState<FsEntry | null>(null);
+    const urlList = useMemo(() => {
+        const p = encodeURIComponent(path || "/");
+        return `${BASE}/api/files/list?path=${p}`;
+    }, [path]);
 
-    const [sortKey, setSortKey] = useState<SortKey>("name");
-    const [sortDir, setSortDir] = useState<SortDir>("asc");
+    const urlDownload = useCallback((p: string) => {
+        const qp = encodeURIComponent(p || "/");
+        return `${BASE}/api/files/download?path=${qp}`;
+    }, []);
 
-    const refresh = useCallback(async (path: string) => {
+    const urlRaw = useCallback((p: string) => {
+        const qp = encodeURIComponent(p || "/");
+        return `${BASE}/api/files/raw?path=${qp}`;
+    }, []);
+
+    const fetchList = useCallback(async () => {
         setLoading(true);
         setError(null);
+        setPreviewHref(null);
         try {
-            const res = await list(path);
-            setCwd(res.cwd || path || "/");
-            setEntries(res.entries || []);
-            // Clear selection if it no longer exists
-            if (selected && !res.entries.find(e => e.path === selected.path)) setSelected(null);
+            const res = await fetch(urlList, {
+                method: "GET",
+                credentials: "include", // ensure cookies flow past middleware
+                headers: { Accept: "application/json" },
+                cache: "no-store",
+            });
+            if (!res.ok) {
+                const text = await res.text().catch(() => "");
+                throw new Error(text || `HTTP ${res.status}`);
+            }
+            const json: ListResponse = await res.json();
+            const arr = (json as any).items || (json as any).entries || [];
+            if (!Array.isArray(arr)) throw new Error("Malformed list response");
+            // Sort: dirs first, then files, alpha
+            arr.sort((a: FileItem, b: FileItem) => {
+                if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
+            setItems(arr);
         } catch (e: any) {
             setError(e?.message || String(e));
+            setItems([]);
         } finally {
             setLoading(false);
         }
-    }, [selected]);
+    }, [urlList]);
 
-    useEffect(() => { refresh(cwd); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, []);
+    useEffect(() => {
+        fetchList();
+    }, [fetchList]);
 
-    const crumbs = useMemo(() => {
-        const norm = cwd.replace(/\\/g, "/");
-        const segs = norm.split("/").filter(Boolean);
-        const out: { label: string; path: string }[] = [{ label: "root", path: "/" }];
-        let acc = "";
-        for (const s of segs) {
-            acc += "/" + s;
-            out.push({ label: s, path: acc || "/" });
-        }
-        return out;
-    }, [cwd]);
-
-    function openEntry(e: FsEntry) {
-        if (e.isDir) {
-            setSelected(null);
-            refresh(e.path);
+    const onOpen = (it: FileItem) => {
+        if (it.type === "dir") {
+            setPath((p) => joinPath(p, it.name));
         } else {
-            setSelected(e);
+            // try to preview; if the file is not previewable, user can still download
+            setPreviewHref(urlRaw(joinPath(path, it.name)));
         }
-    }
+    };
 
-    function onSort(k: SortKey) {
-        if (k === sortKey) {
-            setSortDir(d => (d === "asc" ? "desc" : "asc"));
-        } else {
-            setSortKey(k);
-            setSortDir("asc");
-        }
-    }
+    const onUp = () => setPath((p) => parentPath(p));
+    const onHome = () => setPath("/");
 
-    async function goUp() {
-        const p = parentDir(cwd);
-        setSelected(null);
-        await refresh(p);
-    }
+    const onDownload = (it: FileItem) => {
+        const href = urlDownload(joinPath(path, it.name));
+        // create an anchor to download
+        const a = document.createElement("a");
+        a.href = href;
+        a.download = it.name;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+    };
 
     return (
-        <div className="space-y-4">
-        {/* Top bar */}
-        <div className="flex flex-wrap items-center gap-2">
-        {/* Breadcrumbs */}
-        <nav className="flex items-center gap-1 text-sm">
-        {crumbs.map((c, i) => (
-            <span key={c.path} className="inline-flex items-center">
-            {i === 0 ? (
-                <button
-                className="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 hover:bg-muted"
-                onClick={() => { setSelected(null); refresh("/"); }}
-                title="Go to root"
-                >
-                <Home className="w-3.5 h-3.5" />
-                root
-                </button>
-            ) : (
-                <button
-                className="rounded-md border px-2 py-0.5 hover:bg-muted"
-                onClick={() => { setSelected(null); refresh(c.path); }}
-                title={c.path}
-                >
-                {c.label}
-                </button>
-            )}
-            {i < crumbs.length - 1 && <ChevronRight className="w-3.5 h-3.5 mx-1 opacity-60" />}
-            </span>
-        ))}
-        </nav>
-
+        <div className="space-y-3">
+        {/* toolbar */}
+        <div className="flex items-center gap-2">
+        <button
+        onClick={onHome}
+        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
+        title="Root"
+        >
+        <Home className="h-4 w-4" /> root
+        </button>
         <div className="ml-auto flex items-center gap-2">
         <button
-        onClick={() => refresh(cwd)}
-        className="rounded-md border px-2 py-1 text-sm hover:bg-muted inline-flex items-center gap-2"
+        onClick={fetchList}
+        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
         title="Refresh"
-        disabled={loading}
         >
-        {loading && <Loader2 className="w-4 h-4 animate-spin" />}
-        Refresh
+        <RefreshCw className="h-4 w-4" /> Refresh
         </button>
         <button
-        onClick={goUp}
-        className="rounded-md border px-2 py-1 text-sm hover:bg-muted"
-        title="Up one level"
-        disabled={cwd === "/"}
+        onClick={onUp}
+        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
+        title="Up one folder"
         >
-        Up
+        <ArrowUp className="h-4 w-4" /> Up
         </button>
         </div>
         </div>
 
-        {/* Error */}
-        {error && (
-            <div className="rounded-md border border-rose-600/40 bg-rose-600/10 p-3 text-sm">
-            {error}
-            </div>
-        )}
+        {/* path crumb */}
+        <div className="text-xs text-muted-foreground select-all">{path}</div>
 
-        {/* Two-column layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <div className="lg:col-span-2">
+        {/* grid: table + preview */}
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr,420px] gap-4">
+        <div className="rounded-md border overflow-hidden">
+        <div className="grid grid-cols-[minmax(220px,1fr),90px,100px,130px,90px] items-center bg-muted px-3 py-2 text-sm font-medium">
+        <div>Name</div>
+        <div>Type</div>
+        <div>Size</div>
+        <div>Modified</div>
+        <div className="text-right">Actions</div>
+        </div>
+
+        <div className="divide-y">
         {loading ? (
-            <div className="rounded-md border p-6 text-sm text-zinc-400 flex items-center gap-2">
-            <Loader2 className="w-4 h-4 animate-spin" /> Loading…
+            <div className="p-6 text-sm text-muted-foreground flex items-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin" /> Loading…
             </div>
+        ) : error ? (
+            <div className="p-6 text-sm text-rose-400">Error: {error}</div>
+        ) : items.length === 0 ? (
+            <div className="p-6 text-sm text-muted-foreground">Empty folder.</div>
         ) : (
-            <FilesTable
-            entries={entries}
-            sortKey={sortKey}
-            sortDir={sortDir}
-            onSort={onSort}
-            onOpen={openEntry}
-            onDownload={(e) => download(e.path)}
-            />
+            items.map((it) => (
+                <div
+                key={it.name + it.type}
+                className="grid grid-cols-[minmax(220px,1fr),90px,100px,130px,90px] items-center px-3 py-2 text-sm hover:bg-muted/50"
+                >
+                <button
+                className="text-left inline-flex items-center gap-2 hover:underline"
+                onClick={() => onOpen(it)}
+                title={it.type === "dir" ? "Open folder" : "Preview"}
+                >
+                {it.type === "dir" ? (
+                    <Folder className="h-4 w-4" />
+                ) : (
+                    <FileText className="h-4 w-4" />
+                )}
+                <span className="truncate">{it.name}</span>
+                </button>
+                <div className="uppercase tracking-wide text-[11px] text-muted-foreground">
+                {it.type}
+                </div>
+                <div className="text-muted-foreground">{formatSize(it.size)}</div>
+                <div className="text-muted-foreground">
+                {it.mtimeMs ? new Date(it.mtimeMs).toLocaleString() : "—"}
+                </div>
+                <div className="text-right">
+                {it.type === "file" && (
+                    <button
+                    onClick={() => onDownload(it)}
+                    className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs hover:bg-muted"
+                    title="Download"
+                    >
+                    <Download className="h-3.5 w-3.5" />
+                    Download
+                    </button>
+                )}
+                </div>
+                </div>
+            ))
         )}
         </div>
+        </div>
 
-        <div className="lg:col-span-1">
+        {/* preview */}
         <div className="rounded-md border p-3">
-        <div className="text-sm text-zinc-400 mb-2">Preview</div>
-        {selected ? (
-            <FilePreview path={selected.path} mime={selected.mime} name={selected.name} />
+        <div className="mb-2 text-sm font-medium">Preview</div>
+        {previewHref ? (
+            <div className="border rounded overflow-hidden">
+            {/* let the browser try its best; PDFs/images will render inline */}
+            <iframe
+            key={previewHref}
+            src={previewHref}
+            className="w-full h-[420px]"
+            title="Preview"
+            />
+            </div>
         ) : (
-            <div className="text-sm text-zinc-500">Select a file to preview.</div>
+            <div className="text-sm text-muted-foreground">Select a file to preview.</div>
         )}
         </div>
         </div>
         </div>
-        </div>
     );
 }