diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 5b4b3fa..3027f27 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -1,9 +1,9 @@
 import { v4 as uuidv4 } from "uuid";
 import { NodeRect } from './node-rect';
-import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable, GatewayTCPNode, GatewayHttpsNode } from '@/lib/state';
+import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable, GatewayTCPNode, GatewayHttpsNode, AppNode } from '@/lib/state';
 import { KeyboardEvent, FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { z } from "zod";
-import { DeepPartial, EventType, useForm } from 'react-hook-form';
+import { DeepPartial, EventType, useForm, ControllerRenderProps, FieldPath } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
 import { Input } from './ui/input';
@@ -69,7 +69,7 @@
 
 export function NodeAppDetails({ id, data }: ServiceNode) {
   const store = useStateStore();
-  const nodes = useNodes();
+  const nodes = useNodes<AppNode>();
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
     mode: "onChange",
@@ -102,7 +102,7 @@
       }),
     });
     portForm.reset();
-  }, [data, portForm]);
+  }, [id, data, portForm, store]);
   useEffect(() => {
     const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name, type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
       console.log({ name, type });
@@ -129,8 +129,8 @@
       }
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
-  const focus = useCallback((field: any, name: string) => {
+  }, [id, form, store]);
+  const focus = useCallback((field: ControllerRenderProps<z.infer<typeof schema>, FieldPath<z.infer<typeof schema>>>, name: string) => {
     return (e: HTMLElement | null) => {
       field.ref(e);
       if (e != null && name === data.activeField) {
@@ -141,7 +141,7 @@
         });
       }
     }
-  }, [data, store]);
+  }, [id, data, store]);
   const [typeProps, setTypeProps] = useState({});
   useEffect(() => {
     if (data.activeField === "type") {
@@ -152,7 +152,7 @@
     } else {
       setTypeProps({});
     }
-  }, [store, data, setTypeProps]);
+  }, [id, data, store, setTypeProps]);
   const editAlias = useCallback((e: BoundEnvVar) => {
     return () => {
       store.updateNodeData(id, {
@@ -168,7 +168,7 @@
       });
     };
   }, [id, data, store]);
-  const saveAlias = (e: BoundEnvVar, value: string, store: AppState) => {
+  const saveAlias = useCallback((e: BoundEnvVar, value: string, store: AppState) => {
     store.updateNodeData(id, {
       ...data,
       envVars: data.envVars!.map((o) => {
@@ -184,7 +184,7 @@
         }
         console.log(o);
         if ("alias" in o) {
-          const { alias: tmp, ...rest } = o;
+          const { alias: _, ...rest } = o;
           console.log(rest);
           return {
             ...rest,
@@ -197,7 +197,7 @@
         };
       }),
     });
-  };
+  }, [id, data]);
   const saveAliasOnEnter = useCallback((e: BoundEnvVar) => {
     return (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
@@ -205,12 +205,12 @@
         saveAlias(e, event.currentTarget.value, store);
       }
     }
-  }, [id, data, store]);
+  }, [store, saveAlias]);
   const saveAliasOnBlur = useCallback((e: BoundEnvVar) => {
     return (event: FocusEvent<HTMLInputElement>) => {
       saveAlias(e, event.currentTarget.value, store);
     }
-  }, [id, data, store]);
+  }, [store, saveAlias]);
   const removePort = useCallback((portId: string) => {
     // TODO(gio): this is ugly
     const tcpRemoved = new Set<string>();
@@ -394,7 +394,7 @@
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
-                    {nodes.filter((n) => n.type === "github" && n.data.repository?.id !== undefined).map((n) => (
+                    {(nodes.filter((n) => n.type === "github" && n.data.repository?.id !== undefined) as GithubNode[]).map((n) => (
                       <SelectItem key={n.id} value={n.id}>{`${n.data.repository?.sshURL}`}</SelectItem>
                     ))}
                   </SelectContent>