diff --git a/backend/database/src/index.ts b/backend/database/src/index.ts
index d6f02a8..81df8bf 100644
--- a/backend/database/src/index.ts
+++ b/backend/database/src/index.ts
@@ -49,7 +49,8 @@ export default {
 				const params = url.searchParams;
 				if (params.has("id")) {
 					const id = params.get("id") as string;
-					const res = await db.delete(sandbox).where(eq(sandbox.id, id)).get();
+					await db.delete(usersToSandboxes).where(eq(usersToSandboxes.sandboxId, id));
+					await db.delete(sandbox).where(eq(sandbox.id, id));
 					return success;
 				} else {
 					return invalidRequest;
diff --git a/frontend/components/editor/navbar/edit.tsx b/frontend/components/editor/navbar/edit.tsx
index 4d4c3bb..f95dbe1 100644
--- a/frontend/components/editor/navbar/edit.tsx
+++ b/frontend/components/editor/navbar/edit.tsx
@@ -33,6 +33,8 @@ import { Loader2 } from "lucide-react"
 import { useState } from "react"
 import { Sandbox } from "@/lib/types"
 import { Button } from "@/components/ui/button"
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
+import { useRouter } from "next/navigation"
 
 const formSchema = z.object({
   name: z.string().min(1).max(16),
@@ -49,6 +51,9 @@ export default function EditSandboxModal({
   data: Sandbox
 }) {
   const [loading, setLoading] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)
+
+  const router = useRouter()
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -59,12 +64,19 @@ export default function EditSandboxModal({
   })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    // if (!user.isSignedIn) return
-    // const sandboxData = { type: selected, userId: user.user.id, ...values }
-    // setLoading(true)
-    // const id = await createSandbox(sandboxData)
-
     console.log(values)
+
+    setLoading(true)
+    await updateSandbox({ id: data.id, ...values })
+
+    setLoading(false)
+  }
+
+  async function onDelete() {
+    setLoadingDelete(true)
+    await deleteSandbox(data.id)
+
+    router.push("/dashboard")
   }
 
   return (
@@ -119,11 +131,25 @@ export default function EditSandboxModal({
                   <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
                 </>
               ) : (
-                "Submit"
+                "Update Sandbox"
               )}
             </Button>
           </form>
         </Form>
+        <Button
+          disabled={loadingDelete}
+          onClick={onDelete}
+          className="w-full"
+          variant="destructive"
+        >
+          {loadingDelete ? (
+            <>
+              <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+            </>
+          ) : (
+            "Delete Sandbox"
+          )}
+        </Button>
       </DialogContent>
     </Dialog>
   )
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 0f3a6f6..06ff53f 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "border border-destructive bg-background shadow-sm hover:bg-destructive/20 text-destructive",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: