diff --git a/frontend/components/editor/navbar/deploy.tsx b/frontend/components/editor/navbar/deploy.tsx
new file mode 100644
index 0000000..b40ec20
--- /dev/null
+++ b/frontend/components/editor/navbar/deploy.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Play, Pause } from "lucide-react";
+
+export default function DeployButtonModal() {
+ const [isDeploying, setIsDeploying] = useState(false);
+
+ const handleDeploy = () => {
+ if (isDeploying) {
+ console.log("Stopping deployment...");
+
+ } else {
+ console.log("Starting deployment...");
+ }
+ setIsDeploying(!isDeploying);
+ };
+
+ return (
+ <>
+
+ >
+ );
+}
diff --git a/frontend/components/editor/navbar/index.tsx b/frontend/components/editor/navbar/index.tsx
index 413200b..9c4a123 100644
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@@ -11,6 +11,7 @@ import { useState } from "react";
import EditSandboxModal from "./edit";
import ShareSandboxModal from "./share";
import { Avatars } from "../live/avatars";
+import DeployButtonModal from "./deploy";
export default function Navbar({
userData,
@@ -66,10 +67,13 @@ export default function Navbar({
{isOwner ? (
-
+ <>
+
+
+ >
) : null}