From f47f1be6a52ddc7a0c96b020c0f187d4e2889b86 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Fri, 29 May 2026 08:30:03 +0100
Subject: [PATCH 1/8] wip

---
 .../js/components/dialogs/dialog-host.tsx     | 32 ++++++++++++++
 .../components/dialogs/log-viewer-dialog.tsx  | 39 ++++++++++++++++
 resources/js/components/dialogs/registry.ts   | 24 ++++++++++
 resources/js/hooks/use-dialog.ts              | 27 ++++++++++++
 resources/js/layouts/app/layout.tsx           |  6 ++-
 .../pages/server-logs/components/columns.tsx  | 37 +++-------------
 .../pages/server-ssls/components/columns.tsx  |  4 +-
 .../services/components/installation-log.tsx  | 44 ++++---------------
 resources/js/stores/dialog-store.ts           | 21 +++++++++
 9 files changed, 163 insertions(+), 71 deletions(-)
 create mode 100644 resources/js/components/dialogs/dialog-host.tsx
 create mode 100644 resources/js/components/dialogs/log-viewer-dialog.tsx
 create mode 100644 resources/js/components/dialogs/registry.ts
 create mode 100644 resources/js/hooks/use-dialog.ts
 create mode 100644 resources/js/stores/dialog-store.ts

diff --git a/resources/js/components/dialogs/dialog-host.tsx b/resources/js/components/dialogs/dialog-host.tsx
new file mode 100644
index 000000000..99cbfa50c
--- /dev/null
+++ b/resources/js/components/dialogs/dialog-host.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import type { ComponentType } from 'react';
+import { router } from '@inertiajs/react';
+import { useDialogStore } from '@/stores/dialog-store';
+import { dialogs, type DialogControlProps } from './registry';
+
+export default function DialogHost() {
+  const active = useDialogStore((s) => s.active);
+
+  useEffect(() => {
+    return router.on('start', () => useDialogStore.getState().close());
+  }, []);
+
+  if (!active) {
+    return null;
+  }
+
+  const Component = dialogs[active.key] as ComponentType<typeof active.props & DialogControlProps> | undefined;
+
+  if (!Component) {
+    return null;
+  }
+
+  return (
+    <Component
+      key={active.key}
+      open
+      onOpenChange={(o: boolean) => !o && useDialogStore.getState().close()}
+      {...active.props}
+    />
+  );
+}
diff --git a/resources/js/components/dialogs/log-viewer-dialog.tsx b/resources/js/components/dialogs/log-viewer-dialog.tsx
new file mode 100644
index 000000000..c92165f7e
--- /dev/null
+++ b/resources/js/components/dialogs/log-viewer-dialog.tsx
@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import LogOutput from '@/components/log-output';
+import { useLogContent } from '@/hooks/use-log-content';
+
+type LogViewerDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  logId: number;
+  title: string;
+};
+
+export default function LogViewerDialog({ open, onOpenChange, serverId, logId, title }: LogViewerDialogProps) {
+  const { content, isLoading, error } = useLogContent({ serverId, logId, enabled: open });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="sr-only">Log contents</DialogDescription>
+        </DialogHeader>
+        <LogOutput>
+          <>
+            {isLoading && 'Loading...'}
+            {error && <div className="text-destructive">Error: {error}</div>}
+            {content && !error && content}
+          </>
+        </LogOutput>
+        <DialogFooter>
+          <a href={route('logs.download', { server: serverId, log: logId })} target="_blank">
+            <Button variant="outline">Download</Button>
+          </a>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/components/dialogs/registry.ts b/resources/js/components/dialogs/registry.ts
new file mode 100644
index 000000000..4066964d4
--- /dev/null
+++ b/resources/js/components/dialogs/registry.ts
@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react';
+import LogViewerDialog from './log-viewer-dialog';
+
+export type DialogControlProps = { open: boolean; onOpenChange: (open: boolean) => void };
+
+/**
+ * Registry of all app-level dialogs that can be opened via `useDialog()`.
+ *
+ * Authorization contract: every registered consumer is responsible for
+ * ensuring its props come from server-authorised sources (Inertia page
+ * props, API resources, etc.), not from URL parameters or other
+ * user-controlled input. The registry pattern itself carries no authz.
+ *
+ * To register a new dialog: add one entry here, mapping a typed key to the
+ * component. Consumers immediately gain `dialog.<key>.open(props)` with
+ * full IntelliSense for the prop shape.
+ */
+export const dialogs = {
+  logViewer: LogViewerDialog,
+} as const satisfies Record<string, ComponentType<any>>;
+
+export type DialogRegistry = typeof dialogs;
+
+export type ConsumerProps<C> = C extends ComponentType<infer P> ? Omit<P, keyof DialogControlProps> : never;
diff --git a/resources/js/hooks/use-dialog.ts b/resources/js/hooks/use-dialog.ts
new file mode 100644
index 000000000..1ac142288
--- /dev/null
+++ b/resources/js/hooks/use-dialog.ts
@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useDialogStore } from '@/stores/dialog-store';
+import { dialogs, type DialogRegistry, type ConsumerProps } from '@/components/dialogs/registry';
+
+type DialogAccessor = {
+  -readonly [K in keyof DialogRegistry]: {
+    open: (props: ConsumerProps<DialogRegistry[K]>) => void;
+    close: () => void;
+  };
+};
+
+function entryFor<K extends keyof DialogRegistry>(key: K) {
+  return {
+    open: (props: ConsumerProps<DialogRegistry[K]>) => useDialogStore.getState().open(key, props),
+    close: () => useDialogStore.getState().close(),
+  };
+}
+
+export function useDialog(): DialogAccessor {
+  return useMemo(() => {
+    const accessor = {} as DialogAccessor;
+    (Object.keys(dialogs) as Array<keyof DialogRegistry>).forEach((key) => {
+      accessor[key] = entryFor(key) as DialogAccessor[typeof key];
+    });
+    return accessor;
+  }, []);
+}
diff --git a/resources/js/layouts/app/layout.tsx b/resources/js/layouts/app/layout.tsx
index 0232b0ace..c09176e52 100644
--- a/resources/js/layouts/app/layout.tsx
+++ b/resources/js/layouts/app/layout.tsx
@@ -13,6 +13,7 @@ import { type SocketEventData, useSocketEvents, useSocketListener } from '@/hook
 import { useBootstrapStore } from '@/stores/bootstrap-store';
 import { Button } from '@/components/ui/button';
 import { AlertCircleIcon } from 'lucide-react';
