diff --git a/apps/canvas/src/components/node-details.tsx b/apps/canvas/src/components/node-details.tsx
new file mode 100644
index 0000000..ba629c5
--- /dev/null
+++ b/apps/canvas/src/components/node-details.tsx
@@ -0,0 +1,21 @@
+import { NodeAppDetails } from "./node-app";
+import { NodeGatewayHttpsDetails } from "./node-gateway-https";
+import { AppNode } from "@/lib/state";
+import { NodeVolumeDetails } from "./node-volume";
+import { NodePostgreSQLDetails } from "./node-postgresql";
+import { NodeMongoDBDetails } from "./node-mongodb";
+import { NodeGithubDetails } from "./node-github";
+import { NodeGatewayTCPDetails } from "./node-gateway-tcp";
+
+export function NodeDetails(props : AppNode) {
+    switch (props.type) {
+        case "app": return (<NodeAppDetails {...props} />);
+        case "gateway-https": return (<NodeGatewayHttpsDetails {...props} />);
+        case "gateway-tcp": return (<NodeGatewayTCPDetails {...props} />);
+        case "volume": return (<NodeVolumeDetails {...props} />);
+        case "postgresql": return (<NodePostgreSQLDetails {...props} />);
+        case "mongodb": return (<NodeMongoDBDetails {...props} />);
+        case "github": return (<NodeGithubDetails {...props} />)
+        default: return (<>nooo</>);
+    }
+}
\ No newline at end of file