diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 5178b5e..a643eaa 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -6,6 +6,8 @@
 import { Button } from "./components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "./components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
+import { Separator } from "./components/ui/separator";
+import { Plus } from "lucide-react";
 
 export function ProjectSelect() {
 	const { toast } = useToast();
@@ -97,24 +99,28 @@
 	}, [name, setCreateNewOpen, toast, store, refreshProjects]);
 	return (
 		<Select onValueChange={onSelect} value={project}>
-			<SelectTrigger className="w-[200px]">
+			<SelectTrigger className="w-[200px] !border-none !shadow-none !focus:ring-0 !focus:ring-offset-0">
 				<SelectValue placeholder="Choose Project" defaultValue={project} />
 			</SelectTrigger>
 			<SelectContent>
+				{projects.map((p) => (
+					<SelectItem key={p.id} value={p.id}>
+						{p.name}
+					</SelectItem>
+				))}
+				<Separator />
 				<SelectItem value={"create-new"}>
 					<Dialog open={createNewOpen} onOpenChange={setCreateNewOpen}>
-						<DialogTrigger>Create New</DialogTrigger>
+						<DialogTrigger className="flex flex-row items-center">
+							<Plus />
+							Create New
+						</DialogTrigger>
 						<DialogContent>
 							<Input type="text" placeholder="Name" onChange={updateName} />
 							<Button onClick={createNew}>Create New</Button>
 						</DialogContent>
 					</Dialog>
 				</SelectItem>
-				{projects.map((p) => (
-					<SelectItem key={p.id} value={p.id}>
-						{p.name}
-					</SelectItem>
-				))}
 			</SelectContent>
 		</Select>
 	);