diff --git a/app/admin/dashboard.tsx b/app/admin/dashboard.tsx
index 047b49f97..638ba04eb 100644
--- a/app/admin/dashboard.tsx
+++ b/app/admin/dashboard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useActionState } from 'react';
+import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Trash2, Loader2 } from 'lucide-react';
@@ -37,14 +37,72 @@ function DashboardHeader() {
   );
 }
 
+function TenantCard({
+  tenant,
+  onDelete
+}: {
+  tenant: Tenant;
+  onDelete: (result: DeleteState) => void;
+}) {
+  const [isPending, startTransition] = useTransition();
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      const formData = new FormData();
+      formData.append('subdomain', tenant.subdomain);
+      const result = await deleteSubdomainAction({}, formData);
+      onDelete(result);
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-xl">{tenant.subdomain}</CardTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleDelete}
+            disabled={isPending}
+            className="text-gray-500 hover:text-gray-700 hover:bg-gray-50"
+          >
+            {isPending ? (
+              <Loader2 className="h-5 w-5 animate-spin" />
+            ) : (
+              <Trash2 className="h-5 w-5" />
+            )}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div className="text-4xl">{tenant.emoji}</div>
+          <div className="text-sm text-gray-500">
+            Created: {new Date(tenant.createdAt).toLocaleDateString()}
+          </div>
+        </div>
+        <div className="mt-4">
+          <a
+            href={`${protocol}://${tenant.subdomain}.${rootDomain}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:underline text-sm"
+          >
+            Visit subdomain →
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 function TenantGrid({
   tenants,
-  action,
-  isPending
+  onDelete
 }: {
   tenants: Tenant[];
-  action: (formData: FormData) => void;
-  isPending: boolean;
+  onDelete: (result: DeleteState) => void;
 }) {
   if (tenants.length === 0) {
     return (
@@ -59,76 +117,34 @@ function TenantGrid({
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
       {tenants.map((tenant) => (
-        <Card key={tenant.subdomain}>
-          <CardHeader className="pb-2">
-            <div className="flex items-center justify-between">
-              <CardTitle className="text-xl">{tenant.subdomain}</CardTitle>
-              <form action={action}>
-                <input
-                  type="hidden"
-                  name="subdomain"
-                  value={tenant.subdomain}
-                />
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  type="submit"
-                  disabled={isPending}
-                  className="text-gray-500 hover:text-gray-700 hover:bg-gray-50"
-                >
-                  {isPending ? (
-                    <Loader2 className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <Trash2 className="h-5 w-5" />
-                  )}
-                </Button>
-              </form>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center justify-between">
-              <div className="text-4xl">{tenant.emoji}</div>
-              <div className="text-sm text-gray-500">
-                Created: {new Date(tenant.createdAt).toLocaleDateString()}
-              </div>
-            </div>
-            <div className="mt-4">
-              <a
-                href={`${protocol}://${tenant.subdomain}.${rootDomain}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-500 hover:underline text-sm"
-              >
-                Visit subdomain →
-              </a>
-            </div>
-          </CardContent>
-        </Card>
+        <TenantCard key={tenant.subdomain} tenant={tenant} onDelete={onDelete} />
       ))}
     </div>
   );
 }
 
 export function AdminDashboard({ tenants }: { tenants: Tenant[] }) {
-  const [state, action, isPending] = useActionState<DeleteState, FormData>(
-    deleteSubdomainAction,
-    {}
-  );
+  const [message, setMessage] = useState<DeleteState>({});
+
+  const handleDelete = (result: DeleteState) => {
+    setMessage(result);
+    setTimeout(() => setMessage({}), 3000);
+  };
 
   return (
     <div className="space-y-6 relative p-4 md:p-8">
       <DashboardHeader />
-      <TenantGrid tenants={tenants} action={action} isPending={isPending} />
+      <TenantGrid tenants={tenants} onDelete={handleDelete} />
 
-      {state.error && (
+      {message.error && (
         <div className="fixed bottom-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded shadow-md">
-          {state.error}
+          {message.error}
         </div>
       )}
 
-      {state.success && (
+      {message.success && (
         <div className="fixed bottom-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded shadow-md">
-          {state.success}
+          {message.success}
         </div>
       )}
     </div>