+import DialogHost from '@/components/dialogs/dialog-host';
 
 export default function Layout({
   children,
@@ -101,7 +102,10 @@ export default function Layout({
                   </div>
                 </div>
               ) : bootstrapConfigsLoaded ? (
-                children
+                <>
+                  {children}
+                  <DialogHost />
+                </>
               ) : null}
             </div>
             <Toaster richColors position="bottom-center" />
diff --git a/resources/js/pages/server-logs/components/columns.tsx b/resources/js/pages/server-logs/components/columns.tsx
index a9441f68a..b93a4a8bb 100644
--- a/resources/js/pages/server-logs/components/columns.tsx
+++ b/resources/js/pages/server-logs/components/columns.tsx
@@ -14,43 +14,18 @@ import {
 } from '@/components/ui/dialog';
 import { ReactNode, useState } from 'react';
 import DateTime from '@/components/date-time';
-import LogOutput from '@/components/log-output';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { useForm } from '@inertiajs/react';
 import FormSuccessful from '@/components/form-successful';
-import { useLogContent } from '@/hooks/use-log-content';
+import { useDialog } from '@/hooks/use-dialog';
 
-export function View({ serverLog, children }: { serverLog: ServerLog; children?: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
-  const { content, isLoading, error } = useLogContent({
-    serverId: serverLog.server_id,
-    logId: serverLog.id,
-    enabled: open,
-  });
+export function View({ serverLog, label = 'View' }: { serverLog: ServerLog; label?: string }) {
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children ? children : <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>}</DialogTrigger>
-      <DialogContent className="sm:max-w-5xl">
-        <DialogHeader>
-          <DialogTitle>View Log</DialogTitle>
-          <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
-        </DialogHeader>
-        <LogOutput>
-          <>
-            {isLoading && 'Loading...'}
-            {error && <div className="text-red-500">Error: {error}</div>}
-            {content && !error && content}
-          </>
-        </LogOutput>
-        <DialogFooter>
-          <Download serverLog={serverLog}>
-            <Button variant="outline">Download</Button>
-          </Download>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem onSelect={() => dialog.logViewer.open({ serverId: serverLog.server_id, logId: serverLog.id, title: label })}>
+      {label}
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/server-ssls/components/columns.tsx b/resources/js/pages/server-ssls/components/columns.tsx
index 8f71279ff..55764b371 100644
--- a/resources/js/pages/server-ssls/components/columns.tsx
+++ b/resources/js/pages/server-ssls/components/columns.tsx
@@ -195,9 +195,7 @@ export const columns: ColumnDef<SSL>[] = [
               )}
               {row.original.log && (
                 <>
-                  <View serverLog={row.original.log}>
-                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View Log</DropdownMenuItem>
-                  </View>
+                  <View serverLog={row.original.log} label="View Log" />
                   <DropdownMenuSeparator />
                 </>
               )}
diff --git a/resources/js/pages/services/components/installation-log.tsx b/resources/js/pages/services/components/installation-log.tsx
index 578d5ae9b..19e182162 100644
--- a/resources/js/pages/services/components/installation-log.tsx
+++ b/resources/js/pages/services/components/installation-log.tsx
@@ -1,47 +1,19 @@
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import LogOutput from '@/components/log-output';
 import { Service } from '@/types/service';
-import { ReactNode, useState } from 'react';
-import { useLogContent } from '@/hooks/use-log-content';
+import { useDialog } from '@/hooks/use-dialog';
 
-export default function InstallationLog({ service, children }: { service: Service; children?: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
-  const { content, isLoading, error } = useLogContent({
-    serverId: service.server_id,
-    logId: service.log?.id ?? 0,
-    enabled: open && !!service.log,
-  });
+export default function InstallationLog({ service }: { service: Service }) {
+  const dialog = useDialog();
 
   if (!service.log) {
     return null;
   }
 
+  const logId = service.log.id;
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {children ? children : <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Installation Log</DropdownMenuItem>}
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-5xl">
-        <DialogHeader>
-          <DialogTitle>Installation Log</DialogTitle>
-          <DialogDescription className="sr-only">Installation log for {service.name}</DialogDescription>
-        </DialogHeader>
-        <LogOutput>
-          <>
-            {isLoading && 'Loading...'}
-            {error && <div className="text-red-500">Error: {error}</div>}
-            {content && !error && content}
-          </>
-        </LogOutput>
-        <DialogFooter>
-          <a href={route('logs.download', { server: service.server_id, log: service.log.id })} target="_blank">
-            <Button variant="outline">Download</Button>
-          </a>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem onSelect={() => dialog.logViewer.open({ serverId: service.server_id, logId, title: 'Installation Log' })}>
+      Installation Log
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/stores/dialog-store.ts b/resources/js/stores/dialog-store.ts
new file mode 100644
index 000000000..422fedc5f
--- /dev/null
+++ b/resources/js/stores/dialog-store.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import type { DialogRegistry, ConsumerProps } from '@/components/dialogs/registry';
+
+export type ActiveDialog = {
+  [K in keyof DialogRegistry]: { key: K; props: ConsumerProps<DialogRegistry[K]> };
+}[keyof DialogRegistry];
+
+type DialogStore = {
+  active: ActiveDialog | null;
+  open: <K extends keyof DialogRegistry>(key: K, props: ConsumerProps<DialogRegistry[K]>) => void;
+  close: () => void;
+};
+
+export const useDialogStore = create<DialogStore>((set) => ({
+  active: null,
+  open: (key, props) =>
+    // TS cannot narrow the mapped-type union from correlated generics —
+    // `key` and `props` come from the same call so the cast is safe.
+    set({ active: { key, props } as ActiveDialog }),
+  close: () => set({ active: null }),
+}));

From cbfc205a773259cf2e1bd5f94e0f68da4de25b15 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 17:14:37 +0100
Subject: [PATCH 2/8] refactor

---
 app/Tables/Servers/FirewallRuleTable.php      |   4 +-
 .../dialogs/activate-server-ssl-dialog.tsx    |  83 +++++++++
 .../dialogs/confirmation-dialog.tsx           |  86 +++++++++
 .../js/components/dialogs/dialog-host.tsx     |  10 +-
 .../components/dialogs/log-viewer-dialog.tsx  |   2 +-
 .../dialogs/php-extensions-dialog.tsx         |  90 +++++++++
 .../js/components/dialogs/php-ini-dialog.tsx  | 110 +++++++++++
 .../components/dialogs/plugin-logs-dialog.tsx | 109 +++++++++++
 resources/js/components/dialogs/registry.ts   |  51 +++++
 .../components/dialogs/worker-logs-dialog.tsx |  41 ++++
 resources/js/components/server-banners.tsx    |  45 +++--
 resources/js/hooks/use-dialog.ts              |   2 +-
 .../js/pages/api-keys/components/columns.tsx  |  67 ++-----
 .../js/pages/backups/components/columns.tsx   |  81 +++-----
 .../pages/backups/components/edit-backup.tsx  |  25 +--
 .../pages/backups/components/file-columns.tsx |  87 +++------
 .../backups/components/restore-backup.tsx     |  35 +---
 .../js/pages/commands/components/columns.tsx  |  77 +++-----
 .../commands/components/edit-command.tsx      |  26 +--
 .../js/pages/cronjobs/components/columns.tsx  | 116 +++++-------
 .../js/pages/cronjobs/components/form.tsx     |  41 +---
 resources/js/pages/cronjobs/index.tsx         |  13 +-
 .../database-users/components/columns.tsx     | 141 +++-----------
 .../components/edit-database-user.tsx         | 134 +++----------
 .../database-users/components/link-dialog.tsx |  77 ++++++++
 .../js/pages/databases/components/delete.tsx  |  71 ++-----
 .../pages/dns-providers/components/delete.tsx |  71 ++-----
 .../dns-providers/components/edit-dialog.tsx  |  94 ++++++++++
 .../pages/dns-providers/components/edit.tsx   |  96 +---------
 .../js/pages/domains/components/columns.tsx   |  73 ++------
 .../domains/components/record-columns.tsx     |  95 +++-------
 .../pages/domains/components/record-form.tsx  |  48 +----
 resources/js/pages/domains/show.tsx           |  13 +-
 .../js/pages/firewall/components/delete.tsx   |  71 ++-----
 .../js/pages/firewall/components/form.tsx     |  31 +--
 resources/js/pages/firewall/index.tsx         |  22 +--
 .../components/create-hosted-domain.tsx       |  84 +++------
 .../components/edit-hosted-domain.tsx         |  50 ++---
 resources/js/pages/hosted-domains/index.tsx   | 169 ++++-------------
 .../pages/monitoring/components/actions.tsx   | 153 +++------------
 .../components/data-retention-dialog.tsx      |  74 ++++++++
 .../components/delete.tsx                     |  71 ++-----
 .../components/edit-dialog.tsx                |  76 ++++++++
 .../notification-channels/components/edit.tsx |  82 +-------
 .../js/pages/php/components/default-cli.tsx   |  73 ++------
 .../js/pages/php/components/extensions.tsx    |  95 +---------
 resources/js/pages/php/components/ini.tsx     | 105 +----------
 .../pages/plugins/components/delete-logs.tsx  |  70 ++-----
 .../js/pages/plugins/components/disable.tsx   |  73 ++------
 .../js/pages/plugins/components/enable.tsx    |  69 ++-----
 .../js/pages/plugins/components/install.tsx   |  69 ++-----
 .../js/pages/plugins/components/installed.tsx |   9 +-
 .../js/pages/plugins/components/uninstall.tsx |  76 ++------
 .../js/pages/plugins/components/update.tsx    |  69 ++-----
 .../js/pages/plugins/components/view-logs.tsx | 117 +-----------
 .../pages/projects/components/invitations.tsx | 114 ++++--------
 .../js/pages/redirects/components/columns.tsx |  74 ++------
 .../js/pages/scripts/components/columns.tsx   |  77 +++-----
 .../js/pages/scripts/components/form.tsx      |  29 ++-
 resources/js/pages/scripts/index.tsx          |  41 ++--
 .../pages/server-logs/components/columns.tsx  | 121 ++++--------
 .../server-providers/components/delete.tsx    |  71 ++-----
 .../components/edit-dialog.tsx                |  76 ++++++++
 .../server-providers/components/edit.tsx      |  82 +-------
 .../server-ssh-keys/components/delete.tsx     |  76 ++------
 .../components/activate-server-ssl.tsx        |  89 +--------
 .../pages/server-ssls/components/columns.tsx  |  75 ++------
 .../js/pages/servers/components/actions.tsx   |  41 +++-
 .../servers/components/reboot-server.tsx      |  58 ------
 .../servers/components/update-server.tsx      |  62 ------
 .../js/pages/services/components/action.tsx   |  78 ++------
 .../components/config-file-dialog.tsx         | 106 +++++++++++
 .../pages/services/components/config-file.tsx | 101 +---------
 .../pages/services/components/uninstall.tsx   |  69 ++-----
 .../source-controls/components/columns.tsx    | 176 +++---------------
 .../components/edit-dialog.tsx                | 109 +++++++++++
 .../js/pages/ssh-keys/components/delete.tsx   |  65 ++-----
 .../storage-providers/components/delete.tsx   |  71 ++-----
 .../components/edit-dialog.tsx                |  76 ++++++++
 .../storage-providers/components/edit.tsx     |  82 +-------
 .../js/pages/workers/components/columns.tsx   | 127 +++++--------
 .../js/pages/workers/components/form.tsx      |  52 ++----
 .../workers/components/worker-row-actions.tsx | 103 ++--------
 resources/js/pages/workers/index.tsx          |  13 +-
 resources/js/stores/dialog-store.ts           |  25 ++-
 85 files changed, 2385 insertions(+), 3776 deletions(-)
 create mode 100644 resources/js/components/dialogs/activate-server-ssl-dialog.tsx
 create mode 100644 resources/js/components/dialogs/confirmation-dialog.tsx
 create mode 100644 resources/js/components/dialogs/php-extensions-dialog.tsx
 create mode 100644 resources/js/components/dialogs/php-ini-dialog.tsx
 create mode 100644 resources/js/components/dialogs/plugin-logs-dialog.tsx
 create mode 100644 resources/js/components/dialogs/worker-logs-dialog.tsx
 create mode 100644 resources/js/pages/database-users/components/link-dialog.tsx
 create mode 100644 resources/js/pages/dns-providers/components/edit-dialog.tsx
 create mode 100644 resources/js/pages/monitoring/components/data-retention-dialog.tsx
 create mode 100644 resources/js/pages/notification-channels/components/edit-dialog.tsx
 create mode 100644 resources/js/pages/server-providers/components/edit-dialog.tsx
 delete mode 100644 resources/js/pages/servers/components/reboot-server.tsx
 delete mode 100644 resources/js/pages/servers/components/update-server.tsx
 create mode 100644 resources/js/pages/services/components/config-file-dialog.tsx
 create mode 100644 resources/js/pages/source-controls/components/edit-dialog.tsx
 create mode 100644 resources/js/pages/storage-providers/components/edit-dialog.tsx

diff --git a/app/Tables/Servers/FirewallRuleTable.php b/app/Tables/Servers/FirewallRuleTable.php
index bbe6fb939..c01fb7ab9 100644
--- a/app/Tables/Servers/FirewallRuleTable.php
+++ b/app/Tables/Servers/FirewallRuleTable.php
@@ -22,9 +22,9 @@ protected function columns(): array
     {
         return [
             TextColumn::make('name', 'Name')->sortable(),
-            TextColumn::make('type', 'Type')->uppercase()->sortable(),
+            TextColumn::make('type', 'Type')->sortable(),
             TextColumn::make('source', 'Source')->fallback('any')->sortable(),
-            TextColumn::make('protocol', 'Protocol')->uppercase()->sortable(),
+            TextColumn::make('protocol', 'Protocol')->sortable(),
             TextColumn::make('port', 'Port')->sortable(),
             EnumColumn::make('status', 'Status')->sortable(),
             Column::data('id'),
diff --git a/resources/js/components/dialogs/activate-server-ssl-dialog.tsx b/resources/js/components/dialogs/activate-server-ssl-dialog.tsx
new file mode 100644
index 000000000..b39836975
--- /dev/null
+++ b/resources/js/components/dialogs/activate-server-ssl-dialog.tsx
@@ -0,0 +1,83 @@
+import { FormEvent } from 'react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Textarea } from '@/components/ui/textarea';
+
+type ActivateServerSslDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  sslId: number;
+};
+
+export default function ActivateServerSslDialog({ open, onOpenChange, serverId, sslId }: ActivateServerSslDialogProps) {
+  const form = useForm<{ certificate: string; ca: string }>({
+    certificate: '',
+    ca: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('server-ssls.activate', { server: serverId, ssl: sslId }), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full lg:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <SheetHeader>
+          <SheetTitle>Activate SSL</SheetTitle>
+          <SheetDescription>Install a signed certificate from your Certificate Authority.</SheetDescription>
+        </SheetHeader>
+        <Form id="activate-server-ssl-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="certificate">Certificate (PEM)</Label>
+              <Textarea
+                id="certificate"
+                name="certificate"
+                placeholder="-----BEGIN CERTIFICATE-----"
+                rows={6}
+                className="field-sizing-fixed overflow-y-auto"
+                value={form.data.certificate}
+                onChange={(e) => form.setData('certificate', e.target.value)}
+              />
+              <InputError message={form.errors.certificate} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="ca">CA Bundle (optional)</Label>
+              <Textarea
+                id="ca"
+                name="ca"
+                placeholder="-----BEGIN CERTIFICATE-----"
+                rows={6}
+                className="field-sizing-fixed overflow-y-auto"
+                value={form.data.ca}
+                onChange={(e) => form.setData('ca', e.target.value)}
+              />
+              <InputError message={form.errors.ca} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button type="submit" form="activate-server-ssl-form" disabled={form.processing}>
+              {form.processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />} Activate
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline" disabled={form.processing}>
+                Cancel
+              </Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/resources/js/components/dialogs/confirmation-dialog.tsx b/resources/js/components/dialogs/confirmation-dialog.tsx
new file mode 100644
index 000000000..c7c4f4fea
--- /dev/null
+++ b/resources/js/components/dialogs/confirmation-dialog.tsx
@@ -0,0 +1,86 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useForm } from '@inertiajs/react';
+import type { VisitOptions } from '@inertiajs/core';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import InputError from '@/components/ui/input-error';
+
+export type ConfirmationDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  variant?: 'default' | 'destructive';
+  method: 'delete' | 'post' | 'patch' | 'put';
+  url: string;
+  data?: Record<string, string | number | boolean | null>;
+  options?: VisitOptions;
+  onSuccess?: () => void;
+};
+
+export default function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  variant = 'default',
+  method,
+  url,
+  data,
+  options,
+  onSuccess,
+}: ConfirmationDialogProps) {
+  const form = useForm<Record<string, string | number | boolean | null>>(data ?? {});
+
+  const submit = () => {
+    const visitOptions: VisitOptions = {
+      preserveScroll: true,
+      ...options,
+      onSuccess: () => {
+        onOpenChange(false);
+        onSuccess?.();
+      },
+    };
+    if (method === 'delete') {
+      form.delete(url, visitOptions);
+    } else if (method === 'post') {
+      form.post(url, visitOptions);
+    } else if (method === 'patch') {
+      form.patch(url, visitOptions);
+    } else {
+      form.put(url, visitOptions);
+    }
+  };
+
+  const errors = Object.values(form.errors) as string[];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="sr-only">{description ?? title}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          {description && <p>{description}</p>}
+          {errors.map((error, index) => (
+            <InputError key={index} message={error} />
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant={variant} disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/components/dialogs/dialog-host.tsx b/resources/js/components/dialogs/dialog-host.tsx
index 99cbfa50c..dd3bf682c 100644
--- a/resources/js/components/dialogs/dialog-host.tsx
+++ b/resources/js/components/dialogs/dialog-host.tsx
@@ -6,9 +6,10 @@ import { dialogs, type DialogControlProps } from './registry';
 
 export default function DialogHost() {
   const active = useDialogStore((s) => s.active);
+  const instanceId = useDialogStore((s) => s.instanceId);
 
   useEffect(() => {
-    return router.on('start', () => useDialogStore.getState().close());
+    return router.on('navigate', () => useDialogStore.getState().close());
   }, []);
 
   if (!active) {
@@ -22,11 +23,6 @@ export default function DialogHost() {
   }
 
   return (
-    <Component
-      key={active.key}
-      open
-      onOpenChange={(o: boolean) => !o && useDialogStore.getState().close()}
-      {...active.props}
-    />
+    <Component key={`${active.key}:${instanceId}`} open onOpenChange={(o: boolean) => !o && useDialogStore.getState().close()} {...active.props} />
   );
 }
diff --git a/resources/js/components/dialogs/log-viewer-dialog.tsx b/resources/js/components/dialogs/log-viewer-dialog.tsx
index c92165f7e..351f1129d 100644
--- a/resources/js/components/dialogs/log-viewer-dialog.tsx
+++ b/resources/js/components/dialogs/log-viewer-dialog.tsx
@@ -16,7 +16,7 @@ export default function LogViewerDialog({ open, onOpenChange, serverId, logId, t
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-5xl">
+      <DialogContent className="sm:max-w-5xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription className="sr-only">Log contents</DialogDescription>
diff --git a/resources/js/components/dialogs/php-extensions-dialog.tsx b/resources/js/components/dialogs/php-extensions-dialog.tsx
new file mode 100644
index 000000000..f3056524d
--- /dev/null
+++ b/resources/js/components/dialogs/php-extensions-dialog.tsx
@@ -0,0 +1,90 @@
+import { Service } from '@/types/service';
+import { FormEvent } from 'react';
+import { useForm } from '@inertiajs/react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import InputError from '@/components/ui/input-error';
+import { useConfigs } from '@/stores/bootstrap-store';
+
+export default function PhpExtensionsDialog({
+  open,
+  onOpenChange,
+  service,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  service: Service;
+}) {
+  const configs = useConfigs()!;
+  const form = useForm<{
+    extension: string;
+    version: string;
+  }>({
+    extension: '',
+    version: service.version,
+  });
+  const [, php] = Object.entries(configs.service.services).filter(([key]) => key === 'php')[0] || null;
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('php.install-extension', { server: service.server_id, service: service.id }), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  if (!php) {
+    return null;
+  }
+
+  const availableExtensions = Array.isArray(service.type_data?.available_extensions)
+    ? service.type_data.available_extensions
+    : Array.isArray(php.data?.extensions)
+      ? php.data.extensions
+      : Object.values(service.type_data?.available_extensions || php.data?.extensions || {});
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Install extension</DialogTitle>
+          <DialogDescription className="sr-only">Install php extension</DialogDescription>
+        </DialogHeader>
+        <Form id="install-extension-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="extension">Extension</Label>
+              <Select value={form.data.extension} onValueChange={(value) => form.setData('extension', value)}>
+                <SelectTrigger id="extension">
+                  <SelectValue placeholder="Select an extension" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {availableExtensions.map((extension: string) => (
+                      <SelectItem key={`extension-${extension}`} value={extension} disabled={service.type_data?.extensions?.includes(extension)}>
+                        {extension} {service.type_data?.extensions?.includes(extension) && <span>(installed)</span>}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.extension} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="install-extension-form" type="submit" disabled={form.processing} className="ml-2">
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Install
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/components/dialogs/php-ini-dialog.tsx b/resources/js/components/dialogs/php-ini-dialog.tsx
new file mode 100644
index 000000000..1dc4b040b
--- /dev/null
+++ b/resources/js/components/dialogs/php-ini-dialog.tsx
@@ -0,0 +1,110 @@
+import { Service } from '@/types/service';
+import { FormEvent, useEffect } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Form } from '@/components/ui/form';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { registerIniLanguage } from '@/lib/editor';
+import { useAppearance } from '@/hooks/use-appearance';
+import { useInputFocus } from '@/stores/useInputFocus';
+
+export default function PhpIniDialog({
+  open,
+  onOpenChange,
+  service,
+  type,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  service: Service;
+  type: 'fpm' | 'cli';
+}) {
+  const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
+  const form = useForm<{
+    ini: string;
+    type: 'fpm' | 'cli';
+    version: string;
+  }>({
+    ini: '',
+    type: type,
+    version: service.version,
+  });
+
+  useEffect(() => {
+    setFocused(open);
+  }, [open, setFocused]);
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('php.ini.update', { server: service.server_id, service: service.id }), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  const query = useQuery({
+    queryKey: ['php.ini', service.server_id, service.id, type],
+    queryFn: async () => {
+      const response = await axios.get(
+        route('php.ini', {
+          server: service.server_id,
+          service: service.id,
+          version: service.version,
+          type: type,
+        }),
+      );
+      if (response.data?.ini) {
+        form.setData('ini', response.data.ini);
+      }
+      return response.data;
+    },
+    retry: false,
+    enabled: open,
+    refetchOnWindowFocus: false,
+  });
+
+  registerIniLanguage(useMonaco());
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-5xl" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <SheetHeader>
+          <SheetTitle>Edit {type} ini</SheetTitle>
+          <SheetDescription className="sr-only">You can edit the {type} ini file for this service. Make sure to save your changes.</SheetDescription>
+        </SheetHeader>
+        <Form id="update-ini-form" className="h-full" onSubmit={submit}>
+          {query.isSuccess ? (
+            <Editor
+              defaultLanguage="ini"
+              value={query.data.ini}
+              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+              className="h-full"
+              onChange={(value) => form.setData('ini', value ?? '')}
+              options={{
+                fontSize: 15,
+              }}
+            />
+          ) : (
+            <Skeleton className="h-full w-full rounded-none" />
+          )}
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-ini-form" type="submit" disabled={form.processing || query.isLoading} className="ml-2">
+              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/resources/js/components/dialogs/plugin-logs-dialog.tsx b/resources/js/components/dialogs/plugin-logs-dialog.tsx
new file mode 100644
index 000000000..c7f91ec56
--- /dev/null
+++ b/resources/js/components/dialogs/plugin-logs-dialog.tsx
@@ -0,0 +1,109 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardRow } from '@/components/ui/card';
+import { ChevronDownIcon, ChevronRightIcon, FileCodeIcon, AlertCircleIcon, TimerIcon } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import DateTime from '@/components/date-time';
+import { PluginError } from '@/types/plugin';
+
+type PluginLogsDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  name: string;
+  errors: PluginError[];
+};
+
+export default function PluginLogsDialog({ open, onOpenChange, name, errors }: PluginLogsDialogProps) {
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+
+  const toggleExpanded = (index: number) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[80vh] max-w-2xl! flex-col" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Error Logs - {name}</DialogTitle>
+          <DialogDescription>
+            {errors.length}
+            {errors.length === 10 && '+'} error{errors.length !== 1 ? 's' : ''} found in this plugin.
+            {errors.length === 10 && 'The most recent 10 will be shown below.'}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto p-4">
+          {errors.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <AlertCircleIcon className="text-muted-foreground mb-3 h-12 w-12" />
+              <p className="text-muted-foreground">No errors found</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {errors.map((error, index) => (
+                <Card key={index} className="overflow-hidden">
+                  <CardRow
+                    className={cn('hover:bg-accent/50 cursor-pointer transition-colors', expandedItems.has(index) && 'border-b')}
+                    onClick={() => toggleExpanded(index)}
+                  >
+                    <div className="flex flex-1 items-start gap-3">
+                      <div className="mt-0.5">
+                        {expandedItems.has(index) ? (
+                          <ChevronDownIcon className="text-muted-foreground h-4 w-4" />
+                        ) : (
+                          <ChevronRightIcon className="text-muted-foreground h-4 w-4" />
+                        )}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-destructive overflow-wrap-anywhere text-sm font-medium break-words">{error.error_message}</p>
+                        <div className="mt-4 flex flex-wrap items-start gap-4">
+                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
+                            <TimerIcon className="h-3 w-3 flex-shrink-0" />
+                            <span className="font-mono break-all">
+                              <DateTime date={error.occurred_at} />
+                            </span>
+                          </div>
+                        </div>
+                        <div className="mt-2 flex flex-wrap items-start gap-4">
+                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
+                            <FileCodeIcon className="h-3 w-3 flex-shrink-0" />
+                            <span className="font-mono break-all">
+                              {error.file.substring(error.file.indexOf('/app'))}:{error.line}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </CardRow>
+                  {expandedItems.has(index) && (
+                    <CardContent className="bg-muted/30 p-4">
+                      <div className="space-y-2">
+                        <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Stack Trace</p>
+                        <pre className="bg-background overflow-x-auto rounded-md p-3 font-mono text-xs break-all whitespace-pre-wrap">
+                          {error.stack_trace}
+                        </pre>
+                      </div>
+                    </CardContent>
+                  )}
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/components/dialogs/registry.ts b/resources/js/components/dialogs/registry.ts
index 4066964d4..00b716120 100644
--- a/resources/js/components/dialogs/registry.ts
+++ b/resources/js/components/dialogs/registry.ts
@@ -1,5 +1,30 @@
 import type { ComponentType } from 'react';
 import LogViewerDialog from './log-viewer-dialog';
+import ConfirmationDialog from './confirmation-dialog';
+import StorageProviderEditDialog from '@/pages/storage-providers/components/edit-dialog';
+import PluginLogsDialog from './plugin-logs-dialog';
+import WorkerLogsDialog from './worker-logs-dialog';
+import CronJobForm from '@/pages/cronjobs/components/form';
+import WorkerForm from '@/pages/workers/components/form';
+import ActivateServerSslDialog from './activate-server-ssl-dialog';
+import SourceControlEditDialog from '@/pages/source-controls/components/edit-dialog';
+import DataRetentionDialog from '@/pages/monitoring/components/data-retention-dialog';
+import EditDatabaseUserDialog from '@/pages/database-users/components/edit-database-user';
+import LinkDatabaseUserDialog from '@/pages/database-users/components/link-dialog';
+import PhpExtensionsDialog from './php-extensions-dialog';
+import PhpIniDialog from './php-ini-dialog';
+import ServerProviderEditDialog from '@/pages/server-providers/components/edit-dialog';
+import DnsProviderEditDialog from '@/pages/dns-providers/components/edit-dialog';
+import NotificationChannelEditDialog from '@/pages/notification-channels/components/edit-dialog';
+import ServiceConfigFileDialog from '@/pages/services/components/config-file-dialog';
+import CreateHostedDomain from '@/pages/hosted-domains/components/create-hosted-domain';
+import EditHostedDomain from '@/pages/hosted-domains/components/edit-hosted-domain';
+import FirewallRuleForm from '@/pages/firewall/components/form';
+import RecordForm from '@/pages/domains/components/record-form';
+import ScriptForm from '@/pages/scripts/components/form';
+import EditCommand from '@/pages/commands/components/edit-command';
+import EditBackup from '@/pages/backups/components/edit-backup';
+import RestoreBackup from '@/pages/backups/components/restore-backup';
 
 export type DialogControlProps = { open: boolean; onOpenChange: (open: boolean) => void };
 
@@ -17,6 +42,32 @@ export type DialogControlProps = { open: boolean; onOpenChange: (open: boolean)
  */
 export const dialogs = {
   logViewer: LogViewerDialog,
+  confirm: ConfirmationDialog,
+  storageProviderEdit: StorageProviderEditDialog,
+  pluginLogs: PluginLogsDialog,
+  workerLogs: WorkerLogsDialog,
+  cronjobForm: CronJobForm,
+  workerForm: WorkerForm,
+  activateServerSsl: ActivateServerSslDialog,
+  sourceControlEdit: SourceControlEditDialog,
+  dataRetention: DataRetentionDialog,
+  databaseUserEdit: EditDatabaseUserDialog,
+  databaseUserLink: LinkDatabaseUserDialog,
+  phpExtensions: PhpExtensionsDialog,
+  phpIni: PhpIniDialog,
+  serverProviderEdit: ServerProviderEditDialog,
+  dnsProviderEdit: DnsProviderEditDialog,
+  notificationChannelEdit: NotificationChannelEditDialog,
+  serviceConfigFile: ServiceConfigFileDialog,
+  createHostedDomain: CreateHostedDomain,
+  editHostedDomain: EditHostedDomain,
+  firewallForm: FirewallRuleForm,
+  dnsRecordForm: RecordForm,
+  scriptForm: ScriptForm,
+  commandEdit: EditCommand,
+  backupEdit: EditBackup,
+  backupRestore: RestoreBackup,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } as const satisfies Record<string, ComponentType<any>>;
 
 export type DialogRegistry = typeof dialogs;
diff --git a/resources/js/components/dialogs/worker-logs-dialog.tsx b/resources/js/components/dialogs/worker-logs-dialog.tsx
new file mode 100644
index 000000000..07a4c7c0d
--- /dev/null
+++ b/resources/js/components/dialogs/worker-logs-dialog.tsx
@@ -0,0 +1,41 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import LogOutput from '@/components/log-output';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+type WorkerLogsDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  workerId: number;
+};
+
+export default function WorkerLogsDialog({ open, onOpenChange, serverId, workerId }: WorkerLogsDialogProps) {
+  const query = useQuery({
+    queryKey: ['workerLog', workerId],
+    queryFn: async () => {
+      const response = await axios.get(route('workers.logs', { server: serverId, worker: workerId }));
+      return response.data.logs;
+    },
+    refetchInterval: 2500,
+    enabled: open,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-5xl" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Worker logs</DialogTitle>
+          <DialogDescription className="sr-only">View worker logs</DialogDescription>
+        </DialogHeader>
+        <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/components/server-banners.tsx b/resources/js/components/server-banners.tsx
index 13baf3e2b..9934ca717 100644
--- a/resources/js/components/server-banners.tsx
+++ b/resources/js/components/server-banners.tsx
@@ -1,10 +1,10 @@
 import { Button } from '@/components/ui/button';
 import { Server, ServerWarning } from '@/types/server';
 import { BannerItem, WarningsBlock } from '@/components/banners';
-import UpdateServer from '@/pages/servers/components/update-server';
-import RebootServer from '@/pages/servers/components/reboot-server';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function ServerBanners({ server }: { server: Server }) {
+  const dialog = useDialog();
   const warnings: ServerWarning[] = server.warnings ?? [];
   const items: BannerItem[] = [];
 
@@ -17,11 +17,22 @@ export default function ServerBanners({ server }: { server: Server }) {
       title: 'Restart required',
       description: 'The kernel or a critical package has been updated. Restart the server to complete the upgrade.',
       action: (
-        <RebootServer server={server}>
-          <Button variant="outline" size="sm">
-            Restart
-          </Button>
-        </RebootServer>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            dialog.confirm.open({
+              title: `Restart ${server.name}?`,
+              description:
+                'Are you sure you want to restart this server? Sites and services hosted on this server will be unavailable while it restarts. Connections in flight will be dropped.',
+              confirmLabel: 'Restart',
+              method: 'post',
+              url: route('servers.reboot', server.id),
+            })
+          }
+        >
+          Restart
+        </Button>
       ),
     });
   }
@@ -33,11 +44,21 @@ export default function ServerBanners({ server }: { server: Server }) {
       title: `${updatesCount} package ${updatesCount === 1 ? 'update' : 'updates'} available`,
       description: <>Install pending OS package updates to keep this server patched.</>,
       action: (
-        <UpdateServer server={server}>
-          <Button variant="outline" size="sm">
-            Update
-          </Button>
-        </UpdateServer>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            dialog.confirm.open({
+              title: `Update ${server.name}?`,
+              description: `Apply ${updatesCount} pending OS package ${updatesCount === 1 ? 'update' : 'updates'} to this server? The upgrade can take several minutes and may briefly restart affected services. A server restart may be required afterwards.`,
+              confirmLabel: 'Update',
+              method: 'post',
+              url: route('servers.update', server.id),
+            })
+          }
+        >
+          Update
+        </Button>
       ),
     });
   }
diff --git a/resources/js/hooks/use-dialog.ts b/resources/js/hooks/use-dialog.ts
index 1ac142288..e09f65d3a 100644
--- a/resources/js/hooks/use-dialog.ts
+++ b/resources/js/hooks/use-dialog.ts
@@ -20,7 +20,7 @@ export function useDialog(): DialogAccessor {
   return useMemo(() => {
     const accessor = {} as DialogAccessor;
     (Object.keys(dialogs) as Array<keyof DialogRegistry>).forEach((key) => {
-      accessor[key] = entryFor(key) as DialogAccessor[typeof key];
+      (accessor as Record<string, unknown>)[key] = entryFor(key);
     });
     return accessor;
   }, []);
diff --git a/resources/js/pages/api-keys/components/columns.tsx b/resources/js/pages/api-keys/components/columns.tsx
index 77eb6efa4..1decf9b08 100644
--- a/resources/js/pages/api-keys/components/columns.tsx
+++ b/resources/js/pages/api-keys/components/columns.tsx
@@ -1,63 +1,32 @@
 import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { ApiKey } from '@/types/api-key';
 import { Badge } from '@/components/ui/badge';
 import { Project } from '@/types/project';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Delete({ apiKey }: { apiKey: ApiKey }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('api-keys.destroy', apiKey.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {apiKey.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete api key</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to delete <strong>{apiKey.name}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${apiKey.name}`,
+          description: `Are you sure you want to delete ${apiKey.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('api-keys.destroy', apiKey.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/backups/components/columns.tsx b/resources/js/pages/backups/components/columns.tsx
index fa508624a..d7f3adf57 100644
--- a/resources/js/pages/backups/components/columns.tsx
+++ b/resources/js/pages/backups/components/columns.tsx
@@ -1,65 +1,40 @@
 import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { Link, useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { Link } from '@inertiajs/react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Backup } from '@/types/backup';
-import EditBackup from '@/pages/backups/components/edit-backup';
 import CopyableBadge from '@/components/copyable-badge';
+import { useDialog } from '@/hooks/use-dialog';
+
+function Edit({ backup }: { backup: Backup }) {
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.backupEdit.open({ backup })}>Edit</DropdownMenuItem>;
+}
 
 function Delete({ backup }: { backup: Backup }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
+  const target = backup.type === 'database' ? backup.database?.name : backup.path;
 
-  const submit = () => {
-    form.delete(route('backups.destroy', { server: backup.server_id, backup: backup.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete backup [{backup.type === 'database' ? backup.database?.name : backup.path}]</DialogTitle>
-          <DialogDescription className="sr-only">Delete backup</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to delete this backup: <strong>{backup.type === 'database' ? backup.database?.name : backup.path}</strong>? All backup
-          files will be deleted and this action cannot be undone.
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete backup [${target}]`,
+          description: `Are you sure you want to delete this backup: ${target}? All backup files will be deleted and this action cannot be undone.`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('backups.destroy', { server: backup.server_id, backup: backup.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -131,9 +106,7 @@ export const columns: ColumnDef<Backup>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <EditBackup backup={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-              </EditBackup>
+              <Edit backup={row.original} />
               <Link href={route('backup-files', { server: row.original.server_id, backup: row.original.id })}>
                 <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Files</DropdownMenuItem>
               </Link>
diff --git a/resources/js/pages/backups/components/edit-backup.tsx b/resources/js/pages/backups/components/edit-backup.tsx
index f00fe113f..28ac884f7 100644
--- a/resources/js/pages/backups/components/edit-backup.tsx
+++ b/resources/js/pages/backups/components/edit-backup.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, ReactNode, useState } from 'react';
+import { FormEvent } from 'react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
@@ -9,19 +9,9 @@ import InputError from '@/components/ui/input-error';
 import { Input } from '@/components/ui/input';
 import { Backup } from '@/types/backup';
 import { useConfigs } from '@/stores/bootstrap-store';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 
-export default function EditBackup({ backup, children }: { backup: Backup; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
+export default function EditBackup({ open, onOpenChange, backup }: { open: boolean; onOpenChange: (open: boolean) => void; backup: Backup }) {
   const configs = useConfigs()!;
 
   const form = useForm<{
@@ -37,16 +27,13 @@ export default function EditBackup({ backup, children }: { backup: Backup; child
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.patch(route('backups.update', { server: backup.server_id, backup: backup.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Edit backup</DialogTitle>
           <DialogDescription className="sr-only">Edit backup</DialogDescription>
diff --git a/resources/js/pages/backups/components/file-columns.tsx b/resources/js/pages/backups/components/file-columns.tsx
index 1cc8f5bcf..13b9f30f1 100644
--- a/resources/js/pages/backups/components/file-columns.tsx
+++ b/resources/js/pages/backups/components/file-columns.tsx
@@ -1,70 +1,39 @@
-import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import { useForm } from '@inertiajs/react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { BackupFile } from '@/types/backup-file';
 import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
 import { Badge } from '@/components/ui/badge';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import RestoreBackup from '@/pages/backups/components/restore-backup';
 import CopyableBadge from '@/components/copyable-badge';
+import { useDialog } from '@/hooks/use-dialog';
+import { Backup } from '@/types/backup';
 
-function Delete({ file, onDeleted }: { file: BackupFile; onDeleted?: (file: BackupFile) => void }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+function Restore({ backup, file }: { backup: Backup; file: BackupFile }) {
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.backupRestore.open({ backup, file })}>Restore</DropdownMenuItem>;
+}
+
+function Delete({ file }: { file: BackupFile }) {
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(
-      route('backup-files.destroy', {
-        server: file.server_id,
-        backup: file.backup_id,
-        backupFile: file.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-          if (onDeleted) {
-            onDeleted(file);
-          }
-        },
-      },
-    );
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete backup file</DialogTitle>
-          <DialogDescription className="sr-only">Delete backup file</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to this backup file?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete backup file',
+          description: 'Are you sure you want to delete this backup file?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('backup-files.destroy', { server: file.server_id, backup: file.backup_id, backupFile: file.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -120,9 +89,7 @@ export const columns: ColumnDef<BackupFile>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <RestoreBackup backup={row.original.backup} file={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restore</DropdownMenuItem>
-              </RestoreBackup>
+              <Restore backup={row.original.backup} file={row.original} />
               <Delete file={row.original} />
             </DropdownMenuContent>
           </DropdownMenu>
diff --git a/resources/js/pages/backups/components/restore-backup.tsx b/resources/js/pages/backups/components/restore-backup.tsx
index 4df15f3e0..a865be993 100644
--- a/resources/js/pages/backups/components/restore-backup.tsx
+++ b/resources/js/pages/backups/components/restore-backup.tsx
@@ -1,17 +1,8 @@
 import { Backup } from '@/types/backup';
 import { BackupFile } from '@/types/backup-file';
 import { useForm } from '@inertiajs/react';
-import { FormEvent, ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon } from 'lucide-react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
@@ -21,18 +12,16 @@ import InputError from '@/components/ui/input-error';
 import DatabaseSelect from '@/pages/databases/components/database-select';
 
 export default function RestoreBackup({
+  open,
+  onOpenChange,
   backup,
   file,
-  onBackupRestored,
-  children,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   backup: Backup;
   file: BackupFile;
-  onBackupRestored?: () => void;
-  children: ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
-
   const form = useForm({
     database: '',
     path: '',
@@ -49,20 +38,14 @@ export default function RestoreBackup({
         backupFile: file.id,
       }),
       {
-        onSuccess: () => {
-          setOpen(false);
-          if (onBackupRestored) {
-            onBackupRestored();
-          }
-        },
+        onSuccess: () => onOpenChange(false),
       },
     );
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-md">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Restore backup</DialogTitle>
           <DialogDescription className="sr-only">Restore backup</DialogDescription>
diff --git a/resources/js/pages/commands/components/columns.tsx b/resources/js/pages/commands/components/columns.tsx
index 74d1b5e43..710686455 100644
--- a/resources/js/pages/commands/components/columns.tsx
+++ b/resources/js/pages/commands/components/columns.tsx
@@ -1,61 +1,38 @@
 import { ColumnDef } from '@tanstack/react-table';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { Link, useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { Link } from '@inertiajs/react';
+import { MoreVerticalIcon, PlayIcon } from 'lucide-react';
 import { Command } from '@/types/command';
-import EditCommand from '@/pages/commands/components/edit-command';
 import CopyableBadge from '@/components/copyable-badge';
 import Execute from '@/pages/commands/components/execute';
+import { useDialog } from '@/hooks/use-dialog';
+
+function Edit({ command }: { command: Command }) {
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.commandEdit.open({ command })}>Edit</DropdownMenuItem>;
+}
 
 function Delete({ command }: { command: Command }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('commands.destroy', { server: command.server_id, site: command.site_id, command: command.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete command</DialogTitle>
-          <DialogDescription className="sr-only">Delete command</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to this command?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete command',
+          description: 'Are you sure you want to delete this command?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('commands.destroy', { server: command.server_id, site: command.site_id, command: command.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -95,9 +72,7 @@ export const columns: ColumnDef<Command>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <EditCommand command={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-              </EditCommand>
+              <Edit command={row.original} />
               <Link
                 href={route('commands.show', {
                   server: row.original.server_id,
diff --git a/resources/js/pages/commands/components/edit-command.tsx b/resources/js/pages/commands/components/edit-command.tsx
index 203b0a652..be12b1b03 100644
--- a/resources/js/pages/commands/components/edit-command.tsx
+++ b/resources/js/pages/commands/components/edit-command.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, ReactNode, useState } from 'react';
+import { FormEvent } from 'react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
@@ -7,21 +7,10 @@ import { Label } from '@/components/ui/label';
 import InputError from '@/components/ui/input-error';
 import { Input } from '@/components/ui/input';
 import { Command } from '@/types/command';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
 
-export default function EditCommand({ command, children }: { command: Command; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
+export default function EditCommand({ open, onOpenChange, command }: { open: boolean; onOpenChange: (open: boolean) => void; command: Command }) {
   const form = useForm<{
     name: string;
     command: string;
@@ -33,16 +22,13 @@ export default function EditCommand({ command, children }: { command: Command; c
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.put(route('commands.update', { server: command.server_id, site: command.site_id, command: command.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Edit command</DialogTitle>
           <DialogDescription className="sr-only">Create a new command</DialogDescription>
diff --git a/resources/js/pages/cronjobs/components/columns.tsx b/resources/js/pages/cronjobs/components/columns.tsx
index 23f3e3610..f7120fe16 100644
--- a/resources/js/pages/cronjobs/components/columns.tsx
+++ b/resources/js/pages/cronjobs/components/columns.tsx
@@ -1,26 +1,15 @@
 import { ColumnDef } from '@tanstack/react-table';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
 import FormSuccessful from '@/components/form-successful';
-import React, { useState } from 'react';
 import { CronJob } from '@/types/cronjob';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
-import CronJobForm from '@/pages/cronjobs/components/form';
 import CopyableBadge from '@/components/copyable-badge';
 import { Site } from '@/types/site';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Action({ type, cronJob, site }: { type: 'enable' | 'disable'; cronJob: CronJob; site?: Site }) {
   const form = useForm();
@@ -36,11 +25,7 @@ function Action({ type, cronJob, site }: { type: 'enable' | 'disable'; cronJob:
 
     const routeParams = site ? { server: cronJob.server_id, site: site.id, cronJob: cronJob.id } : { server: cronJob.server_id, cronJob: cronJob.id };
 
-    form.post(route(routeName, routeParams), {
-      onSuccess: () => {
-        // The page will refresh automatically
-      },
-    });
+    form.post(route(routeName, routeParams));
   };
 
   return (
@@ -53,44 +38,51 @@ function Action({ type, cronJob, site }: { type: 'enable' | 'disable'; cronJob:
 }
 
 function Delete({ cronJob, site }: { cronJob: CronJob; site?: Site }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    const routeName = site ? 'cronjobs.site.destroy' : 'cronjobs.destroy';
-    const routeParams = site ? { server: cronJob.server_id, site: site.id, cronJob: cronJob } : { server: cronJob.server_id, cronJob: cronJob };
+  return (
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete cronJob',
+          description: 'Are you sure you want to delete this cron job? This action cannot be undone.',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route(
+            site ? 'cronjobs.site.destroy' : 'cronjobs.destroy',
+            site ? { server: cronJob.server_id, site: site.id, cronJob: cronJob } : { server: cronJob.server_id, cronJob: cronJob },
+          ),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
+  );
+}
+
+function Actions({ cronJob, site }: { cronJob: CronJob; site?: Site }) {
+  const dialog = useDialog();
 
-    form.delete(route(routeName, routeParams), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete cronJob</DialogTitle>
-          <DialogDescription className="sr-only">Delete cronJob</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to delete this cron job? This action cannot be undone.</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
+    <div className="flex items-center justify-end">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreVerticalIcon />
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => dialog.cronjobForm.open({ serverId: cronJob.server_id, site, cronJob })}>Edit</DropdownMenuItem>
+          {cronJob.status === 'disabled' && <Action type="enable" cronJob={cronJob} site={site} />}
+          {cronJob.status === 'ready' && <Action type="disable" cronJob={cronJob} site={site} />}
+          <DropdownMenuSeparator />
+          <Delete cronJob={cronJob} site={site} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   );
 }
 
@@ -163,27 +155,7 @@ function getColumns(site?: Site, sites?: Array<{ id: number; domain: string }>):
       enableColumnFilter: false,
       enableSorting: false,
       cell: ({ row }) => {
-        return (
-          <div className="flex items-center justify-end">
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 w-8 p-0">
-                  <span className="sr-only">Open menu</span>
-                  <MoreVerticalIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <CronJobForm serverId={row.original.server_id} site={site} cronJob={row.original}>
-                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-                </CronJobForm>
-                {row.original.status === 'disabled' && <Action type="enable" cronJob={row.original} site={site} />}
-                {row.original.status === 'ready' && <Action type="disable" cronJob={row.original} site={site} />}
-                <DropdownMenuSeparator />
-                <Delete cronJob={row.original} site={site} />
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        );
+        return <Actions cronJob={row.original} site={site} />;
       },
     },
   ];
diff --git a/resources/js/pages/cronjobs/components/form.tsx b/resources/js/pages/cronjobs/components/form.tsx
index 79bf19031..b58506368 100644
--- a/resources/js/pages/cronjobs/components/form.tsx
+++ b/resources/js/pages/cronjobs/components/form.tsx
@@ -1,14 +1,5 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import React, { FormEvent, ReactNode, useMemo, useState } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useMemo, FormEvent } from 'react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
 import { useForm, usePage } from '@inertiajs/react';
@@ -24,19 +15,20 @@ import { Site } from '@/types/site';
 import { useConfigs } from '@/stores/bootstrap-store';
 
 export default function CronJobForm({
+  open,
+  onOpenChange,
   serverId,
   site,
   cronJob,
-  children,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   serverId: number;
   site?: Site;
   cronJob?: CronJob;
-  children: ReactNode;
 }) {
   const page = usePage<SharedData & { server: Server; sites?: Array<{ id: number; domain: string }>; ssh_users?: string[] }>();
   const configs = useConfigs()!;
-  const [open, setOpen] = useState(false);
 
   const sshUsers = useMemo(() => {
     const base = site ? (page.props.ssh_users ?? []) : page.props.server.ssh_users;
@@ -68,10 +60,7 @@ export default function CronJobForm({
       const routeParams = site ? { server: serverId, site: site.id, cronJob: cronJob.id } : { server: serverId, cronJob: cronJob.id };
 
       form.put(route(routeName, routeParams), {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       });
       return;
     }
@@ -80,23 +69,18 @@ export default function CronJobForm({
     const routeParams = site ? { server: serverId, site: site.id } : { server: serverId };
 
     form.post(route(routeName, routeParams), {
-      onSuccess: () => {
-        setOpen(false);
-        form.reset();
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{cronJob ? 'Edit' : 'Create'} cron job</DialogTitle>
           <DialogDescription className="sr-only">{cronJob ? 'Edit' : 'Create new'} cron job</DialogDescription>
         </DialogHeader>
         <Form id="cronjob-form" onSubmit={submit} className="p-4">
           <FormFields>
-            {/* Name */}
             <FormField>
               <Label htmlFor="name">Name</Label>
               <Input
@@ -109,14 +93,12 @@ export default function CronJobForm({
               <InputError message={form.errors.name} />
             </FormField>
 
-            {/* Command */}
             <FormField>
               <Label htmlFor="command">Command</Label>
               <Input type="text" id="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
               <InputError message={form.errors.command} />
             </FormField>
 
-            {/*site selection - only show if we have sites data and not in site context*/}
             {page.props.sites && !site && (
               <FormField>
                 <Label htmlFor="site_id">Belongs to</Label>
@@ -139,7 +121,6 @@ export default function CronJobForm({
               </FormField>
             )}
 
-            {/*frequency*/}
             <FormField>
               <Label htmlFor="frequency">Frequency</Label>
               <Select value={form.data.frequency} onValueChange={(value) => form.setData('frequency', value)}>
@@ -159,7 +140,6 @@ export default function CronJobForm({
               <InputError message={form.errors.frequency} />
             </FormField>
 
-            {/*custom frequency*/}
             {form.data.frequency === 'custom' && (
               <FormField>
                 <Label htmlFor="custom_frequency">Custom frequency (crontab)</Label>
@@ -174,7 +154,6 @@ export default function CronJobForm({
               </FormField>
             )}
 
-            {/*user*/}
             <FormField>
               <Label htmlFor="user">User</Label>
               <Select value={form.data.user} onValueChange={(value) => form.setData('user', value)}>
diff --git a/resources/js/pages/cronjobs/index.tsx b/resources/js/pages/cronjobs/index.tsx
index a3b3b4797..eff53cc10 100644
--- a/resources/js/pages/cronjobs/index.tsx
+++ b/resources/js/pages/cronjobs/index.tsx
@@ -11,9 +11,9 @@ import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
 import { CronJob } from '@/types/cronjob';
 import { columns } from '@/pages/cronjobs/components/columns';
-import CronJobForm from '@/pages/cronjobs/components/form';
 import SyncCronJobs from '@/pages/cronjobs/components/sync-cronjobs';
 import { Site } from '@/types/site';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function CronJobIndex() {
   const page = usePage<{
@@ -22,6 +22,7 @@ export default function CronJobIndex() {
     site?: Site;
     sites?: Array<{ id: number; domain: string }>;
   }>();
+  const dialog = useDialog();
 
   return (
     <ServerLayout>
@@ -41,12 +42,10 @@ export default function CronJobIndex() {
               </Button>
             </a>
             <SyncCronJobs server={page.props.server} />
-            <CronJobForm serverId={page.props.server.id} site={page.props.site}>
-              <Button>
-                <PlusIcon />
-                <span className="hidden lg:block">Create</span>
-              </Button>
-            </CronJobForm>
+            <Button onClick={() => dialog.cronjobForm.open({ serverId: page.props.server.id, site: page.props.site })}>
+              <PlusIcon />
+              <span className="hidden lg:block">Create</span>
+            </Button>
           </div>
         </HeaderContainer>
 
diff --git a/resources/js/pages/database-users/components/columns.tsx b/resources/js/pages/database-users/components/columns.tsx
index 06410db64..00716f706 100644
--- a/resources/js/pages/database-users/components/columns.tsx
+++ b/resources/js/pages/database-users/components/columns.tsx
@@ -1,132 +1,43 @@
 import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm, usePage } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { DatabaseUser } from '@/types/database-user';
-import { Database } from '@/types/database';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import InputError from '@/components/ui/input-error';
-import { MultiSelect } from '@/components/multi-select';
 import { Badge } from '@/components/ui/badge';
-import EditDatabaseUser from './edit-database-user';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Link({ databaseUser }: { databaseUser: DatabaseUser }) {
-  const [open, setOpen] = useState(false);
-  const page = usePage<{
-    databases: Database[];
-  }>();
-  const form = useForm<{
-    databases: string[];
-  }>({
-    databases: databaseUser.databases,
-  });
+  const dialog = useDialog();
 
-  const databases = page.props.databases.map((database) => ({
-    value: database.name,
-    label: database.name,
-  }));
+  return <DropdownMenuItem onSelect={() => dialog.databaseUserLink.open({ databaseUser })}>Link</DropdownMenuItem>;
+}
 
-  const submit = () => {
-    form.put(route('database-users.link', { server: databaseUser.server_id, databaseUser: databaseUser.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
+function Edit({ databaseUser }: { databaseUser: DatabaseUser }) {
+  const dialog = useDialog();
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Link</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Link database user [{databaseUser.username}]</DialogTitle>
-          <DialogDescription className="sr-only">Link database user</DialogDescription>
-        </DialogHeader>
-        <Form id="link-database-user" onSubmit={submit} className="p-4">
-          <FormFields>
-            <FormField>
-              <Label htmlFor="databases">Databases</Label>
-              <MultiSelect
-                options={databases}
-                onValueChange={(value) => form.setData('databases', value)}
-                defaultValue={form.data.databases}
-                placeholder="Select database"
-                maxCount={5}
-              />
-              <InputError className="mt-2" message={form.errors.databases} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.databaseUserEdit.open({ databaseUser })}>Edit</DropdownMenuItem>;
 }
 
 function Delete({ databaseUser }: { databaseUser: DatabaseUser }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('database-users.destroy', { server: databaseUser.server_id, databaseUser: databaseUser.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete database user [{databaseUser.username}]</DialogTitle>
-          <DialogDescription className="sr-only">Delete database user</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to delete database user <strong>{databaseUser.username}</strong>? This action cannot be undone.
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete database user [${databaseUser.username}]`,
+          description: `Are you sure you want to delete database user ${databaseUser.username}? This action cannot be undone.`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('database-users.destroy', { server: databaseUser.server_id, databaseUser: databaseUser.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -196,9 +107,7 @@ export const columns: ColumnDef<DatabaseUser>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <EditDatabaseUser databaseUser={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-              </EditDatabaseUser>
+              <Edit databaseUser={row.original} />
               <Link databaseUser={row.original} />
               <DropdownMenuSeparator />
               <Delete databaseUser={row.original} />
diff --git a/resources/js/pages/database-users/components/edit-database-user.tsx b/resources/js/pages/database-users/components/edit-database-user.tsx
index b462dea8c..ecce45aee 100644
--- a/resources/js/pages/database-users/components/edit-database-user.tsx
+++ b/resources/js/pages/database-users/components/edit-database-user.tsx
@@ -1,141 +1,63 @@
-import { FormEvent, ReactNode, useState, useEffect } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { useForm } from '@inertiajs/react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { LoaderCircle } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent } from 'react';
+import { DatabaseUser } from '@/types/database-user';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import InputError from '@/components/ui/input-error';
-import { Checkbox } from '@/components/ui/checkbox';
-import { DatabaseUser } from '@/types/database-user';
-import FormSuccessful from '@/components/form-successful';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-
-type EditForm = {
-  password: string;
-  remote: boolean;
-  host?: string;
-  permission: string;
-};
 
 export default function EditDatabaseUser({
+  open,
+  onOpenChange,
   databaseUser,
-  onDatabaseUserUpdated,
-  children,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   databaseUser: DatabaseUser;
-  onDatabaseUserUpdated?: () => void;
-  children: ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm<EditForm>({
+  const form = useForm<{
+    password: string;
+    databases: string[];
+    remove_databases: string[];
+  }>({
     password: '',
-    remote: databaseUser.host !== 'localhost',
-    host: databaseUser.host,
-    permission: databaseUser.permission,
+    databases: databaseUser.databases || [],
+    remove_databases: [],
   });
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
     form.put(route('database-users.update', { server: databaseUser.server_id, databaseUser: databaseUser.id }), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-        if (onDatabaseUserUpdated) {
-          onDatabaseUserUpdated();
-        }
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
 
-  useEffect(() => {
-    if (open) {
-      form.setData({
-        password: '',
-        remote: databaseUser.host !== 'localhost',
-        host: databaseUser.host,
-        permission: databaseUser.permission,
-      });
-    }
-  }, [open, databaseUser.host, databaseUser.permission]);
-
-  const handleOpenChange = (open: boolean) => {
-    setOpen(open);
-    if (!open) {
-      form.reset();
-    }
-  };
-
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Edit database user [{databaseUser.username}]</DialogTitle>
           <DialogDescription className="sr-only">Edit database user</DialogDescription>
         </DialogHeader>
-        <Form className="p-4" id="edit-database-user-form" onSubmit={submit}>
+        <Form id="edit-database-user-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
-              <Label htmlFor="password">New Password (leave blank to keep current)</Label>
-              <Input
-                type="password"
-                id="password"
-                name="password"
-                value={form.data.password}
-                onChange={(e) => form.setData('password', e.target.value)}
-              />
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={form.data.password} onChange={(e) => form.setData('password', e.target.value)} />
               <InputError message={form.errors.password} />
             </FormField>
-            <FormField>
-              <Label htmlFor="permission">Permission</Label>
-              <Select value={form.data.permission} onValueChange={(value) => form.setData('permission', value)}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select permission" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="admin">Admin (Full Access)</SelectItem>
-                  <SelectItem value="write">Write (No Drop/Truncate)</SelectItem>
-                  <SelectItem value="read">Read Only</SelectItem>
-                </SelectContent>
-              </Select>
-              <InputError message={form.errors.permission} />
-            </FormField>
-            <FormField>
-              <div className="flex items-center space-x-3">
-                <Checkbox id="remote" name="remote" checked={form.data.remote} onClick={() => form.setData('remote', !form.data.remote)} />
-                <Label htmlFor="remote">Allow remote connection</Label>
-              </div>
-              <InputError message={form.errors.remote} />
-            </FormField>
-            {form.data.remote && (
-              <FormField>
-                <Label htmlFor="host">Allow connection from (% for all)</Label>
-                <Input type="text" id="host" name="host" value={form.data.host} onChange={(e) => form.setData('host', e.target.value)} />
-                <InputError message={form.errors.host} />
-              </FormField>
-            )}
           </FormFields>
         </Form>
         <DialogFooter>
           <DialogClose asChild>
-            <Button type="button" variant="outline">
-              Cancel
-            </Button>
+            <Button variant="outline">Cancel</Button>
           </DialogClose>
-          <Button type="button" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircle className="animate-spin" />}
+          <Button form="edit-database-user-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
             <FormSuccessful successful={form.recentlySuccessful} />
             Save
           </Button>
diff --git a/resources/js/pages/database-users/components/link-dialog.tsx b/resources/js/pages/database-users/components/link-dialog.tsx
new file mode 100644
index 000000000..08d22c1a8
--- /dev/null
+++ b/resources/js/pages/database-users/components/link-dialog.tsx
@@ -0,0 +1,77 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm, usePage } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { DatabaseUser } from '@/types/database-user';
+import { Database } from '@/types/database';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { MultiSelect } from '@/components/multi-select';
+
+export default function LinkDatabaseUserDialog({
+  open,
+  onOpenChange,
+  databaseUser,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  databaseUser: DatabaseUser;
+}) {
+  const page = usePage<{
+    databases: Database[];
+  }>();
+  const form = useForm<{
+    databases: string[];
+  }>({
+    databases: databaseUser.databases,
+  });
+
+  const databases = page.props.databases.map((database) => ({
+    value: database.name,
+    label: database.name,
+  }));
+
+  const submit = () => {
+    form.put(route('database-users.link', { server: databaseUser.server_id, databaseUser: databaseUser.id }), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Link database user [{databaseUser.username}]</DialogTitle>
+          <DialogDescription className="sr-only">Link database user</DialogDescription>
+        </DialogHeader>
+        <Form id="link-database-user" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="databases">Databases</Label>
+              <MultiSelect
+                options={databases}
+                onValueChange={(value) => form.setData('databases', value)}
+                defaultValue={form.data.databases}
+                placeholder="Select database"
+                maxCount={5}
+              />
+              <InputError className="mt-2" message={form.errors.databases} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/databases/components/delete.tsx b/resources/js/pages/databases/components/delete.tsx
index d662d2caf..ac44f09c7 100644
--- a/resources/js/pages/databases/components/delete.tsx
+++ b/resources/js/pages/databases/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
 import { Database } from '@/types/database';
-import InputError from '@/components/ui/input-error';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ database }: { database: Database }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('databases.destroy', { server: database.server_id, database: database }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete database [{database.name}]</DialogTitle>
-          <DialogDescription className="sr-only">Delete database</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete database <strong>{database.name}</strong>? This action cannot be undone.
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete database [${database.name}]`,
+          description: `Are you sure you want to delete database ${database.name}? This action cannot be undone.`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('databases.destroy', { server: database.server_id, database: database }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/dns-providers/components/delete.tsx b/resources/js/pages/dns-providers/components/delete.tsx
index 5bae745b1..f71e2331b 100644
--- a/resources/js/pages/dns-providers/components/delete.tsx
+++ b/resources/js/pages/dns-providers/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
 import { DNSProvider } from '@/types/dns-provider';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ dnsProvider }: { dnsProvider: DNSProvider }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('dns-providers.destroy', dnsProvider.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {dnsProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete DNS provider</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{dnsProvider.name}</strong>?
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${dnsProvider.name}`,
+          description: `Are you sure you want to delete ${dnsProvider.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('dns-providers.destroy', dnsProvider.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/dns-providers/components/edit-dialog.tsx b/resources/js/pages/dns-providers/components/edit-dialog.tsx
new file mode 100644
index 000000000..923938130
--- /dev/null
+++ b/resources/js/pages/dns-providers/components/edit-dialog.tsx
@@ -0,0 +1,94 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent } from 'react';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DNSProvider } from '@/types/dns-provider';
+import DynamicField from '@/components/ui/dynamic-field';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import { useConfigs } from '@/stores/bootstrap-store';
+
+export default function DnsProviderEditDialog({
+  open,
+  onOpenChange,
+  dnsProvider,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dnsProvider: DNSProvider;
+}) {
+  const configs = useConfigs()!;
+  const editFields: DynamicFieldConfig[] = configs.dns_provider.providers[dnsProvider.provider]?.edit_form ?? [];
+
+  const form = useForm({
+    name: dnsProvider.name,
+    global: dnsProvider.global,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('dns-providers.update', dnsProvider.id), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Edit {dnsProvider.name}</DialogTitle>
+          <DialogDescription className="sr-only">Edit DNS provider</DialogDescription>
+        </DialogHeader>
+        <Form id="edit-dns-provider-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            {editFields.map((field) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name] ?? dnsProvider.editable_data?.[field.name]}
+                /*@ts-expect-error dynamic types*/
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                /*@ts-expect-error dynamic types*/
+                error={form.errors[field.name]}
+              />
+            ))}
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="global"
+                  name="global"
+                  checked={form.data.global}
+                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
+                />
+                <Label htmlFor="global">Is global (accessible in all projects)</Label>
+              </div>
+              <InputError message={form.errors.global} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="edit-dns-provider-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/dns-providers/components/edit.tsx b/resources/js/pages/dns-providers/components/edit.tsx
index 29a6466b6..a160f69b3 100644
--- a/resources/js/pages/dns-providers/components/edit.tsx
+++ b/resources/js/pages/dns-providers/components/edit.tsx
@@ -1,99 +1,9 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { FormEvent, useState } from 'react';
-import InputError from '@/components/ui/input-error';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
 import { DNSProvider } from '@/types/dns-provider';
-import DynamicField from '@/components/ui/dynamic-field';
-import { DynamicFieldConfig } from '@/types/dynamic-field-config';
-import { useConfigs } from '@/stores/bootstrap-store';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Edit({ dnsProvider }: { dnsProvider: DNSProvider }) {
-  const [open, setOpen] = useState(false);
-  const configs = useConfigs()!;
-  const editFields: DynamicFieldConfig[] = configs.dns_provider.providers[dnsProvider.provider]?.edit_form ?? [];
+  const dialog = useDialog();
 
-  const form = useForm({
-    name: dnsProvider.name,
-    global: dnsProvider.global,
-  });
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('dns-providers.update', dnsProvider.id), {
-      onSuccess: () => setOpen(false),
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Edit {dnsProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Edit DNS provider</DialogDescription>
-        </DialogHeader>
-        <Form id={`edit-dns-provider-form-${dnsProvider.id}`} className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="name">Name</Label>
-              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
-              <InputError message={form.errors.name} />
-            </FormField>
-            {editFields.map((field) => (
-              <DynamicField
-                key={`field-${field.name}`}
-                /*@ts-expect-error dynamic types*/
-                value={form.data[field.name] ?? dnsProvider.editable_data?.[field.name]}
-                /*@ts-expect-error dynamic types*/
-                onChange={(value) => form.setData(field.name, value)}
-                config={field}
-                /*@ts-expect-error dynamic types*/
-                error={form.errors[field.name]}
-              />
-            ))}
-            <FormField>
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  id="global"
-                  name="global"
-                  checked={form.data.global}
-                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
-                />
-                <Label htmlFor="global">Is global (accessible in all projects)</Label>
-              </div>
-              <InputError message={form.errors.global} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form={`edit-dns-provider-form-${dnsProvider.id}`} type="submit" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.dnsProviderEdit.open({ dnsProvider })}>Edit</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/domains/components/columns.tsx b/resources/js/pages/domains/components/columns.tsx
index 53779df7e..0e7b506fc 100644
--- a/resources/js/pages/domains/components/columns.tsx
+++ b/resources/js/pages/domains/components/columns.tsx
@@ -2,66 +2,31 @@ import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
 import { Domain } from '@/types/domain';
 import { Badge } from '@/components/ui/badge';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { router, useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
+import { router } from '@inertiajs/react';
+import { MoreVerticalIcon } from 'lucide-react';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Remove({ domain }: { domain: Domain }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{ domain?: string }>({});
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('domains.destroy', domain.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Remove
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Remove {domain.domain}</DialogTitle>
-          <DialogDescription className="sr-only">Remove domain from Vito</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to remove <strong>{domain.domain}</strong> from Vito?
-          </p>
-          <p className="text-muted-foreground text-sm">This will only remove the domain from Vito, not from your DNS provider.</p>
-          <InputError message={form.errors.domain} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Remove
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Remove ${domain.domain}`,
+          description: `Are you sure you want to remove ${domain.domain} from Vito? This will only remove the domain from Vito, not from your DNS provider.`,
+          variant: 'destructive',
+          confirmLabel: 'Remove',
+          method: 'delete',
+          url: route('domains.destroy', domain.id),
+        })
+      }
+    >
+      Remove
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/domains/components/record-columns.tsx b/resources/js/pages/domains/components/record-columns.tsx
index 1bc4e6c65..2230e8c24 100644
--- a/resources/js/pages/domains/components/record-columns.tsx
+++ b/resources/js/pages/domains/components/record-columns.tsx
@@ -3,26 +3,18 @@ import DateTime from '@/components/date-time';
 import { DNSRecord } from '@/types/dns-record';
 import { Domain } from '@/types/domain';
 import { Badge } from '@/components/ui/badge';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, LockIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
+import { LockIcon, MoreVerticalIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useClipboard } from '@/hooks/use-clipboard';
-import RecordForm from './record-form';
+import { useDialog } from '@/hooks/use-dialog';
+
+function Edit({ domain, record }: { domain: Domain; record: DNSRecord }) {
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.dnsRecordForm.open({ domain, record })}>Edit</DropdownMenuItem>;
+}
 
 function CopyableText({ text }: { text: string | null | undefined }) {
   const { copied, copy } = useClipboard();
@@ -39,57 +31,24 @@ function CopyableText({ text }: { text: string | null | undefined }) {
 }
 
 function Delete({ record }: { record: DNSRecord }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{ record?: string }>({});
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('dns-records.destroy', [record.domain_id, record.id]), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete DNS Record</DialogTitle>
-          <DialogDescription className="sr-only">Delete DNS record</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to delete this DNS record?</p>
-          <div className="bg-muted rounded-md p-3">
-            <div className="font-mono text-sm">
-              <div>
-                <strong>Type:</strong> {record.type}
-              </div>
-              <div>
-                <strong>Name:</strong> {record.name}
-              </div>
-              <div>
-                <strong>Content:</strong> {record.content}
-              </div>
-            </div>
-          </div>
-          <InputError message={form.errors.record} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete DNS Record',
+          description: `Are you sure you want to delete this DNS record? Type: ${record.type}, Name: ${record.name}, Content: ${record.content}`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('dns-records.destroy', [record.domain_id, record.id]),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -190,11 +149,7 @@ export function getColumns(providerConfig?: ProviderConfig, domain?: Domain): Co
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              {domain && (
-                <RecordForm domain={domain} record={row.original}>
-                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-                </RecordForm>
-              )}
+              {domain && <Edit domain={domain} record={row.original} />}
               <DropdownMenuSeparator />
               <Delete record={row.original} />
             </DropdownMenuContent>
diff --git a/resources/js/pages/domains/components/record-form.tsx b/resources/js/pages/domains/components/record-form.tsx
index 15c7ba96c..aa6298681 100644
--- a/resources/js/pages/domains/components/record-form.tsx
+++ b/resources/js/pages/domains/components/record-form.tsx
@@ -1,17 +1,8 @@
 import { LoaderCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useForm } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useState, useEffect } from 'react';
+import { FormEventHandler, useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -27,15 +18,13 @@ import FormSuccessful from '@/components/form-successful';
 const PREDEFINED_TTLS = [1, 300, 600, 1800, 3600, 7200, 14400, 28800, 43200, 86400];
 
 interface RecordFormProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   domain: Domain;
   record?: DNSRecord;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children: ReactNode;
 }
 
-export default function RecordForm({ domain, record, defaultOpen, onOpenChange, children }: RecordFormProps) {
-  const [open, setOpen] = useState(defaultOpen || false);
+export default function RecordForm({ open, onOpenChange, domain, record }: RecordFormProps) {
   const configs = useConfigs()!;
 
   const providerKey = domain.dns_provider?.provider;
@@ -45,19 +34,6 @@ export default function RecordForm({ domain, record, defaultOpen, onOpenChange,
   const isManualTtl = record ? !PREDEFINED_TTLS.includes(record.ttl) : false;
   const [manualTtl, setManualTtl] = useState(isManualTtl);
 
-  useEffect(() => {
-    if (defaultOpen) {
-      setOpen(defaultOpen);
-    }
-  }, [setOpen, defaultOpen]);
-
-  const handleOpenChange = (open: boolean) => {
-    setOpen(open);
-    if (onOpenChange) {
-      onOpenChange(open);
-    }
-  };
-
   const form = useForm({
     type: record?.type || 'A',
     name: record?.name || '',
@@ -90,16 +66,11 @@ export default function RecordForm({ domain, record, defaultOpen, onOpenChange,
 
     if (record) {
       form.patch(route('dns-records.update', [record.domain_id, record.id]), {
-        onSuccess: () => {
-          setOpen(false);
-        },
+        onSuccess: () => onOpenChange(false),
       });
     } else {
       form.post(route('dns-records.store', domain.id), {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       });
     }
   };
@@ -146,9 +117,8 @@ export default function RecordForm({ domain, record, defaultOpen, onOpenChange,
   };
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{record ? 'Edit DNS Record' : 'Create DNS Record'}</DialogTitle>
           <DialogDescription className="sr-only">{record ? 'Edit DNS record' : `Create a new DNS record for ${domain.domain}`}</DialogDescription>
diff --git a/resources/js/pages/domains/show.tsx b/resources/js/pages/domains/show.tsx
index fb5015158..85366c0ae 100644
--- a/resources/js/pages/domains/show.tsx
+++ b/resources/js/pages/domains/show.tsx
@@ -8,10 +8,10 @@ import { DNSRecord } from '@/types/dns-record';
 import { Domain } from '@/types/domain';
 import { PlusIcon } from 'lucide-react';
 import Layout from '@/layouts/app/layout';
-import RecordForm from './components/record-form';
 import { getColumns } from './components/record-columns';
 import SyncRecords from './components/sync-records';
 import { useConfigs } from '@/stores/bootstrap-store';
+import { useDialog } from '@/hooks/use-dialog';
 
 type Page = {
   domain: Domain;
@@ -21,6 +21,7 @@ type Page = {
 export default function DomainShow() {
   const page = usePage<Page>();
   const configs = useConfigs()!;
+  const dialog = useDialog();
 
   const domain = page.props.domain;
   const providerKey = domain.dns_provider?.provider;
@@ -35,12 +36,10 @@ export default function DomainShow() {
           <Heading title={`DNS Records for ${page.props.domain.domain}`} description="Manage DNS records for this domain" />
           <div className="flex items-center gap-2">
             <SyncRecords domain={page.props.domain} />
-            <RecordForm domain={page.props.domain}>
-              <Button>
-                <PlusIcon />
-                Add Record
-              </Button>
-            </RecordForm>
+            <Button onClick={() => dialog.dnsRecordForm.open({ domain: page.props.domain })}>
+              <PlusIcon />
+              Add Record
+            </Button>
           </div>
         </div>
         <DataTable columns={columns} data={page.props.records} />
diff --git a/resources/js/pages/firewall/components/delete.tsx b/resources/js/pages/firewall/components/delete.tsx
index c0b249069..f2b12fc30 100644
--- a/resources/js/pages/firewall/components/delete.tsx
+++ b/resources/js/pages/firewall/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
 import { FirewallRule } from '@/types/firewall';
-import InputError from '@/components/ui/input-error';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ firewallRule }: { firewallRule: FirewallRule }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('firewall.destroy', { server: firewallRule.server_id, firewallRule: firewallRule }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete rule [{firewallRule.name}]</DialogTitle>
-          <DialogDescription className="sr-only">Delete firewall rule</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete rule <strong>{firewallRule.name}</strong>? This action cannot be undone.
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete rule [${firewallRule.name}]`,
+          description: `Are you sure you want to delete rule ${firewallRule.name}? This action cannot be undone.`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('firewall.destroy', { server: firewallRule.server_id, firewallRule: firewallRule }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/firewall/components/form.tsx b/resources/js/pages/firewall/components/form.tsx
index 070095b6b..3dc59df70 100644
--- a/resources/js/pages/firewall/components/form.tsx
+++ b/resources/js/pages/firewall/components/form.tsx
@@ -6,9 +6,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@/components/ui/dialog';
-import { FormEvent, ReactNode, useState } from 'react';
+import { FormEvent } from 'react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
 import { useForm } from '@inertiajs/react';
@@ -20,8 +19,17 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Checkbox } from '@/components/ui/checkbox';
 import { FirewallRule } from '@/types/firewall';
 
-export default function RuleForm({ serverId, firewallRule, children }: { serverId: number; firewallRule?: FirewallRule; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
+export default function RuleForm({
+  open,
+  onOpenChange,
+  serverId,
+  firewallRule,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  firewallRule?: FirewallRule;
+}) {
   const form = useForm<{
     name: string;
     type: string;
@@ -44,25 +52,18 @@ export default function RuleForm({ serverId, firewallRule, children }: { serverI
     e.preventDefault();
     if (firewallRule) {
       form.put(route('firewall.update', { server: serverId, firewallRule: firewallRule.id }), {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       });
       return;
     }
 
     form.post(route('firewall.store', { server: serverId }), {
-      onSuccess: () => {
-        setOpen(false);
-        form.reset();
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{firewallRule ? 'Edit' : 'Create'} firewall rule</DialogTitle>
           <DialogDescription className="sr-only">{firewallRule ? 'Edit' : 'Create new'} firewall rule</DialogDescription>
diff --git a/resources/js/pages/firewall/index.tsx b/resources/js/pages/firewall/index.tsx
index 09709734f..2a39775c1 100644
--- a/resources/js/pages/firewall/index.tsx
+++ b/resources/js/pages/firewall/index.tsx
@@ -8,17 +8,20 @@ import { Button } from '@/components/ui/button';
 import { BookOpenIcon, MoreVerticalIcon, PlusIcon } from 'lucide-react';
 import Container from '@/components/container';
 import { VitoTable } from '@/components/vito-table';
-import RuleForm from '@/pages/firewall/components/form';
 import Delete from '@/pages/firewall/components/delete';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import type { InertiaTableData, Row } from '@forjedio/inertia-table-react';
+import type { CellRenderProps, InertiaTableData, Row } from '@forjedio/inertia-table-react';
 import { asRow } from '@/lib/inertia-table';
+import { useDialog } from '@/hooks/use-dialog';
+
+const uppercaseCell = ({ value }: CellRenderProps) => <span className="uppercase">{value == null || value === '' ? '-' : String(value)}</span>;
 
 export default function Firewall() {
   const page = usePage<{
     server: Server;
     rules: InertiaTableData;
   }>();
+  const dialog = useDialog();
 
   return (
     <ServerLayout>
@@ -34,17 +37,16 @@ export default function Firewall() {
                 <span className="hidden lg:block">Docs</span>
               </Button>
             </a>
-            <RuleForm serverId={page.props.server.id}>
-              <Button>
-                <PlusIcon />
-                <span className="hidden lg:block">Create</span>
-              </Button>
-            </RuleForm>
+            <Button onClick={() => dialog.firewallForm.open({ serverId: page.props.server.id })}>
+              <PlusIcon />
+              <span className="hidden lg:block">Create</span>
+            </Button>
           </div>
         </HeaderContainer>
 
         <VitoTable
           tableData={page.props.rules}
+          cellRenderers={{ type: uppercaseCell, protocol: uppercaseCell }}
           actions={(row: Row) => {
             const firewallRule = asRow<FirewallRule>(row, ['id', 'name', 'server_id']);
             return (
@@ -57,9 +59,7 @@ export default function Firewall() {
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <RuleForm serverId={firewallRule.server_id} firewallRule={firewallRule}>
-                      <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-                    </RuleForm>
+                    <DropdownMenuItem onSelect={() => dialog.firewallForm.open({ serverId: firewallRule.server_id, firewallRule })}>Edit</DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <Delete firewallRule={firewallRule} />
                   </DropdownMenuContent>
diff --git a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
index 9bbf30e46..19ba2f15e 100644
--- a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
+++ b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
@@ -1,14 +1,5 @@
-import React, { FormEvent, ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
@@ -18,6 +9,7 @@ import { Input } from '@/components/ui/input';
 import InputError from '@/components/ui/input-error';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Site } from '@/types/site';
+import FormSuccessful from '@/components/form-successful';
 import { useSslMatching } from '@/pages/hosted-domains/hooks/use-ssl-matching';
 
 type CreateForm = {
@@ -33,21 +25,16 @@ const SSL_METHOD_OPTIONS: { value: string; label: string }[] = [
   { value: 'custom', label: 'Custom Certificate' },
 ];
 
-export default function CreateHostedDomain({ site, children }: { site: Site; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
-  const allowedMethods = site.webserver_allowed_ssl_methods;
-  const filteredSslOptions = allowedMethods ? SSL_METHOD_OPTIONS.filter((o) => allowedMethods.includes(o.value)) : SSL_METHOD_OPTIONS;
-  const defaultSslMethod = site.webserver_default_ssl_method ?? 'letsencrypt';
-
+export default function CreateHostedDomain({ open, onOpenChange, site }: { open: boolean; onOpenChange: (open: boolean) => void; site: Site }) {
+  const { ssl_enabled } = site;
   const form = useForm<CreateForm>({
     domain: '',
     type: 'alias',
-    ssl_method: defaultSslMethod,
+    ssl_method: ssl_enabled ? 'letsencrypt' : 'none',
     ssl_id: '',
   });
 
-  const { matchingSsls, loadingSsls, sslStale, handleSslMethodChange, reset } = useSslMatching({
+  const { matchingSsls, loadingSsls, sslStale, handleSslMethodChange } = useSslMatching({
     serverId: site.server_id,
     siteId: site.id,
     domain: form.data.domain,
@@ -61,50 +48,42 @@ export default function CreateHostedDomain({ site, children }: { site: Site; chi
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
-    form.post(route('hosted-domains.store', { server: site.server_id, site: site.id }), {
-      onSuccess: () => {
-        form.reset();
-        reset();
-        setOpen(false);
+    form.post(
+      route('hosted-domains.store', {
+        server: site.server_id,
+        site: site.id,
+      }),
+      {
+        onSuccess: () => onOpenChange(false),
       },
-    });
+    );
   };
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(value) => {
-        setOpen(value);
-        if (!value) {
-          form.reset();
-          reset();
-        }
-      }}
-    >
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Add Domain</DialogTitle>
-          <DialogDescription className="sr-only">Add a new hosted domain</DialogDescription>
+          <DialogDescription className="sr-only">Add a new domain</DialogDescription>
         </DialogHeader>
         <Form className="p-4" id="create-hosted-domain-form" onSubmit={submit}>
           <FormFields>
             <FormField>
-              <Label htmlFor="create-domain">Domain</Label>
+              <Label htmlFor="domain">Domain</Label>
               <Input
                 type="text"
-                id="create-domain"
+                id="domain"
                 name="domain"
                 value={form.data.domain}
                 onChange={(e) => form.setData('domain', e.target.value)}
-                placeholder="sub.example.com"
+                placeholder="example.com"
               />
               <InputError message={form.errors.domain} />
             </FormField>
             <FormField>
-              <Label htmlFor="create-type">Type</Label>
+              <Label htmlFor="type">Type</Label>
               <Select onValueChange={(value) => form.setData('type', value)} value={form.data.type}>
-                <SelectTrigger id="create-type">
+                <SelectTrigger id="type">
                   <SelectValue placeholder="Select type" />
                 </SelectTrigger>
                 <SelectContent>
@@ -112,20 +91,16 @@ export default function CreateHostedDomain({ site, children }: { site: Site; chi
                   <SelectItem value="redirect">Redirect</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-muted-foreground text-sm">
-                <strong>Alias</strong> serves the same site content under another domain. <strong>Redirect</strong> sends visitors to the primary
-                domain via an HTTP redirect.
-              </p>
               <InputError message={form.errors.type} />
             </FormField>
             <FormField>
-              <Label htmlFor="create-ssl-method">SSL</Label>
+              <Label htmlFor="ssl-method">SSL</Label>
               <Select onValueChange={handleSslMethodChange} value={form.data.ssl_method}>
-                <SelectTrigger id="create-ssl-method">
+                <SelectTrigger id="ssl-method">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {filteredSslOptions.map((option) => (
+                  {SSL_METHOD_OPTIONS.map((option) => (
                     <SelectItem key={option.value} value={option.value}>
                       {option.label}
                     </SelectItem>
@@ -136,9 +111,9 @@ export default function CreateHostedDomain({ site, children }: { site: Site; chi
             </FormField>
             {form.data.ssl_method === 'custom' && (
               <FormField>
-                <Label htmlFor="create-ssl_id">SSL Certificate</Label>
+                <Label htmlFor="ssl_id">SSL Certificate</Label>
                 <Select onValueChange={(value) => form.setData('ssl_id', value)} value={form.data.ssl_id}>
-                  <SelectTrigger id="create-ssl_id">
+                  <SelectTrigger id="ssl_id">
                     <SelectValue placeholder={loadingSsls ? 'Loading...' : 'Select a certificate'} />
                   </SelectTrigger>
                   <SelectContent>
@@ -165,7 +140,8 @@ export default function CreateHostedDomain({ site, children }: { site: Site; chi
           </DialogClose>
           <Button type="button" onClick={submit} disabled={form.processing || loadingSsls || sslStale}>
             {(form.processing || loadingSsls || sslStale) && <LoaderCircleIcon className="animate-spin" />}
-            Add
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Add Domain
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/resources/js/pages/hosted-domains/components/edit-hosted-domain.tsx b/resources/js/pages/hosted-domains/components/edit-hosted-domain.tsx
index 9273c2972..b18656f20 100644
--- a/resources/js/pages/hosted-domains/components/edit-hosted-domain.tsx
+++ b/resources/js/pages/hosted-domains/components/edit-hosted-domain.tsx
@@ -1,14 +1,5 @@
-import React, { FormEvent, ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm, usePage } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
@@ -35,9 +26,16 @@ const SSL_METHOD_OPTIONS: { value: string; label: string }[] = [
   { value: 'custom', label: 'Custom Certificate' },
 ];
 
-export default function EditHostedDomain({ hostedDomain, children }: { hostedDomain: HostedDomain; children: ReactNode }) {
+export default function EditHostedDomain({
+  open,
+  onOpenChange,
+  hostedDomain,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  hostedDomain: HostedDomain;
+}) {
   const { site } = usePage<{ site: Site }>().props;
-  const [open, setOpen] = useState(false);
   const isPrimary = hostedDomain.type === 'primary';
 
   const allowedMethods = site.webserver_allowed_ssl_methods;
@@ -50,7 +48,7 @@ export default function EditHostedDomain({ hostedDomain, children }: { hostedDom
     ssl_id: hostedDomain.ssl_id ? String(hostedDomain.ssl_id) : '',
   });
 
-  const { matchingSsls, loadingSsls, sslStale, handleSslMethodChange, reset } = useSslMatching({
+  const { matchingSsls, loadingSsls, sslStale, handleSslMethodChange } = useSslMatching({
     serverId: hostedDomain.server_id,
     siteId: hostedDomain.site_id,
     domain: form.data.domain,
@@ -72,32 +70,14 @@ export default function EditHostedDomain({ hostedDomain, children }: { hostedDom
         hostedDomain: hostedDomain.id,
       }),
       {
-        onSuccess: () => {
-          setOpen(false);
-        },
+        onSuccess: () => onOpenChange(false),
       },
     );
   };
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(value) => {
-        setOpen(value);
-        if (!value) {
-          form.setData({
-            domain: hostedDomain.domain,
-            type: hostedDomain.type,
-            ssl_method: hostedDomain.ssl_method,
-            ssl_id: hostedDomain.ssl_id ? String(hostedDomain.ssl_id) : '',
-          });
-          form.clearErrors();
-          reset(hostedDomain.domain);
-        }
-      }}
-    >
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Edit Domain</DialogTitle>
           <DialogDescription className="sr-only">Edit hosted domain</DialogDescription>
diff --git a/resources/js/pages/hosted-domains/index.tsx b/resources/js/pages/hosted-domains/index.tsx
index 5868a06ff..7f264a9e7 100644
--- a/resources/js/pages/hosted-domains/index.tsx
+++ b/resources/js/pages/hosted-domains/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import ServerLayout from '@/layouts/server/layout';
 import SiteBanners from '@/components/site-banners';
 import { Head, usePage } from '@inertiajs/react';
@@ -10,16 +9,6 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import {
   BookOpenIcon,
   EllipsisVerticalIcon,
@@ -32,122 +21,14 @@ import {
   ShieldCheckIcon,
   ShieldOffIcon,
 } from 'lucide-react';
-import { router, useForm } from '@inertiajs/react';
+import { router } from '@inertiajs/react';
 import { VitoTable } from '@/components/vito-table';
 import ErrorIndicator from '@/components/error-indicator';
 import { Site } from '@/types/site';
 import { HostedDomain } from '@/types/hosted-domain';
-import CreateHostedDomain from '@/pages/hosted-domains/components/create-hosted-domain';
-import EditHostedDomain from '@/pages/hosted-domains/components/edit-hosted-domain';
-import FormSuccessful from '@/components/form-successful';
+import { useDialog } from '@/hooks/use-dialog';
 import type { InertiaTableData, CellRenderProps, Row } from '@forjedio/inertia-table-react';
 
-function DeleteHostedDomain({ hostedDomain }: { hostedDomain: HostedDomain }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.delete(
-      route('hosted-domains.destroy', {
-        server: hostedDomain.server_id,
-        site: hostedDomain.site_id,
-        hostedDomain: hostedDomain.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-        },
-      },
-    );
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Domain</DialogTitle>
-          <DialogDescription className="sr-only">Delete domain</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{hostedDomain.domain}</strong>?
-          </p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function ForceActivateHostedDomain({ hostedDomain }: { hostedDomain: HostedDomain }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.post(
-      route('hosted-domains.force-activate', {
-        server: hostedDomain.server_id,
-        site: hostedDomain.site_id,
-        hostedDomain: hostedDomain.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-        },
-      },
-    );
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Force Validate</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Force Validate Domain</DialogTitle>
-          <DialogDescription className="sr-only">Force validate domain</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            The domain <strong>{hostedDomain.domain}</strong> is currently pending because we could not confirm that it resolves to this server. No
-            configuration changes have been made yet.
-          </p>
-          <p>
-            If you force validate this domain, the server configuration will be updated regardless. However, this may impact your ability to generate
-            an SSL certificate if the domain does not actually point to this server.
-          </p>
-          <p>Are you sure you want to continue?</p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Force Validate
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
 function CertificateCell({ row }: { row: HostedDomain }) {
   const ssl = row.ssl as { id: number; type: string; domains: string[]; expires_at: string } | null;
   const { ssl_method } = row;
@@ -215,6 +96,7 @@ export default function HostedDomains() {
     hostedDomains: InertiaTableData;
     hasSiteSsl: boolean;
   }>();
+  const dialog = useDialog();
 
   const sslLocked = !page.props.site.can_configure_ssl;
 
@@ -292,12 +174,10 @@ export default function HostedDomains() {
                 )}
               </DropdownMenuContent>
             </DropdownMenu>
-            <CreateHostedDomain site={page.props.site}>
-              <Button>
-                <PlusIcon />
-                <span className="hidden lg:block">Add Domain</span>
-              </Button>
-            </CreateHostedDomain>
+            <Button onClick={() => dialog.createHostedDomain.open({ site: page.props.site })}>
+              <PlusIcon />
+              <span className="hidden lg:block">Add Domain</span>
+            </Button>
           </div>
         </HeaderContainer>
 
@@ -335,9 +215,7 @@ export default function HostedDomains() {
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <EditHostedDomain hostedDomain={hd}>
-                      <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-                    </EditHostedDomain>
+                    <DropdownMenuItem onSelect={() => dialog.editHostedDomain.open({ hostedDomain: hd })}>Edit</DropdownMenuItem>
                     {hd.status === 'pending' && (
                       <>
                         <DropdownMenuSeparator />
@@ -354,7 +232,20 @@ export default function HostedDomains() {
                         >
                           Validate
                         </DropdownMenuItem>
-                        <ForceActivateHostedDomain hostedDomain={hd} />
+                        <DropdownMenuItem
+                          onSelect={() =>
+                            dialog.confirm.open({
+                              title: 'Force Validate Domain',
+                              description: `The domain ${hd.domain} is currently pending because we could not confirm that it resolves to this server. If you force validate this domain, the server configuration will be updated regardless. This may impact your ability to generate an SSL certificate if the domain does not actually point to this server. Are you sure you want to continue?`,
+                              variant: 'destructive',
+                              confirmLabel: 'Force Validate',
+                              method: 'post',
+                              url: route('hosted-domains.force-activate', { server: hd.server_id, site: hd.site_id, hostedDomain: hd.id }),
+                            })
+                          }
+                        >
+                          Force Validate
+                        </DropdownMenuItem>
                       </>
                     )}
                     {!isPrimary && (hd.status === 'active' || hd.status === 'pending') && (
@@ -396,7 +287,21 @@ export default function HostedDomains() {
                     {!isPrimary && (
                       <>
                         <DropdownMenuSeparator />
-                        <DeleteHostedDomain hostedDomain={hd} />
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onSelect={() =>
+                            dialog.confirm.open({
+                              title: 'Delete Domain',
+                              description: `Are you sure you want to delete ${hd.domain}?`,
+                              variant: 'destructive',
+                              confirmLabel: 'Delete',
+                              method: 'delete',
+                              url: route('hosted-domains.destroy', { server: hd.server_id, site: hd.site_id, hostedDomain: hd.id }),
+                            })
+                          }
+                        >
+                          Delete
+                        </DropdownMenuItem>
                       </>
                     )}
                   </DropdownMenuContent>
diff --git a/resources/js/pages/monitoring/components/actions.tsx b/resources/js/pages/monitoring/components/actions.tsx
index 3ffbd2592..60733a4b4 100644
--- a/resources/js/pages/monitoring/components/actions.tsx
+++ b/resources/js/pages/monitoring/components/actions.tsx
@@ -1,135 +1,14 @@
 import { Server } from '@/types/server';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon, MoreHorizontalIcon } from 'lucide-react';
-import React, { FormEvent, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { useForm, usePage } from '@inertiajs/react';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import FormSuccessful from '@/components/form-successful';
-
-function DataRetention() {
-  const page = usePage<{
-    server: Server;
-    dataRetention: string;
-  }>();
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    data_retention: String(page.props.dataRetention || '30'),
-  });
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('monitoring.update', page.props.server.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-      preserveScroll: true,
-      preserveState: true,
-    });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Data retention</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Data retention</DialogTitle>
-          <DialogDescription className="sr-only">Data retention</DialogDescription>
-        </DialogHeader>
-        <Form id="data-retention-form" className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="data_retention">Data retention (days)</Label>
-              <Select value={form.data.data_retention} onValueChange={(value) => form.setData('data_retention', value)}>
-                <SelectTrigger id="data_retention">
-                  <SelectValue placeholder="Select a period" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="7">7 Days</SelectItem>
-                    <SelectItem value="14">14 Days</SelectItem>
-                    <SelectItem value="30">30 Days</SelectItem>
-                    <SelectItem value="60">60 Days</SelectItem>
-                    <SelectItem value="90">90 Days</SelectItem>
-                    <SelectItem value="180">180 Days</SelectItem>
-                    <SelectItem value="365">365 Days</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Close</Button>
-          </DialogClose>
-          <Button form="data-retention-form" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function Reset({ server }: { server: Server }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.delete(route('monitoring.destroy', { server: server.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Reset
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Reset metrics</DialogTitle>
-          <DialogDescription className="sr-only">Reset and delete metrics</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to reset metrics? This will delete all existing monitoring metrics data for server <strong>{server.name}</strong> and
-          cannot be undone.
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Reset
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import { MoreHorizontalIcon } from 'lucide-react';
+import { usePage } from '@inertiajs/react';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Actions({ server }: { server: Server }) {
+  const dialog = useDialog();
+  const page = usePage<{ dataRetention: string }>();
+
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
@@ -139,9 +18,25 @@ export default function Actions({ server }: { server: Server }) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DataRetention />
+        <DropdownMenuItem onSelect={() => dialog.dataRetention.open({ server, dataRetention: page.props.dataRetention })}>
+          Data retention
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <Reset server={server} />
+        <DropdownMenuItem
+          variant="destructive"
+          onSelect={() =>
+            dialog.confirm.open({
+              title: 'Reset metrics',
+              description: `Are you sure you want to reset metrics? This will delete all existing monitoring metrics data for server ${server.name} and cannot be undone.`,
+              variant: 'destructive',
+              confirmLabel: 'Reset',
+              method: 'delete',
+              url: route('monitoring.destroy', { server: server.id }),
+            })
+          }
+        >
+          Reset
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/resources/js/pages/monitoring/components/data-retention-dialog.tsx b/resources/js/pages/monitoring/components/data-retention-dialog.tsx
new file mode 100644
index 000000000..93a2e3027
--- /dev/null
+++ b/resources/js/pages/monitoring/components/data-retention-dialog.tsx
@@ -0,0 +1,74 @@
+import { Server } from '@/types/server';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+type DataRetentionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  server: Server;
+  dataRetention: string;
+};
+
+export default function DataRetentionDialog({ open, onOpenChange, server, dataRetention }: DataRetentionDialogProps) {
+  const form = useForm({
+    data_retention: String(dataRetention || '30'),
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('monitoring.update', server.id), {
+      onSuccess: () => onOpenChange(false),
+      preserveScroll: true,
+      preserveState: true,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Data retention</DialogTitle>
+          <DialogDescription className="sr-only">Data retention</DialogDescription>
+        </DialogHeader>
+        <Form id="data-retention-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="data_retention">Data retention (days)</Label>
+              <Select value={form.data.data_retention} onValueChange={(value) => form.setData('data_retention', value)}>
+                <SelectTrigger id="data_retention">
+                  <SelectValue placeholder="Select a period" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="7">7 Days</SelectItem>
+                    <SelectItem value="14">14 Days</SelectItem>
+                    <SelectItem value="30">30 Days</SelectItem>
+                    <SelectItem value="60">60 Days</SelectItem>
+                    <SelectItem value="90">90 Days</SelectItem>
+                    <SelectItem value="180">180 Days</SelectItem>
+                    <SelectItem value="365">365 Days</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="data-retention-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/notification-channels/components/delete.tsx b/resources/js/pages/notification-channels/components/delete.tsx
index 906d3c041..25cf8adf9 100644
--- a/resources/js/pages/notification-channels/components/delete.tsx
+++ b/resources/js/pages/notification-channels/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
 import { NotificationChannel } from '@/types/notification-channel';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ notificationChannel }: { notificationChannel: NotificationChannel }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('notification-channels.destroy', notificationChannel.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {notificationChannel.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete notification channel</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{notificationChannel.name}</strong>?
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${notificationChannel.name}`,
+          description: `Are you sure you want to delete ${notificationChannel.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('notification-channels.destroy', notificationChannel.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/notification-channels/components/edit-dialog.tsx b/resources/js/pages/notification-channels/components/edit-dialog.tsx
new file mode 100644
index 000000000..2569164c5
--- /dev/null
+++ b/resources/js/pages/notification-channels/components/edit-dialog.tsx
@@ -0,0 +1,76 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent } from 'react';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { NotificationChannel } from '@/types/notification-channel';
+
+export default function NotificationChannelEditDialog({
+  open,
+  onOpenChange,
+  notificationChannel,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  notificationChannel: NotificationChannel;
+}) {
+  const form = useForm({
+    name: notificationChannel.name,
+    global: notificationChannel.global,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('notification-channels.update', notificationChannel.id), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Edit {notificationChannel.name}</DialogTitle>
+          <DialogDescription className="sr-only">Edit notification channel</DialogDescription>
+        </DialogHeader>
+        <Form id="edit-notification-channel" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="global"
+                  name="global"
+                  checked={form.data.global}
+                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
+                />
+                <Label htmlFor="global">Is global (accessible in all projects)</Label>
+              </div>
+              <InputError message={form.errors.global} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="edit-notification-channel" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/notification-channels/components/edit.tsx b/resources/js/pages/notification-channels/components/edit.tsx
index 36a5bc57b..9461b3e89 100644
--- a/resources/js/pages/notification-channels/components/edit.tsx
+++ b/resources/js/pages/notification-channels/components/edit.tsx
@@ -1,85 +1,9 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { FormEvent, useEffect, useState } from 'react';
-import InputError from '@/components/ui/input-error';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
 import { NotificationChannel } from '@/types/notification-channel';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Edit({ notificationChannel }: { notificationChannel: NotificationChannel }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    name: notificationChannel.name,
-    global: notificationChannel.global,
-  });
+  const dialog = useDialog();
 
-  useEffect(() => {
-    form.setData({ name: notificationChannel.name, global: notificationChannel.global });
-  }, [notificationChannel.id, notificationChannel.name, notificationChannel.global]);
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('notification-channels.update', notificationChannel.id), {
-      onSuccess: () => setOpen(false),
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit {notificationChannel.name}</DialogTitle>
-          <DialogDescription className="sr-only">Edit notification channel</DialogDescription>
-        </DialogHeader>
-        <Form id={`edit-notification-channel-form-${notificationChannel.id}`} className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="name">Name</Label>
-              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
-              <InputError message={form.errors.name} />
-            </FormField>
-            <FormField>
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  id="global"
-                  name="global"
-                  checked={form.data.global}
-                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
-                />
-                <Label htmlFor="global">Is global (accessible in all projects)</Label>
-              </div>
-              <InputError message={form.errors.global} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form={`edit-notification-channel-form-${notificationChannel.id}`} type="submit" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.notificationChannelEdit.open({ notificationChannel })}>Edit</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/php/components/default-cli.tsx b/resources/js/pages/php/components/default-cli.tsx
index 12fc51bd7..95fa1b4b3 100644
--- a/resources/js/pages/php/components/default-cli.tsx
+++ b/resources/js/pages/php/components/default-cli.tsx
@@ -1,64 +1,25 @@
 import { Service } from '@/types/service';
-import React, { FormEvent, useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import InputError from '@/components/ui/input-error';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function DefaultCli({ service }: { service: Service }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{
-    version: string;
-  }>({
-    version: service.version,
-  });
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.post(route('php.default-cli', { server: service.server_id, service: service.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem disabled={service.is_default} onSelect={(e) => e.preventDefault()}>
-          Make default cli
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Make default cli</DialogTitle>
-          <DialogDescription className="sr-only">Make default cli</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to make PHP {form.data.version} the default cli?</p>
-          <InputError message={form.errors.version} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form="install-extension-form" disabled={form.processing} onClick={submit} className="ml-2">
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      disabled={service.is_default}
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Make default cli',
+          description: `Are you sure you want to make PHP ${service.version} the default cli?`,
+          confirmLabel: 'Save',
+          method: 'post',
+          url: route('php.default-cli', { server: service.server_id, service: service.id }),
+          data: { version: service.version },
+        })
+      }
+    >
+      Make default cli
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/php/components/extensions.tsx b/resources/js/pages/php/components/extensions.tsx
index 28a8048f6..b0fd9b06d 100644
--- a/resources/js/pages/php/components/extensions.tsx
+++ b/resources/js/pages/php/components/extensions.tsx
@@ -1,98 +1,9 @@
 import { Service } from '@/types/service';
-import React, { FormEvent, useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import InputError from '@/components/ui/input-error';
-import { useConfigs } from '@/stores/bootstrap-store';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Extensions({ service }: { service: Service }) {
-  const configs = useConfigs()!;
-  const [open, setOpen] = useState(false);
-  const form = useForm<{
-    extension: string;
-    version: string;
-  }>({
-    extension: '',
-    version: service.version,
-  });
-  const [, php] = Object.entries(configs.service.services).filter(([key]) => key === 'php')[0] || null;
+  const dialog = useDialog();
 
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.post(route('php.install-extension', { server: service.server_id, service: service.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-
-  if (!php) {
-    return null;
-  }
-
-  const availableExtensions = Array.isArray(service.type_data?.available_extensions)
-    ? service.type_data.available_extensions
-    : Array.isArray(php.data?.extensions)
-      ? php.data.extensions
-      : Object.values(service.type_data?.available_extensions || php.data?.extensions || {});
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Extensions</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Install extension</DialogTitle>
-          <DialogDescription className="sr-only">Install php extension</DialogDescription>
-        </DialogHeader>
-        <Form id="install-extension-form" className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="extension">Extension</Label>
-              <Select value={form.data.extension} onValueChange={(value) => form.setData('extension', value)}>
-                <SelectTrigger id="extension">
-                  <SelectValue placeholder="Select an extension" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    {availableExtensions.map((extension: string) => (
-                      <SelectItem key={`extension-${extension}`} value={extension} disabled={service.type_data?.extensions?.includes(extension)}>
-                        {extension} {service.type_data?.extensions?.includes(extension) && <span>(installed)</span>}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <InputError message={form.errors.extension} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form="install-extension-form" disabled={form.processing} onClick={submit} className="ml-2">
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Install
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.phpExtensions.open({ service })}>Extensions</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/php/components/ini.tsx b/resources/js/pages/php/components/ini.tsx
index 01025ae5a..a85789924 100644
--- a/resources/js/pages/php/components/ini.tsx
+++ b/resources/js/pages/php/components/ini.tsx
@@ -1,108 +1,9 @@
 import { Service } from '@/types/service';
-import React, { FormEvent, useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-import { Editor, useMonaco } from '@monaco-editor/react';
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Form } from '@/components/ui/form';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import { registerIniLanguage } from '@/lib/editor';
-import { useAppearance } from '@/hooks/use-appearance';
-import { useInputFocus } from '@/stores/useInputFocus';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function PHPIni({ service, type }: { service: Service; type: 'fpm' | 'cli' }) {
-  const { getActualAppearance } = useAppearance();
-  const setFocused = useInputFocus((state) => state.setFocused);
-  const [open, setOpen] = useState(false);
-  const form = useForm<{
-    ini: string;
-    type: 'fpm' | 'cli';
-    version: string;
-  }>({
-    ini: '',
-    type: type,
-    version: service.version,
-  });
+  const dialog = useDialog();
 
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
-    setFocused(isOpen);
-  };
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('php.ini.update', { server: service.server_id, service: service.id }), {
-      onSuccess: () => {
-        handleOpenChange(false);
-      },
-    });
-  };
-
-  const query = useQuery({
-    queryKey: ['php.ini', service.server_id, service.id, type],
-    queryFn: async () => {
-      const response = await axios.get(
-        route('php.ini', {
-          server: service.server_id,
-          service: service.id,
-          version: service.version,
-          type: type,
-        }),
-      );
-      if (response.data?.ini) {
-        form.setData('ini', response.data.ini);
-      }
-      return response.data;
-    },
-    retry: false,
-    enabled: open,
-    refetchOnWindowFocus: false,
-  });
-
-  registerIniLanguage(useMonaco());
-
-  return (
-    <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit {type} ini</DropdownMenuItem>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-5xl">
-        <SheetHeader>
-          <SheetTitle>Edit {type} ini</SheetTitle>
-          <SheetDescription className="sr-only">You can edit the {type} ini file for this service. Make sure to save your changes.</SheetDescription>
-        </SheetHeader>
-        <Form id="update-ini-form" className="h-full" onSubmit={submit}>
-          {query.isSuccess ? (
-            <Editor
-              defaultLanguage="ini"
-              value={query.data.ini}
-              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
-              className="h-full"
-              onChange={(value) => form.setData('ini', value ?? '')}
-              options={{
-                fontSize: 15,
-              }}
-            />
-          ) : (
-            <Skeleton className="h-full w-full rounded-none" />
-          )}
-        </Form>
-        <SheetFooter>
-          <div className="flex items-center gap-2">
-            <Button form="update-ini-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
-              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
-              Save
-            </Button>
-            <SheetClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </SheetClose>
-          </div>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.phpIni.open({ service, type })}>Edit {type} ini</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/plugins/components/delete-logs.tsx b/resources/js/pages/plugins/components/delete-logs.tsx
index 55c715179..d854d3b8a 100644
--- a/resources/js/pages/plugins/components/delete-logs.tsx
+++ b/resources/js/pages/plugins/components/delete-logs.tsx
@@ -1,59 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function DeleteLogs({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.delete(route('plugins.logs'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete Logs</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Error Logs</DialogTitle>
-          <DialogDescription className="sr-only">Delete error logs for {plugin.name ?? plugin.folder}</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to delete the error logs for the plugin <strong>{plugin.name ?? plugin.folder}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Delete Logs
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete Error Logs',
+          description: `Are you sure you want to delete the error logs for the plugin ${plugin.name ?? plugin.folder}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete Logs',
+          method: 'delete',
+          url: route('plugins.logs'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      Delete Logs
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/disable.tsx b/resources/js/pages/plugins/components/disable.tsx
index bb2694910..a6a80dae3 100644
--- a/resources/js/pages/plugins/components/disable.tsx
+++ b/resources/js/pages/plugins/components/disable.tsx
@@ -1,61 +1,26 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Disable({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.patch(route('plugins.disable'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Disable
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Disable plugin</DialogTitle>
-          <DialogDescription className="sr-only">Disable plugin {plugin.name}</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to Disable the plugin <strong>{plugin.name}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Disable
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Disable plugin',
+          description: `Are you sure you want to disable the plugin ${plugin.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Disable',
+          method: 'patch',
+          url: route('plugins.disable'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      Disable
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/enable.tsx b/resources/js/pages/plugins/components/enable.tsx
index 8f2fa3f18..47e670381 100644
--- a/resources/js/pages/plugins/components/enable.tsx
+++ b/resources/js/pages/plugins/components/enable.tsx
@@ -1,59 +1,24 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function EnablePlugin({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.patch(route('plugins.enable'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Enable</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Enable plugin</DialogTitle>
-          <DialogDescription className="sr-only">Enable plugin {plugin.name}</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to enable the plugin <strong>{plugin.name}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="default" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Enable
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Enable plugin',
+          description: `Are you sure you want to enable the plugin ${plugin.name}?`,
+          confirmLabel: 'Enable',
+          method: 'patch',
+          url: route('plugins.enable'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      Enable
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/install.tsx b/resources/js/pages/plugins/components/install.tsx
index 8491b6612..0be1664ad 100644
--- a/resources/js/pages/plugins/components/install.tsx
+++ b/resources/js/pages/plugins/components/install.tsx
@@ -1,59 +1,24 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function InstallPlugin({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.patch(route('plugins.install'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Install</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Install plugin</DialogTitle>
-          <DialogDescription className="sr-only">Install plugin {plugin.folder}</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to install the plugin located at <strong>{plugin.folder}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="default" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Install
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Install plugin',
+          description: `Are you sure you want to install the plugin located at ${plugin.folder}?`,
+          confirmLabel: 'Install',
+          method: 'patch',
+          url: route('plugins.install'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      Install
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/installed.tsx b/resources/js/pages/plugins/components/installed.tsx
index 358a6df86..a3c3e4b2c 100644
--- a/resources/js/pages/plugins/components/installed.tsx
+++ b/resources/js/pages/plugins/components/installed.tsx
@@ -6,9 +6,10 @@ import { Pip } from '@/components/ui/pip';
 import PluginDropdown from '@/pages/plugins/components/plugin-dropdown';
 import { TriangleAlert } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import ViewLogs from './view-logs';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function InstalledPlugins({ plugins }: { plugins: Plugin[] }) {
+  const dialog = useDialog();
   const installedPlugins = plugins.filter((plugin) => plugin.is_installed);
   return (
     <div>
@@ -40,10 +41,10 @@ export default function InstalledPlugins({ plugins }: { plugins: Plugin[] }) {
               <div className="flex flex-row items-center gap-4">
                 {plugin.errors.length > 0 && (
                   <Tooltip>
-                    <TooltipTrigger>
-                      <ViewLogs plugin={plugin}>
+                    <TooltipTrigger asChild>
+                      <button type="button" onClick={() => dialog.pluginLogs.open({ name: plugin.name ?? plugin.folder, errors: plugin.errors })}>
                         <TriangleAlert className="text-destructive cursor-pointer" />
-                      </ViewLogs>
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent>This plugin has errors</TooltipContent>
                   </Tooltip>
diff --git a/resources/js/pages/plugins/components/uninstall.tsx b/resources/js/pages/plugins/components/uninstall.tsx
index 1f0ecc7d3..b0aa7aad5 100644
--- a/resources/js/pages/plugins/components/uninstall.tsx
+++ b/resources/js/pages/plugins/components/uninstall.tsx
@@ -1,63 +1,27 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Uninstall({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.delete(route('plugins.uninstall'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
+  const label = plugin.is_installed ? 'Uninstall' : 'Remove';
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          {plugin.is_installed ? 'Uninstall' : 'Remove'}
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{plugin.is_installed ? 'Uninstall' : 'Remove'} Plugin</DialogTitle>
-          <DialogDescription className="sr-only">
-            {plugin.is_installed ? 'Uninstall' : 'Remove'} plugin {plugin.name ?? plugin.folder}
-          </DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to {plugin.is_installed ? 'uninstall' : 'remove'} the plugin <strong>{plugin.name ?? plugin.folder}</strong>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            {plugin.is_installed ? 'Uninstall' : 'Remove'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `${label} Plugin`,
+          description: `Are you sure you want to ${label.toLowerCase()} the plugin ${plugin.name ?? plugin.folder}?`,
+          variant: 'destructive',
+          confirmLabel: label,
+          method: 'delete',
+          url: route('plugins.uninstall'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      {label}
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/update.tsx b/resources/js/pages/plugins/components/update.tsx
index 6301d5c68..49b55f732 100644
--- a/resources/js/pages/plugins/components/update.tsx
+++ b/resources/js/pages/plugins/components/update.tsx
@@ -1,59 +1,24 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { useState } from 'react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { Plugin } from '@/types/plugin';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function UpdatePlugin({ plugin }: { plugin: Plugin }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm({
-    id: plugin.id,
-  });
-
-  const submit = () => {
-    form.patch(route('plugins.update'), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Update</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Update plugin</DialogTitle>
-          <DialogDescription className="sr-only">Update plugin {plugin.name}</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to update the plugin <strong>{plugin.name}</strong> to the latest released version?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="default" onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Update
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Update plugin',
+          description: `Are you sure you want to update the plugin ${plugin.name} to the latest released version?`,
+          confirmLabel: 'Update',
+          method: 'patch',
+          url: route('plugins.update'),
+          data: { id: plugin.id },
+        })
+      }
+    >
+      Update
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/plugins/components/view-logs.tsx b/resources/js/pages/plugins/components/view-logs.tsx
index e81a142d2..b2da27fe2 100644
--- a/resources/js/pages/plugins/components/view-logs.tsx
+++ b/resources/js/pages/plugins/components/view-logs.tsx
@@ -1,116 +1,13 @@
-import { Plugin } from '@/types/plugin';
-import { ChevronDownIcon, ChevronRightIcon, FileCodeIcon, AlertCircleIcon, TimerIcon } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Card, CardContent, CardRow } from '@/components/ui/card';
-import { ReactNode, useState } from 'react';
-import { cn } from '@/lib/utils';
-import DateTime from '@/components/date-time';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Plugin } from '@/types/plugin';
+import { useDialog } from '@/hooks/use-dialog';
 
-export default function ViewLogs({ plugin, children }: { plugin: Plugin; children?: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
-
-  const toggleExpanded = (index: number) => {
-    setExpandedItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(index)) {
-        newSet.delete(index);
-      } else {
-        newSet.add(index);
-      }
-      return newSet;
-    });
-  };
+export default function ViewLogs({ plugin }: { plugin: Plugin }) {
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {children ? children : <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View Logs</DropdownMenuItem>}
-      </DialogTrigger>
-      <DialogContent className="flex max-h-[80vh] max-w-2xl! flex-col">
-        <DialogHeader>
-          <DialogTitle>Error Logs - {plugin.name ?? plugin.folder}</DialogTitle>
-          <DialogDescription>
-            {plugin.errors.length}
-            {plugin.errors.length === 10 && '+'} error{plugin.errors.length !== 1 ? 's' : ''} found in this plugin.
-            {plugin.errors.length === 10 && 'The most recent 10 will be shown below.'}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex-1 overflow-y-auto p-4">
-          {plugin.errors.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <AlertCircleIcon className="text-muted-foreground mb-3 h-12 w-12" />
-              <p className="text-muted-foreground">No errors found</p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {plugin.errors.map((error, index) => (
-                <Card key={index} className="overflow-hidden">
-                  <CardRow
-                    className={cn('hover:bg-accent/50 cursor-pointer transition-colors', expandedItems.has(index) && 'border-b')}
-                    onClick={() => toggleExpanded(index)}
-                  >
-                    <div className="flex flex-1 items-start gap-3">
-                      <div className="mt-0.5">
-                        {expandedItems.has(index) ? (
-                          <ChevronDownIcon className="text-muted-foreground h-4 w-4" />
-                        ) : (
-                          <ChevronRightIcon className="text-muted-foreground h-4 w-4" />
-                        )}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-destructive overflow-wrap-anywhere text-sm font-medium break-words">{error.error_message}</p>
-                        <div className="mt-4 flex flex-wrap items-start gap-4">
-                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
-                            <TimerIcon className="h-3 w-3 flex-shrink-0" />
-                            <span className="font-mono break-all">
-                              <DateTime date={error.occurred_at} />
-                            </span>
-                          </div>
-                        </div>
-                        <div className="mt-2 flex flex-wrap items-start gap-4">
-                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
-                            <FileCodeIcon className="h-3 w-3 flex-shrink-0" />
-                            <span className="font-mono break-all">
-                              {error.file.substring(error.file.indexOf('/app'))}:{error.line}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </CardRow>
-                  {expandedItems.has(index) && (
-                    <CardContent className="bg-muted/30 p-4">
-                      <div className="space-y-2">
-                        <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Stack Trace</p>
-                        <pre className="bg-background overflow-x-auto rounded-md p-3 font-mono text-xs break-all whitespace-pre-wrap">
-                          {error.stack_trace}
-                        </pre>
-                      </div>
-                    </CardContent>
-                  )}
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Close</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem onSelect={() => dialog.pluginLogs.open({ name: plugin.name ?? plugin.folder, errors: plugin.errors })}>
+      View Logs
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/projects/components/invitations.tsx b/resources/js/pages/projects/components/invitations.tsx
index f19ea16e3..28e114090 100644
--- a/resources/js/pages/projects/components/invitations.tsx
+++ b/resources/js/pages/projects/components/invitations.tsx
@@ -1,58 +1,51 @@
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { ColumnDef } from '@tanstack/react-table';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { ProjectUser } from '@/types/project-user';
-import { FormEvent, ReactNode, useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { Badge } from '@/components/ui/badge';
+import { useDialog } from '@/hooks/use-dialog';
 
-function Reject({ invitation, children }: { invitation: ProjectUser; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.delete(`/settings/projects/${invitation.project_id}/leave`, {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
+function Actions({ invitation }: { invitation: ProjectUser }) {
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {invitation.project_name}</DialogTitle>
-          <DialogDescription className="sr-only">Reject joining {invitation.project_name}</DialogDescription>
-        </DialogHeader>
-
-        <p className="p-4">Are you sure you want to reject joining this project?</p>
-
-        <DialogFooter className="gap-2">
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-
-          <Button onClick={submit} variant="destructive" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Reject
+    <div className="flex items-center justify-end">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreVerticalIcon />
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              window.location.href = `/settings/projects/${invitation.project_id}/invitations/accept`;
+            }}
+          >
+            Accept & Join
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            onSelect={() =>
+              dialog.confirm.open({
+                title: `Delete ${invitation.project_name}`,
+                description: 'Are you sure you want to reject joining this project?',
+                variant: 'destructive',
+                confirmLabel: 'Reject',
+                method: 'delete',
+                url: `/settings/projects/${invitation.project_id}/leave`,
+              })
+            }
+          >
+            Reject
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   );
 }
 
@@ -77,34 +70,7 @@ export const columns: ColumnDef<ProjectUser>[] = [
     enableColumnFilter: false,
     enableSorting: false,
     cell: ({ row }) => {
-      return (
-        <div className="flex items-center justify-end">
-          <DropdownMenu modal={false}>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreVerticalIcon />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                onSelect={(e) => {
-                  e.preventDefault();
-                  window.location.href = `/settings/projects/${row.original.project_id}/invitations/accept`;
-                }}
-              >
-                Accept & Join
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <Reject invitation={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
-                  Reject
-                </DropdownMenuItem>
-              </Reject>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
+      return <Actions invitation={row.original} />;
     },
   },
 ];
diff --git a/resources/js/pages/redirects/components/columns.tsx b/resources/js/pages/redirects/components/columns.tsx
index 46065ce2d..d622b132a 100644
--- a/resources/js/pages/redirects/components/columns.tsx
+++ b/resources/js/pages/redirects/components/columns.tsx
@@ -1,69 +1,31 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import React, { useState } from 'react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
 import { Redirect } from '@/types/redirect';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import FormSuccessful from '@/components/form-successful';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Delete({ redirect }: { redirect: Redirect }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(
-      route('redirects.destroy', {
-        server: redirect.server_id,
-        site: redirect.site_id,
-        redirect: redirect.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-        },
-      },
-    );
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Redirect</DialogTitle>
-          <DialogDescription className="sr-only">Delete Redirect</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to delete this redirect?</p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete Redirect',
+          description: 'Are you sure you want to delete this redirect?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('redirects.destroy', { server: redirect.server_id, site: redirect.site_id, redirect: redirect.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/scripts/components/columns.tsx b/resources/js/pages/scripts/components/columns.tsx
index ae9df4eb7..94eb37ed5 100644
--- a/resources/js/pages/scripts/components/columns.tsx
+++ b/resources/js/pages/scripts/components/columns.tsx
@@ -1,60 +1,37 @@
 import { ColumnDef } from '@tanstack/react-table';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { Link, useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { Link } from '@inertiajs/react';
+import { MoreVerticalIcon, PlayIcon } from 'lucide-react';
 import { Script } from '@/types/script';
 import Execute from '@/pages/scripts/components/execute';
-import ScriptForm from './form';
+import { useDialog } from '@/hooks/use-dialog';
+
+function Edit({ script }: { script: Script }) {
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.scriptForm.open({ script })}>Edit</DropdownMenuItem>;
+}
 
 function Delete({ script }: { script: Script }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('scripts.destroy', { server: script.server_id, site: script.site_id, script: script.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete script</DialogTitle>
-          <DialogDescription className="sr-only">Delete script</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to this script?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete script',
+          description: 'Are you sure you want to delete this script?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('scripts.destroy', { server: script.server_id, site: script.site_id, script: script.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -85,9 +62,7 @@ export const columns: ColumnDef<Script>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <ScriptForm script={row.original}>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-              </ScriptForm>
+              <Edit script={row.original} />
               <Link
                 href={route('scripts.show', {
                   script: row.original.id,
diff --git a/resources/js/pages/scripts/components/form.tsx b/resources/js/pages/scripts/components/form.tsx
index 230114088..b14f9176b 100644
--- a/resources/js/pages/scripts/components/form.tsx
+++ b/resources/js/pages/scripts/components/form.tsx
@@ -1,5 +1,5 @@
-import { FormEvent, ReactNode, useState } from 'react';
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { FormEvent, useEffect } from 'react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { useForm } from '@inertiajs/react';
 import { Button } from '@/components/ui/button';
@@ -13,12 +13,10 @@ import { useAppearance } from '@/hooks/use-appearance';
 import { Script } from '@/types/script';
 import { useInputFocus } from '@/stores/useInputFocus';
 
-export default function ScriptForm({ script, children }: { script?: Script; children: ReactNode }) {
+export default function ScriptForm({ open, onOpenChange, script }: { open: boolean; onOpenChange: (open: boolean) => void; script?: Script }) {
   const { getActualAppearance } = useAppearance();
   const setFocused = useInputFocus((state) => state.setFocused);
 
-  const [open, setOpen] = useState(false);
-
   const form = useForm<{
     name: string;
     content: string;
@@ -27,35 +25,30 @@ export default function ScriptForm({ script, children }: { script?: Script; chil
     content: script?.content ?? '',
   });
 
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
-    setFocused(isOpen);
-  };
+  useEffect(() => {
+    setFocused(open);
+    return () => setFocused(false);
+  }, [open, setFocused]);
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
     if (script) {
       form.put(route('scripts.update', { script: script.id }), {
-        onSuccess: () => {
-          handleOpenChange(false);
-        },
+        onSuccess: () => onOpenChange(false),
       });
       return;
     }
 
     form.post(route('scripts'), {
-      onSuccess: () => {
-        handleOpenChange(false);
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
 
   registerBashLanguage(useMonaco());
 
   return (
-    <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="sm:max-w-5xl">
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-5xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <SheetHeader>
           <SheetTitle>{script ? 'Edit' : 'Create'} script</SheetTitle>
           <SheetDescription className="sr-only">{script ? 'Edit' : 'Create'} script</SheetDescription>
diff --git a/resources/js/pages/scripts/index.tsx b/resources/js/pages/scripts/index.tsx
index af41bdaee..258809e7a 100644
--- a/resources/js/pages/scripts/index.tsx
+++ b/resources/js/pages/scripts/index.tsx
@@ -1,50 +1,41 @@
 import { Head, usePage } from '@inertiajs/react';
 import { Server } from '@/types/server';
-import Container from '@/components/container';
+import { PaginatedData } from '@/types';
+import ServerLayout from '@/layouts/server/layout';
 import HeaderContainer from '@/components/header-container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
-import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import { PlusIcon } from 'lucide-react';
+import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/scripts/components/columns';
-import { PaginatedData } from '@/types';
 import { Script } from '@/types/script';
+import { columns } from '@/pages/scripts/components/columns';
 import { Site } from '@/types/site';
-import Layout from '@/layouts/app/layout';
-import ScriptForm from '@/pages/scripts/components/form';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Scripts() {
   const page = usePage<{
     server: Server;
-    site: Site;
     scripts: PaginatedData<Script>;
+    site?: Site;
   }>();
+  const dialog = useDialog();
 
   return (
-    <Layout>
-      <Head title={`Scripts`} />
+    <ServerLayout>
+      <Head title={`Scripts - ${page.props.server.name}`} />
 
       <Container className="max-w-5xl">
         <HeaderContainer>
-          <Heading title="Scripts" description="These are the scripts that you can run on your site's location" />
-          <div className="flex items-center gap-2">
-            <a href="https://vitodeploy.com/docs/scripts" target="_blank">
-              <Button variant="outline">
-                <BookOpenIcon />
-                <span className="hidden lg:block">Docs</span>
-              </Button>
-            </a>
-            <ScriptForm>
-              <Button>
-                <PlusIcon />
-                <span className="hidden lg:block">Create</span>
-              </Button>
-            </ScriptForm>
-          </div>
+          <Heading title="Scripts" description="Here you can manage the scripts" />
+          <Button onClick={() => dialog.scriptForm.open({})}>
+            <PlusIcon />
+            <span className="hidden lg:block">Create</span>
+          </Button>
         </HeaderContainer>
 
         <DataTable columns={columns} paginatedData={page.props.scripts} />
       </Container>
-    </Layout>
+    </ServerLayout>
   );
 }
diff --git a/resources/js/pages/server-logs/components/columns.tsx b/resources/js/pages/server-logs/components/columns.tsx
index b93a4a8bb..85aede6b5 100644
--- a/resources/js/pages/server-logs/components/columns.tsx
+++ b/resources/js/pages/server-logs/components/columns.tsx
@@ -1,22 +1,10 @@
 import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import { MoreVerticalIcon } from 'lucide-react';
 import type { ServerLog } from '@/types/server-log';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import DateTime from '@/components/date-time';
+import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { useForm } from '@inertiajs/react';
-import FormSuccessful from '@/components/form-successful';
 import { useDialog } from '@/hooks/use-dialog';
 
 export function View({ serverLog, label = 'View' }: { serverLog: ServerLog; label?: string }) {
@@ -38,87 +26,44 @@ export function Download({ serverLog, children }: { serverLog: ServerLog; childr
 }
 
 function Clear({ serverLog }: { serverLog: ServerLog }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.post(route('logs.clear', { server: serverLog.server_id, log: serverLog.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Clear</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Clear {serverLog.name}</DialogTitle>
-          <DialogDescription className="sr-only">Clear log contents</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to clear the contents of <strong>{serverLog.name}</strong>?
-          </p>
-          <p className="text-muted-foreground text-sm">This will remove all content from the log file but keep the file itself.</p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Clear
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Clear ${serverLog.name}`,
+          description: `Are you sure you want to clear the contents of ${serverLog.name}? This will remove all content from the log file but keep the file itself.`,
+          confirmLabel: 'Clear',
+          method: 'post',
+          url: route('logs.clear', { server: serverLog.server_id, log: serverLog.id }),
+        })
+      }
+    >
+      Clear
+    </DropdownMenuItem>
   );
 }
 
 function Delete({ serverLog }: { serverLog: ServerLog }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('logs.destroy', { server: serverLog.server_id, log: serverLog.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {serverLog.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete log</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{serverLog.name}</strong>?
-          </p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${serverLog.name}`,
+          description: `Are you sure you want to delete ${serverLog.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('logs.destroy', { server: serverLog.server_id, log: serverLog.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/server-providers/components/delete.tsx b/resources/js/pages/server-providers/components/delete.tsx
index e30a37e02..e7e68e6f6 100644
--- a/resources/js/pages/server-providers/components/delete.tsx
+++ b/resources/js/pages/server-providers/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
 import { ServerProvider } from '@/types/server-provider';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ serverProvider }: { serverProvider: ServerProvider }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('server-providers.destroy', serverProvider.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {serverProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete server provider</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{serverProvider.name}</strong>?
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${serverProvider.name}`,
+          description: `Are you sure you want to delete ${serverProvider.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('server-providers.destroy', serverProvider.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/server-providers/components/edit-dialog.tsx b/resources/js/pages/server-providers/components/edit-dialog.tsx
new file mode 100644
index 000000000..93f5e175d
--- /dev/null
+++ b/resources/js/pages/server-providers/components/edit-dialog.tsx
@@ -0,0 +1,76 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent } from 'react';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ServerProvider } from '@/types/server-provider';
+
+export default function ServerProviderEditDialog({
+  open,
+  onOpenChange,
+  serverProvider,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverProvider: ServerProvider;
+}) {
+  const form = useForm({
+    name: serverProvider.name,
+    global: serverProvider.global,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('server-providers.update', serverProvider.id), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Edit {serverProvider.name}</DialogTitle>
+          <DialogDescription className="sr-only">Edit server provider</DialogDescription>
+        </DialogHeader>
+        <Form id="edit-server-provider-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="global"
+                  name="global"
+                  checked={form.data.global}
+                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
+                />
+                <Label htmlFor="global">Is global (accessible in all projects)</Label>
+              </div>
+              <InputError message={form.errors.global} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="edit-server-provider-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/server-providers/components/edit.tsx b/resources/js/pages/server-providers/components/edit.tsx
index b1f17bf57..33aea3699 100644
--- a/resources/js/pages/server-providers/components/edit.tsx
+++ b/resources/js/pages/server-providers/components/edit.tsx
@@ -1,85 +1,9 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { FormEvent, useEffect, useState } from 'react';
-import InputError from '@/components/ui/input-error';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
 import { ServerProvider } from '@/types/server-provider';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Edit({ serverProvider }: { serverProvider: ServerProvider }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    name: serverProvider.name,
-    global: serverProvider.global,
-  });
+  const dialog = useDialog();
 
-  useEffect(() => {
-    form.setData({ name: serverProvider.name, global: serverProvider.global });
-  }, [serverProvider.id, serverProvider.name, serverProvider.global]);
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('server-providers.update', serverProvider.id), {
-      onSuccess: () => setOpen(false),
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit {serverProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Edit server provider</DialogDescription>
-        </DialogHeader>
-        <Form id={`edit-server-provider-form-${serverProvider.id}`} className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="name">Name</Label>
-              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
-              <InputError message={form.errors.name} />
-            </FormField>
-            <FormField>
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  id="global"
-                  name="global"
-                  checked={form.data.global}
-                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
-                />
-                <Label htmlFor="global">Is global (accessible in all projects)</Label>
-              </div>
-              <InputError message={form.errors.global} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form={`edit-server-provider-form-${serverProvider.id}`} type="submit" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.serverProviderEdit.open({ serverProvider })}>Edit</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/server-ssh-keys/components/delete.tsx b/resources/js/pages/server-ssh-keys/components/delete.tsx
index 5f94ae75c..2bc0ff959 100644
--- a/resources/js/pages/server-ssh-keys/components/delete.tsx
+++ b/resources/js/pages/server-ssh-keys/components/delete.tsx
@@ -1,70 +1,30 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm, usePage } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
+import { usePage } from '@inertiajs/react';
 import { SshKey } from '@/types/ssh-key';
 import { Server } from '@/types/server';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ sshKey }: { sshKey: SshKey }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
   const page = usePage<{
     server: Server;
   }>();
 
-  const submit = () => {
-    form.delete(
-      route('server-ssh-keys.destroy', {
-        server: page.props.server.id,
-        sshKey: sshKey.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-        },
-      },
-    );
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            Delete {sshKey.name} from {page.props.server.name}
-          </DialogTitle>
-          <DialogDescription className="sr-only">Delete ssh key</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">
-          Are you sure you want to delete this key from <b>{page.props.server.name}</b>?
-        </p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${sshKey.name} from ${page.props.server.name}`,
+          description: `Are you sure you want to delete this key from ${page.props.server.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('server-ssh-keys.destroy', { server: page.props.server.id, sshKey: sshKey.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/server-ssls/components/activate-server-ssl.tsx b/resources/js/pages/server-ssls/components/activate-server-ssl.tsx
index 0571855fd..0b480727d 100644
--- a/resources/js/pages/server-ssls/components/activate-server-ssl.tsx
+++ b/resources/js/pages/server-ssls/components/activate-server-ssl.tsx
@@ -1,88 +1,9 @@
-import { FormEvent, ReactNode, useState } from 'react';
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { useForm } from '@inertiajs/react';
-import { Button } from '@/components/ui/button';
-import { LoaderCircle } from 'lucide-react';
-import { Label } from '@/components/ui/label';
-import InputError from '@/components/ui/input-error';
-import { Textarea } from '@/components/ui/textarea';
 import { SSL } from '@/types/ssl';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { useDialog } from '@/hooks/use-dialog';
 
-type ActivateForm = {
-  certificate: string;
-  ca: string;
-};
+export default function ActivateServerSsl({ ssl }: { ssl: SSL }) {
+  const dialog = useDialog();
 
-export default function ActivateServerSsl({ ssl, children }: { ssl: SSL; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
-  const form = useForm<ActivateForm>({
-    certificate: '',
-    ca: '',
-  });
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.post(route('server-ssls.activate', { server: ssl.server_id, ssl: ssl.id }), {
-      onSuccess: () => {
-        form.reset();
-        setOpen(false);
-      },
-    });
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="w-full lg:max-w-lg">
-        <SheetHeader>
-          <SheetTitle>Activate SSL</SheetTitle>
-          <SheetDescription>Install a signed certificate from your Certificate Authority.</SheetDescription>
-        </SheetHeader>
-        <Form id="activate-server-ssl-form" className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="certificate">Certificate (PEM)</Label>
-              <Textarea
-                id="certificate"
-                name="certificate"
-                placeholder="-----BEGIN CERTIFICATE-----"
-                rows={6}
-                className="field-sizing-fixed overflow-y-auto"
-                value={form.data.certificate}
-                onChange={(e) => form.setData('certificate', e.target.value)}
-              />
-              <InputError message={form.errors.certificate} />
-            </FormField>
-            <FormField>
-              <Label htmlFor="ca">CA Bundle (optional)</Label>
-              <Textarea
-                id="ca"
-                name="ca"
-                placeholder="-----BEGIN CERTIFICATE-----"
-                rows={6}
-                className="field-sizing-fixed overflow-y-auto"
-                value={form.data.ca}
-                onChange={(e) => form.setData('ca', e.target.value)}
-              />
-              <InputError message={form.errors.ca} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <SheetFooter>
-          <div className="flex items-center gap-2">
-            <Button type="submit" form="activate-server-ssl-form" disabled={form.processing}>
-              {form.processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />} Activate
-            </Button>
-            <SheetClose asChild>
-              <Button variant="outline" disabled={form.processing}>
-                Cancel
-              </Button>
-            </SheetClose>
-          </div>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.activateServerSsl.open({ serverId: ssl.server_id, sslId: ssl.id })}>Activate</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/server-ssls/components/columns.tsx b/resources/js/pages/server-ssls/components/columns.tsx
index 55764b371..89b27ecf1 100644
--- a/resources/js/pages/server-ssls/components/columns.tsx
+++ b/resources/js/pages/server-ssls/components/columns.tsx
@@ -1,68 +1,35 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import React, { useState } from 'react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import DateTime from '@/components/date-time';
 import { SSL } from '@/types/ssl';
 import moment from 'moment';
 import { View } from '@/pages/server-logs/components/columns';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import FormSuccessful from '@/components/form-successful';
-import InputError from '@/components/ui/input-error';
 import ActivateServerSsl from '@/pages/server-ssls/components/activate-server-ssl';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Delete({ ssl }: { ssl: SSL }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{ ssl?: string }>({});
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('server-ssls.destroy', { server: ssl.server_id, ssl: ssl.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete SSL</DialogTitle>
-          <DialogDescription className="sr-only">Delete SSL</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to delete this certificate?</p>
-          <InputError message={form.errors.ssl} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete SSL',
+          description: 'Are you sure you want to delete this certificate?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('server-ssls.destroy', { server: ssl.server_id, ssl: ssl.id }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -185,11 +152,7 @@ export const columns: ColumnDef<SSL>[] = [
                   >
                     Download CSR
                   </DropdownMenuItem>
-                  {row.original.type === 'csr' && (
-                    <ActivateServerSsl ssl={row.original}>
-                      <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Activate</DropdownMenuItem>
-                    </ActivateServerSsl>
-                  )}
+                  {row.original.type === 'csr' && <ActivateServerSsl ssl={row.original} />}
                   <DropdownMenuSeparator />
                 </>
               )}
diff --git a/resources/js/pages/servers/components/actions.tsx b/resources/js/pages/servers/components/actions.tsx
index 7dcda9bfc..8f12645f6 100644
--- a/resources/js/pages/servers/components/actions.tsx
+++ b/resources/js/pages/servers/components/actions.tsx
@@ -2,9 +2,8 @@ import { Server } from '@/types/server';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import RebootServer from '@/pages/servers/components/reboot-server';
 import { useForm } from '@inertiajs/react';
-import UpdateServer from '@/pages/servers/components/update-server';
+import { useDialog } from '@/hooks/use-dialog';
 
 function CheckForUpdates({ server }: { server: Server }) {
   const form = useForm();
@@ -49,6 +48,8 @@ function CheckConnection({ server }: { server: Server }) {
 }
 
 export default function ServerActions({ server }: { server: Server }) {
+  const dialog = useDialog();
+
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
@@ -59,15 +60,35 @@ export default function ServerActions({ server }: { server: Server }) {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <CheckConnection server={server} />
-        <RebootServer server={server}>
-          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restart</DropdownMenuItem>
-        </RebootServer>
+        <DropdownMenuItem
+          onSelect={() =>
+            dialog.confirm.open({
+              title: `Restart ${server.name}?`,
+              description:
+                'Are you sure you want to restart this server? Sites and services hosted on this server will be unavailable while it restarts. Connections in flight will be dropped.',
+              confirmLabel: 'Restart',
+              method: 'post',
+              url: route('servers.reboot', server.id),
+            })
+          }
+        >
+          Restart
+        </DropdownMenuItem>
         <CheckForUpdates server={server} />
-        <UpdateServer server={server}>
-          <DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={server.updates == 0}>
-            Update
-          </DropdownMenuItem>
-        </UpdateServer>
+        <DropdownMenuItem
+          disabled={server.updates == 0}
+          onSelect={() =>
+            dialog.confirm.open({
+              title: `Update ${server.name}?`,
+              description: `Apply ${server.updates} pending OS package ${server.updates === 1 ? 'update' : 'updates'} to this server? The upgrade can take several minutes and may briefly restart affected services. A server restart may be required afterwards.`,
+              confirmLabel: 'Update',
+              method: 'post',
+              url: route('servers.update', server.id),
+            })
+          }
+        >
+          Update
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/resources/js/pages/servers/components/reboot-server.tsx b/resources/js/pages/servers/components/reboot-server.tsx
deleted file mode 100644
index 4b07d3f18..000000000
--- a/resources/js/pages/servers/components/reboot-server.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Server } from '@/types/server';
-import { ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-
-export default function RebootServer({ server, children }: { server: Server; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.post(route('servers.reboot', server.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Restart {server.name}?</DialogTitle>
-          <DialogDescription className="sr-only">Restart server</DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-2 p-4 text-sm">
-          <p>Are you sure you want to restart this server?</p>
-          <p className="text-muted-foreground">
-            Sites and services hosted on this server will be unavailable while it restarts. Connections in flight will be dropped.
-          </p>
-        </div>
-
-        <DialogFooter className="gap-2">
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-
-          <Button onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
-            Restart
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/resources/js/pages/servers/components/update-server.tsx b/resources/js/pages/servers/components/update-server.tsx
deleted file mode 100644
index 643931c0e..000000000
--- a/resources/js/pages/servers/components/update-server.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Server } from '@/types/server';
-import { ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-
-export default function UpdateServer({ server, children }: { server: Server; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.post(route('servers.update', server.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Update {server.name}?</DialogTitle>
-          <DialogDescription className="sr-only">Update server</DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-2 p-4 text-sm">
-          <p>
-            Apply <b>{server.updates}</b> pending OS package {server.updates === 1 ? 'update' : 'updates'} to this server?
-          </p>
-          <p className="text-muted-foreground">
-            The upgrade can take several minutes and may briefly restart affected services (web server, PHP-FPM, databases) as their packages are
-            replaced. In-flight connections to sites hosted here may be dropped. If the kernel or a core library is upgraded, a server restart may be
-            required afterwards.
-          </p>
-        </div>
-
-        <DialogFooter className="gap-2">
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-
-          <Button onClick={submit} disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
-            Update
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/resources/js/pages/services/components/action.tsx b/resources/js/pages/services/components/action.tsx
index 0fbcbf452..493c5bc84 100644
--- a/resources/js/pages/services/components/action.tsx
+++ b/resources/js/pages/services/components/action.tsx
@@ -1,69 +1,25 @@
 import { Service } from '@/types/service';
-import React, { useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import InputError from '@/components/ui/input-error';
+import { useDialog } from '@/hooks/use-dialog';
 
 export function Action({ type, service }: { type: 'start' | 'stop' | 'restart' | 'reload' | 'enable' | 'disable'; service: Service }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.post(route(`services.${type}`, { server: service.server_id, service: service }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()} className="capitalize">
-          {type}
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <span className="capitalize">{type}</span> service
-          </DialogTitle>
-          <DialogDescription className="sr-only">{type} service</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to {type} the service?</p>
-          {Object.entries(form.errors).map(([key, value]) => (
-            <InputError key={key} message={value as string | undefined} />
-          ))}
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button
-            variant={['disable', 'stop'].includes(type) ? 'destructive' : 'default'}
-            disabled={form.processing}
-            onClick={submit}
-            className="capitalize"
-          >
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            {type}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      className="capitalize"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `${type} service`,
+          description: `Are you sure you want to ${type} the service?`,
+          variant: ['disable', 'stop'].includes(type) ? 'destructive' : 'default',
+          confirmLabel: type,
+          method: 'post',
+          url: route(`services.${type}`, { server: service.server_id, service: service }),
+        })
+      }
+    >
+      {type}
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/services/components/config-file-dialog.tsx b/resources/js/pages/services/components/config-file-dialog.tsx
new file mode 100644
index 000000000..713544ef0
--- /dev/null
+++ b/resources/js/pages/services/components/config-file-dialog.tsx
@@ -0,0 +1,106 @@
+import { ConfigPath, Service } from '@/types/service';
+import { FormEvent, useEffect } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Editor } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Form } from '@/components/ui/form';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { useAppearance } from '@/hooks/use-appearance';
+import { useInputFocus } from '@/stores/useInputFocus';
+
+export default function ServiceConfigFileDialog({
+  open,
+  onOpenChange,
+  service,
+  configPath,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  service: Service;
+  configPath: ConfigPath;
+}) {
+  const { getActualAppearance } = useAppearance();
+  const setFocused = useInputFocus((state) => state.setFocused);
+  const form = useForm<{
+    content: string;
+    config_name: string;
+  }>({
+    content: '',
+    config_name: configPath.name,
+  });
+
+  useEffect(() => {
+    setFocused(open);
+  }, [open, setFocused]);
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('services.config.update', { server: service.server_id, service: service.id }), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  const query = useQuery({
+    queryKey: ['services.config', service.server_id, service.id, configPath.name],
+    queryFn: async () => {
+      const response = await axios.get(
+        route('services.config', {
+          server: service.server_id,
+          service: service.id,
+          config_name: configPath.name,
+        }),
+      );
+      if (response.data?.content) {
+        form.setData('content', response.data.content);
+      }
+      return response.data;
+    },
+    retry: false,
+    enabled: open,
+    refetchOnWindowFocus: false,
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-5xl" onCloseAutoFocus={(e) => e.preventDefault()}>
+        <SheetHeader>
+          <SheetTitle>Edit {configPath.name}</SheetTitle>
+          <SheetDescription className="sr-only">
+            You can edit the {configPath.name} file for this service. Make sure to save your changes.
+          </SheetDescription>
+        </SheetHeader>
+        <Form id="update-config-form" className="h-full" onSubmit={submit}>
+          {query.isSuccess ? (
+            <Editor
+              defaultLanguage="ini"
+              value={query.data.content}
+              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+              className="h-full"
+              onChange={(value) => form.setData('content', value ?? '')}
+              options={{
+                fontSize: 15,
+              }}
+            />
+          ) : (
+            <Skeleton className="h-full w-full rounded-none" />
+          )}
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-config-form" type="submit" disabled={form.processing || query.isLoading} className="ml-2">
+              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/resources/js/pages/services/components/config-file.tsx b/resources/js/pages/services/components/config-file.tsx
index 94554483d..4848742bd 100644
--- a/resources/js/pages/services/components/config-file.tsx
+++ b/resources/js/pages/services/components/config-file.tsx
@@ -1,104 +1,9 @@
 import { ConfigPath, Service } from '@/types/service';
-import { FormEvent, useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-import { Editor } from '@monaco-editor/react';
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Form } from '@/components/ui/form';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import { useAppearance } from '@/hooks/use-appearance';
-import { useInputFocus } from '@/stores/useInputFocus';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function ConfigFile({ service, configPath }: { service: Service; configPath: ConfigPath }) {
-  const { getActualAppearance } = useAppearance();
-  const setFocused = useInputFocus((state) => state.setFocused);
-  const [open, setOpen] = useState(false);
-  const form = useForm<{
-    content: string;
-    config_name: string;
-  }>({
-    content: '',
-    config_name: configPath.name,
-  });
+  const dialog = useDialog();
 
-  const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
-    setFocused(isOpen);
-  };
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('services.config.update', { server: service.server_id, service: service.id }), {
-      onSuccess: () => {
-        handleOpenChange(false);
-      },
-    });
-  };
-
-  const query = useQuery({
-    queryKey: ['services.config', service.server_id, service.id, configPath.name],
-    queryFn: async () => {
-      const response = await axios.get(
-        route('services.config', {
-          server: service.server_id,
-          service: service.id,
-          config_name: configPath.name,
-        }),
-      );
-      if (response.data?.content) {
-        form.setData('content', response.data.content);
-      }
-      return response.data;
-    },
-    retry: false,
-    enabled: open,
-    refetchOnWindowFocus: false,
-  });
-
-  return (
-    <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit {configPath.name}</DropdownMenuItem>
-      </SheetTrigger>
-      <SheetContent className="sm:max-w-5xl">
-        <SheetHeader>
-          <SheetTitle>Edit {configPath.name}</SheetTitle>
-          <SheetDescription className="sr-only">
-            You can edit the {configPath.name} file for this service. Make sure to save your changes.
-          </SheetDescription>
-        </SheetHeader>
-        <Form id="update-config-form" className="h-full" onSubmit={submit}>
-          {query.isSuccess ? (
-            <Editor
-              defaultLanguage="ini"
-              value={query.data.content}
-              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
-              className="h-full"
-              onChange={(value) => form.setData('content', value ?? '')}
-              options={{
-                fontSize: 15,
-              }}
-            />
-          ) : (
-            <Skeleton className="h-full w-full rounded-none" />
-          )}
-        </Form>
-        <SheetFooter>
-          <div className="flex items-center gap-2">
-            <Button form="update-config-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
-              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
-              Save
-            </Button>
-            <SheetClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </SheetClose>
-          </div>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.serviceConfigFile.open({ service, configPath })}>Edit {configPath.name}</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/services/components/uninstall.tsx b/resources/js/pages/services/components/uninstall.tsx
index b5d07b8c8..67294429c 100644
--- a/resources/js/pages/services/components/uninstall.tsx
+++ b/resources/js/pages/services/components/uninstall.tsx
@@ -1,60 +1,25 @@
 import { Service } from '@/types/service';
-import React, { useState } from 'react';
-import { useForm } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import InputError from '@/components/ui/input-error';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Uninstall({ service }: { service: Service }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{ service?: string }>({});
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('services.destroy', { server: service.server_id, service: service }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Uninstall
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Uninstall service</DialogTitle>
-          <DialogDescription className="sr-only">Uninstall service</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to uninstall this service? This action cannot be undone.</p>
-          <InputError message={form.errors.service} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Uninstall
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Uninstall service',
+          description: 'Are you sure you want to uninstall this service? This action cannot be undone.',
+          variant: 'destructive',
+          confirmLabel: 'Uninstall',
+          method: 'delete',
+          url: route('services.destroy', { server: service.server_id, service: service }),
+        })
+      }
+    >
+      Uninstall
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/source-controls/components/columns.tsx b/resources/js/pages/source-controls/components/columns.tsx
index 7741ccb98..5b299ea5c 100644
--- a/resources/js/pages/source-controls/components/columns.tsx
+++ b/resources/js/pages/source-controls/components/columns.tsx
@@ -2,170 +2,36 @@ import { ColumnDef } from '@tanstack/react-table';
 import DateTime from '@/components/date-time';
 import { SourceControl } from '@/types/source-control';
 import { Badge } from '@/components/ui/badge';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-
-type SourceControlFieldValue = string | number | boolean | string[] | null | undefined;
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { FormEvent, useMemo, useState } from 'react';
-import InputError from '@/components/ui/input-error';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
-import { DynamicFieldConfig } from '@/types/dynamic-field-config';
-import DynamicField from '@/components/ui/dynamic-field';
-import { useConfigs } from '@/stores/bootstrap-store';
-
-function EditForm({ sourceControl, onSuccess }: { sourceControl: SourceControl; onSuccess: () => void }) {
-  const isGithubApp = sourceControl.provider === 'github-app';
-  const configs = useConfigs()!;
-  const providerConfig = configs.source_control?.providers?.[sourceControl.provider];
-
-  const editableFormFields = useMemo<DynamicFieldConfig[]>(() => {
-    const editableFields = providerConfig?.editable_fields ?? [];
-    return (providerConfig?.form ?? []).filter((f) => editableFields.includes(f.name));
-  }, [providerConfig]);
-
-  const form = useForm<Record<string, SourceControlFieldValue>>({
-    name: sourceControl.name,
-    global: sourceControl.global,
-    ...Object.fromEntries(editableFormFields.map((f) => [f.name, (sourceControl[f.name] as SourceControlFieldValue) ?? f.default ?? null])),
-  });
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('source-controls.update', sourceControl.id), {
-      onSuccess,
-    });
-  };
-
-  return (
-    <>
-      <Form id="edit-source-control-form" className="p-4" onSubmit={submit}>
-        <FormFields>
-          <FormField>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              type="text"
-              id="name"
-              name="name"
-              value={form.data.name as string}
-              onChange={(e) => form.setData('name', e.target.value)}
-              disabled={isGithubApp}
-              readOnly={isGithubApp}
-            />
-            {isGithubApp && <p className="text-muted-foreground text-xs">The name is the GitHub organization and cannot be changed.</p>}
-            <InputError message={form.errors.name as string | undefined} />
-          </FormField>
-          {editableFormFields.map((field) => (
-            <DynamicField
-              key={field.name}
-              value={form.data[field.name] as string | number | boolean | string[] | undefined}
-              onChange={(value) => form.setData(field.name, value)}
-              config={field}
-              error={form.errors[field.name] as string | undefined}
-            />
-          ))}
-          <FormField>
-            <div className="flex items-center space-x-3">
-              <Checkbox
-                id="global"
-                name="global"
-                checked={form.data.global as boolean}
-                onCheckedChange={(checked) => form.setData('global', checked === true)}
-              />
-              <Label htmlFor="global">Is global (accessible in all projects)</Label>
-            </div>
-            <InputError message={form.errors.global as string | undefined} />
-          </FormField>
-        </FormFields>
-      </Form>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button form="edit-source-control-form" disabled={form.processing} onClick={submit}>
-          {form.processing && <LoaderCircleIcon className="animate-spin" />}
-          <FormSuccessful successful={form.recentlySuccessful} />
-          Save
-        </Button>
-      </DialogFooter>
-    </>
-  );
-}
+import { MoreVerticalIcon } from 'lucide-react';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Edit({ sourceControl }: { sourceControl: SourceControl }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit {sourceControl.name}</DialogTitle>
-          <DialogDescription className="sr-only">Edit source control</DialogDescription>
-        </DialogHeader>
-        {open && <EditForm sourceControl={sourceControl} onSuccess={() => setOpen(false)} />}
-      </DialogContent>
-    </Dialog>
-  );
+  const dialog = useDialog();
+
+  return <DropdownMenuItem onSelect={() => dialog.sourceControlEdit.open({ sourceControl })}>Edit</DropdownMenuItem>;
 }
 
 function Delete({ sourceControl }: { sourceControl: SourceControl }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm<{ source_control?: string }>({});
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('source-controls.destroy', sourceControl.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {sourceControl.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete source control</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{sourceControl.name}</strong>?
-          </p>
-          <InputError message={form.errors.source_control} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${sourceControl.name}`,
+          description: `Are you sure you want to delete ${sourceControl.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('source-controls.destroy', sourceControl.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
diff --git a/resources/js/pages/source-controls/components/edit-dialog.tsx b/resources/js/pages/source-controls/components/edit-dialog.tsx
new file mode 100644
index 000000000..6fe011870
--- /dev/null
+++ b/resources/js/pages/source-controls/components/edit-dialog.tsx
@@ -0,0 +1,109 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent, useMemo } from 'react';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';
+import { useConfigs } from '@/stores/bootstrap-store';
+import { SourceControl } from '@/types/source-control';
+
+type SourceControlFieldValue = string | number | boolean | string[] | null | undefined;
+
+export default function SourceControlEditDialog({
+  open,
+  onOpenChange,
+  sourceControl,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  sourceControl: SourceControl;
+}) {
+  const isGithubApp = sourceControl.provider === 'github-app';
+  const configs = useConfigs()!;
+  const providerConfig = configs.source_control?.providers?.[sourceControl.provider];
+
+  const editableFormFields = useMemo<DynamicFieldConfig[]>(() => {
+    const editableFields = providerConfig?.editable_fields ?? [];
+    return (providerConfig?.form ?? []).filter((f) => editableFields.includes(f.name));
+  }, [providerConfig]);
+
+  const form = useForm<Record<string, SourceControlFieldValue>>({
+    name: sourceControl.name,
+    global: sourceControl.global,
+    ...Object.fromEntries(editableFormFields.map((f) => [f.name, (sourceControl[f.name] as SourceControlFieldValue) ?? f.default ?? null])),
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('source-controls.update', sourceControl.id), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Edit {sourceControl.name}</DialogTitle>
+          <DialogDescription className="sr-only">Edit source control</DialogDescription>
+        </DialogHeader>
+        <Form id="edit-source-control-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                type="text"
+                id="name"
+                name="name"
+                value={form.data.name as string}
+                onChange={(e) => form.setData('name', e.target.value)}
+                disabled={isGithubApp}
+                readOnly={isGithubApp}
+              />
+              {isGithubApp && <p className="text-muted-foreground text-xs">The name is the GitHub organization and cannot be changed.</p>}
+              <InputError message={form.errors.name as string | undefined} />
+            </FormField>
+            {editableFormFields.map((field) => (
+              <DynamicField
+                key={field.name}
+                value={form.data[field.name] as string | number | boolean | string[] | undefined}
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                error={form.errors[field.name] as string | undefined}
+              />
+            ))}
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="global"
+                  name="global"
+                  checked={form.data.global as boolean}
+                  onCheckedChange={(checked) => form.setData('global', checked === true)}
+                />
+                <Label htmlFor="global">Is global (accessible in all projects)</Label>
+              </div>
+              <InputError message={form.errors.global as string | undefined} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="edit-source-control-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/ssh-keys/components/delete.tsx b/resources/js/pages/ssh-keys/components/delete.tsx
index 569078abd..c94cfdf19 100644
--- a/resources/js/pages/ssh-keys/components/delete.tsx
+++ b/resources/js/pages/ssh-keys/components/delete.tsx
@@ -1,56 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
 import { SshKey } from '@/types/ssh-key';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ sshKey }: { sshKey: SshKey }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('ssh-keys.destroy', sshKey.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {sshKey.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete ssh key</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to delete this key?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${sshKey.name}`,
+          description: 'Are you sure you want to delete this key?',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('ssh-keys.destroy', sshKey.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/storage-providers/components/delete.tsx b/resources/js/pages/storage-providers/components/delete.tsx
index 14de7a0c2..9486259fa 100644
--- a/resources/js/pages/storage-providers/components/delete.tsx
+++ b/resources/js/pages/storage-providers/components/delete.tsx
@@ -1,62 +1,25 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
-import InputError from '@/components/ui/input-error';
 import { StorageProvider } from '@/types/storage-provider';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Delete({ storageProvider }: { storageProvider: StorageProvider }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('storage-providers.destroy', storageProvider.id), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete {storageProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Delete storage provider</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete <strong>{storageProvider.name}</strong>?
-          </p>
-          <InputError message={Object.values(form.errors)[0] as string | undefined} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `Delete ${storageProvider.name}`,
+          description: `Are you sure you want to delete ${storageProvider.name}?`,
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('storage-providers.destroy', storageProvider.id),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
diff --git a/resources/js/pages/storage-providers/components/edit-dialog.tsx b/resources/js/pages/storage-providers/components/edit-dialog.tsx
new file mode 100644
index 000000000..d2b548f69
--- /dev/null
+++ b/resources/js/pages/storage-providers/components/edit-dialog.tsx
@@ -0,0 +1,76 @@
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { FormEvent } from 'react';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { StorageProvider } from '@/types/storage-provider';
+
+export default function StorageProviderEditDialog({
+  open,
+  onOpenChange,
+  storageProvider,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  storageProvider: StorageProvider;
+}) {
+  const form = useForm({
+    name: storageProvider.name,
+    global: storageProvider.global,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('storage-providers.update', storageProvider.id), {
+      onSuccess: () => onOpenChange(false),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Edit {storageProvider.name}</DialogTitle>
+          <DialogDescription className="sr-only">Edit storage provider</DialogDescription>
+        </DialogHeader>
+        <Form id="edit-storage-provider-form" className="p-4" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="global"
+                  name="global"
+                  checked={form.data.global}
+                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
+                />
+                <Label htmlFor="global">Is global (accessible in all projects)</Label>
+              </div>
+              <InputError message={form.errors.global} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="edit-storage-provider-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/resources/js/pages/storage-providers/components/edit.tsx b/resources/js/pages/storage-providers/components/edit.tsx
index 61ee94fb8..dbc4f829a 100644
--- a/resources/js/pages/storage-providers/components/edit.tsx
+++ b/resources/js/pages/storage-providers/components/edit.tsx
@@ -1,85 +1,9 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { FormEvent, useEffect, useState } from 'react';
-import InputError from '@/components/ui/input-error';
-import { Form, FormField, FormFields } from '@/components/ui/form';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
 import { StorageProvider } from '@/types/storage-provider';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function Edit({ storageProvider }: { storageProvider: StorageProvider }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    name: storageProvider.name,
-    global: storageProvider.global,
-  });
+  const dialog = useDialog();
 
-  useEffect(() => {
-    form.setData({ name: storageProvider.name, global: storageProvider.global });
-  }, [storageProvider.id, storageProvider.name, storageProvider.global]);
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    form.patch(route('storage-providers.update', storageProvider.id), {
-      onSuccess: () => setOpen(false),
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit {storageProvider.name}</DialogTitle>
-          <DialogDescription className="sr-only">Edit storage provider</DialogDescription>
-        </DialogHeader>
-        <Form id={`edit-storage-provider-form-${storageProvider.id}`} className="p-4" onSubmit={submit}>
-          <FormFields>
-            <FormField>
-              <Label htmlFor="name">Name</Label>
-              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
-              <InputError message={form.errors.name} />
-            </FormField>
-            <FormField>
-              <div className="flex items-center space-x-3">
-                <Checkbox
-                  id="global"
-                  name="global"
-                  checked={form.data.global}
-                  onCheckedChange={(checked) => form.setData('global', Boolean(checked))}
-                />
-                <Label htmlFor="global">Is global (accessible in all projects)</Label>
-              </div>
-              <InputError message={form.errors.global} />
-            </FormField>
-          </FormFields>
-        </Form>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button form={`edit-storage-provider-form-${storageProvider.id}`} type="submit" disabled={form.processing}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.storageProviderEdit.open({ storageProvider })}>Edit</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/workers/components/columns.tsx b/resources/js/pages/workers/components/columns.tsx
index 85a9af7c3..b3f2c8181 100644
--- a/resources/js/pages/workers/components/columns.tsx
+++ b/resources/js/pages/workers/components/columns.tsx
@@ -1,65 +1,35 @@
 import { ColumnDef } from '@tanstack/react-table';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import React, { useState } from 'react';
+import { MoreVerticalIcon } from 'lucide-react';
 import { Worker } from '@/types/worker';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
-import WorkerForm from '@/pages/workers/components/form';
 import CopyableBadge from '@/components/copyable-badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { WorkerAction, WorkerLogs } from '@/pages/workers/components/worker-row-actions';
 import ErrorIndicator from '@/components/error-indicator';
+import { useDialog } from '@/hooks/use-dialog';
 
 function Delete({ worker }: { worker: Worker }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
+  const dialog = useDialog();
 
-  const submit = () => {
-    form.delete(route('workers.destroy', { server: worker.server_id, worker: worker }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete worker</DialogTitle>
-          <DialogDescription className="sr-only">Delete worker</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to delete this worker? This action cannot be undone.</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      variant="destructive"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: 'Delete worker',
+          description: 'Are you sure you want to delete this worker? This action cannot be undone.',
+          variant: 'destructive',
+          confirmLabel: 'Delete',
+          method: 'delete',
+          url: route('workers.destroy', { server: worker.server_id, worker: worker }),
+        })
+      }
+    >
+      Delete
+    </DropdownMenuItem>
   );
 }
 
@@ -78,6 +48,37 @@ function BootstrapLockedItem({ label, destructive }: { label: string; destructiv
   );
 }
 
+function Actions({ worker }: { worker: Worker }) {
+  const dialog = useDialog();
+  const locked = worker.is_site_bootstrap;
+
+  return (
+    <div className="flex items-center justify-end">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreVerticalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {locked ? (
+            <BootstrapLockedItem label="Edit" />
+          ) : (
+            <DropdownMenuItem onSelect={() => dialog.workerForm.open({ serverId: worker.server_id, worker })}>Edit</DropdownMenuItem>
+          )}
+          <WorkerAction type="start" worker={worker} />
+          <WorkerAction type="stop" worker={worker} />
+          <WorkerAction type="restart" worker={worker} />
+          <WorkerLogs worker={worker} />
+          <DropdownMenuSeparator />
+          {locked ? <BootstrapLockedItem label="Delete" destructive /> : <Delete worker={worker} />}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
 function getColumns(sites?: Array<{ id: number; domain: string }>): ColumnDef<Worker>[] {
   return [
     {
@@ -149,35 +150,7 @@ function getColumns(sites?: Array<{ id: number; domain: string }>): ColumnDef<Wo
       enableColumnFilter: false,
       enableSorting: false,
       cell: ({ row }) => {
-        const worker = row.original;
-        const locked = worker.is_site_bootstrap;
-        return (
-          <div className="flex items-center justify-end">
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 w-8 p-0">
-                  <span className="sr-only">Open menu</span>
-                  <MoreVerticalIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {locked ? (
-                  <BootstrapLockedItem label="Edit" />
-                ) : (
-                  <WorkerForm serverId={worker.server_id} worker={worker}>
-                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
-                  </WorkerForm>
-                )}
-                <WorkerAction type="start" worker={worker} />
-                <WorkerAction type="stop" worker={worker} />
-                <WorkerAction type="restart" worker={worker} />
-                <WorkerLogs worker={worker} />
-                <DropdownMenuSeparator />
-                {locked ? <BootstrapLockedItem label="Delete" destructive /> : <Delete worker={worker} />}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        );
+        return <Actions worker={row.original} />;
       },
     },
   ];
diff --git a/resources/js/pages/workers/components/form.tsx b/resources/js/pages/workers/components/form.tsx
index ddbf6f37f..2fa3097b2 100644
--- a/resources/js/pages/workers/components/form.tsx
+++ b/resources/js/pages/workers/components/form.tsx
@@ -1,17 +1,8 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import React, { FormEvent, ReactNode, useState } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
 import { useForm, usePage } from '@inertiajs/react';
+import { FormEvent } from 'react';
 import { LoaderCircleIcon } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
@@ -23,9 +14,20 @@ import { Server } from '@/types/server';
 import { Switch } from '@/components/ui/switch';
 import { Site } from '@/types/site';
 
-export default function WorkerForm({ serverId, site, worker, children }: { serverId: number; site?: Site; worker?: Worker; children: ReactNode }) {
+export default function WorkerForm({
+  open,
+  onOpenChange,
+  serverId,
+  site,
+  worker,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  site?: Site;
+  worker?: Worker;
+}) {
   const page = usePage<SharedData & { server: Server; sites?: Array<{ id: number; domain: string }> }>();
-  const [open, setOpen] = useState(false);
   const form = useForm<{
     name: string;
     command: string;
@@ -48,39 +50,30 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
     e.preventDefault();
     if (worker) {
       form.put(route('workers.update', { server: serverId, worker: worker.id }), {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       });
       return;
     }
 
     form.post(route('workers.store', { server: serverId, site: site?.id }), {
-      onSuccess: () => {
-        setOpen(false);
-        form.reset();
-      },
+      onSuccess: () => onOpenChange(false),
     });
   };
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{worker ? 'Edit' : 'Create'} worker</DialogTitle>
           <DialogDescription className="sr-only">{worker ? 'Edit' : 'Create new'} worker</DialogDescription>
         </DialogHeader>
         <Form id="worker-form" onSubmit={submit} className="p-4">
           <FormFields>
-            {/*name*/}
             <FormField>
               <Label htmlFor="name">Name</Label>
               <Input type="text" id="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
               <InputError message={form.errors.name} />
             </FormField>
 
-            {/*command*/}
             <FormField>
               <Label htmlFor="command">Command</Label>
               <Input
@@ -95,7 +88,6 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
               <InputError message={form.errors.command} />
             </FormField>
 
-            {/*site selection - only show if we have sites data and not in site context*/}
             {page.props.sites && !site && (
               <FormField>
                 <Label htmlFor="site_id">Site</Label>
@@ -118,7 +110,6 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
               </FormField>
             )}
 
-            {/*user*/}
             <FormField>
               <Label htmlFor="user">User</Label>
               <Select value={form.data.user} onValueChange={(value) => form.setData('user', value)}>
@@ -138,9 +129,8 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
               <InputError message={form.errors.user} />
             </FormField>
 
-            {/*numprocs*/}
             <FormField>
-              <Label htmlFor="custom_frequency">Numprocs</Label>
+              <Label htmlFor="numprocs">Numprocs</Label>
               <Input
                 id="numprocs"
                 name="numprocs"
@@ -152,7 +142,6 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
             </FormField>
 
             <div className="grid grid-cols-2 gap-6">
-              {/*auto start*/}
               <FormField>
                 <div className="flex items-center space-x-2">
                   <Switch id="auto_start" checked={form.data.auto_start} onCheckedChange={(value) => form.setData('auto_start', value)} />
@@ -161,7 +150,6 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
                 </div>
               </FormField>
 
-              {/*auto restart*/}
               <FormField>
                 <div className="flex items-center space-x-2">
                   <Switch id="auto_restart" checked={form.data.auto_restart} onCheckedChange={(value) => form.setData('auto_restart', value)} />
diff --git a/resources/js/pages/workers/components/worker-row-actions.tsx b/resources/js/pages/workers/components/worker-row-actions.tsx
index ff2b08603..82d1f1140 100644
--- a/resources/js/pages/workers/components/worker-row-actions.tsx
+++ b/resources/js/pages/workers/components/worker-row-actions.tsx
@@ -1,96 +1,31 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { useState } from 'react';
 import { Worker } from '@/types/worker';
-import LogOutput from '@/components/log-output';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import { useDialog } from '@/hooks/use-dialog';
 
 export function WorkerAction({ type, worker }: { type: 'start' | 'stop' | 'restart'; worker: Worker }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.post(route(`workers.${type}`, { server: worker.server_id, worker: worker }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
+  const dialog = useDialog();
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()} className="capitalize">
-          {type}
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <span className="capitalize">{type}</span> worker
-          </DialogTitle>
-          <DialogDescription className="sr-only">{type} worker</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to {type} the worker?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant={type === 'stop' ? 'destructive' : 'default'} disabled={form.processing} onClick={submit} className="capitalize">
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            {type}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenuItem
+      className="capitalize"
+      onSelect={() =>
+        dialog.confirm.open({
+          title: `${type} worker`,
+          description: `Are you sure you want to ${type} the worker?`,
+          variant: type === 'stop' ? 'destructive' : 'default',
+          confirmLabel: type,
+          method: 'post',
+          url: route(`workers.${type}`, { server: worker.server_id, worker: worker }),
+        })
+      }
+    >
+      {type}
+    </DropdownMenuItem>
   );
 }
 
 export function WorkerLogs({ worker }: { worker: Worker }) {
-  const [open, setOpen] = useState(false);
-
-  const query = useQuery({
-    queryKey: ['workerLog', worker.id],
-    queryFn: async () => {
-      const response = await axios.get(route('workers.logs', { server: worker.server_id, worker: worker.id }));
-      return response.data.logs;
-    },
-    refetchInterval: 2500,
-    enabled: open,
-  });
+  const dialog = useDialog();
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Logs</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-5xl">
-        <DialogHeader>
-          <DialogTitle>Worker logs</DialogTitle>
-          <DialogDescription className="sr-only">View worker logs</DialogDescription>
-        </DialogHeader>
-        <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Close</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+  return <DropdownMenuItem onSelect={() => dialog.workerLogs.open({ serverId: worker.server_id, workerId: worker.id })}>Logs</DropdownMenuItem>;
 }
diff --git a/resources/js/pages/workers/index.tsx b/resources/js/pages/workers/index.tsx
index f4402da29..138f56f1f 100644
--- a/resources/js/pages/workers/index.tsx
+++ b/resources/js/pages/workers/index.tsx
@@ -11,9 +11,9 @@ import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
 import { Worker } from '@/types/worker';
 import { columns } from '@/pages/workers/components/columns';
-import WorkerForm from '@/pages/workers/components/form';
 import { Site } from '@/types/site';
 import { useRealtime } from '@/hooks/use-socket-events';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function WorkerIndex() {
   const page = usePage<{
@@ -22,6 +22,7 @@ export default function WorkerIndex() {
     site?: Site;
     sites?: Array<{ id: number; domain: string }>;
   }>();
+  const dialog = useDialog();
 
   const [workers] = useRealtime<Worker>(page.props.workers, 'worker');
 
@@ -42,12 +43,10 @@ export default function WorkerIndex() {
                 <span className="hidden lg:block">Docs</span>
               </Button>
             </a>
-            <WorkerForm serverId={page.props.server.id} site={page.props.site}>
-              <Button>
-                <PlusIcon />
-                <span className="hidden lg:block">Create</span>
-              </Button>
-            </WorkerForm>
+            <Button onClick={() => dialog.workerForm.open({ serverId: page.props.server.id, site: page.props.site })}>
+              <PlusIcon />
+              <span className="hidden lg:block">Create</span>
+            </Button>
           </div>
         </HeaderContainer>
 
diff --git a/resources/js/stores/dialog-store.ts b/resources/js/stores/dialog-store.ts
index 422fedc5f..011539147 100644
--- a/resources/js/stores/dialog-store.ts
+++ b/resources/js/stores/dialog-store.ts
@@ -7,15 +7,28 @@ export type ActiveDialog = {
 
 type DialogStore = {
   active: ActiveDialog | null;
+  instanceId: number;
   open: <K extends keyof DialogRegistry>(key: K, props: ConsumerProps<DialogRegistry[K]>) => void;
   close: () => void;
 };
 
-export const useDialogStore = create<DialogStore>((set) => ({
+let triggerElement: HTMLElement | null = null;
+
+export const useDialogStore = create<DialogStore>((set, get) => ({
   active: null,
-  open: (key, props) =>
-    // TS cannot narrow the mapped-type union from correlated generics —
-    // `key` and `props` come from the same call so the cast is safe.
-    set({ active: { key, props } as ActiveDialog }),
-  close: () => set({ active: null }),
+  instanceId: 0,
+  open: (key, props) => {
+    triggerElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    set({ active: { key, props } as ActiveDialog, instanceId: get().instanceId + 1 });
+  },
+  close: () => {
+    const trigger = triggerElement;
+    triggerElement = null;
+    set({ active: null });
+    requestAnimationFrame(() => {
+      if (trigger?.isConnected) {
+        trigger.focus();
+      }
+    });
+  },
 }));

From 380d453d6b5dccabbf2b4abb53721543b640b87d Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 17:55:59 +0100
Subject: [PATCH 3/8] fixes based on manual testing

---
 app/Enums/DeploymentStatus.php                |   3 +-
 .../Controllers/ApplicationController.php     |   4 +-
 app/Tables/DeploymentTable.php                |  42 ++++++
 resources/js/components/dialogs/registry.ts   |   4 +
 .../components/app-with-deployment.tsx        | 122 ++++++++++++++----
 .../components/delete-deployment.tsx          |  60 ---------
 .../components/deployment-columns.tsx         | 103 ---------------
 .../pages/application/components/rollback.tsx |  63 ---------
 .../js/pages/firewall/components/form.tsx     |  10 +-
 resources/js/pages/firewall/index.tsx         |   4 +-
 .../components/feature-action.tsx             |  30 ++---
 resources/js/pages/server-features/index.tsx  |  17 ++-
 .../components/feature-action.tsx             |  30 ++---
 resources/js/pages/site-features/index.tsx    |  15 ++-
 resources/js/pages/sites/stats.tsx            |   8 +-
 15 files changed, 192 insertions(+), 323 deletions(-)
 create mode 100644 app/Tables/DeploymentTable.php
 delete mode 100644 resources/js/pages/application/components/delete-deployment.tsx
 delete mode 100644 resources/js/pages/application/components/deployment-columns.tsx
 delete mode 100644 resources/js/pages/application/components/rollback.tsx

diff --git a/app/Enums/DeploymentStatus.php b/app/Enums/DeploymentStatus.php
index c145ebdcb..78ff65228 100644
--- a/app/Enums/DeploymentStatus.php
+++ b/app/Enums/DeploymentStatus.php
@@ -3,8 +3,9 @@
 namespace App\Enums;
 
 use App\Contracts\VitoEnum;
+use Forjed\InertiaTable\Contracts\HasTableDisplay;
 
-enum DeploymentStatus: string implements VitoEnum
+enum DeploymentStatus: string implements HasTableDisplay, VitoEnum
 {
     case DEPLOYING = 'deploying';
     case FINISHED = 'finished';
diff --git a/app/Http/Controllers/ApplicationController.php b/app/Http/Controllers/ApplicationController.php
index 05ddddedf..1a96fc7d1 100644
--- a/app/Http/Controllers/ApplicationController.php
+++ b/app/Http/Controllers/ApplicationController.php
@@ -12,7 +12,6 @@
 use App\Exceptions\SourceControlIsNotConnected;
 use App\Exceptions\SSHError;
 use App\Helpers\EnvParser;
-use App\Http\Resources\DeploymentResource;
 use App\Http\Resources\DeploymentScriptResource;
 use App\Http\Resources\LoadBalancerServerResource;
 use App\Http\Resources\WorkerResource;
@@ -21,6 +20,7 @@
 use App\Models\Server;
 use App\Models\Site;
 use App\SiteTypes\AbstractProxiedSiteType;
+use App\Tables\DeploymentTable;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
@@ -52,7 +52,7 @@ public function index(Server $server, Site $site): Response
         $bootstrapWorker = $type instanceof AbstractProxiedSiteType ? $type->bootstrapWorker() : null;
 
         return Inertia::render('application/index', [
-            'deployments' => DeploymentResource::collection($site->deployments()->latest()->simplePaginate(config('web.pagination_size'))),
+            'deployments' => DeploymentTable::make($site->deployments())->paginate(),
             'deploymentScript' => new DeploymentScriptResource($deploymentScript),
             'buildScript' => $buildScript ? new DeploymentScriptResource($buildScript) : null,
             'preFlightScript' => $preFlightScript ? new DeploymentScriptResource($preFlightScript) : null,
diff --git a/app/Tables/DeploymentTable.php b/app/Tables/DeploymentTable.php
new file mode 100644
index 000000000..883fd40bd
--- /dev/null
+++ b/app/Tables/DeploymentTable.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Tables;
+
+use App\Http\Resources\ServerLogResource;
+use App\Models\Deployment;
+use Forjed\InertiaTable\Column;
+use Forjed\InertiaTable\Columns\ActionsColumn;
+use Forjed\InertiaTable\Columns\DateTimeColumn;
+use Forjed\InertiaTable\Columns\EnumColumn;
+use Forjed\InertiaTable\Columns\TextColumn;
+use Forjed\InertiaTable\Table;
+
+class DeploymentTable extends Table
+{
+    protected array $tableSettings = ['realtime' => 'deployment'];
+
+    protected string $defaultSort = '-created_at';
+
+    protected function query(): void
+    {
+        $this->perPage = config('web.pagination_size');
+        $this->query->with('log', 'site');
+    }
+
+    protected function columns(): array
+    {
+        return [
+            TextColumn::make('id', 'ID')->sortable(),
+            Column::make('commit', 'Commit'),
+            DateTimeColumn::make('created_at', 'Deployed At')->sortable()->toLocal(),
+            EnumColumn::make('status', 'Status')->sortable(),
+            Column::make('release', 'Release'),
+            Column::data('site_id'),
+            Column::data('server_id', fn (Deployment $deployment) => $deployment->site->server_id),
+            Column::data('active'),
+            Column::data('commit_data'),
+            Column::data('log', fn (Deployment $deployment) => $deployment->log ? ServerLogResource::make($deployment->log) : null),
+            ActionsColumn::make(),
+        ];
+    }
+}
diff --git a/resources/js/components/dialogs/registry.ts b/resources/js/components/dialogs/registry.ts
index 00b716120..5e4aa37e9 100644
--- a/resources/js/components/dialogs/registry.ts
+++ b/resources/js/components/dialogs/registry.ts
@@ -25,6 +25,8 @@ import ScriptForm from '@/pages/scripts/components/form';
 import EditCommand from '@/pages/commands/components/edit-command';
 import EditBackup from '@/pages/backups/components/edit-backup';
 import RestoreBackup from '@/pages/backups/components/restore-backup';
+import SiteFeatureAction from '@/pages/site-features/components/feature-action';
+import ServerFeatureAction from '@/pages/server-features/components/feature-action';
 
 export type DialogControlProps = { open: boolean; onOpenChange: (open: boolean) => void };
 
@@ -67,6 +69,8 @@ export const dialogs = {
   commandEdit: EditCommand,
   backupEdit: EditBackup,
   backupRestore: RestoreBackup,
+  siteFeatureAction: SiteFeatureAction,
+  serverFeatureAction: ServerFeatureAction,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } as const satisfies Record<string, ComponentType<any>>;
 
diff --git a/resources/js/pages/application/components/app-with-deployment.tsx b/resources/js/pages/application/components/app-with-deployment.tsx
index 37cac46b2..d32d78148 100644
--- a/resources/js/pages/application/components/app-with-deployment.tsx
+++ b/resources/js/pages/application/components/app-with-deployment.tsx
@@ -6,54 +6,57 @@ import Container from '@/components/container';
 import HeaderContainer from '@/components/header-container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
-import { BookOpenIcon, MoreHorizontalIcon, RocketIcon } from 'lucide-react';
-import { PaginatedData } from '@/types';
+import { Badge } from '@/components/ui/badge';
+import { BookOpenIcon, MoreHorizontalIcon, MoreVerticalIcon, RocketIcon } from 'lucide-react';
 import { Deployment } from '@/types/deployment';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import DeploymentScript from '@/pages/application/components/deployment-script';
 import Env from '@/pages/application/components/env';
 import Deploy from '@/pages/application/components/deploy';
-import { DataTable } from '@/components/data-table';
-import { columns } from '@/pages/application/components/deployment-columns';
+import { VitoTable } from '@/components/vito-table';
+import { Download, View } from '@/pages/server-logs/components/columns';
 import AutoDeployment from '@/pages/application/components/auto-deployment';
 import { DeploymentScript as DeploymentScriptType } from '@/types/deployment-script';
-import { useRealtime, useRealtimeRecord, useSocketListener } from '@/hooks/use-socket-events';
-import { useCallback } from 'react';
+import { useRealtimeRecord } from '@/hooks/use-socket-events';
+import type { CellRenderProps, InertiaTableData, Row } from '@forjedio/inertia-table-react';
+import { asRow } from '@/lib/inertia-table';
+import { useDialog } from '@/hooks/use-dialog';
 
 import SiteBanners from '@/components/site-banners';
 import ProxiedAppCard from '@/pages/application/components/proxied-app-card';
 import { Worker } from '@/types/worker';
 
+const commitCell = ({ row }: CellRenderProps) => {
+  const commit = (row.commit_data ?? {}) as Deployment['commit_data'];
+  return commit.message ? (
+    <a href={commit.url} target="_blank" className="text-primary inline-flex truncate font-mono">
+      <span className="block max-w-[200px] overflow-x-hidden overflow-ellipsis">{commit.message}</span>
+    </a>
+  ) : (
+    <span className="text-muted-foreground">No message</span>
+  );
+};
+
+const releaseCell = ({ row }: CellRenderProps) => (
+  <div className="inline-flex items-center gap-2">
+    {(row.release as string | null) ?? ''}
+    {(row.active as boolean) && <Badge variant="default">active</Badge>}
+  </div>
+);
+
 export default function AppWithDeployment() {
   const page = usePage<{
     server: Server;
     site: Site;
-    deployments: PaginatedData<Deployment>;
+    deployments: InertiaTableData;
     deploymentScript: DeploymentScriptType;
     buildScript?: DeploymentScriptType;
     preFlightScript?: DeploymentScriptType;
     worker: Worker | null;
   }>();
+  const dialog = useDialog();
 
   const site = useRealtimeRecord<Site>(page.props.site, 'site')!;
-  const [deployments, setDeployments] = useRealtime<Deployment>(page.props.deployments, 'deployment');
-
-  // When a deployment becomes active, deactivate all others
-  useSocketListener(
-    useCallback(
-      (event) => {
-        if (event.type !== 'deployment.updated') return;
-        const updated = event.data as unknown as Deployment;
-        if (!updated?.active) return;
-
-        setDeployments((prev) => ({
-          ...prev,
-          data: prev.data.map((item) => (item.id === updated.id ? item : { ...item, active: false })),
-        }));
-      },
-      [setDeployments],
-    ),
-  );
 
   return (
     <ServerLayout>
@@ -128,7 +131,74 @@ export default function AppWithDeployment() {
           </>
         )}
 
-        <DataTable columns={columns} paginatedData={deployments} />
+        <VitoTable
+          tableData={page.props.deployments}
+          cellRenderers={{ commit: commitCell, release: releaseCell }}
+          actions={(row: Row) => {
+            const deployment = asRow<Deployment>(row, ['id', 'site_id', 'server_id']);
+            return (
+              <div className="flex items-center justify-end">
+                <DropdownMenu modal={false}>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                      <span className="sr-only">Open menu</span>
+                      <MoreVerticalIcon />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {deployment.log && (
+                      <>
+                        <View serverLog={deployment.log} />
+                        <Download serverLog={deployment.log}>
+                          <DropdownMenuItem>Download</DropdownMenuItem>
+                        </Download>
+                      </>
+                    )}
+                    {!deployment.active && deployment.release && deployment.status === 'finished' && (
+                      <DropdownMenuItem
+                        variant="destructive"
+                        onSelect={() =>
+                          dialog.confirm.open({
+                            title: 'Rollback',
+                            description: `Are you sure you want to rollback your site to version [${deployment.release}]?`,
+                            confirmLabel: 'Rollback',
+                            method: 'post',
+                            url: route('application.rollback', {
+                              server: deployment.server_id,
+                              site: deployment.site_id,
+                              deployment: deployment.id,
+                            }),
+                          })
+                        }
+                      >
+                        Rollback
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem
+                      variant="destructive"
+                      onSelect={() =>
+                        dialog.confirm.open({
+                          title: `Delete release [${deployment.release || deployment.id}]`,
+                          description: `Are you sure you want to delete release ${deployment.release || deployment.id}? This will delete the release files from the server. This action cannot be undone.`,
+                          variant: 'destructive',
+                          confirmLabel: 'Delete',
+                          method: 'delete',
+                          url: route('application.deployments.destroy', {
+                            server: deployment.server_id,
+                            site: deployment.site_id,
+                            deployment: deployment.id,
+                          }),
+                        })
+                      }
+                    >
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            );
+          }}
+        />
       </Container>
     </ServerLayout>
   );
diff --git a/resources/js/pages/application/components/delete-deployment.tsx b/resources/js/pages/application/components/delete-deployment.tsx
deleted file mode 100644
index 3a8cfce0c..000000000
--- a/resources/js/pages/application/components/delete-deployment.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Deployment } from '@/types/deployment';
-import { Server } from '@/types/server';
-import { Site } from '@/types/site';
-import { useForm, usePage } from '@inertiajs/react';
-import { LoaderCircleIcon } from 'lucide-react';
-import { ReactNode, useState } from 'react';
-
-export default function DeleteDeployment({ deployment, children }: { deployment: Deployment; children: ReactNode }) {
-  const page = usePage<{
-    server: Server;
-    site: Site;
-  }>();
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.delete(route('application.deployments.destroy', { server: page.props.server, site: page.props.site.id, deployment: deployment.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete release [{deployment.release || deployment.id}]</DialogTitle>
-          <DialogDescription className="sr-only">Delete release</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>
-            Are you sure you want to delete release <strong>{deployment.release || deployment.id}</strong>?
-          </p>
-          <p>This will delete the release files form the server. This action cannot be undone.</p>
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/resources/js/pages/application/components/deployment-columns.tsx b/resources/js/pages/application/components/deployment-columns.tsx
deleted file mode 100644
index 7aaab7b03..000000000
--- a/resources/js/pages/application/components/deployment-columns.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@/components/ui/button';
-import { MoreVerticalIcon } from 'lucide-react';
-import DateTime from '@/components/date-time';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { Deployment } from '@/types/deployment';
-import { Badge } from '@/components/ui/badge';
-import { Download, View } from '@/pages/server-logs/components/columns';
-import Rollback from './rollback';
-import DeleteDeployment from './delete-deployment';
-
-export const columns: ColumnDef<Deployment>[] = [
-  {
-    accessorKey: 'id',
-    header: 'ID',
-    enableColumnFilter: true,
-  },
-  {
-    accessorKey: 'commit_id',
-    header: 'Commit',
-    enableColumnFilter: true,
-    cell: ({ row }) => {
-      return row.original.commit_data?.message ? (
-        <a href={row.original.commit_data?.url} target="_blank" className="text-primary inline-flex truncate font-mono">
-          <span className="block max-w-[200px] overflow-x-hidden overflow-ellipsis">{row.original.commit_data.message}</span>
-        </a>
-      ) : (
-        'No message'
-      );
-    },
-  },
-  {
-    accessorKey: 'created_at',
-    header: 'Deployed At',
-    enableSorting: true,
-    cell: ({ row }) => {
-      return <DateTime date={row.original.created_at} />;
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    enableColumnFilter: true,
-    enableSorting: true,
-    cell: ({ row }) => {
-      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
-    },
-  },
-  {
-    accessorKey: 'release',
-    header: 'Release',
-    enableColumnFilter: true,
-    cell: ({ row }) => {
-      return (
-        <div className="inline-flex items-center gap-2">
-          {row.original.release}
-          {row.original.active && <Badge variant="default">active</Badge>}
-        </div>
-      );
-    },
-  },
-  {
-    id: 'actions',
-    enableColumnFilter: false,
-    enableSorting: false,
-    cell: ({ row }) => {
-      return (
-        <div className="flex items-center justify-end">
-          <DropdownMenu modal={false}>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreVerticalIcon />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {row.original.log && (
-                <>
-                  <View serverLog={row.original.log} />
-                  <Download serverLog={row.original.log}>
-                    <DropdownMenuItem>Download</DropdownMenuItem>
-                  </Download>
-                </>
-              )}
-              {!row.original.active && row.original.release && row.original.status === 'finished' && (
-                <Rollback deployment={row.original}>
-                  <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-                    Rollback
-                  </DropdownMenuItem>
-                </Rollback>
-              )}
-              <DeleteDeployment deployment={row.original}>
-                <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-                  Delete
-                </DropdownMenuItem>
-              </DeleteDeployment>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      );
-    },
-  },
-];
diff --git a/resources/js/pages/application/components/rollback.tsx b/resources/js/pages/application/components/rollback.tsx
deleted file mode 100644
index eb502e325..000000000
--- a/resources/js/pages/application/components/rollback.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { useForm, usePage } from '@inertiajs/react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { LoaderCircleIcon } from 'lucide-react';
-import FormSuccessful from '@/components/form-successful';
-import { Site } from '@/types/site';
-import { Deployment } from '@/types/deployment';
-import InputError from '@/components/ui/input-error';
-import { Server } from '@/types/server';
-
-export default function Rollback({ deployment, children }: { deployment: Deployment; children: ReactNode }) {
-  const page = usePage<{
-    server: Server;
-    site: Site;
-  }>();
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    deployment: deployment.id,
-  });
-
-  const submit = () => {
-    form.post(route('application.rollback', { server: page.props.server.id, site: page.props.site.id, deployment: deployment.id }), {
-      onSuccess: () => {
-        setOpen(false);
-      },
-    });
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rollback</DialogTitle>
-          <DialogDescription className="sr-only">Rollback the deployment</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-2 p-4">
-          <p>Are you sure you want to rollback your site to version [{deployment.release}]?</p>
-          <InputError message={form.errors.deployment} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            <FormSuccessful successful={form.recentlySuccessful} />
-            Rollback
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/resources/js/pages/firewall/components/form.tsx b/resources/js/pages/firewall/components/form.tsx
index 3dc59df70..93da75001 100644
--- a/resources/js/pages/firewall/components/form.tsx
+++ b/resources/js/pages/firewall/components/form.tsx
@@ -1,12 +1,4 @@
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { FormEvent } from 'react';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
diff --git a/resources/js/pages/firewall/index.tsx b/resources/js/pages/firewall/index.tsx
index 2a39775c1..5064542a2 100644
--- a/resources/js/pages/firewall/index.tsx
+++ b/resources/js/pages/firewall/index.tsx
@@ -59,7 +59,9 @@ export default function Firewall() {
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem onSelect={() => dialog.firewallForm.open({ serverId: firewallRule.server_id, firewallRule })}>Edit</DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => dialog.firewallForm.open({ serverId: firewallRule.server_id, firewallRule })}>
+                      Edit
+                    </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <Delete firewallRule={firewallRule} />
                   </DropdownMenuContent>
diff --git a/resources/js/pages/server-features/components/feature-action.tsx b/resources/js/pages/server-features/components/feature-action.tsx
index b28e5ce93..95f21abc0 100644
--- a/resources/js/pages/server-features/components/feature-action.tsx
+++ b/resources/js/pages/server-features/components/feature-action.tsx
@@ -1,15 +1,6 @@
 import { Server, ServerFeatureAction } from '@/types/server';
-import { FormEvent, ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
 import { useForm } from '@inertiajs/react';
@@ -20,19 +11,20 @@ type FieldValue = string | number | boolean | string[] | null | undefined;
 import { LoaderCircleIcon } from 'lucide-react';
 
 export default function FeatureAction({
+  open,
+  onOpenChange,
   server,
   featureId,
   actionId,
   action,
-  children,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   server: Server;
   featureId: string;
   actionId: string;
   action: ServerFeatureAction;
-  children: ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
   const form = useForm<Record<string, FieldValue>>({});
 
   const submit = (e: FormEvent) => {
@@ -44,18 +36,14 @@ export default function FeatureAction({
         action: actionId,
       }),
       {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       },
     );
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-xl">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{action.label}</DialogTitle>
           <DialogDescription className="sr-only">action {action.label}</DialogDescription>
diff --git a/resources/js/pages/server-features/index.tsx b/resources/js/pages/server-features/index.tsx
index 21ee36569..e80ad1116 100644
--- a/resources/js/pages/server-features/index.tsx
+++ b/resources/js/pages/server-features/index.tsx
@@ -9,7 +9,7 @@ import { MoreVerticalIcon } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardRow, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import FeatureAction from '@/pages/server-features/components/feature-action';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function ServerFeatures() {
   const page = usePage<{
@@ -18,6 +18,7 @@ export default function ServerFeatures() {
       [key: string]: ServerFeature;
     };
   }>();
+  const dialog = useDialog();
 
   return (
     <ServerLayout>
@@ -53,11 +54,15 @@ export default function ServerFeatures() {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
                         {Object.entries(feature.actions || {}).map(([actionKey, action]) => (
-                          <FeatureAction key={`action-${actionKey}`} server={page.props.server} featureId={key} actionId={actionKey} action={action}>
-                            <DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!action.active}>
-                              {action.label}
-                            </DropdownMenuItem>
-                          </FeatureAction>
+                          <DropdownMenuItem
+                            key={`action-${actionKey}`}
+                            disabled={!action.active}
+                            onSelect={() =>
+                              dialog.serverFeatureAction.open({ server: page.props.server, featureId: key, actionId: actionKey, action })
+                            }
+                          >
+                            {action.label}
+                          </DropdownMenuItem>
                         ))}
                       </DropdownMenuContent>
                     </DropdownMenu>
diff --git a/resources/js/pages/site-features/components/feature-action.tsx b/resources/js/pages/site-features/components/feature-action.tsx
index 7e895324f..573a5c261 100644
--- a/resources/js/pages/site-features/components/feature-action.tsx
+++ b/resources/js/pages/site-features/components/feature-action.tsx
@@ -1,15 +1,6 @@
 import { Site, SiteFeatureAction } from '@/types/site';
-import { FormEvent, ReactNode, useState } from 'react';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
+import { FormEvent } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form, FormFields } from '@/components/ui/form';
 import { Button } from '@/components/ui/button';
 import { useForm } from '@inertiajs/react';
@@ -20,19 +11,20 @@ type FieldValue = string | number | boolean | string[] | null | undefined;
 import { LoaderCircleIcon } from 'lucide-react';
 
 export default function FeatureAction({
+  open,
+  onOpenChange,
   site,
   featureId,
   actionId,
   action,
-  children,
 }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   site: Site;
   featureId: string;
   actionId: string;
   action: SiteFeatureAction;
-  children: ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
   const form = useForm<Record<string, FieldValue>>({});
 
   const submit = (e: FormEvent) => {
@@ -45,18 +37,14 @@ export default function FeatureAction({
         action: actionId,
       }),
       {
-        onSuccess: () => {
-          setOpen(false);
-          form.reset();
-        },
+        onSuccess: () => onOpenChange(false),
       },
     );
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-xl">
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl" onCloseAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{action.label}</DialogTitle>
           <DialogDescription className="sr-only">action {action.label}</DialogDescription>
diff --git a/resources/js/pages/site-features/index.tsx b/resources/js/pages/site-features/index.tsx
index 53369811a..dca27d327 100644
--- a/resources/js/pages/site-features/index.tsx
+++ b/resources/js/pages/site-features/index.tsx
@@ -11,8 +11,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardRow, CardTitle } fr
 import { Site, SiteFeature } from '@/types/site';
 import { Separator } from '@/components/ui/separator';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import FeatureAction from '@/pages/site-features/components/feature-action';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useDialog } from '@/hooks/use-dialog';
 
 export default function SiteFeatures() {
   const page = usePage<{
@@ -22,6 +22,7 @@ export default function SiteFeatures() {
       [key: string]: SiteFeature;
     };
   }>();
+  const dialog = useDialog();
 
   return (
     <ServerLayout>
@@ -70,11 +71,13 @@ export default function SiteFeatures() {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
                         {Object.entries(feature.actions || {}).map(([actionKey, action]) => (
-                          <FeatureAction key={`action-${actionKey}`} site={page.props.site} featureId={key} actionId={actionKey} action={action}>
-                            <DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!action.active}>
-                              {action.label}
-                            </DropdownMenuItem>
-                          </FeatureAction>
+                          <DropdownMenuItem
+                            key={`action-${actionKey}`}
+                            disabled={!action.active}
+                            onSelect={() => dialog.siteFeatureAction.open({ site: page.props.site, featureId: key, actionId: actionKey, action })}
+                          >
+                            {action.label}
+                          </DropdownMenuItem>
                         ))}
                       </DropdownMenuContent>
                     </DropdownMenu>
diff --git a/resources/js/pages/sites/stats.tsx b/resources/js/pages/sites/stats.tsx
index 0985a7dc0..24793c94e 100644
--- a/resources/js/pages/sites/stats.tsx
+++ b/resources/js/pages/sites/stats.tsx
@@ -328,8 +328,8 @@ function PanelCard({ title, rows }: { title: string; rows: SiteStatsPanelRow[] }
                 </TableCell>
               </TableRow>
             ) : (
-              rows.map((row) => (
-                <TableRow key={row.name}>
+              rows.map((row, index) => (
+                <TableRow key={`${row.name}-${index}`}>
                   <TableCell className="max-w-[280px] truncate">{row.name}</TableCell>
                   <TableCell className="text-right">{row.hits.toLocaleString()}</TableCell>
                   <TableCell className="text-right">{row.visitors.toLocaleString()}</TableCell>
@@ -362,8 +362,8 @@ function StatusCodesCard({ rows }: { rows: SiteStatsStatusCode[] }) {
                 </TableCell>
               </TableRow>
             ) : (
-              rows.map((row) => (
-                <TableRow key={row.name}>
+              rows.map((row, index) => (
+                <TableRow key={`${row.name}-${index}`}>
                   <TableCell>{row.name}</TableCell>
                   <TableCell className="text-right">{row.hits.toLocaleString()}</TableCell>
                 </TableRow>

From 05d3e6b6a59b46ac1d6e2dffbdb8523ae9bf7b3d Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 18:13:40 +0100
Subject: [PATCH 4/8] Claude Review fixes

---
 .../dialogs/confirmation-dialog.tsx           |  4 +-
 .../components/dialogs/log-viewer-dialog.tsx  |  2 +-
 .../components/dialogs/plugin-logs-dialog.tsx | 14 +++++-
 .../components/app-with-deployment.tsx        | 12 +++--
 .../js/pages/cronjobs/components/columns.tsx  |  2 +-
 .../components/edit-database-user.tsx         | 45 ++++++++++++++++---
 .../pages/projects/components/invitations.tsx |  2 +-
 7 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/dialogs/confirmation-dialog.tsx b/resources/js/components/dialogs/confirmation-dialog.tsx
index c7c4f4fea..6c676c045 100644
--- a/resources/js/components/dialogs/confirmation-dialog.tsx
+++ b/resources/js/components/dialogs/confirmation-dialog.tsx
@@ -66,8 +66,8 @@ export default function ConfirmationDialog({
         </DialogHeader>
         <div className="space-y-2 p-4">
           {description && <p>{description}</p>}
-          {errors.map((error, index) => (
-            <InputError key={index} message={error} />
+          {errors.map((error) => (
+            <InputError key={error} message={error} />
           ))}
         </div>
         <DialogFooter>
diff --git a/resources/js/components/dialogs/log-viewer-dialog.tsx b/resources/js/components/dialogs/log-viewer-dialog.tsx
index 351f1129d..9f74fcd2c 100644
--- a/resources/js/components/dialogs/log-viewer-dialog.tsx
+++ b/resources/js/components/dialogs/log-viewer-dialog.tsx
@@ -29,7 +29,7 @@ export default function LogViewerDialog({ open, onOpenChange, serverId, logId, t
           </>
         </LogOutput>
         <DialogFooter>
-          <a href={route('logs.download', { server: serverId, log: logId })} target="_blank">
+          <a href={route('logs.download', { server: serverId, log: logId })} target="_blank" rel="noopener noreferrer">
             <Button variant="outline">Download</Button>
           </a>
         </DialogFooter>
diff --git a/resources/js/components/dialogs/plugin-logs-dialog.tsx b/resources/js/components/dialogs/plugin-logs-dialog.tsx
index c7f91ec56..d37afc5dd 100644
--- a/resources/js/components/dialogs/plugin-logs-dialog.tsx
+++ b/resources/js/components/dialogs/plugin-logs-dialog.tsx
@@ -51,8 +51,20 @@ export default function PluginLogsDialog({ open, onOpenChange, name, errors }: P
               {errors.map((error, index) => (
                 <Card key={index} className="overflow-hidden">
                   <CardRow
-                    className={cn('hover:bg-accent/50 cursor-pointer transition-colors', expandedItems.has(index) && 'border-b')}
+                    role="button"
+                    tabIndex={0}
+                    aria-expanded={expandedItems.has(index)}
+                    className={cn(
+                      'hover:bg-accent/50 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none',
+                      expandedItems.has(index) && 'border-b',
+                    )}
                     onClick={() => toggleExpanded(index)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        toggleExpanded(index);
+                      }
+                    }}
                   >
                     <div className="flex flex-1 items-start gap-3">
                       <div className="mt-0.5">
diff --git a/resources/js/pages/application/components/app-with-deployment.tsx b/resources/js/pages/application/components/app-with-deployment.tsx
index d32d78148..3ec20ab8e 100644
--- a/resources/js/pages/application/components/app-with-deployment.tsx
+++ b/resources/js/pages/application/components/app-with-deployment.tsx
@@ -28,12 +28,18 @@ import { Worker } from '@/types/worker';
 
 const commitCell = ({ row }: CellRenderProps) => {
   const commit = (row.commit_data ?? {}) as Deployment['commit_data'];
-  return commit.message ? (
-    <a href={commit.url} target="_blank" className="text-primary inline-flex truncate font-mono">
+  if (!commit.message) {
+    return <span className="text-muted-foreground">No message</span>;
+  }
+  const href = commit.url && /^https?:\/\//.test(commit.url) ? commit.url : undefined;
+  return href ? (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary inline-flex truncate font-mono">
       <span className="block max-w-[200px] overflow-x-hidden overflow-ellipsis">{commit.message}</span>
     </a>
   ) : (
-    <span className="text-muted-foreground">No message</span>
+    <span className="inline-flex truncate font-mono">
+      <span className="block max-w-[200px] overflow-x-hidden overflow-ellipsis">{commit.message}</span>
+    </span>
   );
 };
 
diff --git a/resources/js/pages/cronjobs/components/columns.tsx b/resources/js/pages/cronjobs/components/columns.tsx
index f7120fe16..f6a6493b0 100644
--- a/resources/js/pages/cronjobs/components/columns.tsx
+++ b/resources/js/pages/cronjobs/components/columns.tsx
@@ -45,7 +45,7 @@ function Delete({ cronJob, site }: { cronJob: CronJob; site?: Site }) {
       variant="destructive"
       onSelect={() =>
         dialog.confirm.open({
-          title: 'Delete cronJob',
+          title: 'Delete cron job',
           description: 'Are you sure you want to delete this cron job? This action cannot be undone.',
           variant: 'destructive',
           confirmLabel: 'Delete',
diff --git a/resources/js/pages/database-users/components/edit-database-user.tsx b/resources/js/pages/database-users/components/edit-database-user.tsx
index ecce45aee..39cb3fc65 100644
--- a/resources/js/pages/database-users/components/edit-database-user.tsx
+++ b/resources/js/pages/database-users/components/edit-database-user.tsx
@@ -9,6 +9,8 @@ import InputError from '@/components/ui/input-error';
 import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
 export default function EditDatabaseUser({
   open,
@@ -21,12 +23,14 @@ export default function EditDatabaseUser({
 }) {
   const form = useForm<{
     password: string;
-    databases: string[];
-    remove_databases: string[];
+    remote: boolean;
+    host?: string;
+    permission: string;
   }>({
     password: '',
-    databases: databaseUser.databases || [],
-    remove_databases: [],
+    remote: databaseUser.host !== 'localhost',
+    host: databaseUser.host,
+    permission: databaseUser.permission,
   });
 
   const submit = (e: FormEvent) => {
@@ -46,10 +50,41 @@ export default function EditDatabaseUser({
         <Form id="edit-database-user-form" onSubmit={submit} className="p-4">
           <FormFields>
             <FormField>
-              <Label htmlFor="password">Password</Label>
+              <Label htmlFor="password">New Password (leave blank to keep current)</Label>
               <Input id="password" type="password" value={form.data.password} onChange={(e) => form.setData('password', e.target.value)} />
               <InputError message={form.errors.password} />
             </FormField>
+
+            <FormField>
+              <Label htmlFor="permission">Permission</Label>
+              <Select value={form.data.permission} onValueChange={(value) => form.setData('permission', value)}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select permission" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin">Admin (Full Access)</SelectItem>
+                  <SelectItem value="write">Write (No Drop/Truncate)</SelectItem>
+                  <SelectItem value="read">Read Only</SelectItem>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.permission} />
+            </FormField>
+
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox id="remote" checked={form.data.remote} onClick={() => form.setData('remote', !form.data.remote)} />
+                <Label htmlFor="remote">Allow remote connection</Label>
+              </div>
+              <InputError message={form.errors.remote} />
+            </FormField>
+
+            {form.data.remote && (
+              <FormField>
+                <Label htmlFor="host">Allow connection from (% for all)</Label>
+                <Input id="host" type="text" value={form.data.host} onChange={(e) => form.setData('host', e.target.value)} />
+                <InputError message={form.errors.host} />
+              </FormField>
+            )}
           </FormFields>
         </Form>
         <DialogFooter>
diff --git a/resources/js/pages/projects/components/invitations.tsx b/resources/js/pages/projects/components/invitations.tsx
index 28e114090..53314fcf5 100644
--- a/resources/js/pages/projects/components/invitations.tsx
+++ b/resources/js/pages/projects/components/invitations.tsx
@@ -32,7 +32,7 @@ function Actions({ invitation }: { invitation: ProjectUser }) {
             variant="destructive"
             onSelect={() =>
               dialog.confirm.open({
-                title: `Delete ${invitation.project_name}`,
+                title: `Reject invitation to ${invitation.project_name}`,
                 description: 'Are you sure you want to reject joining this project?',
                 variant: 'destructive',
                 confirmLabel: 'Reject',

From 2a76fe01e8bbd86c8ce2b1a893a6de8e11402442 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 18:22:18 +0100
Subject: [PATCH 5/8] copilot fixes

---
 .../hosted-domains/components/create-hosted-domain.tsx      | 6 ++++--
 resources/js/pages/plugins/components/installed.tsx         | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
index 19ba2f15e..98e4648aa 100644
--- a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
+++ b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
@@ -27,10 +27,12 @@ const SSL_METHOD_OPTIONS: { value: string; label: string }[] = [
 
 export default function CreateHostedDomain({ open, onOpenChange, site }: { open: boolean; onOpenChange: (open: boolean) => void; site: Site }) {
   const { ssl_enabled } = site;
+  const allowedSslMethods = site.webserver_allowed_ssl_methods;
+  const sslMethodOptions = allowedSslMethods ? SSL_METHOD_OPTIONS.filter((option) => allowedSslMethods.includes(option.value)) : SSL_METHOD_OPTIONS;
   const form = useForm<CreateForm>({
     domain: '',
     type: 'alias',
-    ssl_method: ssl_enabled ? 'letsencrypt' : 'none',
+    ssl_method: ssl_enabled ? site.webserver_default_ssl_method : 'none',
     ssl_id: '',
   });
 
@@ -100,7 +102,7 @@ export default function CreateHostedDomain({ open, onOpenChange, site }: { open:
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {SSL_METHOD_OPTIONS.map((option) => (
+                  {sslMethodOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value}>
                       {option.label}
                     </SelectItem>
diff --git a/resources/js/pages/plugins/components/installed.tsx b/resources/js/pages/plugins/components/installed.tsx
index a3c3e4b2c..9a4bbb671 100644
--- a/resources/js/pages/plugins/components/installed.tsx
+++ b/resources/js/pages/plugins/components/installed.tsx
@@ -42,7 +42,11 @@ export default function InstalledPlugins({ plugins }: { plugins: Plugin[] }) {
                 {plugin.errors.length > 0 && (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <button type="button" onClick={() => dialog.pluginLogs.open({ name: plugin.name ?? plugin.folder, errors: plugin.errors })}>
+                      <button
+                        type="button"
+                        aria-label={`View error logs for ${plugin.name ?? plugin.folder}`}
+                        onClick={() => dialog.pluginLogs.open({ name: plugin.name ?? plugin.folder, errors: plugin.errors })}
+                      >
                         <TriangleAlert className="text-destructive cursor-pointer" />
                       </button>
                     </TooltipTrigger>

From 277f6ca2eb14955fdf5f2519cca811eac48acdf4 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 19:34:39 +0100
Subject: [PATCH 6/8] fixes

---
 .github/instructions/frontend.instructions.md | 77 +++++++++++++++++++
 CLAUDE.md                                     |  1 +
 .../js/components/dialogs/php-ini-dialog.tsx  |  1 +
 .../database-users/components/link-dialog.tsx |  6 +-
 .../components/config-file-dialog.tsx         |  1 +
 5 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/.github/instructions/frontend.instructions.md b/.github/instructions/frontend.instructions.md
index 9067dd4a8..12872212a 100644
--- a/.github/instructions/frontend.instructions.md
+++ b/.github/instructions/frontend.instructions.md
@@ -12,6 +12,83 @@ description: "React, Inertia, Tailwind v4, and TypeScript frontend standards"
 - Use the `useForm` helper for forms — follow existing patterns in the codebase.
 - Use `<Link>` or `router.visit()` for navigation — never raw `<a>` tags for internal routes.
 
+## Dialogs (centralized registry)
+
+App-level dialogs are **not** mounted inline next to their trigger. They live in a central registry and are opened imperatively. This is the required pattern for any new modal/sheet — do not hand-roll local `open` state with a `<DialogTrigger>`.
+
+**The pieces:**
+- `resources/js/components/dialogs/registry.ts` — maps a typed key to a dialog component.
+- `resources/js/hooks/use-dialog.ts` — `useDialog()` returns `dialog.<key>.open(props)` / `.close()` with full prop typing.
+- `resources/js/stores/dialog-store.ts` — Zustand store holding the single active dialog.
+- `resources/js/components/dialogs/dialog-host.tsx` — renders the active dialog once, app-wide.
+
+**Opening a dialog:**
+```tsx
+const dialog = useDialog();
+// inside a handler / DropdownMenuItem onSelect:
+dialog.firewallForm.open({ serverId: server.id, firewallRule });
+```
+
+**Simple confirm / destructive actions — don't create a component, use `dialog.confirm`:**
+```tsx
+dialog.confirm.open({
+  title: `Delete rule [${rule.name}]`,
+  description: 'Are you sure? This cannot be undone.',
+  variant: 'destructive',
+  confirmLabel: 'Delete',
+  method: 'delete',
+  url: route('firewall.destroy', { server: rule.server_id, firewallRule: rule }),
+});
+```
+
+**Opening from a dropdown — this is the whole point of the pattern:** use a plain `DropdownMenuItem` with the default `onSelect` so the menu closes, then open the dialog. **Never** wrap a `<Dialog>`/`<DialogTrigger>` inside a `DropdownMenuItem` with `onSelect={(e) => e.preventDefault()}` — that leaves the dropdown stuck open behind the dialog.
+```tsx
+<DropdownMenuItem onSelect={() => dialog.editHostedDomain.open({ hostedDomain })}>Edit</DropdownMenuItem>
+```
+
+**Authoring a registered dialog component** — it takes control props, renders `<Dialog>` directly (NO `DialogTrigger`, NO local `open` state), and suppresses Radix close-autofocus (the store restores focus):
+```tsx
+export default function FirewallRuleForm({
+  open,
+  onOpenChange,
+  serverId,
+  firewallRule,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number;
+  firewallRule?: FirewallRule;
+}) {
+  const form = useForm({ /* seed from props */ });
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('firewall.store', { server: serverId }), { onSuccess: () => onOpenChange(false) });
+  };
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        {/* ... */}
+        <Form id="firewall-rule-form" onSubmit={submit}>{/* fields */}</Form>
+        <Button form="firewall-rule-form" type="submit" disabled={form.processing}>Save</Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+Then register it once in `registry.ts` (`firewallForm: FirewallRuleForm`). The consumer immediately gets `dialog.firewallForm.open(props)` with typed props.
+
+**Rules & gotchas:**
+- **Form submit buttons** use `form="<form-id>" type="submit"` and the `onSubmit` handler calls `e.preventDefault()`. Do not wire submit via the button's `onClick` (a bare `onClick={submit}` with no `preventDefault` lets Enter fire a native form submission alongside the Inertia request).
+- **Always call `onOpenChange(false)` in `onSuccess`** to close after a successful request.
+- **Lifecycle:** `DialogHost` renders the component with `open` hard-coded `true` and **unmounts it on close** (it never re-renders with `open=false`). Each open is a fresh instance (keyed by `instanceId`), so `useForm` state resets automatically — don't add manual reset-on-open effects. But any `useEffect` that pushes state *outward* based on `open` (e.g. `useInputFocus`'s `setFocused`) **must return a cleanup**, because the component unmounts while `open` is still `true`:
+  ```tsx
+  useEffect(() => {
+    setFocused(open);
+    return () => setFocused(false); // required — unmount happens with open===true
+  }, [open, setFocused]);
+  ```
+- **Authorization:** the registry carries no authz. Every dialog's props must come from server-authorised sources (Inertia page props, API resources) — never URL params or other user-controlled input.
+
 ## Bootstrap Context (`useConfigs`)
 
 - Shared catalogue data (provider lists, site types, GitHub App install state, public key text) is **not** in `page.props` — it lives in the Zustand `useBootstrapStore`, exposed via `useConfigs()` and `usePublicKeyText()` from `@/stores/bootstrap-store`.
diff --git a/CLAUDE.md b/CLAUDE.md
index c190a16ff..2f1fa8b5f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -67,6 +67,7 @@ Vito has a specific architecture. Match these patterns exactly:
 
 - Inertia pages in `resources/js/pages/`. React components in `resources/js/components/`. Functional components + hooks.
 - Forms: use the `useForm` helper, follow existing patterns. Navigation: `<Link>` or `router.visit()` — never raw `<a>` for internal routes.
+- **Dialogs**: all modals/sheets use the centralized registry (`resources/js/components/dialogs/registry.ts`) opened via `useDialog()` — `dialog.<key>.open(props)`, or `dialog.confirm.open({...})` for simple confirms. Never nest `<Dialog>`/`<DialogTrigger>` inside a `DropdownMenuItem`. **Read the "Dialogs" section of `.github/instructions/frontend.instructions.md` before adding or changing any dialog.**
 - Tailwind v4: `@import "tailwindcss"`, `@theme` for config, **`gap-*` over margins** for sibling spacing.
 - Use Shadcn components and semantic tokens (`text-foreground`, `bg-background`, `text-muted-foreground`). Avoid hard-coded colors and custom CSS.
 - **React hooks**: include ALL dependencies in `useEffect` / `useMemo` / `useCallback` arrays. Return cleanup for timers/subscriptions. Stale closures from missing deps are a recurring bug here.
diff --git a/resources/js/components/dialogs/php-ini-dialog.tsx b/resources/js/components/dialogs/php-ini-dialog.tsx
index 1dc4b040b..abeafb660 100644
--- a/resources/js/components/dialogs/php-ini-dialog.tsx
+++ b/resources/js/components/dialogs/php-ini-dialog.tsx
@@ -38,6 +38,7 @@ export default function PhpIniDialog({
 
   useEffect(() => {
     setFocused(open);
+    return () => setFocused(false);
   }, [open, setFocused]);
 
   const submit = (e: FormEvent) => {
diff --git a/resources/js/pages/database-users/components/link-dialog.tsx b/resources/js/pages/database-users/components/link-dialog.tsx
index 08d22c1a8..969e91411 100644
--- a/resources/js/pages/database-users/components/link-dialog.tsx
+++ b/resources/js/pages/database-users/components/link-dialog.tsx
@@ -1,5 +1,6 @@
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { FormEvent } from 'react';
 import { useForm, usePage } from '@inertiajs/react';
 import { LoaderCircleIcon } from 'lucide-react';
 import FormSuccessful from '@/components/form-successful';
@@ -33,7 +34,8 @@ export default function LinkDatabaseUserDialog({
     label: database.name,
   }));
 
-  const submit = () => {
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
     form.put(route('database-users.link', { server: databaseUser.server_id, databaseUser: databaseUser.id }), {
       onSuccess: () => onOpenChange(false),
     });
@@ -65,7 +67,7 @@ export default function LinkDatabaseUserDialog({
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
-          <Button disabled={form.processing} onClick={submit}>
+          <Button form="link-database-user" type="submit" disabled={form.processing}>
             {form.processing && <LoaderCircleIcon className="animate-spin" />}
             <FormSuccessful successful={form.recentlySuccessful} />
             Save
diff --git a/resources/js/pages/services/components/config-file-dialog.tsx b/resources/js/pages/services/components/config-file-dialog.tsx
index 713544ef0..2b71569b4 100644
--- a/resources/js/pages/services/components/config-file-dialog.tsx
+++ b/resources/js/pages/services/components/config-file-dialog.tsx
@@ -35,6 +35,7 @@ export default function ServiceConfigFileDialog({
 
   useEffect(() => {
     setFocused(open);
+    return () => setFocused(false);
   }, [open, setFocused]);
 
   const submit = (e: FormEvent) => {

From f381aa3d9c74256f83060014c38045f2d01fa711 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 21:21:08 +0100
Subject: [PATCH 7/8] coderabbit feedback

---
 resources/js/components/dialogs/php-ini-dialog.tsx            | 4 ++--
 resources/js/pages/backups/components/columns.tsx             | 2 +-
 .../pages/hosted-domains/components/create-hosted-domain.tsx  | 3 ++-
 resources/js/pages/plugins/components/disable.tsx             | 2 +-
 resources/js/pages/plugins/components/enable.tsx              | 2 +-
 resources/js/pages/plugins/components/update.tsx              | 2 +-
 resources/js/pages/services/components/config-file-dialog.tsx | 4 ++--
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/dialogs/php-ini-dialog.tsx b/resources/js/components/dialogs/php-ini-dialog.tsx
index abeafb660..b81e2fcb3 100644
--- a/resources/js/components/dialogs/php-ini-dialog.tsx
+++ b/resources/js/components/dialogs/php-ini-dialog.tsx
@@ -59,7 +59,7 @@ export default function PhpIniDialog({
           type: type,
         }),
       );
-      if (response.data?.ini) {
+      if (typeof response.data?.ini === 'string') {
         form.setData('ini', response.data.ini);
       }
       return response.data;
@@ -82,7 +82,7 @@ export default function PhpIniDialog({
           {query.isSuccess ? (
             <Editor
               defaultLanguage="ini"
-              value={query.data.ini}
+              value={form.data.ini}
               theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
               className="h-full"
               onChange={(value) => form.setData('ini', value ?? '')}
diff --git a/resources/js/pages/backups/components/columns.tsx b/resources/js/pages/backups/components/columns.tsx
index d7f3adf57..f61825e80 100644
--- a/resources/js/pages/backups/components/columns.tsx
+++ b/resources/js/pages/backups/components/columns.tsx
@@ -17,7 +17,7 @@ function Edit({ backup }: { backup: Backup }) {
 
 function Delete({ backup }: { backup: Backup }) {
   const dialog = useDialog();
-  const target = backup.type === 'database' ? backup.database?.name : backup.path;
+  const target = (backup.type === 'database' ? backup.database?.name : backup.path) ?? `#${backup.id}`;
 
   return (
     <DropdownMenuItem
diff --git a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
index 98e4648aa..e59878fe1 100644
--- a/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
+++ b/resources/js/pages/hosted-domains/components/create-hosted-domain.tsx
@@ -29,10 +29,11 @@ export default function CreateHostedDomain({ open, onOpenChange, site }: { open:
   const { ssl_enabled } = site;
   const allowedSslMethods = site.webserver_allowed_ssl_methods;
   const sslMethodOptions = allowedSslMethods ? SSL_METHOD_OPTIONS.filter((option) => allowedSslMethods.includes(option.value)) : SSL_METHOD_OPTIONS;
+  const defaultSslMethod = !ssl_enabled && sslMethodOptions.some((option) => option.value === 'none') ? 'none' : site.webserver_default_ssl_method;
   const form = useForm<CreateForm>({
     domain: '',
     type: 'alias',
-    ssl_method: ssl_enabled ? site.webserver_default_ssl_method : 'none',
+    ssl_method: defaultSslMethod,
     ssl_id: '',
   });
 
diff --git a/resources/js/pages/plugins/components/disable.tsx b/resources/js/pages/plugins/components/disable.tsx
index a6a80dae3..fa650f08e 100644
--- a/resources/js/pages/plugins/components/disable.tsx
+++ b/resources/js/pages/plugins/components/disable.tsx
@@ -11,7 +11,7 @@ export default function Disable({ plugin }: { plugin: Plugin }) {
       onSelect={() =>
         dialog.confirm.open({
           title: 'Disable plugin',
-          description: `Are you sure you want to disable the plugin ${plugin.name}?`,
+          description: `Are you sure you want to disable the plugin ${plugin.name ?? plugin.folder}?`,
           variant: 'destructive',
           confirmLabel: 'Disable',
           method: 'patch',
diff --git a/resources/js/pages/plugins/components/enable.tsx b/resources/js/pages/plugins/components/enable.tsx
index 47e670381..3216350c0 100644
--- a/resources/js/pages/plugins/components/enable.tsx
+++ b/resources/js/pages/plugins/components/enable.tsx
@@ -10,7 +10,7 @@ export default function EnablePlugin({ plugin }: { plugin: Plugin }) {
       onSelect={() =>
         dialog.confirm.open({
           title: 'Enable plugin',
-          description: `Are you sure you want to enable the plugin ${plugin.name}?`,
+          description: `Are you sure you want to enable the plugin ${plugin.name ?? plugin.folder}?`,
           confirmLabel: 'Enable',
           method: 'patch',
           url: route('plugins.enable'),
diff --git a/resources/js/pages/plugins/components/update.tsx b/resources/js/pages/plugins/components/update.tsx
index 49b55f732..740757453 100644
--- a/resources/js/pages/plugins/components/update.tsx
+++ b/resources/js/pages/plugins/components/update.tsx
@@ -10,7 +10,7 @@ export default function UpdatePlugin({ plugin }: { plugin: Plugin }) {
       onSelect={() =>
         dialog.confirm.open({
           title: 'Update plugin',
-          description: `Are you sure you want to update the plugin ${plugin.name} to the latest released version?`,
+          description: `Are you sure you want to update the plugin ${plugin.name ?? plugin.folder} to the latest released version?`,
           confirmLabel: 'Update',
           method: 'patch',
           url: route('plugins.update'),
diff --git a/resources/js/pages/services/components/config-file-dialog.tsx b/resources/js/pages/services/components/config-file-dialog.tsx
index 2b71569b4..0d661d329 100644
--- a/resources/js/pages/services/components/config-file-dialog.tsx
+++ b/resources/js/pages/services/components/config-file-dialog.tsx
@@ -55,7 +55,7 @@ export default function ServiceConfigFileDialog({
           config_name: configPath.name,
         }),
       );
-      if (response.data?.content) {
+      if (typeof response.data?.content === 'string') {
         form.setData('content', response.data.content);
       }
       return response.data;
@@ -78,7 +78,7 @@ export default function ServiceConfigFileDialog({
           {query.isSuccess ? (
             <Editor
               defaultLanguage="ini"
-              value={query.data.content}
+              value={form.data.content}
               theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
               className="h-full"
               onChange={(value) => form.setData('content', value ?? '')}

From 05b38ea8724c2e7e8171e9a7891e668082c76936 Mon Sep 17 00:00:00 2001
From: Richard Anderson <richard@andermail.co.uk>
Date: Sun, 31 May 2026 21:34:54 +0100
Subject: [PATCH 8/8] low fixes

---
 .../dialogs/php-extensions-dialog.tsx         |   2 +-
 .../components/dialogs/plugin-logs-dialog.tsx | 125 +++++++++---------
 .../js/pages/servers/components/actions.tsx   |   2 +
 .../pages/site-settings/components/vhost.tsx  |   4 +-
 resources/js/stores/dialog-store.ts           |   3 +-
 5 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/resources/js/components/dialogs/php-extensions-dialog.tsx b/resources/js/components/dialogs/php-extensions-dialog.tsx
index f3056524d..c09483ee1 100644
--- a/resources/js/components/dialogs/php-extensions-dialog.tsx
+++ b/resources/js/components/dialogs/php-extensions-dialog.tsx
@@ -27,7 +27,7 @@ export default function PhpExtensionsDialog({
     extension: '',
     version: service.version,
   });
-  const [, php] = Object.entries(configs.service.services).filter(([key]) => key === 'php')[0] || null;
+  const [, php] = Object.entries(configs.service.services).filter(([key]) => key === 'php')[0] ?? [];
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
diff --git a/resources/js/components/dialogs/plugin-logs-dialog.tsx b/resources/js/components/dialogs/plugin-logs-dialog.tsx
index d37afc5dd..64f4d75e8 100644
--- a/resources/js/components/dialogs/plugin-logs-dialog.tsx
+++ b/resources/js/components/dialogs/plugin-logs-dialog.tsx
@@ -15,20 +15,22 @@ type PluginLogsDialogProps = {
 };
 
 export default function PluginLogsDialog({ open, onOpenChange, name, errors }: PluginLogsDialogProps) {
-  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
-  const toggleExpanded = (index: number) => {
+  const toggleExpanded = (key: string) => {
     setExpandedItems((prev) => {
       const newSet = new Set(prev);
-      if (newSet.has(index)) {
-        newSet.delete(index);
+      if (newSet.has(key)) {
+        newSet.delete(key);
       } else {
-        newSet.add(index);
+        newSet.add(key);
       }
       return newSet;
     });
   };
 
+  const rowKey = (error: PluginError) => `${error.occurred_at}-${error.file}-${error.line}`;
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[80vh] max-w-2xl! flex-col" onCloseAutoFocus={(e) => e.preventDefault()}>
@@ -48,65 +50,68 @@ export default function PluginLogsDialog({ open, onOpenChange, name, errors }: P
             </div>
           ) : (
             <div className="space-y-3">
-              {errors.map((error, index) => (
-                <Card key={index} className="overflow-hidden">
-                  <CardRow
-                    role="button"
-                    tabIndex={0}
-                    aria-expanded={expandedItems.has(index)}
-                    className={cn(
-                      'hover:bg-accent/50 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none',
-                      expandedItems.has(index) && 'border-b',
-                    )}
-                    onClick={() => toggleExpanded(index)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        toggleExpanded(index);
-                      }
-                    }}
-                  >
-                    <div className="flex flex-1 items-start gap-3">
-                      <div className="mt-0.5">
-                        {expandedItems.has(index) ? (
-                          <ChevronDownIcon className="text-muted-foreground h-4 w-4" />
-                        ) : (
-                          <ChevronRightIcon className="text-muted-foreground h-4 w-4" />
-                        )}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-destructive overflow-wrap-anywhere text-sm font-medium break-words">{error.error_message}</p>
-                        <div className="mt-4 flex flex-wrap items-start gap-4">
-                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
-                            <TimerIcon className="h-3 w-3 flex-shrink-0" />
-                            <span className="font-mono break-all">
-                              <DateTime date={error.occurred_at} />
-                            </span>
-                          </div>
+              {errors.map((error) => {
+                const k = rowKey(error);
+                return (
+                  <Card key={k} className="overflow-hidden">
+                    <CardRow
+                      role="button"
+                      tabIndex={0}
+                      aria-expanded={expandedItems.has(k)}
+                      className={cn(
+                        'hover:bg-accent/50 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none',
+                        expandedItems.has(k) && 'border-b',
+                      )}
+                      onClick={() => toggleExpanded(k)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          toggleExpanded(k);
+                        }
+                      }}
+                    >
+                      <div className="flex flex-1 items-start gap-3">
+                        <div className="mt-0.5">
+                          {expandedItems.has(k) ? (
+                            <ChevronDownIcon className="text-muted-foreground h-4 w-4" />
+                          ) : (
+                            <ChevronRightIcon className="text-muted-foreground h-4 w-4" />
+                          )}
                         </div>
-                        <div className="mt-2 flex flex-wrap items-start gap-4">
-                          <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
-                            <FileCodeIcon className="h-3 w-3 flex-shrink-0" />
-                            <span className="font-mono break-all">
-                              {error.file.substring(error.file.indexOf('/app'))}:{error.line}
-                            </span>
+                        <div className="min-w-0 flex-1">
+                          <p className="text-destructive overflow-wrap-anywhere text-sm font-medium break-words">{error.error_message}</p>
+                          <div className="mt-4 flex flex-wrap items-start gap-4">
+                            <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
+                              <TimerIcon className="h-3 w-3 flex-shrink-0" />
+                              <span className="font-mono break-all">
+                                <DateTime date={error.occurred_at} />
+                              </span>
+                            </div>
+                          </div>
+                          <div className="mt-2 flex flex-wrap items-start gap-4">
+                            <div className="text-muted-foreground flex min-w-0 items-start gap-1.5 text-xs">
+                              <FileCodeIcon className="h-3 w-3 flex-shrink-0" />
+                              <span className="font-mono break-all">
+                                {error.file.substring(error.file.indexOf('/app'))}:{error.line}
+                              </span>
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  </CardRow>
-                  {expandedItems.has(index) && (
-                    <CardContent className="bg-muted/30 p-4">
-                      <div className="space-y-2">
-                        <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Stack Trace</p>
-                        <pre className="bg-background overflow-x-auto rounded-md p-3 font-mono text-xs break-all whitespace-pre-wrap">
-                          {error.stack_trace}
-                        </pre>
-                      </div>
-                    </CardContent>
-                  )}
-                </Card>
-              ))}
+                    </CardRow>
+                    {expandedItems.has(k) && (
+                      <CardContent className="bg-muted/30 p-4">
+                        <div className="space-y-2">
+                          <p className="text-muted-foreground text-xs font-medium tracking-wider uppercase">Stack Trace</p>
+                          <pre className="bg-background overflow-x-auto rounded-md p-3 font-mono text-xs break-all whitespace-pre-wrap">
+                            {error.stack_trace}
+                          </pre>
+                        </div>
+                      </CardContent>
+                    )}
+                  </Card>
+                );
+              })}
             </div>
           )}
         </div>
diff --git a/resources/js/pages/servers/components/actions.tsx b/resources/js/pages/servers/components/actions.tsx
index 8f12645f6..6c9d74adc 100644
--- a/resources/js/pages/servers/components/actions.tsx
+++ b/resources/js/pages/servers/components/actions.tsx
@@ -66,6 +66,7 @@ export default function ServerActions({ server }: { server: Server }) {
               title: `Restart ${server.name}?`,
               description:
                 'Are you sure you want to restart this server? Sites and services hosted on this server will be unavailable while it restarts. Connections in flight will be dropped.',
+              variant: 'destructive',
               confirmLabel: 'Restart',
               method: 'post',
               url: route('servers.reboot', server.id),
@@ -81,6 +82,7 @@ export default function ServerActions({ server }: { server: Server }) {
             dialog.confirm.open({
               title: `Update ${server.name}?`,
               description: `Apply ${server.updates} pending OS package ${server.updates === 1 ? 'update' : 'updates'} to this server? The upgrade can take several minutes and may briefly restart affected services. A server restart may be required afterwards.`,
+              variant: 'destructive',
               confirmLabel: 'Update',
               method: 'post',
               url: route('servers.update', server.id),
diff --git a/resources/js/pages/site-settings/components/vhost.tsx b/resources/js/pages/site-settings/components/vhost.tsx
index e13fbab0c..84f20543c 100644
--- a/resources/js/pages/site-settings/components/vhost.tsx
+++ b/resources/js/pages/site-settings/components/vhost.tsx
@@ -88,7 +88,7 @@ export default function VHost({ site, children }: { site: Site; children: ReactN
           site: site.id,
         }),
       );
-      if (response.data?.template) {
+      if (typeof response.data?.template === 'string') {
         form.setData('template', response.data.template);
       }
       return response.data;
@@ -119,7 +119,7 @@ export default function VHost({ site, children }: { site: Site; children: ReactN
           {query.isSuccess ? (
             <Editor
               defaultLanguage={site.webserver}
-              value={query.data.template}
+              value={form.data.template}
               theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
               className="h-full"
               onChange={(value) => form.setData('template', value ?? '')}
diff --git a/resources/js/stores/dialog-store.ts b/resources/js/stores/dialog-store.ts
index 011539147..ebaf4bd04 100644
--- a/resources/js/stores/dialog-store.ts
+++ b/resources/js/stores/dialog-store.ts
@@ -23,10 +23,11 @@ export const useDialogStore = create<DialogStore>((set, get) => ({
   },
   close: () => {
     const trigger = triggerElement;
+    const generation = get().instanceId;
     triggerElement = null;
     set({ active: null });
     requestAnimationFrame(() => {
-      if (trigger?.isConnected) {
+      if (get().instanceId === generation && trigger?.isConnected) {
         trigger.focus();
       }
     });