diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index 5a9c030..ffac03f 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -1,23 +1,49 @@
 import { useNodes } from "@xyflow/react";
-import { AppNode, nodeLabel } from "@/lib/state";
+import { AppNode, nodeLabel, NodeType } 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 { useCallback, useMemo, useState } from "react";
 import { Icon } from "./icon";
 
 function unique<T>(v: T, i: number, a: T[]) {
   return a.indexOf(v) === i;
 }
 
+const nodeTypeIndex = new Map<NodeType, number>([
+  ["github", 1],
+  // ["gitlab", 2],
+  ["volume", 3],
+  ["postgresql", 4],
+  ["mongodb", 5],
+  ["app", 6],
+  ["gateway-tcp", 7],
+  ["gateway-https", 8],
+]);
+
 export function Details() {
   const nodes = useNodes<AppNode>();
+  const cmpNodes = useCallback(() => {
+    return (x: AppNode, y: AppNode): number => {
+      if (x.type === y.type) {
+        if (nodeLabel(x) < nodeLabel(y)) {
+          return -1;
+        } else if (nodeLabel(x) > nodeLabel(y)) {
+          return 1;
+        }
+        return 0;
+      }
+      // TODO(gio): why !
+      return (nodeTypeIndex.get(x.type!) || 0) - (nodeTypeIndex.get(y.type!) || 0);
+    };
+  }, [nodes]);
+  const sorted = useMemo(() => nodes.filter((n) => n.type !== "network").sort(cmpNodes()), [nodes, cmpNodes]);
   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.filter((n) => n.type !== "network").map((n) => (
+      {sorted.map((n) => (
         <AccordionItem key={n.id} value={n.id} className="px-3">
           <AccordionTrigger>
             <div className="flex flex-row space-x-2">