diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index a643eaa..699fb04 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -13,17 +13,30 @@
 	const { toast } = useToast();
 	const store = useStateStore();
 	const [projects, setProjects] = useState<Project[]>([]);
+	const projectId = useProjectId();
+
 	const refreshProjects = useCallback(async () => {
 		try {
 			const resp = await fetch("/api/project");
-			setProjects(await resp.json());
+			const projectList = await resp.json();
+			const sortedProjects = [...projectList].sort((a, b) =>
+				a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+			);
+			setProjects(sortedProjects);
 		} catch (e) {
 			console.log(e);
 		}
 	}, [setProjects]);
+
+	useEffect(() => {
+		if (projects.length > 0 && (projectId == null || !projects.some((p) => p.id === projectId))) {
+			store.setProject(projects[0].id);
+		}
+	}, [projectId, projects, store]);
 	useEffect(() => {
 		refreshProjects();
 	}, [refreshProjects]);
+
 	const project = useProjectId();
 	const [createNewOpen, setCreateNewOpen] = useState(false);
 	const onSelect = useCallback(