diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index d87f458..d4bd5ea 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -12,6 +12,7 @@
 	DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { Ellipsis, LoaderCircle } from "lucide-react";
+import { ImportModal } from "./import-modal";
 
 function toNodeType(t: string): string {
 	if (t === "ingress") {
@@ -34,6 +35,7 @@
 	const [ok, setOk] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [reloading, setReloading] = useState(false);
+	const [showImportModal, setShowImportModal] = useState(false);
 	const info = useCallback(
 		(title: string, description?: string, duration?: number) => {
 			return toast({
@@ -309,47 +311,51 @@
 		);
 	} else {
 		return (
-			<div className="flex flex-row gap-1 items-center">
-				<Button onClick={deploy} {...deployProps}>
-					{deployProps.loading ? (
-						<>
-							<LoaderCircle className="animate-spin" />
-							Deploying...
-						</>
-					) : (
-						"Deploy"
-					)}
-				</Button>
-				<Button onClick={save}>Save</Button>
-				<DropdownMenu>
-					<DropdownMenuTrigger>
-						<Button size="icon">
-							<Ellipsis />
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent className="w-56">
-						<DropdownMenuGroup>
-							<DropdownMenuItem
-								onClick={restoreSaved}
-								disabled={projectId === undefined}
-								className="cursor-pointer hover:bg-gray-200"
-							>
-								Restore
-							</DropdownMenuItem>
-							<DropdownMenuItem onClick={clear} className="cursor-pointer hover:bg-gray-200">
-								Clear
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								onClick={deleteProject}
-								disabled={projectId === undefined}
-								className="cursor-pointer hover:bg-gray-200"
-							>
-								Delete project
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
+			<>
+				<div className="flex flex-row gap-1 items-center">
+					<Button onClick={deploy} {...deployProps}>
+						{deployProps.loading ? (
+							<>
+								<LoaderCircle className="animate-spin" />
+								Deploying...
+							</>
+						) : (
+							"Deploy"
+						)}
+					</Button>
+					<Button onClick={save}>Save</Button>
+					<Button onClick={() => setShowImportModal(true)}>Import</Button>
+					<DropdownMenu>
+						<DropdownMenuTrigger>
+							<Button size="icon">
+								<Ellipsis />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent className="w-56">
+							<DropdownMenuGroup>
+								<DropdownMenuItem
+									onClick={restoreSaved}
+									disabled={projectId === undefined}
+									className="cursor-pointer hover:bg-gray-200"
+								>
+									Restore
+								</DropdownMenuItem>
+								<DropdownMenuItem onClick={clear} className="cursor-pointer hover:bg-gray-200">
+									Clear
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={deleteProject}
+									disabled={projectId === undefined}
+									className="cursor-pointer hover:bg-gray-200"
+								>
+									Delete project
+								</DropdownMenuItem>
+							</DropdownMenuGroup>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+				<ImportModal open={showImportModal} onOpenChange={setShowImportModal} />
+			</>
 		);
 	}
 }