diff --git a/apps/canvas/src/components/details.tsx b/apps/canvas/src/components/details.tsx
new file mode 100644
index 0000000..290da43
--- /dev/null
+++ b/apps/canvas/src/components/details.tsx
@@ -0,0 +1,35 @@
+import { useNodes } from "@xyflow/react";
+import { AppNode, nodeLabel } from "@/lib/state";
+import { NodeDetails } from "@/components/node-details";
+import { Accordion, AccordionContent, AccordionTrigger } from "./ui/accordion";
+import { AccordionItem } from "@radix-ui/react-accordion";
+import { useMemo, useState } from "react";
+import { Icon } from "./icon";
+
+function unique<T>(v: T, i: number, a: T[]) {
+  return a.indexOf(v) === i;
+}
+
+export function Details() {
+  const nodes = useNodes<AppNode>();
+  const [open, setOpen] = useState<string[]>([]);
+  const selected = useMemo(() => nodes.filter((n) => n.selected).map((n) => n.id), [nodes]);
+  const all = useMemo(() => open.concat(selected).filter(unique), [open, selected]);
+  return (
+    <Accordion type="multiple" value={all} onValueChange={(v) => setOpen(v)}>
+      {nodes.map((n) => (
+        <AccordionItem key={n.id} value={n.id} className="px-3">
+          <AccordionTrigger>
+            <div className="flex flex-row space-x-2">
+              {Icon(n.type)}
+              <span>{nodeLabel(n)}</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <NodeDetails {...n} />
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}