diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index 0f39e4e..54449c4 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -57,7 +57,7 @@
             }
         };
         setTimeout(m, 100);
-    }, [projectId, nodes]);
+    }, [projectId, nodes, store]);
     const deploy = useCallback(async () => {
         if (projectId == null) {
             return;
@@ -99,8 +99,7 @@
         } finally {
             setLoading(false);
         }
-    }, [projectId, instance, nodes, env, setLoading]);
-    const [st, setSt] = useState<string>();
+    }, [projectId, instance, nodes, env, setLoading, toast, monitor]);
     const save = useCallback(async () => {
         if (projectId == null) {
             return;
@@ -123,7 +122,7 @@
                 description: await resp.text(),
             });
         }
-    }, [projectId, instance, setSt]);
+    }, [projectId, instance, toast]);
     const restoreSaved = useCallback(async () => {
         if (projectId == null) {
             return;
@@ -136,12 +135,12 @@
         store.setNodes(inst.nodes || []);
         store.setEdges(inst.edges || []);
         instance.setViewport({ x, y, zoom });
-    }, [projectId, instance, st]);
+    }, [projectId, instance, store]);
     const clear = useCallback(() => {
         store.setEdges([]);
         store.setNodes([]);
         instance.setViewport({ x: 0, y: 0, zoom: 1 });
-    }, [store]);
+    }, [store, instance]);
     // TODO(gio): Update store
     const deleteProject = useCallback(async () => {
         if (projectId == null) {
@@ -163,7 +162,7 @@
                 description: await resp.text(),
             });
         }
-    }, [store, clear]);
+    }, [store, clear, projectId, toast]);
     const [props, setProps] = useState({});
     useEffect(() => {
         if (loading) {
diff --git a/apps/canvas/front/src/components/details.tsx b/apps/canvas/front/src/components/details.tsx
index ffac03f..d498771 100644
--- a/apps/canvas/front/src/components/details.tsx
+++ b/apps/canvas/front/src/components/details.tsx
@@ -3,7 +3,7 @@
 import { NodeDetails } from "@/components/node-details";
 import { Accordion, AccordionContent, AccordionTrigger } from "./ui/accordion";
 import { AccordionItem } from "@radix-ui/react-accordion";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Icon } from "./icon";
 
 function unique<T>(v: T, i: number, a: T[]) {
@@ -21,23 +21,22 @@
   ["gateway-https", 8],
 ]);
 
+function cmpNodes(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);
+}
+
 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 sorted = useMemo(() => nodes.filter((n) => n.type !== "network").sort(cmpNodes), [nodes]);
   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]);
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>
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index e618943..6effb26 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -125,7 +125,7 @@
       return nodes.find((n) => n.id === https.serviceId)! as ServiceNode;
     }
     return null;
-  }, [data]);
+  }, [data, nodes]);
   const selectable = useMemo(() => {
     return nodes.filter((n) => {
       if (n.id === id) {
@@ -139,14 +139,14 @@
       }
       return n.data && n.data.ports && n.data.ports.length > 0;
     })
-  }, [nodes, selected]);
+  }, [id, nodes, selected]);
   useEffect(() => {
     const sub = connectedToForm.watch((value: DeepPartial<z.infer<typeof connectedToSchema>>, { name, type }: { name?: keyof z.infer<typeof connectedToSchema> | undefined, type?: EventType | undefined }) => {
       if (type !== "change") {
         return;
       }
       switch (name) {
-        case "id":
+        case "id": {
           if (!value.id) {
             break;
           }
@@ -159,6 +159,7 @@
             targetHandle: "https",
           }, cid);
           break;
+        }
         case "portId":
           store.updateNodeData<"gateway-https">(id, {
             https: {
@@ -170,7 +171,7 @@
       }
     });
     return () => sub.unsubscribe();
-  }, [connectedToForm, store, selectable]);
+  }, [id, connectedToForm, store, selectable]);
   const authEnabledForm = useForm<z.infer<typeof authEnabledSchema>>({
     resolver: zodResolver(authEnabledSchema),
     mode: "onChange",
@@ -224,7 +225,7 @@
       },
     });
     authGroupForm.reset();
-  }, [id, data, store]);
+  }, [id, data, store, authGroupForm]);
   const removeNoAuthPathPattern = useCallback((path: string) => {
     const noAuthPathPatterns = data?.auth?.noAuthPathPatterns || [];
     store.updateNodeData<"gateway-https">(id, {
@@ -245,7 +246,7 @@
       },
     });
     authNoAuthPatternFrom.reset();
-  }, [id, data, store]);
+  }, [id, data, store, authNoAuthPatternFrom]);
   return (
     <>
       <Form {...form}>
diff --git a/apps/canvas/front/src/components/node-gateway-tcp.tsx b/apps/canvas/front/src/components/node-gateway-tcp.tsx
index 3588502..e16fdd2 100644
--- a/apps/canvas/front/src/components/node-gateway-tcp.tsx
+++ b/apps/canvas/front/src/components/node-gateway-tcp.tsx
@@ -104,7 +104,7 @@
       portId: data.selected?.portId,
     });
     console.log(connectedToForm.getValues());
