diff --git a/pages/orgs/[orgName]/settings/danger.vue b/pages/orgs/[orgName]/settings/danger.vue
index ea390d6..3bdc558 100644
--- a/pages/orgs/[orgName]/settings/danger.vue
+++ b/pages/orgs/[orgName]/settings/danger.vue
@@ -2,10 +2,10 @@
     <span class="text-lg">Do you really mean to delete this org? Type below "<span data-testid="org_name_span">{{
         orgName
             }}</span>"</span>
-    <form ref="form" class="mt-5" action="/api/orgs/delete-org" method="get">
+    <form ref="form" class="mt-5" @submit.prevent="deleteOrg">
         <div class="flex flex-col gap-3 justify-start items-start">
             <InputText name="orgName" data-testid="orgName" placeholder='Here type your org id' required />
-            <Button type="submit" label="Delete" severity="danger" data-testid="deleteOrgBtn" />
+            <Button type="submit" label="Delete" severity="danger" data-testid="deleteOrgBtn" :loading="isPending" />
         </div>
     </form>
 </template>
@@ -32,4 +32,20 @@ if (import.meta.client) {
         }
     })
 }
+
+const { mutate: deleteOrg, isPending } = useMutation({
+    mutationFn: async (r: any) => {
+        const request = getObjectForm(r)
+        const e = await $fetch.raw('/api/orgs/delete-org', {
+            method: 'get',
+            query: request,
+        });
+        if (e.ok) {
+            navigateTo({
+                name: 'apps',
+                replace: true,
+            });
+        }
+    }
+})
 </script>
diff --git a/server/api/orgs/delete-org.get.ts b/server/api/orgs/delete-org.get.ts
index 275f49b..918c630 100644
--- a/server/api/orgs/delete-org.get.ts
+++ b/server/api/orgs/delete-org.get.ts
@@ -31,5 +31,7 @@ export default defineEventHandler(async (event) => {
             .where(eq(tables.organizations.id, org.id)),
     ])
 
-    await sendRedirect(event, '/apps')
+    return {
+        deleted: 1,
+    }
 })