diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 9b8bb45..278db67 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { Project, useProjectId, useStateStore } from "./lib/state";
+import { Project, useProjectId, useSetProject } from "./lib/state";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/ui/select";
 import { Input } from "./components/ui/input";
 import { Button } from "./components/ui/button";
@@ -16,17 +16,9 @@
 
 export function ProjectSelect({ className }: { className?: string }) {
 	const { toast } = useToast();
-	const store = useStateStore();
-	const [projects, setProjects] = useState<Project[]>([]);
+	const [projects, setProjects] = useState<Project[] | null>(null);
 	const projectId = useProjectId();
-	// Track the selected project ID locally to ensure UI consistency
-	const [selectedId, setSelectedId] = useState<string | undefined>(projectId);
-
-	// Keep local state in sync with global state
-	useEffect(() => {
-		setSelectedId(projectId);
-	}, [projectId]);
-
+	const setProject = useSetProject();
 	const refreshProjects = useCallback(
 		async (id?: string) => {
 			console.log("refreshProjects", id);
@@ -36,39 +28,40 @@
 				const sortedProjects = [...projectList].sort((a, b) =>
 					a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
 				);
+				console.log(projectId, id, sortedProjects);
 				setProjects(sortedProjects);
 				if (id && !sortedProjects.some((p) => p.id === id)) {
 					throw new Error("MUST NOT REACH!");
 				}
 				if (id == null) {
-					id = sortedProjects[0].id;
+					if (projectId == null) {
+						id = sortedProjects[0].id;
+					} else {
+						id = projectId;
+					}
 				}
-				if (id !== selectedId) {
-					setSelectedId(id);
-					store.setProject(id);
-				}
+				setProject(id);
 			} catch (e) {
 				console.log(e);
 			}
 		},
-		[selectedId, store, setProjects, setSelectedId],
+		[projectId, setProject, setProjects],
 	);
-
 	useEffect(() => {
-		refreshProjects();
-	}, [refreshProjects]);
-
+		if (projects == null) {
+			refreshProjects();
+		}
+	}, [refreshProjects, projects]);
 	const [createNewOpen, setCreateNewOpen] = useState(false);
 	const onSelect = useCallback(
-		(projectId: string) => {
-			if (projectId === "create-new") {
+		(id: string) => {
+			if (id === "create-new") {
 				setCreateNewOpen(true);
 			} else {
-				setSelectedId(projectId);
-				store.setProject(projectId);
+				setProject(id);
 			}
 		},
-		[store, setSelectedId],
+		[setProject],
 	);
 
 	const [name, setName] = useState<string | undefined>(undefined);
@@ -124,23 +117,23 @@
 				});
 			});
 	}, [name, setCreateNewOpen, toast, refreshProjects]);
-
+	console.log("asd", projectId);
 	return (
 		<>
-			<Select onValueChange={onSelect} value={selectedId}>
+			<Select onValueChange={onSelect} value={projectId}>
 				<SelectTrigger
 					className={cn("!border-none", "!shadow-none", "!focus:ring-0", "!focus:ring-offset-0", className)}
 				>
 					<SelectValue placeholder="Choose Project" />
 				</SelectTrigger>
 				<SelectContent>
-					{projects.map((p) => (
+					{projects?.map((p) => (
 						<SelectItem key={p.id} value={p.id}>
 							{p.name}
 						</SelectItem>
 					))}
-					<Separator />
-					<SelectItem value={"create-new"}>
+					{(projects || []).length > 0 && <Separator />}
+					<SelectItem key="create-new" value={"create-new"}>
 						<div className="flex flex-row items-center gap-1">
 							<Plus />
 							<div>New project</div>
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 83890b2..b0c2560 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -494,6 +494,10 @@
 	return useStateStore(projectIdSelector);
 }
 
+export function useSetProject(): (projectId: string | undefined) => void {
+	return useStateStore((state) => state.setProject);
+}
+
 export function useCategories(): Category[] {
 	return useStateStore(categoriesSelector);
 }