diff --git a/app/DTNode.stories.tsx b/app/DTNode.stories.tsx
new file mode 100644
index 0000000..cf422c4
--- /dev/null
+++ b/app/DTNode.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { DataNode } from './DTNode';
+
+const meta = {
+  title: 'App/DTNode',
+  component: DataNode,
+  argTypes: {
+    data: {
+      label: { control: 'text' },
+      baseAddr: {},
+      compat: {},
+    },
+    status: { control: 'radio', options: ['okay', 'disabled', undefined] },
+  },
+} satisfies Meta<typeof DataNode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    data: {
+      label: "UART",
+      baseAddr: "0x0c00_0000",
+      compat: "ns16550a",
+    },
+    status: "okay",
+  },
+};
+
+export const WithCompat: Story = {
+  args: {
+    data: {
+      label: "firmware",
+      compat: "raspberrypi,bcm2835-firmware",
+    },
+  },
+};
diff --git a/app/DTNode.tsx b/app/DTNode.tsx
index 5cdf221..89b081a 100644
--- a/app/DTNode.tsx
+++ b/app/DTNode.tsx
@@ -1,16 +1,134 @@
 import { memo, useState } from "react";
 import { Handle, NodeProps, Position } from "reactflow";
+import compatDb from "./compat-db.json";
+import genericNames from "./generic-names.json";
 