-  }, [connectedToForm, data]);
+  }, [id, connectedToForm, data]);
   const nodes = useNodes<AppNode>();
   const [selected, setSelected] = useState<AppNode | undefined>(undefined);
   useEffect(() => {
@@ -114,7 +114,7 @@
       const serviceId = data.selected.serviceId;
       setSelected(nodes.find((n) => n.id === serviceId));
     }
-  }, [data, setSelected]);
+  }, [id, data, setSelected, nodes]);
   const selectable = useMemo(() => {
     console.log(selected);
     return nodes.filter((n) => {
@@ -129,7 +129,7 @@
       }
       return false;
     })
-  }, [nodes, selected]);
+  }, [id, nodes, selected]);
   useEffect(() => {
     const sub = connectedToForm.watch((value: DeepPartial<z.infer<typeof connectedToSchema>>, { name, type }: { name?: keyof z.infer<typeof connectedToSchema> | undefined, type?: EventType | undefined }) => {
       if (type !== "change") {
@@ -160,7 +160,7 @@
       }
     });
     return () => sub.unsubscribe();
-  }, [connectedToForm, store]);
+  }, [id, connectedToForm, store]);
   const [nodeLabels, setNodeLabels] = useState(new Map<string, string>());
   const [portLabels, setPortLabels] = useState(new Map<string, string>());
   useEffect(() => {
@@ -184,7 +184,7 @@
       target: id,
       targetHandle: "tcp",
     }))));
-  }, [id, data, connectedToForm, store, setNodeLabels, setPortLabels]);
+  }, [id, data, store]);
   return (
     <>
       <Form {...form}>
diff --git a/apps/canvas/front/src/components/node-github.tsx b/apps/canvas/front/src/components/node-github.tsx
index 3ae779e..6ece1b0 100644
--- a/apps/canvas/front/src/components/node-github.tsx
+++ b/apps/canvas/front/src/components/node-github.tsx
@@ -100,7 +100,7 @@
 
   useEffect(() => {
     const fetchRepositories = async () => {
-      if (!!!githubService) return;
+      if (!githubService) return;
 
       setLoading(true);
       setError(null);
@@ -129,11 +129,11 @@
                 <Select
                   onValueChange={(value) => field.onChange(Number(value))}
                   value={field.value?.toString()}
-                  disabled={loading || !projectId || !!!githubService}
+                  disabled={loading || !projectId || !githubService}
                 >
                   <FormControl>
                     <SelectTrigger>
-                      <SelectValue placeholder={!!githubService ? "Select a repository" : "GitHub not configured"} />
+                      <SelectValue placeholder={githubService ? "Select a repository" : "GitHub not configured"} />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
@@ -148,7 +148,7 @@
                 <FormMessage />
                 {error && <p className="text-sm text-red-500">{error}</p>}
                 {loading && <p className="text-sm text-gray-500">Loading repositories...</p>}
-                {!!!githubService && (
+                {!githubService && (
                   <Alert variant="destructive" className="mt-2">
                     <AlertCircle className="h-4 w-4" />
                     <AlertDescription>
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index 40c9748..9ead671 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -21,7 +21,7 @@
           isConnectableStart={true}
           isConnectableEnd={true}
           isConnectable={true}
-         />
+        />
       </div>
     </NodeRect>
   );
@@ -50,7 +50,7 @@
       });
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
+  }, [id, form, store]);
   return (
     <>
       <Form {...form}>
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index 4213645..a0bd558 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -50,7 +50,7 @@
       });
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
+  }, [id, form, store]);
   return (
     <>
       <Form {...form}>
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 06f3307..615f7a1 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -5,7 +5,7 @@
 export type Props = {
     id: string;
     selected?: boolean;
-    children: any;
+    children: React.ReactNode;
     type: NodeType;
     state: string | null;
 };
@@ -32,7 +32,7 @@
             classes.push("border");
         }
         setClasses(classes);
-        let stateClasses: string[] = [];
+        const stateClasses: string[] = [];
         if (state === "processing") {
             stateClasses.push("bg-yellow-500");
             stateClasses.push("animate-pulse");
diff --git a/apps/canvas/front/src/components/node-volume.tsx b/apps/canvas/front/src/components/node-volume.tsx
index 430d1e9..cb42241 100644
--- a/apps/canvas/front/src/components/node-volume.tsx
+++ b/apps/canvas/front/src/components/node-volume.tsx
@@ -25,7 +25,7 @@
           isConnectableStart={isConnectable}
           isConnectableEnd={isConnectable}
           isConnectable={isConnectable}
-         />
+        />
       </div>
     </NodeRect>
   );
@@ -63,7 +63,7 @@
       });
     });
     return () => sub.unsubscribe();
-  }, [form, store]);
+  }, [id, form, store]);
   useEffect(() => {
     form.reset({
       name: data.label,
@@ -75,7 +75,7 @@
     <>
       <Form {...form}>
         <form className="space-y-2">
-        <FormField 
+          <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
@@ -87,7 +87,7 @@
               </FormItem>
             )}
           />
-        <FormField
+          <FormField
             control={form.control}
             name="type"
             render={({ field }) => (
@@ -108,7 +108,7 @@
               </FormItem>
             )}
           />
-          <FormField 
+          <FormField
             control={form.control}
             name="size"
             render={({ field }) => (
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 7471c1f..085301c 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -22,9 +22,9 @@
 }
 
 export function Resources() {
-  let flow = useReactFlow();
+  const flow = useReactFlow();
   const categories = useCategories();
-  let onResourceAdd = useCallback((item: CategoryItem) => {
+  const onResourceAdd = useCallback((item: CategoryItem) => {
     return () => addResource(item, flow);
   }, [flow]);
   const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));