diff --git a/js/src/features/layout.tsx b/js/src/features/layout.tsx
index 050ef5e..828acdb 100644
--- a/js/src/features/layout.tsx
+++ b/js/src/features/layout.tsx
@@ -1,6 +1,6 @@
 import { WindowControls } from "@/components/window-controls";
 import { Button } from "@/components/ui/button";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
 import { Home, Settings } from "lucide-react";
 import {
   Breadcrumb,
@@ -12,6 +12,30 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useNetworks } from "@/hooks/use-networks";
+import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
+import { useLiveParticle } from "@/hooks/use-particle";
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getParticle } from "@/lib/firestore-particles";
+import type { Particle } from "@/api/types";
+
+function getParticleDisplayName(particle: Particle): string {
+  switch (particle.type) {
+    case "stream":
+    case "folder":
+      return particle.properties.name;
+    case "quest":
+      return particle.properties.title;
+    case "paper":
+      return particle.properties.title;
+    case "file":
+      return particle.properties.filename;
+    case "text":
+      return particle.properties.content.slice(0, 30);
+    case "media":
+      return particle.type;
+  }
+}
 
 function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
   const { data: networks } = useNetworks();
@@ -33,8 +57,24 @@ function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
 
 function TopBar() {
   const navigate = useNavigate();
-  const segments = useLocation().pathname.split("/").filter(Boolean);
-  const networkId = segments[0] ?? null;
+  const { networkId, "*": rest } = useParams();
+  const segments = [networkId, ...rest?.split("/") ?? []].filter(Boolean);
+
+  console.log(segments);
+
+  const path = rest ? particlePath(networkId!, rest.split("/").filter(Boolean)) : null;
+
+  const { data: particle } = useQuery(
+    {
+      queryKey: ["particle", path],
+      queryFn: async () => {
+        if (!path) return null;
+        const particle = await getParticle(toFirestoreDocPath(path));
+        return particle;
+      },
+      enabled: !!path,
+    },
+  );
 
   return (
     <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
@@ -77,28 +117,14 @@ function TopBar() {
             </span>
           )}
 
-          {segments.slice(1).map((segment, index) => {
-            const isLast = index === segments.length - 2;
-            const path = `/${segments.slice(0, index + 2).join("/")}`;
-
-            return (
-              <span key={path} className="contents">
-                <BreadcrumbSeparator />
-                <BreadcrumbItem className="text-xs">
-                  {isLast ? (
-                    <BreadcrumbPage>{segment}</BreadcrumbPage>
-                  ) : (
-                    <BreadcrumbLink
-                      className="cursor-pointer"
-                      onClick={() => navigate(path)}
-                    >
-                      {segment}
-                    </BreadcrumbLink>
-                  )}
-                </BreadcrumbItem>
-              </span>
-            );
-          })}
+          {particle && (
+            <span key={path} className="contents">
+              <BreadcrumbSeparator />
+              <BreadcrumbItem className="text-xs">
+                <BreadcrumbPage>{getParticleDisplayName(particle)}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </span>
+          )}
         </BreadcrumbList>
       </Breadcrumb>
 
diff --git a/js/src/lib/firestore-particles.ts b/js/src/lib/firestore-particles.ts
index f3f246c..8c7ae01 100644
--- a/js/src/lib/firestore-particles.ts
+++ b/js/src/lib/firestore-particles.ts
@@ -3,6 +3,7 @@ import {
   doc,
   onSnapshot,
   addDoc,
+  getDoc,
   updateDoc,
   query,
   orderBy,
@@ -72,6 +73,15 @@ export function subscribeToParticle(
   );
 }
 
+export async function getParticle(docPath: string): Promise<Particle | null> {
+  const doc = await getDoc(typedDoc(docPath));
+  if (!doc.exists()) {
+    return null;
+  }
+
+  return doc.data();
+}
+
 export function subscribeToParticleChildren(
   collectionPath: string,
   onData: (children: Particle[]) => void,