diff --git a/webui/src/features/notifications/NotificationCenterPage.tsx b/webui/src/features/notifications/NotificationCenterPage.tsx
index b72afbc..d583a99 100644
--- a/webui/src/features/notifications/NotificationCenterPage.tsx
+++ b/webui/src/features/notifications/NotificationCenterPage.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
+import { Bell, Check, ExternalLink, Send, XCircle } from "lucide-react";
 import {
   ActionBlockerHint,
   ActionToolbar,
-  AdminIconButton,
   Button,
   ConfirmDialog,
   CountBadge,
@@ -14,6 +13,7 @@ import {
   SelectionListItem,
   StatePanel,
   StatusBadge,
+  WorkspaceActionBar,
   WorkspaceFrame,
   WorkspaceLayout,
   hasScope,
@@ -192,20 +192,18 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
         helpContextId="notifications.page.center"
         helpModuleId="notifications"
         primary={<>
-          <ActionToolbar surface="panel-header" className="notifications-sidebar-bar">
-            <div className="notifications-title">
+          <WorkspaceActionBar
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void load(), loading: loading || busy, label: "i18n:govoplan-notifications.refresh" }}
+            className="notifications-sidebar-bar"
+            contextActions={<div className="notifications-title">
               <Bell size={17} />
               <strong>i18n:govoplan-notifications.notifications</strong>
               {unreadCount > 0 ? <CountBadge>{unreadCount}</CountBadge> : null}
-            </div>
-            <AdminIconButton
-              label="i18n:govoplan-notifications.refresh"
-              icon={<RefreshCw size={16} aria-hidden="true" />}
-              onClick={() => void load()}
-              disabled={loading || busy}
-              disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
-            />
-          </ActionToolbar>
+            </div>}
+          />
           <SegmentedControl
             className="notifications-status-filter"
             options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
@@ -241,27 +239,30 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
           </div>
         </>}
       >
-          <ActionToolbar surface="panel-header" className="notifications-topbar">
-            <div className="notifications-title-line">
+          <WorkspaceActionBar
+            scope="detail-pane"
+            variant="detail"
+            className="notifications-topbar"
+            contextActions={<div className="notifications-title-line">
               <Bell size={18} />
               <strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
-            </div>
-            <div className="notifications-actions">
-              <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
+            </div>}
+            helpAction={<DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />}
+            primaryActions={<div className="notifications-actions">
               <Button onClick={() => void markSelected("read")} disabled={Boolean(markReadDisabledReason)} disabledReason={markReadDisabledReason}>
                 <Check size={16} /> i18n:govoplan-notifications.mark_read
               </Button>
               <Button onClick={() => void markSelected("acknowledged")} disabled={Boolean(acknowledgeDisabledReason)} disabledReason={acknowledgeDisabledReason}>
                 <Check size={16} /> i18n:govoplan-notifications.acknowledge
               </Button>
-              <Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
-                <XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
-              </Button>
               <Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
                 <Send size={16} /> i18n:govoplan-notifications.dispatch_pending
               </Button>
-            </div>
-          </ActionToolbar>
+            </div>}
+            destructiveActions={<Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
+              <XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
+            </Button>}
+          />
 
           {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}