-const style = {
-  // wordWrap: "break-word",
-  whiteSpace: "pre-wrap" as "pre-wrap", // This is weird, TypoScripto...
-  padding: 4,
-  border: "2px solid",
-  background: "#0c0c0c",
-  color: "#fff",
-  width: 150,
-  fontSize: 11,
-  fontFamily: "Fira Code",
+type DTStatus = "okay" | "disabled";
+
+const dotColors: Record<DTStatus, string> = {
+  okay: "blue",
+  disabled: "red"
+};
+
+export const Dot: FC<{ status?: DTStatus }> = ({ status }) => {
+  if (!status) {
+    return null;
+  }
+  const color = dotColors[status];
+  return (
+    <div className="dot" style={{ background: color }}>
+      <style>{`
+        div.dot {
+          width: 10px;
+          height: 10px;
+          border-radius: 100%;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+const docsBaseUrl = "https://docs.kernel.org"
+const drvBaseUrl = "https://elixir.bootlin.com/linux/HEAD/source/drivers";
+//const drvBaseUrl = "https://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/tree/drivers";
+const dtBaseUrl = "https://www.kernel.org/doc/Documentation/devicetree/bindings";
+
+type DocsCategory = "binding" | "docs" | "driver";
+
+type DocsEntry = {
+  category: DocsCategory;
+  path: string;
+};
+
+const getBaseUrl = (category: DocsCategory): string => {
+  switch(category) {
+    case "binding": return dtBaseUrl;
+    case "docs": return docsBaseUrl;
+    case "driver": return drvBaseUrl;
+  }
+};
+
+const getDocUrl = (compat: string) => {
+  const res = compat.split(";").find((c) => !!compatDb[c]);
+  if (!res) {
+    return null;
+  }
+  const d = compatDb[res];
+  const baseUrl = getBaseUrl(d.category);
+  return `${baseUrl}/${d.path}`;
+}
+
+const Compat: FC<{ compat?: string; }> = ({ compat }) => {
+  if (!compat) {
+    return null;
+  }
+  const docUrl = getDocUrl(compat);
+
+  if (!docUrl) {
+    return compat;
+  }
+
+  return (
+    <a className="compat" href={docUrl} target="_blank">
+      {compat}
+      <style>{`
+        a.compat {
+          color: #cdeeff;
+          text-decoration: underline;
+        }
+      `}</style>
+    </a>
+  );
+};
+
+export const DataNode: FC<{ data: object; status?: DTStatus }> = ({
+  data,
+  status,
+}) => {
+  const extraClass = genericNames.includes(data.label) ? "generic" : "";
+  return (
+    <div className="node">
+      <header className={extraClass}>{data.label}</header>
+      <main>
+        <span>{data.model}</span>
+        <span>{data.baseAddr}</span>
+        <Compat compat={data.compat} />
+        <Dot status={status} />
+        <span>{data.extra}</span>
+      </main>
+      <style>{`
+        div.node {
+          white-space: pre-wrap;
+          border: 4px solid #789789;
+          border-radius: 6px;
+          width: 250px;
+          font-size: 14px;
+          font-family: "Fira Code";
+        }
+        div.node:hover {
+          border-color: #987987;
+          border-style: dotted;
+        }
+        div.node header {
+          color: #0c0c0c;
+          background: #ccddcc;
+          font-weight: bold;
+          padding: 4px;
+        }
+        div.node header.generic {
+          color: #fff;
+          background: #850150;
+        }
+        div.node main {
+          color: #fff;
+          background: #0c0c0c;
+          padding: 4px;
+          display: flex;
+          flex-direction: column;
+        }
+      `}</style>
+    </div>
+  );
 };
 
 const DTNode = ({
@@ -19,13 +137,7 @@ const DTNode = ({
   targetPosition = Position.Top,
   sourcePosition = Position.Bottom
 }: NodeProps) => {
-  const [hovered, setHovered] = useState(false);
-
-  const hoverOn = () => setHovered(true);
-  const hoverOff = () => setHovered(false);
-
-  const borderColor = hovered ? "#987987" : "#789789";
-  const borderStyle = hovered ? "dotted" : "solid";
+  const { status, ...nData } = data;
   return (
     <>
       <Handle
@@ -33,13 +145,7 @@ const DTNode = ({
         position={targetPosition}
         isConnectable={isConnectable}
       />
-        <div
-          style={{...style, borderColor, borderStyle }}
-          onMouseEnter={hoverOn}
-          onMouseLeave={hoverOff}
-        >
-          {data?.label}
-        </div>
+      <DataNode data={nData} status={status} />
       <Handle
         type="source"
         position={sourcePosition}
diff --git a/app/compat-db.json b/app/compat-db.json
new file mode 100644
index 0000000..2c86eb1
--- /dev/null
+++ b/app/compat-db.json
@@ -0,0 +1,50 @@
+{
+  "brcm,bcm2835-aux-clock": {
+    "category": "binding",
+    "path": "clock/brcm,bcm2835-aux-clock.txt"
+  },
+  "brcm,bcm2835-aux-uart": {
+    "category": "binding",
+    "path": "serial/brcm,bcm2835-aux-uart.txt"
+  },
+  "brcm,bcm2835-pwm": {
+    "category": "binding",
+    "path": "pwm/pwm-bcm2835.yaml"
+  },
+  "brcm,bcm2835-spi": {
+    "category": "binding",
+    "path": "spi/brcm,bcm2835-spi.txt"
+  },
+  "brcm,bcm2835-thermal": {
+    "category": "binding",
+    "path": "thermal/brcm,bcm2835-thermal.yaml"
+  },
+  "brcm,bcm2835-vchiq": {
+    "category": "binding",
+    "path": "soc/bcm/brcm,bcm2835-vchiq.yaml"
+  },
+  "arm,cortex-a7": {
+    "category": "binding",
+    "path": "arm/cpus.yaml"
+  },
+  "arm,cortex-a7-pmu": {
+    "category": "binding",
+    "path": "arm/pmu.yaml"
+  },
+  "brcm,bcm2835-cprman": {
+    "category": "binding",
+    "path": "clock/brcm,bcm2835-cprman.txt"
+  },
+  "raspberrypi,bcm2835-firmware": {
+    "category": "binding",
+    "path": "arm/bcm/raspberrypi,bcm2835-firmware.yaml"
+  },
+  "spidev": {
+    "category": "docs",
+    "path": "spi/spidev.html"
+  },
+  "brcm,bcm2835-audio": {
+    "category": "driver",
+    "path": "staging/vc04_services/bcm2835-audio/bcm2835.c"
+  }
+}
diff --git a/app/generic-names.json b/app/generic-names.json
new file mode 100644
index 0000000..dbb07c3
--- /dev/null
+++ b/app/generic-names.json
@@ -0,0 +1,104 @@
+[
+ "adc",
+ "accelerometer",
+ "air-pollution-sensor",
+ "atm",
+ "audio-codec",
+ "audio-controller",
+ "backlight",
+ "bluetooth",
+ "bus",
+ "cache-controller",
+ "camera",
+ "can",
+ "charger",
+ "clock",
+ "clock-controller",
+ "co2-sensor",
+ "compact-flash",
+ "cpu",
+ "cpus",
+ "crypto",
+ "disk",
+ "display",
+ "dma-controller",
+ "dsi",
+ "dsp",
+ "eeprom",
+ "efuse",
+ "endpoint",
+ "ethernet",
+ "ethernet-phy",
+ "fdc",
+ "flash",
+ "gnss",
+ "gpio",
+ "gpu",
+ "gyrometer",
+ "hdmi",
+ "hwlock",
+ "i2c",
+ "i2c-mux",
+ "ide",
+ "interrupt-controller",
+ "iommu",
+ "isa",
+ "keyboard",
+ "key",
+ "keys",
+ "lcd-controller",
+ "led",
+ "leds",
+ "led-controller",
+ "light-sensor",
+ "lora",
+ "magnetometer",
+ "mailbox",
+ "mdio",
+ "memory",
+ "memory-controller",
+ "mmc",
+ "mmc-slot",
+ "mouse",
+ "nand-controller",
+ "nvram",
+ "oscillator",
+ "parallel",
+ "pc-card",
+ "pci",
+ "pcie",
+ "phy",
+ "pinctrl",
+ "pmic",
+ "pmu",
+ "port",
+ "ports",
+ "power-monitor",
+ "pwm",
+ "regulator",
+ "reset-controller",
+ "rng",
+ "rtc",
+ "sata",
+ "scsi",
+ "serial",
+ "sound",
+ "spi",
+ "spmi",
+ "sram-controller",
+ "ssi-controller",
+ "syscon",
+ "temperature-sensor",
+ "timer",
+ "touchscreen",
+ "tpm",
+ "ufshc",
+ "usb",
+ "usb-hub",
+ "usb-phy",
+ "vibrator",
+ "video-codec",
+ "vme",
+ "watchdog",
+ "wifi"
+]
diff --git a/app/lib.ts b/app/lib.ts
index 429e560..31617d3 100644
--- a/app/lib.ts
+++ b/app/lib.ts
@@ -21,6 +21,7 @@ type TransformedNode = {
   };
   data: {
     label: string;
+    status?: "okay" | "disabled";
   };
 };
 type TransformedEdge = any; // TODO
@@ -65,6 +66,17 @@ const getPropStr = (n: DTNode, pname: string): string | null => {
   return p ? p.join(", ") : null;
 };
 
+const getExtra = (n: DTNode) => {
+  if (n.name === "aliases" | n.name === "chosen") {
+    const ps = n.props.map((p) => {
+      const [k, v] = p;
+      return `${k}=${u8ArrToStr(v)}`;
+    });
+    return ps.join("\n");
+  }
+  return null;
+};
+
 // transform a node's props into numbers and strings, omitting many
 const transformNode = (n: DTNode): DTNode => {
   const name = n.name || "root";
@@ -79,6 +91,9 @@ const transformNode = (n: DTNode): DTNode => {
   const clks = getProp(n, "clocks");
   const cnames = getStringProp(n, "clock-names");
   const compat = getStringProp(n, "compatible");
+  const status = getStringProp(n, "status");
+  const model = getStringProp(n, "model");
+  const extra = getExtra(n);
   return {
     name,
     ...(phandle ? { phandle: phandle[0] } : null),
@@ -89,6 +104,9 @@ const transformNode = (n: DTNode): DTNode => {
     ...(clks ? { clks } : null),
     ...(cnames ? { cnames } : null),
     ...(compat ? { compat } : null),
+    ...(status ? { status } : null),
+    ...(model ? { model } : null),
+    extra,
   };
 };
 
@@ -100,7 +118,7 @@ export const transform = (n: DTNode, id: string = "10000") => {
   }
 };
 
-const NODE_WIDTH = 160;
+const NODE_WIDTH = 260;
 const NODE_HEIGHT = 80;
 
 const weightedNode = (node: DTNode): DTNode => {
@@ -139,18 +157,21 @@ export const getNodesEdges = (tree: DTNode) => {
   const nodes: TransformedNode[] = [];
   const edges: TransformedEdge[] = [];
   const rec = (n: DTNode, d: number = 1, baseX: number = 0, baseY: number = 0) => {
-    const [name, addr] = n.name.split("@");
+    const { id, name, ...data } = n;
+    const [label, addr] = name.split("@");
     const baseAddr = transformAddr(addr);
 
     nodes.push({
-      id: n.id,
+      id,
       type: NodeType.custom,
       position: {
         x: baseX + n.size * NODE_WIDTH / 2,
         y: baseY + d * NODE_HEIGHT,
       },
       data: {
-        label: `${name}\n${baseAddr}\n${n.size}`,
+        label,
+        baseAddr,
+        ...data,
       },
     });
     let offset = baseX;