diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 4e286ce..8b5d496 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -20,7 +20,7 @@
 					.map((n) => {
 						return (
 							<div key={n.id} className="h-fit w-fit rounded-lg border-gray-200 border-2 p-2">
-								<NodeDetails disabled={isDeployMode} {...n} />
+								<NodeDetails node={n} disabled={isDeployMode} />
 							</div>
 						);
 					})}
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index 288390a..9b6cb20 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -62,7 +62,7 @@
 							</div>
 						</AccordionTrigger>
 						<AccordionContent className="pt-1">
-							<NodeDetails {...n} disabled={isDeployMode} />
+							<NodeDetails node={n} disabled={isDeployMode} />
 						</AccordionContent>
 					</AccordionItem>
 				</>
diff --git a/apps/canvas/front/src/components/node-details.tsx b/apps/canvas/front/src/components/node-details.tsx
index d120c76..39ae059 100644
--- a/apps/canvas/front/src/components/node-details.tsx
+++ b/apps/canvas/front/src/components/node-details.tsx
@@ -7,34 +7,30 @@
 import { NodeGithubDetails } from "./node-github";
 import { NodeGatewayTCPDetails } from "./node-gateway-tcp";
 
-type NodeDetailsProps = AppNode & {
-	disabled?: boolean;
-};
-
-export function NodeDetails(props: NodeDetailsProps) {
+export function NodeDetails({ node, disabled }: { node: AppNode; disabled?: boolean }) {
 	return (
 		<div className="px-1 flex flex-col gap-2">
-			<NodeDetailsImpl {...props} />
+			<NodeDetailsImpl node={node} disabled={disabled} />
 		</div>
 	);
 }
 
-function NodeDetailsImpl(props: NodeDetailsProps) {
-	switch (props.type) {
+function NodeDetailsImpl({ node, disabled }: { node: AppNode; disabled?: boolean }) {
+	switch (node.type) {
 		case "app":
-			return <NodeAppDetails node={props} disabled={props.disabled} />;
+			return <NodeAppDetails node={node} disabled={disabled} />;
 		case "gateway-https":
-			return <NodeGatewayHttpsDetails {...props} />;
+			return <NodeGatewayHttpsDetails node={node} disabled={disabled} />;
 		case "gateway-tcp":
-			return <NodeGatewayTCPDetails {...props} />;
+			return <NodeGatewayTCPDetails node={node} disabled={disabled} />;
 		case "volume":
-			return <NodeVolumeDetails {...props} />;
+			return <NodeVolumeDetails node={node} disabled={disabled} />;
 		case "postgresql":
-			return <NodePostgreSQLDetails {...props} />;
+			return <NodePostgreSQLDetails node={node} disabled={disabled} />;
 		case "mongodb":
-			return <NodeMongoDBDetails {...props} />;
+			return <NodeMongoDBDetails node={node} disabled={disabled} />;
 		case "github":
-			return <NodeGithubDetails {...props} />;
+			return <NodeGithubDetails node={node} disabled={disabled} />;
 		default:
 			return <>nooo</>;
 	}
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index 1eb0409..6efc356 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -71,7 +71,8 @@
 	);
 }
 
-export function NodeGatewayHttpsDetails({ id, data, disabled }: GatewayHttpsNode & { disabled?: boolean }) {
+export function NodeGatewayHttpsDetails({ node, disabled }: { node: GatewayHttpsNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const env = useEnv();
 	const form = useForm<z.infer<typeof schema>>({
diff --git a/apps/canvas/front/src/components/node-gateway-tcp.tsx b/apps/canvas/front/src/components/node-gateway-tcp.tsx
index 4210d47..6bb4577 100644
--- a/apps/canvas/front/src/components/node-gateway-tcp.tsx
+++ b/apps/canvas/front/src/components/node-gateway-tcp.tsx
@@ -48,7 +48,8 @@
 	);
 }
 
-export function NodeGatewayTCPDetails({ id, data, disabled }: GatewayTCPNode & { disabled?: boolean }) {
+export function NodeGatewayTCPDetails({ node, disabled }: { node: GatewayTCPNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const env = useEnv();
 	const form = useForm<z.infer<typeof schema>>({
diff --git a/apps/canvas/front/src/components/node-github.tsx b/apps/canvas/front/src/components/node-github.tsx
index 4373359..d16a191 100644
--- a/apps/canvas/front/src/components/node-github.tsx
+++ b/apps/canvas/front/src/components/node-github.tsx
@@ -53,7 +53,8 @@
 	repositoryId: z.number().optional(),
 });
 
-export function NodeGithubDetails({ id, data, disabled }: GithubNode & { disabled?: boolean }) {
+export function NodeGithubDetails({ node, disabled }: { node: GithubNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const projectId = useProjectId();
 	const githubService = useGithubService();
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index 69d0d0f..3235d41 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -31,7 +31,8 @@
 	name: z.string().min(1, "required"),
 });
 
-export function NodeMongoDBDetails({ id, data, disabled }: MongoDBNode & { disabled?: boolean }) {
+export function NodeMongoDBDetails({ node, disabled }: { node: MongoDBNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const form = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index d31cfe2..140fe4d 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -31,7 +31,8 @@
 	name: z.string().min(1, "required"),
 });
 
-export function NodePostgreSQLDetails({ id, data, disabled }: PostgreSQLNode & { disabled?: boolean }) {
+export function NodePostgreSQLDetails({ node, disabled }: { node: PostgreSQLNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const form = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index 3118681..35b3722 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -39,7 +39,8 @@
 	size: z.string().min(1).default("1Gi"),
 });
 
-export function NodeVolumeDetails({ id, data, disabled }: VolumeNode & { disabled?: boolean }) {
+export function NodeVolumeDetails({ node, disabled }: { node: VolumeNode; disabled?: boolean }) {
+	const { id, data } = node;
 	const store = useStateStore();
 	const form = useForm<z.infer<typeof schema>>({
 		resolver: zodResolver(schema),