diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 5df5f6d..9b8bb45 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -8,12 +8,13 @@
 import { Separator } from "./components/ui/separator";
 import { Plus } from "lucide-react";
 import { z } from "zod";
+import { cn } from "./lib/utils";
 
 const createNewSchema = z.object({
 	id: z.string().min(1),
 });
 
-export function ProjectSelect() {
+export function ProjectSelect({ className }: { className?: string }) {
 	const { toast } = useToast();
 	const store = useStateStore();
 	const [projects, setProjects] = useState<Project[]>([]);
@@ -127,7 +128,9 @@
 	return (
 		<>
 			<Select onValueChange={onSelect} value={selectedId}>
-				<SelectTrigger className="w-[200px] !border-none !shadow-none !focus:ring-0 !focus:ring-offset-0">
+				<SelectTrigger
+					className={cn("!border-none", "!shadow-none", "!focus:ring-0", "!focus:ring-offset-0", className)}
+				>
 					<SelectValue placeholder="Choose Project" />
 				</SelectTrigger>
 				<SelectContent>