diff --git a/apps/canvas/front/src/Header.tsx b/apps/canvas/front/src/Header.tsx
index 83c658c..979d85c 100644
--- a/apps/canvas/front/src/Header.tsx
+++ b/apps/canvas/front/src/Header.tsx
@@ -8,104 +8,114 @@
 import { useToast } from "@/hooks/use-toast";
 
 export function Header() {
-    const { toast } = useToast();
-    const store = useStateStore();
-    const [projects, setProjects] = useState<Project[]>([]);
-    const refreshProjects = useCallback(async () => {
-        try {
-            const resp = await fetch("/api/project");
-            setProjects(await resp.json());
-        } catch (e) {
-            console.log(e);
-        }
-    }, [setProjects]);
-    useEffect(() => {
-        refreshProjects();
-    }, [refreshProjects]);
-    const project = useProjectId();
-    const [createNewOpen, setCreateNewOpen] = useState(false);
-    const onSelect = useCallback((projectId: string) => {
-        if (projectId === "create-new") {
-            setCreateNewOpen(true);
-        } else {
-            store.setProject(projectId);
-        }
-    }, [store]);
-    const instance = useReactFlow();
-    const restoreSaved = useCallback(async (projectId: string) => {
-        const resp = await fetch(`/api/project/${projectId}/saved`, {
-            method: "GET",
-        });
-        const inst = await resp.json();
-        const { x = 0, y = 0, zoom = 1 } = inst.viewport;
-        instance.setNodes(inst.nodes || []);
-        instance.setEdges(inst.edges || []);
-        instance.setViewport({ x, y, zoom });
-    }, [instance]);
-    useEffect(() => {
-        if (project == null) {
-            return;
-        }
-        restoreSaved(project)
-    }, [project, restoreSaved]);
-    const [name, setName] = useState<string | undefined>(undefined);
-    const updateName = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-        setName(e.target.value);
-    }, [setName]);
-    const createNew = useCallback(() => {
-        console.log(name);
-        if (!name) {
-            return;
-        }
-        fetch("/api/project", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                name: name,
-            }),
-        }).then(async (resp) => {
-            if (!resp.ok) {
-                return;
-            }
-            const { id } = await resp.json();
-            await refreshProjects();
-            store.setProject(id as string);
-            setCreateNewOpen(false);
-            toast({
-                title: `Created project: ${name}`,
-            });
-        }).catch((e) => {
-            console.log(e);
-            toast({
-                variant: "destructive",
-                title: `Failed to create project: ${name}`,
-            });
-        });
-    }, [name, setCreateNewOpen, toast, store, refreshProjects]);
-    return (
-        <div className="flex flex-row h-9">
-            <Select onValueChange={onSelect} value={project}>
-                <SelectTrigger>
-                    <SelectValue placeholder="Choose Project" defaultValue={project} />
-                </SelectTrigger>
-                <SelectContent>
-                    {projects.map((p) => (
-                        <SelectItem value={p.id}>{p.name}</SelectItem>
-                    ))}
-                    <SelectItem value={"create-new"}>
-                        <Dialog open={createNewOpen} onOpenChange={setCreateNewOpen}>
-                            <DialogTrigger>Create New</DialogTrigger>
-                            <DialogContent>
-                                <Input type="text" placeholder="Name" onChange={updateName} />
-                                <Button onClick={createNew}>Create New</Button>
-                            </DialogContent>
-                        </Dialog>
-                    </SelectItem>
-                </SelectContent>
-            </Select>
-
-        </div>
-    );
-}
\ No newline at end of file
+	const { toast } = useToast();
+	const store = useStateStore();
+	const [projects, setProjects] = useState<Project[]>([]);
+	const refreshProjects = useCallback(async () => {
+		try {
+			const resp = await fetch("/api/project");
+			setProjects(await resp.json());
+		} catch (e) {
+			console.log(e);
+		}
+	}, [setProjects]);
+	useEffect(() => {
+		refreshProjects();
+	}, [refreshProjects]);
+	const project = useProjectId();
+	const [createNewOpen, setCreateNewOpen] = useState(false);
+	const onSelect = useCallback(
+		(projectId: string) => {
+			if (projectId === "create-new") {
+				setCreateNewOpen(true);
+			} else {
+				store.setProject(projectId);
+			}
+		},
+		[store],
+	);
+	const instance = useReactFlow();
+	const restoreSaved = useCallback(
+		async (projectId: string) => {
+			const resp = await fetch(`/api/project/${projectId}/saved`, {
+				method: "GET",
+			});
+			const inst = await resp.json();
+			const { x = 0, y = 0, zoom = 1 } = inst.viewport;
+			instance.setNodes(inst.nodes || []);
+			instance.setEdges(inst.edges || []);
+			instance.setViewport({ x, y, zoom });
+		},
+		[instance],
+	);
+	useEffect(() => {
+		if (project == null) {
+			return;
+		}
+		restoreSaved(project);
+	}, [project, restoreSaved]);
+	const [name, setName] = useState<string | undefined>(undefined);
+	const updateName = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => {
+			setName(e.target.value);
+		},
+		[setName],
+	);
+	const createNew = useCallback(() => {
+		console.log(name);
+		if (!name) {
+			return;
+		}
+		fetch("/api/project", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				name: name,
+			}),
+		})
+			.then(async (resp) => {
+				if (!resp.ok) {
+					return;
+				}
+				const { id } = await resp.json();
+				await refreshProjects();
+				store.setProject(id as string);
+				setCreateNewOpen(false);
+				toast({
+					title: `Created project: ${name}`,
+				});
+			})
+			.catch((e) => {
+				console.log(e);
+				toast({
+					variant: "destructive",
+					title: `Failed to create project: ${name}`,
+				});
+			});
+	}, [name, setCreateNewOpen, toast, store, refreshProjects]);
+	return (
+		<div className="flex flex-row h-9">
+			<Select onValueChange={onSelect} value={project}>
+				<SelectTrigger>
+					<SelectValue placeholder="Choose Project" defaultValue={project} />
+				</SelectTrigger>
+				<SelectContent>
+					{projects.map((p) => (
+						<SelectItem value={p.id}>{p.name}</SelectItem>
+					))}
+					<SelectItem value={"create-new"}>
+						<Dialog open={createNewOpen} onOpenChange={setCreateNewOpen}>
+							<DialogTrigger>Create New</DialogTrigger>
+							<DialogContent>
+								<Input type="text" placeholder="Name" onChange={updateName} />
+								<Button onClick={createNew}>Create New</Button>
+							</DialogContent>
+						</Dialog>
+					</SelectItem>
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}