diff --git a/apps/tangle-cloud/src/components/tangleCloudTable/TangleCloudTable.tsx b/apps/tangle-cloud/src/components/tangleCloudTable/TangleCloudTable.tsx
index 2377fe5cb..ec2adef90 100644
--- a/apps/tangle-cloud/src/components/tangleCloudTable/TangleCloudTable.tsx
+++ b/apps/tangle-cloud/src/components/tangleCloudTable/TangleCloudTable.tsx
@@ -10,6 +10,7 @@ const GLASS_CONTAINER_CLASS =
 
 export const TangleCloudTable = <T extends RowData>({
   title,
+  hideTitle = false,
   data,
   isLoading,
   error,
@@ -28,17 +29,18 @@ export const TangleCloudTable = <T extends RowData>({
       ? `${errorMessage.slice(0, 137)}...`
       : errorMessage
     : 'Indexer or network request failed.';
+  const hasTitle = !hideTitle;
 
-  const titleElement = (
+  const titleElement = hasTitle ? (
     <Typography variant="h5" fw="bold">
       {title}
     </Typography>
-  );
+  ) : undefined;
 
   if (isLoading) {
     return (
       <div className={GLASS_CONTAINER_CLASS}>
-        {titleElement}
+        {hasTitle ? titleElement : null}
 
         <TableStatus
           {...loadingTableProps}
@@ -49,7 +51,8 @@ export const TangleCloudTable = <T extends RowData>({
           }
           icon={loadingTableProps?.icon ?? '🔄'}
           className={twMerge(
-            'w-full !border-0 !rounded-none !p-0 mt-3',
+            'w-full !border-0 !rounded-none !p-0',
+            hasTitle ? 'mt-3' : null,
             loadingTableProps?.className,
           )}
         />
@@ -60,7 +63,7 @@ export const TangleCloudTable = <T extends RowData>({
   if (error) {
     return (
       <div className={GLASS_CONTAINER_CLASS}>
-        {titleElement}
+        {hasTitle ? titleElement : null}
 
         <TableStatus
           {...errorTableProps}
@@ -78,7 +81,8 @@ export const TangleCloudTable = <T extends RowData>({
             (hasRetry ? { onClick: () => void onRetry() } : undefined)
           }
           className={twMerge(
-            'w-full !border-0 !rounded-none !p-0 mt-3',
+            'w-full !border-0 !rounded-none !p-0',
+            hasTitle ? 'mt-3' : null,
             errorTableProps?.className,
           )}
         />
@@ -89,7 +93,7 @@ export const TangleCloudTable = <T extends RowData>({
   if (isEmpty) {
     return (
       <div className={GLASS_CONTAINER_CLASS}>
-        {titleElement}
+        {hasTitle ? titleElement : null}
 
         <TableStatus
           {...emptyTableProps}
@@ -97,7 +101,8 @@ export const TangleCloudTable = <T extends RowData>({
           description={emptyTableProps?.description ?? 'No data found'}
           icon={emptyTableProps?.icon ?? '🔍'}
           className={twMerge(
-            'w-full !border-0 !rounded-none !p-0 mt-3',
+            'w-full !border-0 !rounded-none !p-0',
+            hasTitle ? 'mt-3' : null,
             emptyTableProps?.className,
           )}
         />
@@ -107,19 +112,22 @@ export const TangleCloudTable = <T extends RowData>({
 
   return (
     <Table
-      title={title}
+      title={hasTitle ? title : ''}
       variant={TableVariant.GLASS_OUTER}
       isPaginated
       {...tableConfig}
       tableProps={tableProps as any}
-      className={twMerge('w-full px-6 pt-4', tableConfig?.className)}
+      className={twMerge(
+        hasTitle ? 'w-full px-6 pt-4' : 'w-full px-6 pt-0',
+        tableConfig?.className,
+      )}
       tableClassName={tableConfig?.tableClassName}
       thClassName={tableConfig?.thClassName}
       tbodyClassName={tableConfig?.tbodyClassName}
       trClassName={twMerge('group overflow-hidden', tableConfig?.trClassName)}
       tdClassName={twMerge('!p-3 max-w-xs', tableConfig?.tdClassName)}
       paginationClassName={tableConfig?.paginationClassName}
-      titleElement={titleElement}
+      titleElement={hasTitle ? titleElement : undefined}
     />
   );
 };
diff --git a/apps/tangle-cloud/src/components/tangleCloudTable/type.ts b/apps/tangle-cloud/src/components/tangleCloudTable/type.ts
index 58e3284f6..1efad71b5 100644
--- a/apps/tangle-cloud/src/components/tangleCloudTable/type.ts
+++ b/apps/tangle-cloud/src/components/tangleCloudTable/type.ts
@@ -5,6 +5,7 @@ import { RowData, type useReactTable } from '@tanstack/react-table';
 
 export interface TangleCloudTableProps<T extends RowData> {
   title: string;
+  hideTitle?: boolean;
   data: T[];
   isLoading: boolean;
   error: Error | null;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/SlashingSummaryCards.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/SlashingSummaryCards.tsx
new file mode 100644
index 000000000..98194bd74
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/SlashingSummaryCards.tsx
@@ -0,0 +1,83 @@
+import {
+  SlashDisputeEligibility,
+  SlashProposal,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import { Card, Typography } from '@tangle-network/ui-components';
+import { formatDateTime, formatTimeRemaining } from '../utils';
+
+interface SlashingSummaryCardsProps {
+  activeRegistrationsCount: number;
+  activeAgainstMeCount: number;
+  myActiveProposalCount: number;
+  nearestPendingSlash: SlashProposal | null;
+  nearestPendingSlashEligibility: SlashDisputeEligibility | null;
+}
+
+const SlashingSummaryCards = ({
+  activeRegistrationsCount,
+  activeAgainstMeCount,
+  myActiveProposalCount,
+  nearestPendingSlash,
+  nearestPendingSlashEligibility,
+}: SlashingSummaryCardsProps) => {
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="p-4">
+          <Typography variant="body2" className="text-mono-100">
+            Active Registrations
+          </Typography>
+          <Typography variant="h4" className="mt-1">
+            {activeRegistrationsCount}
+          </Typography>
+        </Card>
+
+        <Card className="p-4">
+          <Typography variant="body2" className="text-mono-100">
+            Active Against You
+          </Typography>
+          <Typography variant="h4" className="mt-1">
+            {activeAgainstMeCount}
+          </Typography>
+        </Card>
+
+        <Card className="p-4">
+          <Typography variant="body2" className="text-mono-100">
+            My Active Proposals
+          </Typography>
+          <Typography variant="h4" className="mt-1">
+            {myActiveProposalCount}
+          </Typography>
+        </Card>
+      </div>
+
+      {nearestPendingSlash && nearestPendingSlashEligibility ? (
+        <Card className="p-4 !border-yellow-400/30 !bg-yellow-500/15">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
+            <Typography variant="body2" fw="bold" className="text-yellow-400">
+              Nearest Dispute Deadline Against You
+            </Typography>
+          </div>
+          <Typography variant="h5" fw="bold" className="text-mono-0">
+            Slash #{nearestPendingSlash.id.toString()}{' '}
+            <span className="font-normal text-mono-100">expires at</span>{' '}
+            {formatDateTime(nearestPendingSlash.executeAfter)}
+          </Typography>
+          <Typography
+            variant="body2"
+            fw="semibold"
+            className="text-yellow-300/80 mt-1.5"
+          >
+            Time remaining:{' '}
+            {formatTimeRemaining(
+              nearestPendingSlashEligibility.secondsUntilDeadline,
+            )}
+          </Typography>
+        </Card>
+      ) : null}
+    </>
+  );
+};
+
+export default SlashingSummaryCards;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/SlashingTabsTable.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/SlashingTabsTable.tsx
new file mode 100644
index 000000000..f6e971bfa
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/SlashingTabsTable.tsx
@@ -0,0 +1,135 @@
+import { SlashProposal } from '@tangle-network/tangle-shared-ui/data/graphql';
+import {
+  Button,
+  Card,
+  TabContent,
+  Typography,
+} from '@tangle-network/ui-components';
+import { TableAndChartTabs } from '@tangle-network/ui-components/components/TableAndChartTabs';
+import { useReactTable } from '@tanstack/react-table';
+import { TangleCloudTable } from '../../../../components/tangleCloudTable/TangleCloudTable';
+import { SLASHING_TAB_ICONS, SLASHING_TABS, SlashingTab } from '../constants';
+
+interface SlashingTabsTableProps {
+  selectedSlashingTab: SlashingTab;
+  onSlashingTabChange: (tab: SlashingTab) => void;
+  onOpenProposeModal: () => void;
+  myProposals: SlashProposal[];
+  againstMe: SlashProposal[];
+  loadingSlash: boolean;
+  slashError: Error | null;
+  refetchSlashProposals: () => void;
+  myProposalsTable: ReturnType<typeof useReactTable<SlashProposal>>;
+  againstMeTable: ReturnType<typeof useReactTable<SlashProposal>>;
+  executeError: string | null;
+  onDismissExecuteError: () => void;
+}
+
+const SlashingTabsTable = ({
+  selectedSlashingTab,
+  onSlashingTabChange,
+  onOpenProposeModal,
+  myProposals,
+  againstMe,
+  loadingSlash,
+  slashError,
+  refetchSlashProposals,
+  myProposalsTable,
+  againstMeTable,
+  executeError,
+  onDismissExecuteError,
+}: SlashingTabsTableProps) => {
+  return (
+    <Card className="p-4 space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <Typography variant="h5" fw="bold">
+          Slashing Management
+        </Typography>
+        <Button variant="secondary" onClick={onOpenProposeModal}>
+          New Proposal
+        </Button>
+      </div>
+
+      {executeError ? (
+        <Card className="p-3 border border-red-500/30 bg-red-500/10">
+          <div className="flex items-center justify-between gap-3">
+            <Typography
+              variant="body2"
+              className="text-red-70 dark:text-red-50"
+            >
+              {executeError}
+            </Typography>
+            <Button variant="utility" size="sm" onClick={onDismissExecuteError}>
+              Dismiss
+            </Button>
+          </div>
+        </Card>
+      ) : null}
+
+      <TableAndChartTabs
+        tabs={SLASHING_TABS}
+        icons={SLASHING_TAB_ICONS}
+        value={selectedSlashingTab}
+        onValueChange={(tab) => onSlashingTabChange(tab as SlashingTab)}
+        className="space-y-5"
+        enableAdvancedDivider
+      >
+        <TabContent value={SlashingTab.MY_PROPOSALS}>
+          <TangleCloudTable
+            title="Proposals Created By You"
+            hideTitle
+            data={myProposals}
+            isLoading={loadingSlash}
+            error={slashError}
+            onRetry={refetchSlashProposals}
+            tableProps={myProposalsTable}
+            tableConfig={{
+              tdClassName: '!px-4 !py-3.5 max-w-none whitespace-nowrap',
+              thClassName: 'whitespace-nowrap',
+            }}
+            loadingTableProps={{
+              title: 'Loading proposals...',
+              description: 'Fetching slash proposals you created.',
+              icon: '🔄',
+            }}
+            emptyTableProps={{
+              title: 'No Proposals Yet',
+              description: 'You have not proposed any slash proposals yet.',
+              icon: '🧾',
+            }}
+          />
+        </TabContent>
+
+        <TabContent value={SlashingTab.AGAINST_ME}>
+          <TangleCloudTable
+            title="Slashes Against You"
+            hideTitle
+            data={againstMe}
+            isLoading={loadingSlash}
+            error={slashError}
+            onRetry={refetchSlashProposals}
+            tableProps={againstMeTable}
+            tableConfig={{
+              tdClassName: '!px-4 !py-3.5 max-w-none whitespace-nowrap',
+              thClassName: 'whitespace-nowrap',
+            }}
+            loadingTableProps={{
+              title: 'Loading slashes...',
+              description:
+                'Fetching slash proposals where you are the targeted operator.',
+              icon: '🔄',
+            }}
+            emptyTableProps={{
+              title: 'No Slashes Against You',
+              description:
+                'There are no slash proposals targeting your operator address.',
+              icon: '✅',
+            }}
+          />
+        </TabContent>
+      </TableAndChartTabs>
+    </Card>
+  );
+};
+
+export default SlashingTabsTable;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/modals/CancelSlashModal.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/modals/CancelSlashModal.tsx
new file mode 100644
index 000000000..360a50830
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/modals/CancelSlashModal.tsx
@@ -0,0 +1,112 @@
+import {
+  SlashActionPermissions,
+  SlashProposal,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooterActions,
+  ModalHeader,
+  Typography,
+} from '@tangle-network/ui-components';
+
+interface CancelSlashModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedSlash: SlashProposal | null;
+  selectedSlashPermissions: SlashActionPermissions | null;
+  cancelReason: string;
+  onCancelReasonChange: (value: string) => void;
+  minCancelReasonLength: number;
+  trimmedCancelReasonLength: number;
+  canSubmitCancel: boolean;
+  isSubmitting: boolean;
+  onConfirm: () => void;
+  errorMessage: string | null;
+  onDismissError: () => void;
+}
+
+const CancelSlashModal = ({
+  open,
+  onOpenChange,
+  selectedSlash,
+  selectedSlashPermissions,
+  cancelReason,
+  onCancelReasonChange,
+  minCancelReasonLength,
+  trimmedCancelReasonLength,
+  canSubmitCancel,
+  isSubmitting,
+  onConfirm,
+  errorMessage,
+  onDismissError,
+}: CancelSlashModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>Cancel Slash Proposal</ModalHeader>
+        <ModalBody>
+          <Typography variant="body1" className="mb-2">
+            Cancel slash proposal #{selectedSlash?.id.toString()}
+          </Typography>
+          <Typography variant="body2" className="text-mono-100 mb-2">
+            Admin-only action. Authorization is validated on-chain at submission
+            time.
+          </Typography>
+          <div>
+            <Typography variant="body2" className="mb-1">
+              Reason for cancellation
+            </Typography>
+            <textarea
+              className="w-full p-3 rounded-lg border border-mono-40 dark:border-mono-140 bg-mono-0 dark:bg-mono-180 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
+              rows={4}
+              value={cancelReason}
+              onChange={(event) => onCancelReasonChange(event.target.value)}
+              placeholder="Provide cancellation reason..."
+            />
+            <Typography variant="body3" className="text-mono-100 mt-1">
+              Minimum {minCancelReasonLength} characters (
+              {trimmedCancelReasonLength}/{minCancelReasonLength}).
+            </Typography>
+            {!selectedSlashPermissions?.canCancel ? (
+              <Typography variant="body3" className="text-red-500 mt-1">
+                {selectedSlashPermissions?.cancelReason ??
+                  'Cancellation is not available for this slash.'}
+              </Typography>
+            ) : null}
+
+            {errorMessage ? (
+              <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-3 mt-3 space-y-2">
+                <Typography
+                  variant="body3"
+                  className="!text-red-70 dark:!text-red-50"
+                >
+                  {errorMessage}
+                </Typography>
+                <div>
+                  <button
+                    type="button"
+                    className="text-xs underline text-red-70 dark:text-red-50"
+                    onClick={onDismissError}
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </ModalBody>
+        <ModalFooterActions
+          hasCloseButton
+          isConfirmDisabled={isSubmitting || !canSubmitCancel}
+          isProcessing={isSubmitting}
+          confirmButtonText="Cancel Slash"
+          onConfirm={onConfirm}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default CancelSlashModal;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeMessageModal.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeMessageModal.tsx
new file mode 100644
index 000000000..dd2deb0a1
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeMessageModal.tsx
@@ -0,0 +1,55 @@
+import { SlashProposal } from '@tangle-network/tangle-shared-ui/data/graphql';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooterActions,
+  ModalHeader,
+  Typography,
+} from '@tangle-network/ui-components';
+import { getSlashDisputeMessage } from '../../utils';
+
+interface DisputeMessageModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedSlash: SlashProposal | null;
+}
+
+const DisputeMessageModal = ({
+  open,
+  onOpenChange,
+  selectedSlash,
+}: DisputeMessageModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>Dispute Reason</ModalHeader>
+        <ModalBody>
+          <Typography variant="body1" className="mb-2">
+            Slash proposal #{selectedSlash?.id.toString()}
+          </Typography>
+          <Typography variant="body2" className="text-mono-100 mb-2">
+            Submitted dispute reason:
+          </Typography>
+          <div className="rounded-lg border border-mono-40 dark:border-mono-140 p-3 bg-mono-20 dark:bg-mono-170">
+            <Typography
+              variant="body2"
+              className="whitespace-pre-wrap break-words"
+            >
+              {selectedSlash
+                ? (getSlashDisputeMessage(selectedSlash) ??
+                  'No dispute reason available for this proposal yet.')
+                : '-'}
+            </Typography>
+          </div>
+        </ModalBody>
+        <ModalFooterActions
+          confirmButtonText="Close"
+          onConfirm={() => onOpenChange(false)}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DisputeMessageModal;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeSlashModal.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeSlashModal.tsx
new file mode 100644
index 000000000..fee664887
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/modals/DisputeSlashModal.tsx
@@ -0,0 +1,186 @@
+import {
+  SlashActionPermissions,
+  SlashDisputeEligibility,
+  SlashProposal,
+  formatSlashBps,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import { shortenHex } from '@tangle-network/ui-components/utils/shortenHex';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooterActions,
+  ModalHeader,
+  Typography,
+} from '@tangle-network/ui-components';
+import {
+  formatDateTime,
+  formatTimeRemaining,
+  getSlashClaimContext,
+  getSlashProposerRoleLabel,
+} from '../../utils';
+
+interface DisputeSlashModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedSlash: SlashProposal | null;
+  selectedSlashEligibility: SlashDisputeEligibility | null;
+  selectedSlashPermissions: SlashActionPermissions | null;
+  disputeReason: string;
+  onDisputeReasonChange: (value: string) => void;
+  minDisputeReasonLength: number;
+  trimmedDisputeReasonLength: number;
+  canSubmitDispute: boolean;
+  isSubmitting: boolean;
+  onConfirm: () => void;
+  errorMessage: string | null;
+  onDismissError: () => void;
+}
+
+const DisputeSlashModal = ({
+  open,
+  onOpenChange,
+  selectedSlash,
+  selectedSlashEligibility,
+  selectedSlashPermissions,
+  disputeReason,
+  onDisputeReasonChange,
+  minDisputeReasonLength,
+  trimmedDisputeReasonLength,
+  canSubmitDispute,
+  isSubmitting,
+  onConfirm,
+  errorMessage,
+  onDismissError,
+}: DisputeSlashModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>Dispute Slash Proposal</ModalHeader>
+        <ModalBody>
+          <Typography variant="body1" className="mb-2">
+            Dispute slash proposal #{selectedSlash?.id.toString()}
+          </Typography>
+          <div className="p-3 bg-mono-20 dark:bg-mono-170 rounded-lg mb-4">
+            <div className="grid grid-cols-2 gap-x-2 gap-y-3">
+              <Typography variant="body3" className="text-mono-100">
+                Slash %:
+              </Typography>
+              <Typography variant="body3" className="text-red-500">
+                {selectedSlash ? formatSlashBps(selectedSlash.slashBps) : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Effective Slash %:
+              </Typography>
+              <Typography variant="body3" className="text-red-500">
+                {selectedSlash
+                  ? formatSlashBps(selectedSlash.effectiveSlashBps)
+                  : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Dispute Deadline:
+              </Typography>
+              <Typography variant="body3">
+                {selectedSlash
+                  ? formatDateTime(selectedSlash.executeAfter)
+                  : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Time Remaining:
+              </Typography>
+              <Typography variant="body3">
+                {selectedSlashEligibility
+                  ? formatTimeRemaining(
+                      selectedSlashEligibility.secondsUntilDeadline,
+                    )
+                  : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Proposer:
+              </Typography>
+              <Typography variant="body3" className="font-mono">
+                {selectedSlash ? shortenHex(selectedSlash.proposer) : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Proposer Role:
+              </Typography>
+              <Typography variant="body3">
+                {selectedSlash
+                  ? getSlashProposerRoleLabel(selectedSlash.proposerRole)
+                  : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Claim Context:
+              </Typography>
+              <Typography
+                variant="body3"
+                title={
+                  selectedSlash ? getSlashClaimContext(selectedSlash) : '-'
+                }
+              >
+                {selectedSlash ? getSlashClaimContext(selectedSlash) : '-'}
+              </Typography>
+              <Typography variant="body3" className="text-mono-100">
+                Evidence Hash:
+              </Typography>
+              <Typography variant="body3" className="font-mono break-all">
+                {selectedSlash?.evidence ?? '-'}
+              </Typography>
+            </div>
+          </div>
+          <div>
+            <Typography variant="body2" className="mb-1">
+              Reason for Dispute
+            </Typography>
+            <textarea
+              className="w-full p-3 rounded-lg border border-mono-40 dark:border-mono-140 bg-mono-0 dark:bg-mono-180 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
+              rows={4}
+              value={disputeReason}
+              onChange={(event) => onDisputeReasonChange(event.target.value)}
+              placeholder="Explain why this slash proposal is invalid..."
+            />
+            <Typography variant="body3" className="text-mono-100 mt-1">
+              Minimum {minDisputeReasonLength} characters (
+              {trimmedDisputeReasonLength}/{minDisputeReasonLength}).
+            </Typography>
+            {!selectedSlashPermissions?.canDispute ? (
+              <Typography variant="body3" className="text-red-500 mt-1">
+                {selectedSlashPermissions?.disputeReason ??
+                  'Dispute is not available for this slash.'}
+              </Typography>
+            ) : null}
+
+            {errorMessage ? (
+              <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-3 mt-3 space-y-2">
+                <Typography
+                  variant="body3"
+                  className="!text-red-70 dark:!text-red-50"
+                >
+                  {errorMessage}
+                </Typography>
+                <div>
+                  <button
+                    type="button"
+                    className="text-xs underline text-red-70 dark:text-red-50"
+                    onClick={onDismissError}
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </ModalBody>
+        <ModalFooterActions
+          hasCloseButton
+          isConfirmDisabled={isSubmitting || !canSubmitDispute}
+          isProcessing={isSubmitting}
+          confirmButtonText="Submit Dispute"
+          onConfirm={onConfirm}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DisputeSlashModal;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/modals/ProposeSlashModal.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/modals/ProposeSlashModal.tsx
new file mode 100644
index 000000000..2b202fa1d
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/modals/ProposeSlashModal.tsx
@@ -0,0 +1,190 @@
+import { ProposableService } from '@tangle-network/tangle-shared-ui/data/graphql';
+import {
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooterActions,
+  ModalHeader,
+  Typography,
+} from '@tangle-network/ui-components';
+
+interface ProposeSlashModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  loadingProposableServices: boolean;
+  proposableServicesCount: number;
+  proposableServiceOptions: Array<{ value: string; label: string }>;
+  selectedProposableService: ProposableService | null;
+  proposeServiceId: string;
+  setProposeServiceId: (value: string) => void;
+  proposeOperator: string;
+  setProposeOperator: (value: string) => void;
+  proposeSlashBps: string;
+  setProposeSlashBps: (value: string) => void;
+  proposeEvidence: string;
+  setProposeEvidence: (value: string) => void;
+  proposeValidationError: string | null;
+  errorMessage: string | null;
+  onDismissError: () => void;
+  canSubmitPropose: boolean;
+  isSubmitting: boolean;
+  onConfirm: () => void;
+}
+
+const ProposeSlashModal = ({
+  open,
+  onOpenChange,
+  loadingProposableServices,
+  proposableServicesCount,
+  proposableServiceOptions,
+  selectedProposableService,
+  proposeServiceId,
+  setProposeServiceId,
+  proposeOperator,
+  setProposeOperator,
+  proposeSlashBps,
+  setProposeSlashBps,
+  proposeEvidence,
+  setProposeEvidence,
+  proposeValidationError,
+  errorMessage,
+  onDismissError,
+  canSubmitPropose,
+  isSubmitting,
+  onConfirm,
+}: ProposeSlashModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>Create Slash Proposal</ModalHeader>
+        <ModalBody>
+          <div className="space-y-4">
+            {loadingProposableServices ? (
+              <Typography variant="body2" className="text-mono-100">
+                Loading eligible services...
+              </Typography>
+            ) : null}
+
+            {!loadingProposableServices && proposableServicesCount === 0 ? (
+              <Typography variant="body2" className="text-mono-100">
+                No active services where your account appears as service or
+                blueprint owner.
+              </Typography>
+            ) : null}
+
+            {proposableServicesCount > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <Typography variant="body3" className="mb-1">
+                    Service
+                  </Typography>
+                  <select
+                    className="w-full rounded-lg border border-mono-60 dark:border-mono-140 px-3 py-2 bg-mono-0 dark:bg-mono-200"
+                    value={proposeServiceId}
+                    onChange={(event) =>
+                      setProposeServiceId(event.target.value)
+                    }
+                  >
+                    <option value="">Select service</option>
+                    {proposableServiceOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <Typography variant="body3" className="mb-1">
+                    Operator
+                  </Typography>
+                  <select
+                    className="w-full rounded-lg border border-mono-60 dark:border-mono-140 px-3 py-2 bg-mono-0 dark:bg-mono-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                    value={proposeOperator}
+                    onChange={(event) => setProposeOperator(event.target.value)}
+                    disabled={!selectedProposableService}
+                  >
+                    <option value="">
+                      {selectedProposableService
+                        ? 'Select operator'
+                        : 'Select a service first'}
+                    </option>
+                    {selectedProposableService?.operatorCandidates.map(
+                      (operatorAddress) => (
+                        <option key={operatorAddress} value={operatorAddress}>
+                          {operatorAddress}
+                        </option>
+                      ),
+                    )}
+                  </select>
+                </div>
+
+                <div>
+                  <Typography variant="body3" className="mb-1">
+                    Slash BPS (1 - 10000)
+                  </Typography>
+                  <Input
+                    id="propose-slash-bps"
+                    isControlled
+                    value={proposeSlashBps}
+                    onChange={setProposeSlashBps}
+                    placeholder="e.g. 500 (5%)"
+                  />
+                </div>
+
+                <div>
+                  <Typography variant="body3" className="mb-1">
+                    Evidence (text or bytes32 hex)
+                  </Typography>
+                  <Input
+                    id="propose-evidence"
+                    isControlled
+                    value={proposeEvidence}
+                    onChange={setProposeEvidence}
+                    placeholder="ipfs://... or 0x..."
+                  />
+                </div>
+              </div>
+            ) : null}
+
+            {proposeValidationError ? (
+              <Typography variant="body3" className="!text-red-60">
+                {proposeValidationError}
+              </Typography>
+            ) : null}
+
+            {errorMessage ? (
+              <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-3 space-y-2">
+                <Typography
+                  variant="body3"
+                  className="!text-red-70 dark:!text-red-50"
+                >
+                  {errorMessage}
+                </Typography>
+                <div>
+                  <button
+                    type="button"
+                    className="text-xs underline text-red-70 dark:text-red-50"
+                    onClick={onDismissError}
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </ModalBody>
+        <ModalFooterActions
+          hasCloseButton
+          isConfirmDisabled={!canSubmitPropose}
+          isProcessing={isSubmitting}
+          confirmButtonText="Submit Proposal"
+          onConfirm={onConfirm}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ProposeSlashModal;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/components/modals/TimelineModal.tsx b/apps/tangle-cloud/src/pages/operators/manage/components/modals/TimelineModal.tsx
new file mode 100644
index 000000000..098d7acd4
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/components/modals/TimelineModal.tsx
@@ -0,0 +1,92 @@
+import {
+  SlashProposal,
+  SlashTimelineStage,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import {
+  Chip,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooterActions,
+  ModalHeader,
+  Typography,
+} from '@tangle-network/ui-components';
+import { formatDateTime } from '../../utils';
+
+interface TimelineModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedSlash: SlashProposal | null;
+  timeline: SlashTimelineStage[];
+}
+
+const TimelineModal = ({
+  open,
+  onOpenChange,
+  selectedSlash,
+  timeline,
+}: TimelineModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <ModalHeader>Slash Timeline</ModalHeader>
+        <ModalBody>
+          <Typography variant="body1" className="mb-3">
+            Slash proposal #{selectedSlash?.id.toString()}
+          </Typography>
+          <div className="space-y-3">
+            {timeline
+              .filter(
+                (stage) =>
+                  stage.state !== 'upcoming' && stage.state !== 'skipped',
+              )
+              .map((stage) => {
+                const colorByState: Record<
+                  typeof stage.state,
+                  'green' | 'blue' | 'yellow' | 'dark-grey' | 'red'
+                > = {
+                  done: 'green',
+                  current: 'blue',
+                  upcoming: 'yellow',
+                  skipped: 'dark-grey',
+                };
+
+                return (
+                  <div
+                    key={stage.key}
+                    className="flex items-start gap-3 rounded-lg border border-mono-40 dark:border-mono-140 p-3"
+                  >
+                    <Chip
+                      color={colorByState[stage.state]}
+                      className="min-w-[5.25rem] justify-center"
+                    >
+                      {stage.state.toUpperCase()}
+                    </Chip>
+                    <div className="space-y-1">
+                      <Typography variant="body2" fw="bold">
+                        {stage.label}
+                      </Typography>
+                      <Typography variant="body3" className="text-mono-100">
+                        {stage.description}
+                      </Typography>
+                      {stage.timestamp !== null ? (
+                        <Typography variant="body3" className="text-mono-120">
+                          {formatDateTime(stage.timestamp)}
+                        </Typography>
+                      ) : null}
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </ModalBody>
+        <ModalFooterActions
+          confirmButtonText="Close"
+          onConfirm={() => onOpenChange(false)}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default TimelineModal;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/constants.ts b/apps/tangle-cloud/src/pages/operators/manage/constants.ts
new file mode 100644
index 000000000..093cac638
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/constants.ts
@@ -0,0 +1,20 @@
+import { GlobalLine, TimeLineIcon } from '@tangle-network/icons';
+import { ReactElement, createElement } from 'react';
+
+export enum SlashingTab {
+  MY_PROPOSALS = 'My Proposals',
+  AGAINST_ME = 'Against Me',
+}
+
+export const SLASHING_TAB_ICONS: ReactElement[] = [
+  createElement(GlobalLine, { className: 'w-4 h-4 !fill-blue-50' }),
+  createElement(TimeLineIcon, { className: 'w-4 h-4 !fill-yellow-100' }),
+];
+
+export const SLASHING_TABS = Object.values(SlashingTab);
+
+export const MIN_DISPUTE_REASON_LENGTH = 20;
+export const MIN_CANCEL_REASON_LENGTH = 8;
+
+// 65-byte uncompressed ECDSA key => 0x + 130 hex chars.
+export const ECDSA_PUBLIC_KEY_HEX_LENGTH = 132;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/hooks/useChainClock.ts b/apps/tangle-cloud/src/pages/operators/manage/hooks/useChainClock.ts
new file mode 100644
index 000000000..e6811b59e
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/hooks/useChainClock.ts
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePublicClient } from 'wagmi';
+
+export interface UseChainClockResult {
+  nowUnixSeconds: number;
+  clockError: string | null;
+  refreshNow: () => Promise<void>;
+}
+
+const FALLBACK_CLOCK_ERROR =
+  'Failed to read latest block time. Falling back to local clock.';
+
+const POLL_INTERVAL_MS = 5_000;
+
+const useChainClock = (): UseChainClockResult => {
+  const publicClient = usePublicClient();
+  const [nowUnixSeconds, setNowUnixSeconds] = useState(() =>
+    Math.floor(Date.now() / 1000),
+  );
+  const [clockError, setClockError] = useState<string | null>(null);
+  const isMountedRef = useRef(true);
+
+  const setSafeNow = useCallback((value: number) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    setNowUnixSeconds(value);
+  }, []);
+
+  const setSafeClockError = useCallback((value: string | null) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    setClockError(value);
+  }, []);
+
+  const refreshNow = useCallback(async () => {
+    if (!publicClient) {
+      setSafeNow(Math.floor(Date.now() / 1000));
+      setSafeClockError(FALLBACK_CLOCK_ERROR);
+      return;
+    }
+
+    try {
+      const block = await publicClient.getBlock({ blockTag: 'latest' });
+      setSafeNow(Number(block.timestamp));
+      setSafeClockError(null);
+    } catch {
+      setSafeNow(Math.floor(Date.now() / 1000));
+      setSafeClockError(FALLBACK_CLOCK_ERROR);
+    }
+  }, [publicClient, setSafeClockError, setSafeNow]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    void refreshNow();
+
+    const interval = window.setInterval(() => {
+      void refreshNow();
+    }, POLL_INTERVAL_MS);
+
+    return () => {
+      isMountedRef.current = false;
+      window.clearInterval(interval);
+    };
+  }, [refreshNow]);
+
+  return {
+    nowUnixSeconds,
+    clockError,
+    refreshNow,
+  };
+};
+
+export default useChainClock;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashActions.ts b/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashActions.ts
new file mode 100644
index 000000000..b8d53e6f9
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashActions.ts
@@ -0,0 +1,507 @@
+import {
+  SlashProposal,
+  SlashStatus,
+  getSlashActionPermissions,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import { QueryClient } from '@tanstack/react-query';
+import { useCallback, useState } from 'react';
+import { Address, Hash } from 'viem';
+import { SlashingTab } from '../constants';
+import { sleep } from '../utils';
+
+interface SlashSyncTarget {
+  slashId: bigint;
+  status: SlashStatus;
+  disputeReason?: string | null;
+  cancelReason?: string | null;
+}
+
+type SlashActionKey = 'propose' | 'dispute' | 'cancel' | 'execute';
+
+type SlashActionErrorState = Record<SlashActionKey, string | null>;
+
+interface UseSlashActionsParams {
+  address?: Address;
+  nowUnixSeconds: number;
+  queryClient: QueryClient;
+  refetchSlashProposals: () => Promise<{ data: SlashProposal[] | undefined }>;
+  refetchExecutableSlashes: () => Promise<unknown>;
+  proposeSlash: (
+    serviceId: bigint,
+    operator: Address,
+    slashBps: number,
+    evidence: `0x${string}`,
+  ) => Promise<{ slashId?: bigint; proposal?: SlashProposal } | null>;
+  disputeSlash: (slashId: bigint, reason: string) => Promise<Hash | null>;
+  cancelSlash: (slashId: bigint, reason: string) => Promise<Hash | null>;
+  executeSlash: (slashId: bigint) => Promise<Hash | null>;
+  executableSlashIdSet: Set<string>;
+  selectedSlash: SlashProposal | null;
+  canSubmitDispute: boolean;
+  canSubmitCancel: boolean;
+  trimmedDisputeReason: string;
+  trimmedCancelReason: string;
+  canSubmitPropose: boolean;
+  proposeServiceId: string;
+  proposeOperator: string;
+  proposeSlashBps: string;
+  evidenceValue: `0x${string}` | null;
+  resetProposeForm: () => void;
+  setSelectedSlashingTab: (tab: SlashingTab) => void;
+  setShowProposeModal: (open: boolean) => void;
+  setShowDisputeModal: (open: boolean) => void;
+  setShowCancelModal: (open: boolean) => void;
+  setSelectedSlash: (slash: SlashProposal | null) => void;
+  setDisputeReason: (value: string) => void;
+  setCancelReason: (value: string) => void;
+}
+
+export interface UseSlashActionsResult {
+  actionError: SlashActionErrorState;
+  clearActionError: (key: SlashActionKey) => void;
+  clearAllActionErrors: () => void;
+  handleProposeSlash: () => Promise<void>;
+  handleDispute: () => Promise<void>;
+  handleCancel: () => Promise<void>;
+  handleExecuteSingle: (slash: SlashProposal) => Promise<void>;
+}
+
+const EMPTY_ACTION_ERRORS: SlashActionErrorState = {
+  propose: null,
+  dispute: null,
+  cancel: null,
+  execute: null,
+};
+
+const getErrorMessage = (error: unknown, fallback: string): string => {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+};
+
+const useSlashActions = ({
+  address,
+  nowUnixSeconds,
+  queryClient,
+  refetchSlashProposals,
+  refetchExecutableSlashes,
+  proposeSlash,
+  disputeSlash,
+  cancelSlash,
+  executeSlash,
+  executableSlashIdSet,
+  selectedSlash,
+  canSubmitDispute,
+  canSubmitCancel,
+  trimmedDisputeReason,
+  trimmedCancelReason,
+  canSubmitPropose,
+  proposeServiceId,
+  proposeOperator,
+  proposeSlashBps,
+  evidenceValue,
+  resetProposeForm,
+  setSelectedSlashingTab,
+  setShowProposeModal,
+  setShowDisputeModal,
+  setShowCancelModal,
+  setSelectedSlash,
+  setDisputeReason,
+  setCancelReason,
+}: UseSlashActionsParams): UseSlashActionsResult => {
+  const [actionError, setActionError] =
+    useState<SlashActionErrorState>(EMPTY_ACTION_ERRORS);
+
+  const clearActionError = useCallback((key: SlashActionKey) => {
+    setActionError((prev) => ({ ...prev, [key]: null }));
+  }, []);
+
+  const clearAllActionErrors = useCallback(() => {
+    setActionError(EMPTY_ACTION_ERRORS);
+  }, []);
+
+  const patchSlashInCache = useCallback(
+    (slashId: bigint, updater: (proposal: SlashProposal) => SlashProposal) => {
+      queryClient.setQueriesData<SlashProposal[]>(
+        { queryKey: ['slashing', 'proposals'] },
+        (existingProposals) => {
+          if (!existingProposals) {
+            return existingProposals;
+          }
+
+          return existingProposals.map((proposal) =>
+            proposal.id === slashId ? updater(proposal) : proposal,
+          );
+        },
+      );
+    },
+    [queryClient],
+  );
+
+  const upsertSlashInCache = useCallback(
+    (slash: SlashProposal) => {
+      queryClient.setQueriesData<SlashProposal[]>(
+        { queryKey: ['slashing', 'proposals'] },
+        (existingProposals) => {
+          if (!existingProposals) {
+            return [slash];
+          }
+
+          const index = existingProposals.findIndex(
+            (proposal) => proposal.id === slash.id,
+          );
+
+          if (index === -1) {
+            return [slash, ...existingProposals];
+          }
+
+          const next = [...existingProposals];
+          next[index] = slash;
+          return next;
+        },
+      );
+    },
+    [queryClient],
+  );
+
+  const refreshSlashingData = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: ['slashing'] });
+    await refetchSlashProposals();
+    await refetchExecutableSlashes();
+  }, [queryClient, refetchExecutableSlashes, refetchSlashProposals]);
+
+  const applySlashSyncTargetToCache = useCallback(
+    (target: SlashSyncTarget) => {
+      patchSlashInCache(target.slashId, (proposal) => ({
+        ...proposal,
+        status: target.status,
+        disputeReason:
+          target.disputeReason !== undefined
+            ? target.disputeReason
+            : proposal.disputeReason,
+        cancelReason:
+          target.cancelReason !== undefined
+            ? target.cancelReason
+            : proposal.cancelReason,
+      }));
+    },
+    [patchSlashInCache],
+  );
+
+  const waitForSlashStatusSync = useCallback(
+    async (targets: SlashSyncTarget[]) => {
+      if (targets.length === 0) {
+        return;
+      }
+
+      targets.forEach((target) => {
+        applySlashSyncTargetToCache(target);
+      });
+
+      const matchesTarget = (
+        proposal: SlashProposal | undefined,
+        target: SlashSyncTarget,
+      ): boolean => {
+        if (!proposal || proposal.status !== target.status) {
+          return false;
+        }
+
+        if (target.disputeReason !== undefined) {
+          if (target.disputeReason === null) {
+            if (proposal.disputeReason !== null) {
+              return false;
+            }
+          } else {
+            const expectedDispute = target.disputeReason.trim();
+            const actualDispute = proposal.disputeReason?.trim() ?? '';
+            if (
+              expectedDispute.length > 0 &&
+              actualDispute !== expectedDispute
+            ) {
+              return false;
+            }
+          }
+        }
+
+        if (target.cancelReason !== undefined) {
+          if (target.cancelReason === null) {
+            if (proposal.cancelReason !== null) {
+              return false;
+            }
+          } else {
+            const expectedCancel = target.cancelReason.trim();
+            const actualCancel = proposal.cancelReason?.trim() ?? '';
+            if (expectedCancel.length > 0 && actualCancel !== expectedCancel) {
+              return false;
+            }
+          }
+        }
+
+        return true;
+      };
+
+      for (let attempt = 0; attempt < 8; attempt += 1) {
+        try {
+          const refreshed = await refetchSlashProposals();
+          const refreshedProposals = refreshed.data ?? [];
+          const allSynced = targets.every((target) => {
+            const proposal = refreshedProposals.find(
+              (item) => item.id === target.slashId,
+            );
+            return matchesTarget(proposal, target);
+          });
+
+          if (allSynced) {
+            break;
+          }
+        } catch {
+          // Keep optimistic cache values while waiting for indexer recovery.
+        }
+
+        targets.forEach((target) => {
+          applySlashSyncTargetToCache(target);
+        });
+
+        await sleep(1_000);
+      }
+
+      await refetchExecutableSlashes();
+    },
+    [
+      applySlashSyncTargetToCache,
+      refetchExecutableSlashes,
+      refetchSlashProposals,
+    ],
+  );
+
+  const handleProposeSlash = useCallback(async () => {
+    clearActionError('propose');
+
+    if (!canSubmitPropose || !evidenceValue) {
+      return;
+    }
+
+    try {
+      const proposalStartedAt = BigInt(Math.floor(Date.now() / 1000));
+      const slashBps = Number(proposeSlashBps);
+      const operatorAddress = proposeOperator as Address;
+      const targetServiceId = BigInt(proposeServiceId);
+      const targetEvidence = evidenceValue.toLowerCase();
+      const proposerAddress = address?.toLowerCase() ?? null;
+
+      const result = await proposeSlash(
+        targetServiceId,
+        operatorAddress,
+        slashBps,
+        evidenceValue,
+      );
+
+      if (!result) {
+        return;
+      }
+
+      if (result.proposal) {
+        upsertSlashInCache(result.proposal);
+      }
+
+      resetProposeForm();
+      setShowProposeModal(false);
+      setSelectedSlashingTab(SlashingTab.MY_PROPOSALS);
+      await refreshSlashingData();
+
+      for (let attempt = 0; attempt < 8; attempt += 1) {
+        const refreshed = await refetchSlashProposals();
+        const isVisible = (refreshed.data ?? []).some((proposal) => {
+          if (result.slashId !== undefined) {
+            return proposal.id === result.slashId;
+          }
+
+          return (
+            proposerAddress !== null &&
+            proposal.proposer.toLowerCase() === proposerAddress &&
+            proposal.serviceId === targetServiceId &&
+            proposal.operator.toLowerCase() === operatorAddress.toLowerCase() &&
+            proposal.slashBps === BigInt(slashBps) &&
+            proposal.evidence.toLowerCase() === targetEvidence &&
+            proposal.proposedAt >= proposalStartedAt - BigInt(5)
+          );
+        });
+
+        if (isVisible) {
+          break;
+        }
+
+        await sleep(1_000);
+      }
+    } catch (error) {
+      setActionError((prev) => ({
+        ...prev,
+        propose: getErrorMessage(error, 'Failed to submit slash proposal.'),
+      }));
+    }
+  }, [
+    address,
+    canSubmitPropose,
+    clearActionError,
+    evidenceValue,
+    proposeOperator,
+    proposeServiceId,
+    proposeSlash,
+    proposeSlashBps,
+    refetchSlashProposals,
+    refreshSlashingData,
+    resetProposeForm,
+    setSelectedSlashingTab,
+    setShowProposeModal,
+    upsertSlashInCache,
+  ]);
+
+  const handleDispute = useCallback(async () => {
+    clearActionError('dispute');
+
+    if (!selectedSlash || !canSubmitDispute) {
+      return;
+    }
+
+    try {
+      const disputedSlashId = selectedSlash.id;
+      const submittedDisputeReason = trimmedDisputeReason;
+      const result = await disputeSlash(
+        disputedSlashId,
+        submittedDisputeReason,
+      );
+
+      if (!result) {
+        return;
+      }
+
+      setShowDisputeModal(false);
+      setSelectedSlash(null);
+      setDisputeReason('');
+      await waitForSlashStatusSync([
+        {
+          slashId: disputedSlashId,
+          status: 'Disputed',
+          disputeReason: submittedDisputeReason,
+        },
+      ]);
+    } catch (error) {
+      setActionError((prev) => ({
+        ...prev,
+        dispute: getErrorMessage(error, 'Failed to dispute slash proposal.'),
+      }));
+    }
+  }, [
+    canSubmitDispute,
+    clearActionError,
+    disputeSlash,
+    selectedSlash,
+    setDisputeReason,
+    setSelectedSlash,
+    setShowDisputeModal,
+    trimmedDisputeReason,
+    waitForSlashStatusSync,
+  ]);
+
+  const handleCancel = useCallback(async () => {
+    clearActionError('cancel');
+
+    if (!selectedSlash || !canSubmitCancel) {
+      return;
+    }
+
+    try {
+      const cancelledSlashId = selectedSlash.id;
+      const submittedCancelReason = trimmedCancelReason;
+      const result = await cancelSlash(cancelledSlashId, submittedCancelReason);
+
+      if (!result) {
+        return;
+      }
+
+      setShowCancelModal(false);
+      setSelectedSlash(null);
+      setCancelReason('');
+      await waitForSlashStatusSync([
+        {
+          slashId: cancelledSlashId,
+          status: 'Cancelled',
+          cancelReason: submittedCancelReason,
+        },
+      ]);
+    } catch (error) {
+      setActionError((prev) => ({
+        ...prev,
+        cancel: getErrorMessage(error, 'Failed to cancel slash proposal.'),
+      }));
+    }
+  }, [
+    cancelSlash,
+    canSubmitCancel,
+    clearActionError,
+    selectedSlash,
+    setCancelReason,
+    setSelectedSlash,
+    setShowCancelModal,
+    trimmedCancelReason,
+    waitForSlashStatusSync,
+  ]);
+
+  const handleExecuteSingle = useCallback(
+    async (slash: SlashProposal) => {
+      clearActionError('execute');
+
+      try {
+        const permissions = getSlashActionPermissions({
+          slash,
+          connectedAddress: address,
+          nowUnixSeconds,
+        });
+        const isExecutable = executableSlashIdSet.has(slash.id.toString());
+
+        if (!permissions.canExecute || !isExecutable) {
+          return;
+        }
+
+        const result = await executeSlash(slash.id);
+        if (!result) {
+          return;
+        }
+
+        await waitForSlashStatusSync([
+          {
+            slashId: slash.id,
+            status: 'Executed',
+          },
+        ]);
+      } catch (error) {
+        setActionError((prev) => ({
+          ...prev,
+          execute: getErrorMessage(error, 'Failed to execute slash proposal.'),
+        }));
+      }
+    },
+    [
+      address,
+      clearActionError,
+      executableSlashIdSet,
+      executeSlash,
+      nowUnixSeconds,
+      waitForSlashStatusSync,
+    ],
+  );
+
+  return {
+    actionError,
+    clearActionError,
+    clearAllActionErrors,
+    handleProposeSlash,
+    handleDispute,
+    handleCancel,
+    handleExecuteSingle,
+  };
+};
+
+export default useSlashActions;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashProposalForm.ts b/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashProposalForm.ts
new file mode 100644
index 000000000..35a01cd0f
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/hooks/useSlashProposalForm.ts
@@ -0,0 +1,119 @@
+import {
+  ProposableService,
+  toSlashEvidenceBytes32,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import { useMemo, useState } from 'react';
+import { isAddress } from 'viem';
+
+export interface UseSlashProposalFormResult {
+  proposeServiceId: string;
+  setProposeServiceId: (value: string) => void;
+  proposeOperator: string;
+  setProposeOperator: (value: string) => void;
+  proposeSlashBps: string;
+  setProposeSlashBps: (value: string) => void;
+  proposeEvidence: string;
+  setProposeEvidence: (value: string) => void;
+  selectedProposableService: ProposableService | null;
+  proposableServiceOptions: Array<{ value: string; label: string }>;
+  evidenceNormalization: { value: `0x${string}` | null; error: string | null };
+  proposeValidationError: string | null;
+  canSubmitPropose: boolean;
+  resetForm: () => void;
+}
+
+interface UseSlashProposalFormOptions {
+  proposableServices: ProposableService[] | undefined;
+  proposeStatus: 'idle' | 'pending' | 'success' | 'error';
+}
+
+const useSlashProposalForm = ({
+  proposableServices,
+  proposeStatus,
+}: UseSlashProposalFormOptions): UseSlashProposalFormResult => {
+  const [proposeServiceId, setProposeServiceId] = useState('');
+  const [proposeOperator, setProposeOperator] = useState('');
+  const [proposeSlashBps, setProposeSlashBps] = useState('');
+  const [proposeEvidence, setProposeEvidence] = useState('');
+
+  const selectedProposableService = useMemo(() => {
+    if (!proposeServiceId) {
+      return null;
+    }
+
+    return (
+      (proposableServices ?? []).find(
+        (service) => service.serviceId.toString() === proposeServiceId,
+      ) ?? null
+    );
+  }, [proposableServices, proposeServiceId]);
+
+  const proposableServiceOptions = useMemo(
+    () =>
+      (proposableServices ?? []).map((service) => ({
+        value: service.serviceId.toString(),
+        label: `Service #${service.serviceId.toString()} • ${service.blueprintName}`,
+      })),
+    [proposableServices],
+  );
+
+  const evidenceNormalization = useMemo(
+    () => toSlashEvidenceBytes32(proposeEvidence),
+    [proposeEvidence],
+  );
+
+  const proposeValidationError = useMemo(() => {
+    if (!proposeServiceId) {
+      return 'Select a service.';
+    }
+
+    if (!isAddress(proposeOperator)) {
+      return 'Please select an operator.';
+    }
+
+    const slashBps = Number(proposeSlashBps);
+    if (!Number.isInteger(slashBps) || slashBps <= 0 || slashBps > 10_000) {
+      return 'Slash BPS must be an integer between 1 and 10000.';
+    }
+
+    if (evidenceNormalization.error) {
+      return evidenceNormalization.error;
+    }
+
+    return null;
+  }, [
+    evidenceNormalization.error,
+    proposeOperator,
+    proposeServiceId,
+    proposeSlashBps,
+  ]);
+
+  const canSubmitPropose =
+    proposeValidationError === null && proposeStatus !== 'pending';
+
+  const resetForm = () => {
+    setProposeServiceId('');
+    setProposeOperator('');
+    setProposeSlashBps('');
+    setProposeEvidence('');
+  };
+
+  return {
+    proposeServiceId,
+    setProposeServiceId,
+    proposeOperator,
+    setProposeOperator,
+    proposeSlashBps,
+    setProposeSlashBps,
+    proposeEvidence,
+    setProposeEvidence,
+    selectedProposableService,
+    proposableServiceOptions,
+    evidenceNormalization,
+    proposeValidationError,
+    canSubmitPropose,
+    resetForm,
+  };
+};
+
+export default useSlashProposalForm;
diff --git a/apps/tangle-cloud/src/pages/operators/manage/page.tsx b/apps/tangle-cloud/src/pages/operators/manage/page.tsx
index b8f90b37b..b6e80d839 100644
--- a/apps/tangle-cloud/src/pages/operators/manage/page.tsx
+++ b/apps/tangle-cloud/src/pages/operators/manage/page.tsx
@@ -1,8 +1,8 @@
 /**
- * Operator management page - view and manage blueprint registrations and slashing.
+ * Operator management page - blueprint registration and full slashing lifecycle.
  */
 
-import { FC, useState, useMemo, useCallback, useEffect } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
 import {
   Card,
   Typography,
@@ -29,11 +29,17 @@ import {
   useActiveServiceMemberships,
   useSlashProposals,
   useDisputeSlashTx,
+  useCancelSlashTx,
+  useProposeSlashTx,
+  useExecuteSlashTx,
+  useExecutableSlashes,
+  useProposableServices,
   getSlashDisputeEligibility,
+  getSlashExecutionEligibility,
+  getSlashActionPermissions,
+  buildSlashTimeline,
   formatSlashBps,
   type OperatorRegistration,
-  type SlashProposerRole,
-  type SlashStatus,
   type SlashProposal,
 } from '@tangle-network/tangle-shared-ui/data/graphql';
 import { MembershipModel } from '@tangle-network/tangle-shared-ui/data/services';
@@ -47,6 +53,30 @@ import {
 import { TangleCloudTable } from '../../../components/tangleCloudTable/TangleCloudTable';
 import TableCellWrapper from '@tangle-network/tangle-shared-ui/components/tables/TableCellWrapper';
 import ConnectWalletButton from '@tangle-network/tangle-shared-ui/components/ConnectWalletButton';
+import { InformationLine } from '@tangle-network/icons';
+import {
+  ECDSA_PUBLIC_KEY_HEX_LENGTH,
+  MIN_CANCEL_REASON_LENGTH,
+  MIN_DISPUTE_REASON_LENGTH,
+  SlashingTab,
+} from './constants';
+import {
+  formatDateTime,
+  formatTimeRemaining,
+  getSlashProposerRoleChipColor,
+  getSlashProposerRoleLabel,
+  isValidEcdsaPublicKey,
+} from './utils';
+import useChainClock from './hooks/useChainClock';
+import useSlashProposalForm from './hooks/useSlashProposalForm';
+import useSlashActions from './hooks/useSlashActions';
+import SlashingSummaryCards from './components/SlashingSummaryCards';
+import SlashingTabsTable from './components/SlashingTabsTable';
+import ProposeSlashModal from './components/modals/ProposeSlashModal';
+import DisputeMessageModal from './components/modals/DisputeMessageModal';
+import DisputeSlashModal from './components/modals/DisputeSlashModal';
+import CancelSlashModal from './components/modals/CancelSlashModal';
+import TimelineModal from './components/modals/TimelineModal';
 
 const registrationColumnHelper = createColumnHelper<OperatorRegistration>();
 const slashColumnHelper = createColumnHelper<SlashProposal>();
@@ -63,9 +93,6 @@ interface BlueprintServiceBreakdown {
   totalCount: number;
 }
 
-const MIN_DISPUTE_REASON_LENGTH = 20;
-const ECDSA_PUBLIC_KEY_HEX_LENGTH = 132; // 65-byte key => "0x" + 130 hex chars
-
 const getRegistrationActionState = (
   registration: OperatorRegistration,
   options?: {
@@ -123,157 +150,18 @@ const getRegistrationActionState = (
   };
 };
 
-const formatDateTime = (unixSeconds: bigint): string =>
-  new Date(Number(unixSeconds) * 1000).toLocaleString();
-
-const formatTimeRemaining = (secondsUntilDeadline: number): string => {
-  if (secondsUntilDeadline <= 0) {
-    return 'Expired';
-  }
-
-  const days = Math.floor(secondsUntilDeadline / 86_400);
-  const hours = Math.floor((secondsUntilDeadline % 86_400) / 3_600);
-  const minutes = Math.floor((secondsUntilDeadline % 3_600) / 60);
-  const seconds = secondsUntilDeadline % 60;
-
-  if (days > 0) {
-    return `${days}d ${hours}h ${minutes}m`;
-  }
-  if (hours > 0) {
-    return `${hours}h ${minutes}m`;
-  }
-  if (minutes > 0) {
-    return `${minutes}m ${seconds}s`;
-  }
-
-  return `${seconds}s`;
-};
-
-const getSlashStatusReason = (
-  status: SlashStatus,
-  deadlineReason: 'NotPending' | 'DeadlinePassed' | null,
-): string | null => {
-  if (status === 'Pending' && deadlineReason === 'DeadlinePassed') {
-    return 'Dispute window closed';
-  }
-
-  if (status === 'Executed') {
-    return 'Already executed';
-  }
-  if (status === 'Cancelled') {
-    return 'Cancelled';
-  }
-
-  return null;
-};
-
-const decodeBytes32Ascii = (value: `0x${string}`): string | null => {
-  if (!value || value.length !== 66) {
-    return null;
-  }
-
-  const hex = value.slice(2).toLowerCase();
-  let decoded = '';
-
-  for (let i = 0; i < hex.length; i += 2) {
-    const byte = Number.parseInt(hex.slice(i, i + 2), 16);
-    if (!Number.isFinite(byte)) {
-      return null;
-    }
-    if (byte === 0) {
-      break;
-    }
-    if (byte < 32 || byte > 126) {
-      return null;
-    }
-    decoded += String.fromCharCode(byte);
-  }
-
-  const text = decoded.trim();
-  return text.length > 0 ? text : null;
-};
-
-const getSlashClaimContext = (slash: SlashProposal): string => {
-  const cancelReason = slash.cancelReason?.trim();
-  if (cancelReason) {
-    return `Cancel reason: ${cancelReason}`;
-  }
-
-  const evidenceText = decodeBytes32Ascii(slash.evidence);
-  if (evidenceText) {
-    return `Claim: ${evidenceText}`;
-  }
-
-  return 'No human-readable reason on-chain';
-};
-
-const getSlashDisputeMessage = (slash: SlashProposal): string | null => {
-  const disputeReason = slash.disputeReason?.trim();
-  return disputeReason ? disputeReason : null;
-};
-
-const getSlashProposerRoleLabel = (role: SlashProposerRole): string => {
-  if (role === 'ServiceOwner') {
-    return 'Service Owner';
-  }
-  if (role === 'BlueprintOwner') {
-    return 'Blueprint Owner';
-  }
-  if (role === 'SlashingOrigin') {
-    return 'Slashing Origin';
-  }
-
-  return 'Authorized Proposer';
-};
-
-const getSlashProposerRoleChipColor = (
-  role: SlashProposerRole,
-): 'green' | 'blue' | 'yellow' | 'dark-grey' => {
-  if (role === 'ServiceOwner') {
-    return 'green';
-  }
-  if (role === 'BlueprintOwner') {
-    return 'blue';
-  }
-  if (role === 'SlashingOrigin') {
-    return 'yellow';
-  }
-
-  return 'dark-grey';
-};
-
-const isValidEcdsaPublicKey = (value: string): boolean =>
-  /^0x[0-9a-fA-F]+$/.test(value) &&
-  value.length === ECDSA_PUBLIC_KEY_HEX_LENGTH;
-
 const Page: FC = () => {
   const { address, isConnected } = useAccount();
   const queryClient = useQueryClient();
-  const [nowUnixSeconds, setNowUnixSeconds] = useState(() =>
-    Math.floor(Date.now() / 1000),
-  );
+  const { nowUnixSeconds, clockError, refreshNow } = useChainClock();
 
-  useEffect(() => {
-    const interval = window.setInterval(() => {
-      setNowUnixSeconds(Math.floor(Date.now() / 1000));
-    }, 1000);
-
-    return () => window.clearInterval(interval);
-  }, []);
-
-  // Data hooks
+  // Data hooks (registration)
   const {
     data: registrations,
     isLoading: loadingRegistrations,
     error: registrationsError,
     refetch: refetchRegistrations,
   } = useOperatorRegistrations();
-  const {
-    data: slashProposals,
-    isLoading: loadingSlash,
-    error: slashError,
-    refetch: refetchSlashProposals,
-  } = useSlashProposals();
   const {
     data: activeServices,
     error: activeServicesError,
@@ -283,95 +171,95 @@ const Page: FC = () => {
     status: 'ACTIVE',
   });
 
-  // Transaction hooks
+  // Data hooks (slashing)
+  const {
+    data: slashProposals,
+    isLoading: loadingSlash,
+    error: slashError,
+    refetch: refetchSlashProposals,
+  } = useSlashProposals({
+    scope: 'all',
+    enabled: isConnected,
+  });
+  const { data: proposableServices, isLoading: loadingProposableServices } =
+    useProposableServices({
+      enabled: isConnected,
+    });
+  const { data: executableSlashIds, refetch: refetchExecutableSlashes } =
+    useExecutableSlashes({
+      enabled: isConnected,
+      proposals: slashProposals,
+    });
+
+  // Transaction hooks (registration)
   const { unregisterOperator, status: unregisterStatus } =
     useUnregisterOperatorTx();
   const { updatePreferences, status: updateStatus } =
     useUpdateOperatorPreferencesTx();
+
+  // Transaction hooks (slashing)
+  const { proposeSlash, status: proposeStatus } = useProposeSlashTx();
   const { disputeSlash, status: disputeStatus } = useDisputeSlashTx();
+  const { cancelSlash, status: cancelStatus } = useCancelSlashTx();
+  const { executeSlash } = useExecuteSlashTx();
 
-  // Modal state
+  // Registration modal state
   const [selectedRegistration, setSelectedRegistration] =
     useState<OperatorRegistration | null>(null);
+  const [showUnregisterModal, setShowUnregisterModal] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [newRpcAddress, setNewRpcAddress] = useState('');
+  const [newEcdsaPublicKey, setNewEcdsaPublicKey] = useState('');
+
+  // Slashing state
   const [selectedSlash, setSelectedSlash] = useState<SlashProposal | null>(
     null,
   );
-  const [showUnregisterModal, setShowUnregisterModal] = useState(false);
-  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [selectedSlashingTab, setSelectedSlashingTab] = useState<SlashingTab>(
+    SlashingTab.MY_PROPOSALS,
+  );
   const [showDisputeModal, setShowDisputeModal] = useState(false);
   const [showDisputeMessageModal, setShowDisputeMessageModal] = useState(false);
-
-  // Form state
-  const [newRpcAddress, setNewRpcAddress] = useState('');
-  const [newEcdsaPublicKey, setNewEcdsaPublicKey] = useState('');
+  const [showCancelModal, setShowCancelModal] = useState(false);
+  const [showTimelineModal, setShowTimelineModal] = useState(false);
+  const [showProposeModal, setShowProposeModal] = useState(false);
   const [disputeReason, setDisputeReason] = useState('');
+  const [cancelReason, setCancelReason] = useState('');
 
   const trimmedDisputeReason = disputeReason.trim();
+  const trimmedCancelReason = cancelReason.trim();
   const trimmedEcdsaPublicKey = newEcdsaPublicKey.trim();
 
-  const resolvedRpcAddress = useMemo(() => {
-    if (!selectedRegistration) {
-      return '';
-    }
-
-    return newRpcAddress.trim();
-  }, [newRpcAddress, selectedRegistration]);
-
-  const resolvedEcdsaPublicKey = useMemo(() => {
-    if (!selectedRegistration) {
-      return null;
-    }
-
-    const nextKey =
-      trimmedEcdsaPublicKey || selectedRegistration.preferences.ecdsaPublicKey;
-
-    return nextKey.trim();
-  }, [selectedRegistration, trimmedEcdsaPublicKey]);
-
-  const ecdsaPublicKeyError = useMemo(() => {
-    if (!selectedRegistration || !resolvedEcdsaPublicKey) {
-      return null;
-    }
-
-    if (!isValidEcdsaPublicKey(resolvedEcdsaPublicKey)) {
-      if (!trimmedEcdsaPublicKey) {
-        return `Current ECDSA public key is invalid. Enter a valid 65-byte key (${ECDSA_PUBLIC_KEY_HEX_LENGTH} hex chars including 0x) to continue.`;
-      }
-
-      return `ECDSA public key must be 65 bytes (${ECDSA_PUBLIC_KEY_HEX_LENGTH} hex chars including 0x).`;
-    }
-
-    return null;
-  }, [resolvedEcdsaPublicKey, selectedRegistration, trimmedEcdsaPublicKey]);
-
-  const rpcAddressError = useMemo(() => {
-    if (!selectedRegistration) {
-      return null;
-    }
-
-    const trimmedRpcAddress = newRpcAddress.trim();
-    if (trimmedRpcAddress.length === 0) {
-      return 'RPC endpoint is required.';
-    }
-
-    try {
-      const url = new URL(trimmedRpcAddress);
-      const isAllowedProtocol = ['http:', 'https:', 'ws:', 'wss:'].includes(
-        url.protocol,
-      );
-
-      if (!isAllowedProtocol) {
-        return 'RPC endpoint must use http(s) or ws(s).';
-      }
+  const {
+    proposeServiceId,
+    setProposeServiceId,
+    proposeOperator,
+    setProposeOperator,
+    proposeSlashBps,
+    setProposeSlashBps,
+    proposeEvidence,
+    setProposeEvidence,
+    selectedProposableService,
+    proposableServiceOptions,
+    evidenceNormalization,
+    proposeValidationError,
+    canSubmitPropose,
+    resetForm: resetProposeForm,
+  } = useSlashProposalForm({
+    proposableServices,
+    proposeStatus,
+  });
 
-      return null;
-    } catch {
-      return 'Please enter a valid RPC endpoint URL.';
+  const executableSlashIdSet = useMemo(() => {
+    const set = new Set<string>();
+    for (const id of executableSlashIds ?? []) {
+      set.add(id.toString());
     }
-  }, [newRpcAddress, selectedRegistration]);
+    return set;
+  }, [executableSlashIds]);
 
   const activeServiceIds = useMemo(
-    () => (activeServices ?? []).map((s) => s.serviceId),
+    () => (activeServices ?? []).map((service) => service.serviceId),
     [activeServices],
   );
 
@@ -412,32 +300,83 @@ const Page: FC = () => {
 
   const isActiveServicePrecheckUnavailable = Boolean(activeServicesError);
 
+  const myProposals = useMemo(() => {
+    if (!address) {
+      return [] as SlashProposal[];
+    }
+
+    return (slashProposals ?? []).filter(
+      (slash) => slash.proposer.toLowerCase() === address.toLowerCase(),
+    );
+  }, [address, slashProposals]);
+
+  const againstMe = useMemo(() => {
+    if (!address) {
+      return [] as SlashProposal[];
+    }
+
+    return (slashProposals ?? []).filter(
+      (slash) => slash.operator.toLowerCase() === address.toLowerCase(),
+    );
+  }, [address, slashProposals]);
+
+  const myActiveProposalCount = useMemo(
+    () =>
+      myProposals.filter(
+        (slash) => slash.status === 'Pending' || slash.status === 'Disputed',
+      ).length,
+    [myProposals],
+  );
+
+  const activeAgainstMeCount = useMemo(
+    () =>
+      againstMe.filter(
+        (slash) => slash.status === 'Pending' || slash.status === 'Disputed',
+      ).length,
+    [againstMe],
+  );
+
   const selectedSlashEligibility = useMemo(() => {
     if (!selectedSlash) {
       return null;
     }
+
     return getSlashDisputeEligibility(selectedSlash, nowUnixSeconds);
   }, [selectedSlash, nowUnixSeconds]);
 
-  const isDisputeReasonValid =
-    trimmedDisputeReason.length >= MIN_DISPUTE_REASON_LENGTH;
-  const canSubmitDispute =
-    !!selectedSlashEligibility?.isEligible && isDisputeReasonValid;
+  const selectedSlashPermissions = useMemo(() => {
+    if (!selectedSlash) {
+      return null;
+    }
 
-  const pendingSlashProposals = useMemo(
-    () => (slashProposals ?? []).filter((slash) => slash.status === 'Pending'),
-    [slashProposals],
-  );
+    return getSlashActionPermissions({
+      slash: selectedSlash,
+      connectedAddress: address,
+      nowUnixSeconds,
+    });
+  }, [address, nowUnixSeconds, selectedSlash]);
+
+  const selectedSlashTimeline = useMemo(() => {
+    if (!selectedSlash) {
+      return [];
+    }
+
+    return buildSlashTimeline(selectedSlash, nowUnixSeconds);
+  }, [selectedSlash, nowUnixSeconds]);
 
   const nearestPendingSlash = useMemo(() => {
-    if (!pendingSlashProposals.length) {
+    const pendingAgainstMe = againstMe.filter(
+      (slash) => slash.status === 'Pending',
+    );
+
+    if (pendingAgainstMe.length === 0) {
       return null;
     }
 
-    return [...pendingSlashProposals].sort((a, b) => {
+    return [...pendingAgainstMe].sort((a, b) => {
       return Number(a.executeAfter) - Number(b.executeAfter);
     })[0];
-  }, [pendingSlashProposals]);
+  }, [againstMe]);
 
   const nearestPendingSlashEligibility = useMemo(() => {
     if (!nearestPendingSlash) {
@@ -447,6 +386,77 @@ const Page: FC = () => {
     return getSlashDisputeEligibility(nearestPendingSlash, nowUnixSeconds);
   }, [nearestPendingSlash, nowUnixSeconds]);
 
+  const isDisputeReasonValid =
+    trimmedDisputeReason.length >= MIN_DISPUTE_REASON_LENGTH;
+  const canSubmitDispute =
+    !!selectedSlashPermissions?.canDispute && isDisputeReasonValid;
+
+  const isCancelReasonValid =
+    trimmedCancelReason.length >= MIN_CANCEL_REASON_LENGTH;
+  const canSubmitCancel =
+    !!selectedSlashPermissions?.canCancel && isCancelReasonValid;
+
+  const resolvedRpcAddress = useMemo(() => {
+    if (!selectedRegistration) {
+      return '';
+    }
+
+    return newRpcAddress.trim();
+  }, [newRpcAddress, selectedRegistration]);
+
+  const resolvedEcdsaPublicKey = useMemo(() => {
+    if (!selectedRegistration) {
+      return null;
+    }
+
+    const nextKey =
+      trimmedEcdsaPublicKey || selectedRegistration.preferences.ecdsaPublicKey;
+
+    return nextKey.trim();
+  }, [selectedRegistration, trimmedEcdsaPublicKey]);
+
+  const ecdsaPublicKeyError = useMemo(() => {
+    if (!selectedRegistration || !resolvedEcdsaPublicKey) {
+      return null;
+    }
+
+    if (!isValidEcdsaPublicKey(resolvedEcdsaPublicKey)) {
+      if (!trimmedEcdsaPublicKey) {
+        return `Current ECDSA public key is invalid. Enter a valid 65-byte key (${ECDSA_PUBLIC_KEY_HEX_LENGTH} hex chars including 0x) to continue.`;
+      }
+
+      return `ECDSA public key must be 65 bytes (${ECDSA_PUBLIC_KEY_HEX_LENGTH} hex chars including 0x).`;
+    }
+
+    return null;
+  }, [resolvedEcdsaPublicKey, selectedRegistration, trimmedEcdsaPublicKey]);
+
+  const rpcAddressError = useMemo(() => {
+    if (!selectedRegistration) {
+      return null;
+    }
+
+    const trimmedRpcAddress = newRpcAddress.trim();
+    if (trimmedRpcAddress.length === 0) {
+      return 'RPC endpoint is required.';
+    }
+
+    try {
+      const url = new URL(trimmedRpcAddress);
+      const isAllowedProtocol = ['http:', 'https:', 'ws:', 'wss:'].includes(
+        url.protocol,
+      );
+
+      if (!isAllowedProtocol) {
+        return 'RPC endpoint must use http(s) or ws(s).';
+      }
+
+      return null;
+    } catch {
+      return 'Please enter a valid RPC endpoint URL.';
+    }
+  }, [newRpcAddress, selectedRegistration]);
+
   const isNoopUpdate = useMemo(() => {
     if (!selectedRegistration) {
       return true;
@@ -465,8 +475,52 @@ const Page: FC = () => {
     return rpcUnchanged && keyUnchanged;
   }, [resolvedRpcAddress, selectedRegistration, trimmedEcdsaPublicKey]);
 
+  const {
+    actionError,
+    clearActionError,
+    handleProposeSlash,
+    handleDispute,
+    handleCancel,
+    handleExecuteSingle,
+  } = useSlashActions({
+    address,
+    nowUnixSeconds,
+    queryClient,
+    refetchSlashProposals: async () => {
+      const result = await refetchSlashProposals();
+      return { data: result.data };
+    },
+    refetchExecutableSlashes,
+    proposeSlash,
+    disputeSlash,
+    cancelSlash,
+    executeSlash,
+    executableSlashIdSet,
+    selectedSlash,
+    canSubmitDispute,
+    canSubmitCancel,
+    trimmedDisputeReason,
+    trimmedCancelReason,
+    canSubmitPropose,
+    proposeServiceId,
+    proposeOperator,
+    proposeSlashBps,
+    evidenceValue: evidenceNormalization.value,
+    resetProposeForm,
+    setSelectedSlashingTab,
+    setShowProposeModal,
+    setShowDisputeModal,
+    setShowCancelModal,
+    setSelectedSlash,
+    setDisputeReason,
+    setCancelReason,
+  });
+
   const handleUnregister = useCallback(async () => {
-    if (!selectedRegistration) return;
+    if (!selectedRegistration) {
+      return;
+    }
+
     const unregisteredBlueprintId = selectedRegistration.blueprintId;
     const result = await unregisterOperator(unregisteredBlueprintId);
     if (result) {
@@ -496,8 +550,9 @@ const Page: FC = () => {
       rpcAddressError ||
       ecdsaPublicKeyError ||
       !resolvedEcdsaPublicKey
-    )
+    ) {
       return;
+    }
 
     const updatedBlueprintId = selectedRegistration.blueprintId;
     const updatedRpcAddress = resolvedRpcAddress;
@@ -536,52 +591,15 @@ const Page: FC = () => {
       setNewEcdsaPublicKey('');
     }
   }, [
-    rpcAddressError,
     ecdsaPublicKeyError,
     queryClient,
     resolvedEcdsaPublicKey,
     resolvedRpcAddress,
+    rpcAddressError,
     selectedRegistration,
     updatePreferences,
   ]);
 
-  const handleDispute = useCallback(async () => {
-    if (!selectedSlash || !canSubmitDispute) return;
-    const disputedSlashId = selectedSlash.id;
-    const disputeReason = trimmedDisputeReason;
-    const result = await disputeSlash(disputedSlashId, disputeReason);
-    if (result) {
-      queryClient.setQueriesData<SlashProposal[]>(
-        { queryKey: ['slashing', 'proposals'] },
-        (existingProposals) => {
-          if (!existingProposals) {
-            return existingProposals;
-          }
-
-          return existingProposals.map((proposal) =>
-            proposal.id === disputedSlashId
-              ? {
-                  ...proposal,
-                  status: 'Disputed',
-                  disputeReason,
-                }
-              : proposal,
-          );
-        },
-      );
-
-      setShowDisputeModal(false);
-      setSelectedSlash(null);
-      setDisputeReason('');
-    }
-  }, [
-    canSubmitDispute,
-    selectedSlash,
-    trimmedDisputeReason,
-    disputeSlash,
-    queryClient,
-  ]);
-
   // Registration columns
   const registrationColumns = useMemo(
     () => [
@@ -639,8 +657,8 @@ const Page: FC = () => {
               size="sm"
               isDisabled={!actionState.canUnregister}
               className="uppercase body4 bg-red-10 dark:bg-red-120 text-red-70 dark:text-red-40 hover:bg-red-20 dark:hover:bg-red-110 border border-red-30 dark:border-red-100 disabled:!opacity-100 disabled:!text-mono-100 disabled:!border-mono-100/30 disabled:!bg-transparent dark:disabled:!text-mono-100 dark:disabled:!border-mono-120 dark:disabled:!bg-mono-160 disabled:cursor-not-allowed"
-              onClick={(e) => {
-                e.stopPropagation();
+              onClick={(event) => {
+                event.stopPropagation();
                 setSelectedRegistration(info.row.original);
                 setShowUnregisterModal(true);
               }}
@@ -658,8 +676,8 @@ const Page: FC = () => {
                       variant="utility"
                       size="sm"
                       className="uppercase body4 bg-blue-10 dark:bg-blue-120 text-blue-70 dark:text-blue-40 hover:bg-blue-20 dark:hover:bg-blue-110 border border-blue-30 dark:border-blue-100"
-                      onClick={(e) => {
-                        e.stopPropagation();
+                      onClick={(event) => {
+                        event.stopPropagation();
                         setSelectedRegistration(info.row.original);
                         setNewRpcAddress(
                           info.row.original.preferences.rpcAddress,
@@ -697,7 +715,7 @@ const Page: FC = () => {
     ],
   );
 
-  // Slash columns
+  // Slashing columns
   const slashColumns = useMemo(
     () => [
       slashColumnHelper.accessor('id', {
@@ -722,8 +740,43 @@ const Page: FC = () => {
           </TableCellWrapper>
         ),
       }),
+      slashColumnHelper.accessor('operator', {
+        header: () => 'Operator',
+        cell: (info) => (
+          <TableCellWrapper className="py-3 pr-3">
+            <div className="flex items-center gap-2 whitespace-nowrap">
+              <Typography
+                variant="body2"
+                className="font-mono whitespace-nowrap"
+              >
+                {shortenHex(info.getValue())}
+              </Typography>
+              <CopyWithTooltip
+                textToCopy={info.getValue()}
+                isButton={false}
+                iconSize="md"
+                iconClassName="!fill-mono-160 dark:!fill-mono-80"
+              />
+            </div>
+          </TableCellWrapper>
+        ),
+      }),
       slashColumnHelper.accessor('slashBps', {
-        header: () => 'Slash %',
+        header: () => (
+          <div className="flex items-center gap-1 !text-inherit">
+            Slash %
+            <Tooltip delayDuration={0}>
+              <TooltipTrigger asChild>
+                <span className="cursor-help">
+                  <InformationLine className="w-3.5 h-3.5 !fill-mono-120" />
+                </span>
+              </TooltipTrigger>
+              <TooltipBody className="max-w-[220px]">
+                The proposed slash percentage in basis points (100 bps = 1%).
+              </TooltipBody>
+            </Tooltip>
+          </div>
+        ),
         minSize: 120,
         cell: (info) => (
           <TableCellWrapper className="py-3 pr-3">
@@ -734,7 +787,23 @@ const Page: FC = () => {
         ),
       }),
       slashColumnHelper.accessor('effectiveSlashBps', {
-        header: () => 'Effective Slash %',
+        header: () => (
+          <div className="flex items-center gap-1 !text-inherit">
+            Effective Slash %
+            <Tooltip delayDuration={0}>
+              <TooltipTrigger asChild>
+                <span className="cursor-help">
+                  <InformationLine className="w-3.5 h-3.5 !fill-mono-120" />
+                </span>
+              </TooltipTrigger>
+              <TooltipBody className="max-w-[220px]">
+                The actual slash percentage applied after on-chain deductions
+                and adjustments.
+              </TooltipBody>
+            </Tooltip>
+          </div>
+        ),
+        minSize: 140,
         cell: (info) => (
           <TableCellWrapper className="py-3 pr-3">
             <Typography variant="body1" fw="semibold" className="text-red-500">
@@ -743,25 +812,6 @@ const Page: FC = () => {
           </TableCellWrapper>
         ),
       }),
-      slashColumnHelper.accessor('evidence', {
-        header: () => 'Claim Context',
-        cell: (info) => {
-          const slash = info.row.original;
-          const claimContext = getSlashClaimContext(slash);
-
-          return (
-            <TableCellWrapper className="py-3 pr-3">
-              <Typography
-                variant="body2"
-                className="max-w-[360px] truncate"
-                title={claimContext}
-              >
-                {claimContext}
-              </Typography>
-            </TableCellWrapper>
-          );
-        },
-      }),
       slashColumnHelper.accessor('proposer', {
         header: () => 'Proposer',
         cell: (info) => {
@@ -809,39 +859,50 @@ const Page: FC = () => {
       }),
       slashColumnHelper.accessor('executeAfter', {
         header: () => 'Execute After',
-        cell: (info) => {
-          return (
-            <TableCellWrapper className="py-3 pr-3">
-              <Typography variant="body2">
-                {formatDateTime(info.getValue())}
-              </Typography>
-            </TableCellWrapper>
-          );
-        },
+        cell: (info) => (
+          <TableCellWrapper className="py-3 pr-3">
+            <Typography variant="body2">
+              {formatDateTime(info.getValue())}
+            </Typography>
+          </TableCellWrapper>
+        ),
       }),
       slashColumnHelper.display({
         id: 'actions',
         header: () => '',
         cell: (info) => {
           const slash = info.row.original;
-          const eligibility = getSlashDisputeEligibility(slash, nowUnixSeconds);
-          const showDisputeButton = slash.status === 'Pending';
-          const reasonText = getSlashStatusReason(
-            slash.status,
-            eligibility.reason,
+          const permissions = getSlashActionPermissions({
+            slash,
+            connectedAddress: address,
+            nowUnixSeconds,
+          });
+          const executionEligibility = getSlashExecutionEligibility(
+            slash,
+            nowUnixSeconds,
           );
 
+          const isSlashedOperator =
+            !!address && slash.operator.toLowerCase() === address.toLowerCase();
+          const isExecutable = executableSlashIdSet.has(slash.id.toString());
+          const canExecute = permissions.canExecute && isExecutable;
+          const executeDisabledReason = !canExecute
+            ? (permissions.executeReason ??
+              'Not executable per on-chain discovery.')
+            : null;
+
           return (
             <TableCellWrapper removeRightBorder className="py-3 pr-3">
-              {showDisputeButton ? (
-                <>
+              <div className="flex flex-nowrap items-center gap-2 overflow-x-auto whitespace-nowrap pb-1">
+                {slash.status === 'Pending' && isSlashedOperator ? (
                   <Button
                     variant="utility"
                     size="sm"
-                    isDisabled={!eligibility.isEligible}
+                    isDisabled={!permissions.canDispute}
                     className="uppercase body4 bg-blue-10 dark:bg-blue-120 text-blue-70 dark:text-blue-40 hover:bg-blue-20 dark:hover:bg-blue-110 border border-blue-30 dark:border-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                    onClick={(e) => {
-                      e.stopPropagation();
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      clearActionError('dispute');
                       setSelectedSlash(slash);
                       setDisputeReason('');
                       setShowDisputeModal(true);
@@ -849,41 +910,110 @@ const Page: FC = () => {
                   >
                     Dispute
                   </Button>
-                  {!eligibility.isEligible && reasonText && (
-                    <Typography variant="body3" className="text-mono-100 mt-1">
-                      {reasonText}
-                    </Typography>
-                  )}
-                </>
-              ) : slash.status === 'Disputed' ? (
-                <div className="flex items-start">
+                ) : null}
+
+                {!isSlashedOperator &&
+                (slash.status === 'Pending' || slash.status === 'Disputed') ? (
                   <Button
                     variant="utility"
                     size="sm"
-                    className="uppercase body4 bg-blue-10 dark:bg-blue-120 text-blue-70 dark:text-blue-40 hover:bg-blue-20 dark:hover:bg-blue-110 border border-blue-30 dark:border-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                    onClick={(e) => {
-                      e.stopPropagation();
+                    isDisabled={!permissions.canCancel}
+                    className="uppercase body4 bg-red-10 dark:bg-red-120 text-red-70 dark:text-red-40 hover:bg-red-20 dark:hover:bg-red-110 border border-red-30 dark:border-red-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      clearActionError('cancel');
+                      setSelectedSlash(slash);
+                      setCancelReason('');
+                      setShowCancelModal(true);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                ) : null}
+
+                {!isSlashedOperator &&
+                (slash.status === 'Pending' || slash.status === 'Disputed')
+                  ? (() => {
+                      const executeButton = (
+                        <Button
+                          variant="utility"
+                          size="sm"
+                          isDisabled={!canExecute}
+                          className="uppercase body4 bg-green-10 dark:bg-green-120 text-green-70 dark:text-green-40 hover:bg-green-20 dark:hover:bg-green-110 border border-green-30 dark:border-green-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleExecuteSingle(slash);
+                          }}
+                        >
+                          Execute
+                        </Button>
+                      );
+
+                      if (!canExecute) {
+                        const reason =
+                          executeDisabledReason ??
+                          (executionEligibility.reason === 'DisputeWindowOpen'
+                            ? `Ready in ${formatTimeRemaining(executionEligibility.secondsUntilExecutable)}`
+                            : 'Not executable yet');
+
+                        return (
+                          <Tooltip delayDuration={0}>
+                            <TooltipTrigger asChild>
+                              <span className="inline-flex cursor-not-allowed">
+                                {executeButton}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipBody>{reason}</TooltipBody>
+                          </Tooltip>
+                        );
+                      }
+
+                      return executeButton;
+                    })()
+                  : null}
+
+                <Button
+                  variant="utility"
+                  size="sm"
+                  className="uppercase body4"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setSelectedSlash(slash);
+                    setShowTimelineModal(true);
+                  }}
+                >
+                  Timeline
+                </Button>
+
+                {slash.status === 'Disputed' ? (
+                  <Button
+                    variant="utility"
+                    size="sm"
+                    className="uppercase body4"
+                    onClick={(event) => {
+                      event.stopPropagation();
                       setSelectedSlash(slash);
                       setShowDisputeMessageModal(true);
                     }}
                   >
-                    View Dispute Reason
+                    View Dispute
                   </Button>
-                </div>
-              ) : (
-                <Typography variant="body3" className="text-mono-100">
-                  {reasonText ?? '-'}
-                </Typography>
-              )}
+                ) : null}
+              </div>
             </TableCellWrapper>
           );
         },
       }),
     ],
-    [nowUnixSeconds],
+    [
+      address,
+      executableSlashIdSet,
+      handleExecuteSingle,
+      nowUnixSeconds,
+      clearActionError,
+    ],
   );
 
-  // Tables
   const registrationTable = useReactTable({
     data: registrations ?? [],
     columns: registrationColumns,
@@ -891,8 +1021,15 @@ const Page: FC = () => {
     getPaginationRowModel: getPaginationRowModel(),
   });
 
-  const slashTable = useReactTable({
-    data: slashProposals ?? [],
+  const myProposalsTable = useReactTable({
+    data: myProposals,
+    columns: slashColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  const againstMeTable = useReactTable({
+    data: againstMe,
     columns: slashColumns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -906,7 +1043,8 @@ const Page: FC = () => {
             Connect Your Wallet
           </Typography>
           <Typography variant="body1" className="text-mono-100">
-            Please connect your wallet to view your operator registrations.
+            Please connect your wallet to manage operator registrations and
+            slashing lifecycle actions.
           </Typography>
           <div className="mt-4 flex justify-center">
             <ConnectWalletButton />
@@ -918,69 +1056,39 @@ const Page: FC = () => {
 
   return (
     <div className="space-y-6">
-      {/* Header */}
       <div>
         <Typography variant="h4">Operator Management</Typography>
         <Typography variant="body1" className="text-mono-100 mt-1">
-          Manage your blueprint registrations, update preferences, and handle
-          slashing disputes.
+          Manage registrations and the full slash lifecycle: propose, dispute,
+          execute, batch-execute, and cancel.
         </Typography>
       </div>
 
-      {/* Summary Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <Card className="p-4">
-          <Typography variant="body2" className="text-mono-100">
-            Active Registrations
-          </Typography>
-          <Typography variant="h4" className="mt-1">
-            {registrations?.filter((r) => r.active).length ?? 0}
-          </Typography>
-        </Card>
-        <Card className="p-4">
-          <Typography variant="body2" className="text-mono-100">
-            Registrations (All-Time)
-          </Typography>
-          <Typography variant="h4" className="mt-1">
-            {registrations?.length ?? 0}
-          </Typography>
-        </Card>
-        <Card className="p-4">
+      <SlashingSummaryCards
+        activeRegistrationsCount={
+          registrations?.filter((registration) => registration.active).length ??
+          0
+        }
+        activeAgainstMeCount={activeAgainstMeCount}
+        myActiveProposalCount={myActiveProposalCount}
+        nearestPendingSlash={nearestPendingSlash}
+        nearestPendingSlashEligibility={nearestPendingSlashEligibility}
+      />
+
+      {clockError ? (
+        <Card className="p-4 border border-yellow-500/20 bg-yellow-500/10">
           <Typography variant="body2" className="text-mono-100">
-            Pending Slashes
-          </Typography>
-          <Typography
-            variant="h4"
-            className={`mt-1 ${(slashProposals?.filter((s) => s.status === 'Pending').length ?? 0) > 0 ? 'text-red-500' : ''}`}
-          >
-            {pendingSlashProposals.length}
+            {clockError}
           </Typography>
-        </Card>
-      </div>
-
-      {nearestPendingSlash && nearestPendingSlashEligibility ? (
-        <Card className="p-4 !border-yellow-400/30 !bg-yellow-500/15">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
-            <Typography variant="body2" fw="bold" className="text-yellow-400">
-              Nearest Dispute Deadline
-            </Typography>
+          <div className="mt-3">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => void refreshNow()}
+            >
+              Retry Block Clock
+            </Button>
           </div>
-          <Typography variant="h5" fw="bold" className="text-mono-0">
-            Slash #{nearestPendingSlash.id.toString()}{' '}
-            <span className="font-normal text-mono-100">expires at</span>{' '}
-            {formatDateTime(nearestPendingSlash.executeAfter)}
-          </Typography>
-          <Typography
-            variant="body2"
-            fw="semibold"
-            className="text-yellow-300/80 mt-1.5"
-          >
-            Time remaining:{' '}
-            {formatTimeRemaining(
-              nearestPendingSlashEligibility.secondsUntilDeadline,
-            )}
-          </Typography>
         </Card>
       ) : null}
 
@@ -1002,7 +1110,6 @@ const Page: FC = () => {
         </Card>
       ) : null}
 
-      {/* Registrations Table */}
       <TangleCloudTable
         title="Blueprint Registrations"
         data={registrations ?? []}
@@ -1027,37 +1134,26 @@ const Page: FC = () => {
           description:
             'You are not registered as an operator for any blueprints.',
           icon: '📋',
+          className: 'before:!hidden',
         }}
       />
 
-      {/* Slashing Table */}
-      <TangleCloudTable
-        title="Slashing Proposals"
-        data={slashProposals ?? []}
-        isLoading={loadingSlash}
-        error={slashError}
-        onRetry={() => void refetchSlashProposals()}
-        tableProps={slashTable}
-        tableConfig={{
-          tdClassName: '!p-3 max-w-none whitespace-nowrap',
-          thClassName: 'whitespace-nowrap',
-        }}
-        loadingTableProps={{
-          title: 'Loading slash proposals...',
-          description: 'Please wait while we fetch slashing proposals.',
-          icon: '🔄',
-        }}
-        errorTableProps={{
-          title: 'Failed to load slash proposals',
-          description:
-            'Indexer or network request failed while loading slashing proposals.',
-          icon: '⚠️',
-        }}
-        emptyTableProps={{
-          title: 'No Slash Proposals',
-          description: 'No slashing proposals against your operator account.',
-          icon: '✅',
+      <SlashingTabsTable
+        selectedSlashingTab={selectedSlashingTab}
+        onSlashingTabChange={setSelectedSlashingTab}
+        onOpenProposeModal={() => {
+          clearActionError('propose');
+          setShowProposeModal(true);
         }}
+        myProposals={myProposals}
+        againstMe={againstMe}
+        loadingSlash={loadingSlash}
+        slashError={slashError}
+        refetchSlashProposals={() => void refetchSlashProposals()}
+        myProposalsTable={myProposalsTable}
+        againstMeTable={againstMeTable}
+        executeError={actionError.execute}
+        onDismissExecuteError={() => clearActionError('execute')}
       />
 
       {/* Unregister Modal */}
@@ -1103,7 +1199,7 @@ const Page: FC = () => {
                   id="rpcAddress"
                   isControlled
                   value={newRpcAddress}
-                  onChange={(v) => setNewRpcAddress(v)}
+                  onChange={(value) => setNewRpcAddress(value)}
                   placeholder="https://your-node.example.com"
                 />
                 {rpcAddressError ? (
@@ -1123,7 +1219,7 @@ const Page: FC = () => {
                   id="ecdsaPublicKey"
                   isControlled
                   value={newEcdsaPublicKey}
-                  onChange={(v) => setNewEcdsaPublicKey(v)}
+                  onChange={(value) => setNewEcdsaPublicKey(value)}
                   placeholder="0x... (65-byte uncompressed key)"
                 />
                 <Typography variant="body3" className="text-mono-100 mt-1">
@@ -1155,154 +1251,90 @@ const Page: FC = () => {
         </ModalContent>
       </Modal>
 
-      {/* Dispute Reason Modal */}
-      <Modal
+      <ProposeSlashModal
+        open={showProposeModal}
+        onOpenChange={(open) => {
+          setShowProposeModal(open);
+          if (!open) {
+            clearActionError('propose');
+            resetProposeForm();
+          }
+        }}
+        loadingProposableServices={loadingProposableServices}
+        proposableServicesCount={proposableServices?.length ?? 0}
+        proposableServiceOptions={proposableServiceOptions}
+        selectedProposableService={selectedProposableService}
+        proposeServiceId={proposeServiceId}
+        setProposeServiceId={setProposeServiceId}
+        proposeOperator={proposeOperator}
+        setProposeOperator={setProposeOperator}
+        proposeSlashBps={proposeSlashBps}
+        setProposeSlashBps={setProposeSlashBps}
+        proposeEvidence={proposeEvidence}
+        setProposeEvidence={setProposeEvidence}
+        proposeValidationError={proposeValidationError}
+        errorMessage={actionError.propose}
+        onDismissError={() => clearActionError('propose')}
+        canSubmitPropose={canSubmitPropose}
+        isSubmitting={proposeStatus === 'pending'}
+        onConfirm={() => void handleProposeSlash()}
+      />
+
+      <DisputeMessageModal
         open={showDisputeMessageModal}
         onOpenChange={setShowDisputeMessageModal}
-      >
-        <ModalContent>
-          <ModalHeader>Dispute Reason</ModalHeader>
-          <ModalBody>
-            <Typography variant="body1" className="mb-2">
-              Slash proposal #{selectedSlash?.id.toString()}
-            </Typography>
-            <Typography variant="body2" className="text-mono-100 mb-2">
-              Submitted dispute reason:
-            </Typography>
-            <div className="rounded-lg border border-mono-40 dark:border-mono-140 p-3 bg-mono-20 dark:bg-mono-170">
-              <Typography
-                variant="body2"
-                className="whitespace-pre-wrap break-words"
-              >
-                {selectedSlash
-                  ? (getSlashDisputeMessage(selectedSlash) ??
-                    'No dispute reason available for this proposal yet.')
-                  : '-'}
-              </Typography>
-            </div>
-          </ModalBody>
-          <ModalFooterActions
-            confirmButtonText="Close"
-            onConfirm={() => setShowDisputeMessageModal(false)}
-          />
-        </ModalContent>
-      </Modal>
+        selectedSlash={selectedSlash}
+      />
 
-      {/* Dispute Slash Modal */}
-      <Modal open={showDisputeModal} onOpenChange={setShowDisputeModal}>
-        <ModalContent>
-          <ModalHeader>Dispute Slash Proposal</ModalHeader>
-          <ModalBody>
-            <Typography variant="body1" className="mb-2">
-              Dispute slash proposal #{selectedSlash?.id.toString()}
-            </Typography>
-            <div className="p-3 bg-mono-20 dark:bg-mono-170 rounded-lg mb-4">
-              <div className="grid grid-cols-2 gap-x-2 gap-y-3">
-                <Typography variant="body3" className="text-mono-100">
-                  Slash %:
-                </Typography>
-                <Typography variant="body3" className="text-red-500">
-                  {selectedSlash ? formatSlashBps(selectedSlash.slashBps) : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Effective Slash %:
-                </Typography>
-                <Typography variant="body3" className="text-red-500">
-                  {selectedSlash
-                    ? formatSlashBps(selectedSlash.effectiveSlashBps)
-                    : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Dispute Deadline:
-                </Typography>
-                <Typography variant="body3">
-                  {selectedSlash
-                    ? formatDateTime(selectedSlash.executeAfter)
-                    : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Time Remaining:
-                </Typography>
-                <Typography variant="body3">
-                  {selectedSlashEligibility
-                    ? formatTimeRemaining(
-                        selectedSlashEligibility.secondsUntilDeadline,
-                      )
-                    : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Proposer:
-                </Typography>
-                <Typography variant="body3" className="font-mono">
-                  {selectedSlash ? shortenHex(selectedSlash.proposer) : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Proposer Role:
-                </Typography>
-                <Typography variant="body3">
-                  {selectedSlash
-                    ? getSlashProposerRoleLabel(selectedSlash.proposerRole)
-                    : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Claim Context:
-                </Typography>
-                <Typography
-                  variant="body3"
-                  title={
-                    selectedSlash ? getSlashClaimContext(selectedSlash) : '-'
-                  }
-                >
-                  {selectedSlash ? getSlashClaimContext(selectedSlash) : '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Evidence Hash:
-                </Typography>
-                <Typography variant="body3" className="font-mono break-all">
-                  {selectedSlash?.evidence ?? '-'}
-                </Typography>
-                <Typography variant="body3" className="text-mono-100">
-                  Evidence Type:
-                </Typography>
-                <Typography variant="body3">
-                  On-chain commitment hash
-                </Typography>
-              </div>
-            </div>
-            <div>
-              <Typography variant="body2" className="mb-1">
-                Reason for Dispute
-              </Typography>
-              <textarea
-                className="w-full p-3 rounded-lg border border-mono-40 dark:border-mono-140 bg-mono-0 dark:bg-mono-180 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
-                rows={4}
-                value={disputeReason}
-                onChange={(e) => setDisputeReason(e.target.value)}
-                placeholder="Explain why this slash proposal is invalid..."
-              />
-              <Typography variant="body3" className="text-mono-100 mt-1">
-                Minimum {MIN_DISPUTE_REASON_LENGTH} characters (
-                {trimmedDisputeReason.length}/{MIN_DISPUTE_REASON_LENGTH}).
-              </Typography>
-              {!selectedSlashEligibility?.isEligible ? (
-                <Typography variant="body3" className="text-red-500 mt-1">
-                  {getSlashStatusReason(
-                    selectedSlash?.status ?? 'Pending',
-                    selectedSlashEligibility?.reason ?? null,
-                  ) ?? 'Dispute is not available for this slash.'}
-                </Typography>
-              ) : null}
-            </div>
-          </ModalBody>
-          <ModalFooterActions
-            hasCloseButton
-            isConfirmDisabled={disputeStatus === 'pending' || !canSubmitDispute}
-            isProcessing={disputeStatus === 'pending'}
-            confirmButtonText="Submit Dispute"
-            onConfirm={handleDispute}
-          />
-        </ModalContent>
-      </Modal>
+      <DisputeSlashModal
+        open={showDisputeModal}
+        onOpenChange={(open) => {
+          setShowDisputeModal(open);
+          if (!open) {
+            clearActionError('dispute');
+          }
+        }}
+        selectedSlash={selectedSlash}
+        selectedSlashEligibility={selectedSlashEligibility}
+        selectedSlashPermissions={selectedSlashPermissions}
+        disputeReason={disputeReason}
+        onDisputeReasonChange={setDisputeReason}
+        minDisputeReasonLength={MIN_DISPUTE_REASON_LENGTH}
+        trimmedDisputeReasonLength={trimmedDisputeReason.length}
+        canSubmitDispute={canSubmitDispute}
+        isSubmitting={disputeStatus === 'pending'}
+        onConfirm={() => void handleDispute()}
+        errorMessage={actionError.dispute}
+        onDismissError={() => clearActionError('dispute')}
+      />
+
+      <CancelSlashModal
+        open={showCancelModal}
+        onOpenChange={(open) => {
+          setShowCancelModal(open);
+          if (!open) {
+            clearActionError('cancel');
+          }
+        }}
+        selectedSlash={selectedSlash}
+        selectedSlashPermissions={selectedSlashPermissions}
+        cancelReason={cancelReason}
+        onCancelReasonChange={setCancelReason}
+        minCancelReasonLength={MIN_CANCEL_REASON_LENGTH}
+        trimmedCancelReasonLength={trimmedCancelReason.length}
+        canSubmitCancel={canSubmitCancel}
+        isSubmitting={cancelStatus === 'pending'}
+        onConfirm={() => void handleCancel()}
+        errorMessage={actionError.cancel}
+        onDismissError={() => clearActionError('cancel')}
+      />
+
+      <TimelineModal
+        open={showTimelineModal}
+        onOpenChange={setShowTimelineModal}
+        selectedSlash={selectedSlash}
+        timeline={selectedSlashTimeline}
+      />
     </div>
   );
 };
diff --git a/apps/tangle-cloud/src/pages/operators/manage/utils.ts b/apps/tangle-cloud/src/pages/operators/manage/utils.ts
new file mode 100644
index 000000000..012bf06d6
--- /dev/null
+++ b/apps/tangle-cloud/src/pages/operators/manage/utils.ts
@@ -0,0 +1,118 @@
+import {
+  SlashProposal,
+  SlashProposerRole,
+} from '@tangle-network/tangle-shared-ui/data/graphql';
+import { ECDSA_PUBLIC_KEY_HEX_LENGTH } from './constants';
+
+export const formatDateTime = (unixSeconds: bigint): string =>
+  new Date(Number(unixSeconds) * 1000).toLocaleString();
+
+export const formatTimeRemaining = (seconds: number): string => {
+  if (seconds <= 0) {
+    return 'Ready now';
+  }
+
+  const days = Math.floor(seconds / 86_400);
+  const hours = Math.floor((seconds % 86_400) / 3_600);
+  const minutes = Math.ceil((seconds % 3_600) / 60);
+
+  if (days > 0) {
+    return `${days}d ${hours}h`;
+  }
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+
+  return minutes <= 1 ? 'Less than a minute' : `${minutes} minutes`;
+};
+
+export const decodeBytes32Ascii = (value: `0x${string}`): string | null => {
+  if (!value || value.length !== 66) {
+    return null;
+  }
+
+  const hex = value.slice(2).toLowerCase();
+  let decoded = '';
+
+  for (let i = 0; i < hex.length; i += 2) {
+    const byte = Number.parseInt(hex.slice(i, i + 2), 16);
+
+    if (!Number.isFinite(byte)) {
+      return null;
+    }
+
+    if (byte === 0) {
+      break;
+    }
+
+    if (byte < 32 || byte > 126) {
+      return null;
+    }
+
+    decoded += String.fromCharCode(byte);
+  }
+
+  const text = decoded.trim();
+  return text.length > 0 ? text : null;
+};
+
+export const getSlashClaimContext = (slash: SlashProposal): string => {
+  const cancelReason = slash.cancelReason?.trim();
+  if (cancelReason) {
+    return `Cancel reason: ${cancelReason}`;
+  }
+
+  const evidenceText = decodeBytes32Ascii(slash.evidence);
+  if (evidenceText) {
+    return `Claim: ${evidenceText}`;
+  }
+
+  return 'No human-readable reason on-chain';
+};
+
+export const getSlashDisputeMessage = (slash: SlashProposal): string | null => {
+  const disputeReason = slash.disputeReason?.trim();
+  return disputeReason ? disputeReason : null;
+};
+
+export const getSlashProposerRoleLabel = (role: SlashProposerRole): string => {
+  if (role === 'ServiceOwner') {
+    return 'Service Owner';
+  }
+
+  if (role === 'BlueprintOwner') {
+    return 'Blueprint Owner';
+  }
+
+  if (role === 'SlashingOrigin') {
+    return 'Slashing Origin';
+  }
+
+  return 'Authorized Proposer';
+};
+
+export const getSlashProposerRoleChipColor = (
+  role: SlashProposerRole,
+): 'green' | 'blue' | 'yellow' | 'dark-grey' => {
+  if (role === 'ServiceOwner') {
+    return 'green';
+  }
+
+  if (role === 'BlueprintOwner') {
+    return 'blue';
+  }
+
+  if (role === 'SlashingOrigin') {
+    return 'yellow';
+  }
+
+  return 'dark-grey';
+};
+
+export const isValidEcdsaPublicKey = (value: string): boolean =>
+  /^0x[0-9a-fA-F]+$/.test(value) &&
+  value.length === ECDSA_PUBLIC_KEY_HEX_LENGTH;
+
+export const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/libs/tangle-shared-ui/src/data/graphql/index.ts b/libs/tangle-shared-ui/src/data/graphql/index.ts
index ab5a1a870..a029e415c 100644
--- a/libs/tangle-shared-ui/src/data/graphql/index.ts
+++ b/libs/tangle-shared-ui/src/data/graphql/index.ts
@@ -200,15 +200,32 @@ export {
 // Slashing
 export {
   useSlashProposals,
+  useProposableServices,
   useDisputeSlashTx,
   useCancelSlashTx,
+  useProposeSlashTx,
+  useExecuteSlashTx,
+  useExecuteSlashBatchTx,
+  useExecutableSlashes,
+  useSlashProposalDetails,
   formatSlashAmount,
   formatSlashBps,
+  toSlashEvidenceBytes32,
   getSlashDeadlineTimeRemainingSeconds,
   getSlashDisputeEligibility,
   isSlashDisputeEligible,
+  getSlashExecutionEligibility,
+  getSlashActionPermissions,
+  buildSlashTimeline,
+  SLASH_EXECUTION_BUFFER_SECONDS,
+  type ProposableService,
   type SlashProposal,
   type SlashProposerRole,
   type SlashStatus,
+  type SlashFilterScope,
   type SlashDisputeEligibility,
+  type SlashExecutionEligibility,
+  type SlashActionPermissions,
+  type SlashTimelineStage,
+  type SlashTimelineState,
 } from './useSlashing';
diff --git a/libs/tangle-shared-ui/src/data/graphql/useSlashing.ts b/libs/tangle-shared-ui/src/data/graphql/useSlashing.ts
index 75999b628..a5216ff79 100644
--- a/libs/tangle-shared-ui/src/data/graphql/useSlashing.ts
+++ b/libs/tangle-shared-ui/src/data/graphql/useSlashing.ts
@@ -1,11 +1,15 @@
 /**
- * Hooks for slashing - view proposals, dispute, cancel.
+ * Hooks for slashing lifecycle:
+ * - List proposals
+ * - Propose/dispute/execute/cancel slashes
+ * - Discover executable proposals
+ * - Build UI guardrails and timeline states
  */
 
 import { useQuery } from '@tanstack/react-query';
-import { useChainId, useAccount } from 'wagmi';
-import { Address, type Hash } from 'viem';
+import { useAccount, useChainId, usePublicClient } from 'wagmi';
 import { getContractsByChainId } from '@tangle-network/dapp-config/contracts';
+import { Address, type Hash, isAddress, zeroAddress } from 'viem';
 import TANGLE_ABI from '../../abi/tangle';
 import {
   executeEnvioGraphQL,
@@ -18,6 +22,8 @@ import useContractWrite, {
   TxStatus as ContractTxStatus,
 } from '../../hooks/useContractWrite';
 
+export const SLASH_EXECUTION_BUFFER_SECONDS = 15;
+
 // Slash status enum
 export type SlashStatus = 'Pending' | 'Executed' | 'Cancelled' | 'Disputed';
 export type SlashProposerRole =
@@ -25,6 +31,23 @@ export type SlashProposerRole =
   | 'BlueprintOwner'
   | 'SlashingOrigin'
   | 'Unknown';
+export type SlashFilterScope = 'operator' | 'proposer' | 'actor' | 'all';
+
+export type SlashTimelineState = 'done' | 'current' | 'upcoming' | 'skipped';
+export type SlashTimelineStageKey =
+  | 'proposed'
+  | 'dispute_window'
+  | 'disputed'
+  | 'executed'
+  | 'cancelled';
+
+export interface SlashTimelineStage {
+  key: SlashTimelineStageKey;
+  label: string;
+  state: SlashTimelineState;
+  timestamp: bigint | null;
+  description: string;
+}
 
 // Slash proposal structure
 export interface SlashProposal {
@@ -46,12 +69,47 @@ export interface SlashProposal {
   cancelReason: string | null;
 }
 
+export interface ProposableService {
+  serviceId: bigint;
+  blueprintId: bigint;
+  serviceOwner: Address;
+  blueprintOwner: Address | null;
+  blueprintName: string;
+  operatorCandidates: Address[];
+}
+
 export interface SlashDisputeEligibility {
   isEligible: boolean;
   reason: 'NotPending' | 'DeadlinePassed' | null;
   secondsUntilDeadline: number;
 }
 
+export interface SlashExecutionEligibility {
+  isEligible: boolean;
+  reason: 'NotPending' | 'Disputed' | 'DisputeWindowOpen' | null;
+  secondsUntilExecutable: number;
+}
+
+export interface SlashActionPermissions {
+  canDispute: boolean;
+  disputeReason: string | null;
+  canExecute: boolean;
+  executeReason: string | null;
+  canCancel: boolean;
+  cancelReason: string | null;
+}
+
+export interface SlashActionPermissionInput {
+  slash: Pick<SlashProposal, 'status' | 'executeAfter' | 'operator'>;
+  connectedAddress?: Address;
+  nowUnixSeconds?: number;
+  /**
+   * If undefined, action stays visible and chain enforces authorization.
+   * If false, action is disabled in UI with an explicit reason.
+   */
+  isAdmin?: boolean;
+}
+
 // Raw response from GraphQL
 interface SlashProposalsResponse {
   SlashProposal: Array<{
@@ -64,7 +122,6 @@ interface SlashProposalsResponse {
       owner: string;
       blueprint: {
         owner: string;
-        manager: string | null;
       } | null;
     } | null;
     slashBps: string;
@@ -78,8 +135,43 @@ interface SlashProposalsResponse {
   }>;
 }
 
-// Parse slash status from string
-const parseSlashStatus = (status: string): SlashStatus => {
+interface ProposableServicesResponse {
+  Service: Array<{
+    serviceId: string;
+    blueprint_id: string;
+    owner: string;
+    request: {
+      operatorCandidates: string[];
+    } | null;
+    blueprint: {
+      blueprintId: string;
+      owner: string;
+      metadataUri: string | null;
+    } | null;
+  }>;
+}
+
+interface SlashFilterOptions {
+  scope: SlashFilterScope;
+  address?: Address;
+  statuses?: SlashStatus[];
+}
+
+// Parse slash status from string or numeric enum value.
+const parseSlashStatus = (status: string | number | bigint): SlashStatus => {
+  if (typeof status === 'number' || typeof status === 'bigint') {
+    switch (Number(status)) {
+      case 1:
+        return 'Disputed';
+      case 2:
+        return 'Executed';
+      case 3:
+        return 'Cancelled';
+      default:
+        return 'Pending';
+    }
+  }
+
   switch (status.toLowerCase()) {
     case 'executed':
       return 'Executed';
@@ -117,6 +209,50 @@ const getSlashProposerRole = (
   return 'SlashingOrigin';
 };
 
+const toHexByte = (value: number): string =>
+  value.toString(16).padStart(2, '0');
+
+/**
+ * Normalize user evidence into bytes32:
+ * - Accepts canonical bytes32 hex (`0x` + 64 hex chars)
+ * - Accepts plain text (<= 32 bytes), right-padded with zeros
+ */
+export const toSlashEvidenceBytes32 = (
+  evidenceInput: string,
+): { value: `0x${string}` | null; error: string | null } => {
+  const trimmed = evidenceInput.trim();
+  if (trimmed.length === 0) {
+    return { value: null, error: 'Evidence is required.' };
+  }
+
+  if (/^0x[0-9a-fA-F]+$/.test(trimmed)) {
+    if (trimmed.length !== 66) {
+      return {
+        value: null,
+        error: 'Hex evidence must be exactly 32 bytes (0x + 64 hex chars).',
+      };
+    }
+
+    return { value: trimmed.toLowerCase() as `0x${string}`, error: null };
+  }
+
+  const bytes = new TextEncoder().encode(trimmed);
+  if (bytes.length > 32) {
+    return {
+      value: null,
+      error: 'Text evidence must be at most 32 bytes.',
+    };
+  }
+
+  let hex = '';
+  for (const value of bytes) {
+    hex += toHexByte(value);
+  }
+
+  const paddedHex = hex.padEnd(64, '0');
+  return { value: `0x${paddedHex}` as `0x${string}`, error: null };
+};
+
 /**
  * Converts slash basis points (bps) to a percentage string.
  * Example: 250 => "2.5%"
@@ -190,87 +326,527 @@ export const isSlashDisputeEligible = (
   nowUnixSeconds = Math.floor(Date.now() / 1000),
 ): boolean => getSlashDisputeEligibility(slash, nowUnixSeconds).isEligible;
 
-// Fetch slash proposals for an operator
+/**
+ * Determines whether a slash is executable now.
+ * Contract rule: status must be Pending and timestamp must be >= executeAfter + 15s.
+ */
+export const getSlashExecutionEligibility = (
+  slash: Pick<SlashProposal, 'status' | 'executeAfter'>,
+  nowUnixSeconds = Math.floor(Date.now() / 1000),
+): SlashExecutionEligibility => {
+  if (slash.status === 'Disputed') {
+    return {
+      isEligible: false,
+      reason: 'Disputed',
+      secondsUntilExecutable:
+        getSlashDeadlineTimeRemainingSeconds(
+          slash.executeAfter,
+          nowUnixSeconds,
+        ) + SLASH_EXECUTION_BUFFER_SECONDS,
+    };
+  }
+
+  if (slash.status !== 'Pending') {
+    return {
+      isEligible: false,
+      reason: 'NotPending',
+      secondsUntilExecutable:
+        getSlashDeadlineTimeRemainingSeconds(
+          slash.executeAfter,
+          nowUnixSeconds,
+        ) + SLASH_EXECUTION_BUFFER_SECONDS,
+    };
+  }
+
+  const secondsUntilExecutable =
+    Number(slash.executeAfter) +
+    SLASH_EXECUTION_BUFFER_SECONDS -
+    nowUnixSeconds;
+
+  if (secondsUntilExecutable > 0) {
+    return {
+      isEligible: false,
+      reason: 'DisputeWindowOpen',
+      secondsUntilExecutable,
+    };
+  }
+
+  return {
+    isEligible: true,
+    reason: null,
+    secondsUntilExecutable,
+  };
+};
+
+export const getSlashActionPermissions = ({
+  slash,
+  connectedAddress,
+  isAdmin,
+  nowUnixSeconds = Math.floor(Date.now() / 1000),
+}: SlashActionPermissionInput): SlashActionPermissions => {
+  const disputeEligibility = getSlashDisputeEligibility(slash, nowUnixSeconds);
+  const executionEligibility = getSlashExecutionEligibility(
+    slash,
+    nowUnixSeconds,
+  );
+
+  const isOperator =
+    connectedAddress !== undefined &&
+    connectedAddress.toLowerCase() === slash.operator.toLowerCase();
+
+  const canDisputeByRole = isOperator || isAdmin === true;
+
+  const canDispute = disputeEligibility.isEligible && canDisputeByRole;
+  const disputeReason = !canDispute
+    ? canDisputeByRole
+      ? disputeEligibility.reason === 'DeadlinePassed'
+        ? 'Dispute window closed.'
+        : 'Slash is not pending.'
+      : 'Only the slashed operator (or slash admin) can dispute.'
+    : null;
+
+  const canExecute = executionEligibility.isEligible;
+  const executeReason = !canExecute
+    ? executionEligibility.reason === 'DisputeWindowOpen'
+      ? `Dispute window still open. Executable after ${new Date(Number(slash.executeAfter) * 1000).toLocaleString()}.`
+      : executionEligibility.reason === 'Disputed'
+        ? 'Disputed slashes cannot be executed.'
+        : 'Slash is not pending.'
+    : null;
+
+  const canCancelByRole = isAdmin !== false;
+  const cancelAllowedByStatus =
+    slash.status === 'Pending' || slash.status === 'Disputed';
+
+  const canCancel = cancelAllowedByStatus && canCancelByRole;
+  const cancelReason = !canCancel
+    ? !cancelAllowedByStatus
+      ? 'Only pending/disputed slashes can be cancelled.'
+      : 'Admin role required.'
+    : null;
+
+  return {
+    canDispute,
+    disputeReason,
+    canExecute,
+    executeReason,
+    canCancel,
+    cancelReason,
+  };
+};
+
+export const buildSlashTimeline = (
+  slash: Pick<SlashProposal, 'status' | 'proposedAt' | 'executeAfter'>,
+  nowUnixSeconds = Math.floor(Date.now() / 1000),
+): SlashTimelineStage[] => {
+  const disputeEligibility = getSlashDisputeEligibility(slash, nowUnixSeconds);
+  const executionEligibility = getSlashExecutionEligibility(
+    slash,
+    nowUnixSeconds,
+  );
+
+  const proposed: SlashTimelineStage = {
+    key: 'proposed',
+    label: 'Proposed',
+    state: 'done',
+    timestamp: slash.proposedAt,
+    description: 'Slash proposal created on-chain.',
+  };
+
+  const disputeWindow: SlashTimelineStage = {
+    key: 'dispute_window',
+    label: 'Dispute Window',
+    state:
+      slash.status === 'Pending' && disputeEligibility.isEligible
+        ? 'current'
+        : 'done',
+    timestamp: slash.executeAfter,
+    description:
+      slash.status === 'Pending' && disputeEligibility.isEligible
+        ? 'Dispute window is still open.'
+        : 'Dispute window elapsed or slash moved to terminal state.',
+  };
+
+  const disputed: SlashTimelineStage = {
+    key: 'disputed',
+    label: 'Disputed',
+    state:
+      slash.status === 'Disputed'
+        ? 'current'
+        : slash.status === 'Cancelled' || slash.status === 'Executed'
+          ? 'skipped'
+          : 'upcoming',
+    timestamp: null,
+    description:
+      slash.status === 'Disputed'
+        ? 'Proposal is currently under dispute.'
+        : slash.status === 'Cancelled'
+          ? 'Proposal was cancelled.'
+          : slash.status === 'Executed'
+            ? 'No dispute was filed before execution.'
+            : 'No dispute filed yet.',
+  };
+
+  const executed: SlashTimelineStage = {
+    key: 'executed',
+    label: 'Executed',
+    state:
+      slash.status === 'Executed'
+        ? 'current'
+        : slash.status === 'Cancelled'
+          ? 'skipped'
+          : 'upcoming',
+    timestamp: null,
+    description:
+      slash.status === 'Executed'
+        ? 'Slash execution completed.'
+        : executionEligibility.isEligible
+          ? 'Ready for execution.'
+          : 'Awaiting execution conditions.',
+  };
+
+  const cancelled: SlashTimelineStage = {
+    key: 'cancelled',
+    label: 'Cancelled',
+    state:
+      slash.status === 'Cancelled'
+        ? 'current'
+        : slash.status === 'Executed'
+          ? 'skipped'
+          : 'upcoming',
+    timestamp: null,
+    description:
+      slash.status === 'Cancelled'
+        ? 'Slash proposal cancelled.'
+        : 'Not cancelled.',
+  };
+
+  return [proposed, disputeWindow, disputed, executed, cancelled];
+};
+
+const toPrimitiveSlashProposal = (
+  sp: SlashProposalsResponse['SlashProposal'][number],
+): SlashProposal => {
+  const slashBps = BigInt(sp.slashBps);
+  const effectiveSlashBps = BigInt(sp.effectiveSlashBps);
+
+  return {
+    id: BigInt(sp.slashId),
+    serviceId: BigInt(sp.serviceId),
+    operator: (sp.operator?.id ?? zeroAddress) as Address,
+    proposer: sp.proposer as Address,
+    proposerRole: getSlashProposerRole(sp.proposer, sp.service),
+    slashBps,
+    effectiveSlashBps,
+    amount: slashBps,
+    effectiveAmount: effectiveSlashBps,
+    evidence: sp.evidence as `0x${string}`,
+    proposedAt: BigInt(sp.createdAt),
+    executeAfter: BigInt(sp.executeAfter),
+    status: parseSlashStatus(sp.status),
+    disputeReason: sp.disputeReason,
+    cancelReason: sp.cancelReason,
+  };
+};
+
+const buildSlashWhereClause = ({
+  scope,
+  address,
+}: SlashFilterOptions): string => {
+  if (!address || scope === 'all') {
+    return '';
+  }
+
+  if (scope === 'operator') {
+    return 'where: { operator: { id: { _eq: $address } } }';
+  }
+
+  if (scope === 'proposer') {
+    return 'where: { proposer: { _eq: $address } }';
+  }
+
+  // actor
+  return `
+    where: {
+      _or: [
+        { operator: { id: { _eq: $address } } }
+        { proposer: { _eq: $address } }
+      ]
+    }
+  `;
+};
+
+// Fetch slash proposals with configurable scope.
 const fetchSlashProposals = async (
-  operator: Address,
+  options: SlashFilterOptions,
   network?: EnvioNetwork,
 ): Promise<SlashProposal[]> => {
+  const whereClause = buildSlashWhereClause(options);
+  const usesAddressFilter = whereClause.trim().length > 0 && !!options.address;
+
+  const query = usesAddressFilter
+    ? gql`
+        query GetSlashProposals($address: String!) {
+          SlashProposal(
+            ${whereClause}
+            order_by: { createdAt: desc }
+          ) {
+            id
+            slashId
+            serviceId
+            operator {
+              id
+            }
+            proposer
+            service {
+              owner
+              blueprint {
+                owner
+              }
+            }
+            slashBps: amount
+            effectiveSlashBps: effectiveAmount
+            evidence
+            createdAt
+            executeAfter
+            status
+            disputeReason
+            cancelReason
+          }
+        }
+      `
+    : gql`
+        query GetSlashProposals {
+          SlashProposal(order_by: { createdAt: desc }) {
+            id
+            slashId
+            serviceId
+            operator {
+              id
+            }
+            proposer
+            service {
+              owner
+              blueprint {
+                owner
+              }
+            }
+            slashBps: amount
+            effectiveSlashBps: effectiveAmount
+            evidence
+            createdAt
+            executeAfter
+            status
+            disputeReason
+            cancelReason
+          }
+        }
+      `;
+
+  const result = await executeEnvioGraphQL<
+    SlashProposalsResponse,
+    { address?: string }
+  >(
+    query,
+    usesAddressFilter && options.address
+      ? { address: options.address.toLowerCase() }
+      : undefined,
+    network,
+  );
+
+  if (result.errors?.length) {
+    throw new Error(
+      `Failed to fetch slash proposals: ${result.errors
+        .map((error) => error.message)
+        .join('; ')}`,
+    );
+  }
+
+  let proposals = (result.data.SlashProposal ?? []).map(
+    toPrimitiveSlashProposal,
+  );
+
+  if (options.statuses && options.statuses.length > 0) {
+    const allowed = new Set(options.statuses);
+    proposals = proposals.filter((proposal) => allowed.has(proposal.status));
+  }
+
+  return proposals;
+};
+
+const fetchProposableServices = async (
+  address: Address,
+  network?: EnvioNetwork,
+): Promise<ProposableService[]> => {
   const query = gql`
-    query GetSlashProposals($operator: String!) {
-      SlashProposal(
-        where: { operator: { id: { _eq: $operator } } }
+    query GetProposableServices($address: String!) {
+      Service(
+        where: {
+          status: { _eq: "ACTIVE" }
+          _or: [
+            { owner: { _eq: $address } }
+            { blueprint: { owner: { _eq: $address } } }
+          ]
+        }
         order_by: { createdAt: desc }
       ) {
-        id
-        slashId
         serviceId
-        operator {
-          id
+        blueprint_id
+        owner
+        request {
+          operatorCandidates
         }
-        proposer
-        service {
+        blueprint {
+          blueprintId
           owner
-          blueprint {
-            owner
-            manager
-          }
+          metadataUri
         }
-        slashBps: amount
-        effectiveSlashBps: effectiveAmount
-        evidence
-        createdAt
-        executeAfter
-        status
-        disputeReason
-        cancelReason
       }
     }
   `;
 
-  const result = await executeEnvioGraphQL<
-    SlashProposalsResponse,
-    { operator: string }
-  >(query, { operator: operator.toLowerCase() }, network);
+  const response = await executeEnvioGraphQL<
+    ProposableServicesResponse,
+    { address: string }
+  >(query, { address: address.toLowerCase() }, network);
 
-  if (result.errors?.length) {
+  if (response.errors?.length) {
     throw new Error(
-      `Failed to fetch slash proposals: ${result.errors
+      `Failed to fetch proposable services: ${response.errors
         .map((error) => error.message)
         .join('; ')}`,
     );
   }
 
-  return (result.data.SlashProposal ?? []).map((sp) => {
-    const slashBps = BigInt(sp.slashBps);
-    const effectiveSlashBps = BigInt(sp.effectiveSlashBps);
+  return (response.data.Service ?? []).map((service) => {
+    const blueprintId = BigInt(service.blueprint_id);
 
     return {
-      id: BigInt(sp.slashId),
-      serviceId: BigInt(sp.serviceId),
-      operator: (sp.operator?.id ??
-        '0x0000000000000000000000000000000000000000') as Address,
-      proposer: sp.proposer as Address,
-      proposerRole: getSlashProposerRole(sp.proposer, sp.service),
-      slashBps,
-      effectiveSlashBps,
-      amount: slashBps,
-      effectiveAmount: effectiveSlashBps,
-      evidence: sp.evidence as `0x${string}`,
-      proposedAt: BigInt(sp.createdAt),
-      executeAfter: BigInt(sp.executeAfter),
-      status: parseSlashStatus(sp.status),
-      disputeReason: sp.disputeReason,
-      cancelReason: sp.cancelReason,
+      serviceId: BigInt(service.serviceId),
+      blueprintId,
+      serviceOwner: service.owner as Address,
+      blueprintOwner: service.blueprint?.owner
+        ? (service.blueprint.owner as Address)
+        : null,
+      blueprintName: `Blueprint #${blueprintId.toString()}`,
+      operatorCandidates: (service.request?.operatorCandidates ?? [])
+        .filter((value): value is Address => isAddress(value))
+        .map((value) => value as Address),
     };
   });
 };
 
+const normalizeOnChainSlashProposal = (
+  slashId: bigint,
+  proposal: any,
+): SlashProposal => {
+  const serviceId =
+    proposal?.serviceId !== undefined
+      ? BigInt(proposal.serviceId.toString())
+      : BigInt(proposal?.[0]?.toString() ?? 0);
+  const operator = (proposal?.operator ??
+    proposal?.[1] ??
+    zeroAddress) as Address;
+  const proposer = (proposal?.proposer ??
+    proposal?.[2] ??
+    zeroAddress) as Address;
+  const slashBps = BigInt(
+    proposal?.slashBps?.toString() ?? proposal?.[3]?.toString() ?? 0,
+  );
+  const effectiveSlashBps = BigInt(
+    proposal?.effectiveSlashBps?.toString() ?? proposal?.[4]?.toString() ?? 0,
+  );
+  const evidence = (proposal?.evidence ??
+    proposal?.[5] ??
+    '0x') as `0x${string}`;
+  const proposedAt = BigInt(
+    proposal?.proposedAt?.toString() ?? proposal?.[6]?.toString() ?? 0,
+  );
+  const executeAfter = BigInt(
+    proposal?.executeAfter?.toString() ?? proposal?.[7]?.toString() ?? 0,
+  );
+  const statusValue = proposal?.status ?? proposal?.[8] ?? 0;
+  const disputeReason = (proposal?.disputeReason ?? proposal?.[9] ?? null) as
+    | string
+    | null;
+
+  return {
+    id: slashId,
+    serviceId,
+    operator,
+    proposer,
+    proposerRole: 'Unknown',
+    slashBps,
+    effectiveSlashBps,
+    amount: slashBps,
+    effectiveAmount: effectiveSlashBps,
+    evidence,
+    proposedAt,
+    executeAfter,
+    status: parseSlashStatus(statusValue),
+    disputeReason,
+    cancelReason: null,
+  };
+};
+
 /**
- * Hook to fetch slash proposals for the current user as an operator.
+ * Hook to fetch slash proposals with lifecycle-aware filtering.
  */
 export const useSlashProposals = (options?: {
   network?: EnvioNetwork;
   enabled?: boolean;
+  scope?: SlashFilterScope;
+  address?: Address;
+  statuses?: SlashStatus[];
+}) => {
+  const {
+    network,
+    enabled = true,
+    scope = 'operator',
+    statuses,
+  } = options ?? {};
+  const chainId = useChainId();
+  const { address, isConnected } = useAccount();
+  const networkChainId = useNetworkStore((store) => store.network2?.evmChainId);
+  const activeChainId = isConnected ? chainId : (networkChainId ?? chainId);
+  const resolvedNetwork = network ?? getEnvioNetworkFromChainId(activeChainId);
+  const resolvedAddress = options?.address ?? address;
+
+  const shouldFetch =
+    enabled && (scope === 'all' || resolvedAddress !== undefined);
+
+  return useQuery({
+    queryKey: [
+      'slashing',
+      'proposals',
+      resolvedNetwork,
+      scope,
+      resolvedAddress ?? null,
+      statuses?.join(',') ?? null,
+    ],
+    queryFn: async () => {
+      return fetchSlashProposals(
+        {
+          scope,
+          address: resolvedAddress,
+          statuses,
+        },
+        resolvedNetwork,
+      );
+    },
+    enabled: shouldFetch,
+    staleTime: 30_000,
+  });
+};
+
+/**
+ * Hook to fetch services where the active account can plausibly propose slash
+ * (service owner or blueprint owner).
+ */
+export const useProposableServices = (options?: {
+  network?: EnvioNetwork;
+  enabled?: boolean;
+  address?: Address;
 }) => {
   const { network, enabled = true } = options ?? {};
   const chainId = useChainId();
@@ -278,26 +854,159 @@ export const useSlashProposals = (options?: {
   const networkChainId = useNetworkStore((store) => store.network2?.evmChainId);
   const activeChainId = isConnected ? chainId : (networkChainId ?? chainId);
   const resolvedNetwork = network ?? getEnvioNetworkFromChainId(activeChainId);
+  const resolvedAddress = options?.address ?? address;
 
   return useQuery({
-    queryKey: ['slashing', 'proposals', resolvedNetwork, address],
+    queryKey: [
+      'slashing',
+      'proposableServices',
+      resolvedNetwork,
+      resolvedAddress,
+    ],
     queryFn: async () => {
-      if (!address) return [];
-      return fetchSlashProposals(address, resolvedNetwork);
+      if (!resolvedAddress) return [];
+      return fetchProposableServices(resolvedAddress, resolvedNetwork);
     },
-    enabled: enabled && !!address,
-    staleTime: 30_000, // 30 seconds
+    enabled: enabled && !!resolvedAddress,
+    staleTime: 30_000,
+  });
+};
+
+/**
+ * Reads an on-chain slash proposal directly from the Tangle contract.
+ */
+export const useSlashProposalDetails = (
+  slashId: bigint | undefined,
+  options?: { enabled?: boolean },
+) => {
+  const { enabled = true } = options ?? {};
+  const chainId = useChainId();
+  const publicClient = usePublicClient();
+
+  return useQuery({
+    queryKey: ['slashing', 'proposalDetails', chainId, slashId?.toString()],
+    queryFn: async () => {
+      if (slashId === undefined) return null;
+      if (!publicClient) {
+        throw new Error('Public client not available');
+      }
+
+      const contracts = getContractsByChainId(chainId);
+
+      const proposal = await publicClient.readContract({
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'getSlashProposal',
+        args: [slashId],
+      });
+
+      return normalizeOnChainSlashProposal(slashId, proposal);
+    },
+    enabled: enabled && slashId !== undefined && !!publicClient,
+    staleTime: 15_000,
+  });
+};
+
+/**
+ * Reads executable slash IDs directly from the contract.
+ */
+export const useExecutableSlashes = (options?: {
+  fromId?: bigint;
+  toId?: bigint;
+  proposals?: SlashProposal[];
+  enabled?: boolean;
+}) => {
+  const { enabled = true, proposals } = options ?? {};
+  const chainId = useChainId();
+  const publicClient = usePublicClient();
+
+  return useQuery({
+    queryKey: [
+      'slashing',
+      'executable',
+      chainId,
+      options?.fromId?.toString() ?? null,
+      options?.toId?.toString() ?? null,
+      proposals?.length ?? 0,
+      proposals
+        ?.map((proposal) => proposal.id.toString())
+        .slice(0, 20)
+        .join(',') ?? null,
+    ],
+    queryFn: async () => {
+      if (!publicClient) {
+        throw new Error('Public client not available');
+      }
+
+      let fromId = options?.fromId;
+      let toId = options?.toId;
+
+      if (fromId === undefined || toId === undefined) {
+        if (!proposals || proposals.length === 0) {
+          return [] as bigint[];
+        }
+
+        let maxId = BigInt(0);
+        for (const proposal of proposals) {
+          if (proposal.id > maxId) {
+            maxId = proposal.id;
+          }
+        }
+
+        fromId = BigInt(0);
+        toId = maxId + BigInt(1);
+      }
+
+      if (toId <= fromId) {
+        return [] as bigint[];
+      }
+
+      const contracts = getContractsByChainId(chainId);
+      const ids = await publicClient.readContract({
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'getExecutableSlashes',
+        args: [fromId, toId],
+      });
+
+      return (ids as Array<bigint | number>).map((value) =>
+        BigInt(value.toString()),
+      );
+    },
+    enabled: enabled && !!publicClient,
+    staleTime: 10_000,
   });
 };
 
 // Transaction status
 export type TxStatus = 'idle' | 'pending' | 'success' | 'error';
 
-interface SlashActionParams {
+interface SlashReasonParams {
   slashId: bigint;
   reason: string;
 }
 
+interface ProposeSlashParams {
+  serviceId: bigint;
+  operator: Address;
+  slashBps: number;
+  evidence: `0x${string}`;
+}
+
+interface ProposeSlashResult {
+  hash: Hash;
+  slashId?: bigint;
+  proposal?: SlashProposal;
+}
+
+interface ExecuteSlashParams {
+  slashId: bigint;
+}
+
+interface ExecuteSlashBatchParams {
+  slashIds: bigint[];
+}
+
 const mapContractWriteStatus = (status: ContractTxStatus): TxStatus => {
   switch (status) {
     case ContractTxStatus.PROCESSING:
@@ -311,6 +1020,116 @@ const mapContractWriteStatus = (status: ContractTxStatus): TxStatus => {
   }
 };
 
+const parseSimulatedSlashId = (value: unknown): bigint | undefined => {
+  if (typeof value === 'bigint') {
+    return value;
+  }
+
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return BigInt(value);
+  }
+
+  if (typeof value === 'string' && /^\d+$/.test(value)) {
+    return BigInt(value);
+  }
+
+  return undefined;
+};
+
+/**
+ * Hook to propose a slash.
+ */
+export const useProposeSlashTx = () => {
+  const chainId = useChainId();
+  const publicClient = usePublicClient();
+  const hook = useContractWrite(
+    TANGLE_ABI,
+    (params: ProposeSlashParams) => {
+      let contracts: ReturnType<typeof getContractsByChainId>;
+      try {
+        contracts = getContractsByChainId(chainId);
+      } catch {
+        throw new Error('Tangle contract not available on this network');
+      }
+
+      return {
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'proposeSlash' as const,
+        args: [
+          params.serviceId,
+          params.operator,
+          params.slashBps,
+          params.evidence,
+        ] as const,
+      };
+    },
+    {
+      txName: 'propose slash',
+      txDetails: (params) =>
+        new Map([
+          ['Service ID', params.serviceId.toString()],
+          ['Operator', params.operator],
+          ['Slash BPS', params.slashBps.toString()],
+        ]),
+      getSuccessMessage: () => 'Slash proposal submitted successfully.',
+    },
+  );
+
+  const proposeSlash = async (
+    serviceId: bigint,
+    operator: Address,
+    slashBps: number,
+    evidence: `0x${string}`,
+  ): Promise<ProposeSlashResult | null> => {
+    const result = await hook.execute?.({
+      serviceId,
+      operator,
+      slashBps,
+      evidence,
+    });
+    if (!result) {
+      return null;
+    }
+
+    const slashId = parseSimulatedSlashId(result.simulatedResult);
+    if (slashId === undefined || !publicClient) {
+      return {
+        hash: result.hash,
+        slashId,
+      };
+    }
+
+    try {
+      const contracts = getContractsByChainId(chainId);
+      const proposal = await publicClient.readContract({
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'getSlashProposal',
+        args: [slashId],
+      });
+
+      return {
+        hash: result.hash,
+        slashId,
+        proposal: normalizeOnChainSlashProposal(slashId, proposal),
+      };
+    } catch {
+      return {
+        hash: result.hash,
+        slashId,
+      };
+    }
+  };
+
+  return {
+    proposeSlash,
+    status: mapContractWriteStatus(hook.status),
+    error: hook.error,
+    reset: hook.reset,
+  };
+};
+
 /**
  * Hook to dispute a slash proposal.
  */
@@ -318,7 +1137,7 @@ export const useDisputeSlashTx = () => {
   const chainId = useChainId();
   const hook = useContractWrite(
     TANGLE_ABI,
-    (params: SlashActionParams) => {
+    (params: SlashReasonParams) => {
       let contracts: ReturnType<typeof getContractsByChainId>;
       try {
         contracts = getContractsByChainId(chainId);
@@ -358,13 +1177,106 @@ export const useDisputeSlashTx = () => {
 };
 
 /**
- * Hook to cancel a slash proposal (for proposers).
+ * Hook to execute a slash proposal.
+ */
+export const useExecuteSlashTx = () => {
+  const chainId = useChainId();
+  const hook = useContractWrite(
+    TANGLE_ABI,
+    (params: ExecuteSlashParams) => {
+      let contracts: ReturnType<typeof getContractsByChainId>;
+      try {
+        contracts = getContractsByChainId(chainId);
+      } catch {
+        throw new Error('Tangle contract not available on this network');
+      }
+
+      return {
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'executeSlash' as const,
+        args: [params.slashId] as const,
+      };
+    },
+    {
+      txName: 'execute slash',
+      txDetails: (params) => new Map([['Slash ID', params.slashId.toString()]]),
+      getSuccessMessage: (params) =>
+        `Slash #${params.slashId} executed successfully`,
+    },
+  );
+
+  const executeSlash = async (slashId: bigint): Promise<Hash | null> => {
+    const result = await hook.execute?.({ slashId });
+    return result?.hash ?? null;
+  };
+
+  return {
+    executeSlash,
+    status: mapContractWriteStatus(hook.status),
+    error: hook.error,
+    reset: hook.reset,
+  };
+};
+
+/**
+ * Hook to execute a batch of slash proposals.
+ */
+export const useExecuteSlashBatchTx = () => {
+  const chainId = useChainId();
+  const hook = useContractWrite(
+    TANGLE_ABI,
+    (params: ExecuteSlashBatchParams) => {
+      let contracts: ReturnType<typeof getContractsByChainId>;
+      try {
+        contracts = getContractsByChainId(chainId);
+      } catch {
+        throw new Error('Tangle contract not available on this network');
+      }
+
+      return {
+        address: contracts.tangle,
+        abi: TANGLE_ABI,
+        functionName: 'executeSlashBatch' as const,
+        args: [params.slashIds] as const,
+      };
+    },
+    {
+      txName: 'execute slash batch',
+      txDetails: (params) =>
+        new Map([['Slash Count', params.slashIds.length.toString()]]),
+      getSuccessMessage: (params) =>
+        `Submitted batch execution for ${params.slashIds.length} slash proposal(s).`,
+    },
+  );
+
+  const executeSlashBatch = async (
+    slashIds: bigint[],
+  ): Promise<Hash | null> => {
+    if (slashIds.length === 0) {
+      return null;
+    }
+
+    const result = await hook.execute?.({ slashIds });
+    return result?.hash ?? null;
+  };
+
+  return {
+    executeSlashBatch,
+    status: mapContractWriteStatus(hook.status),
+    error: hook.error,
+    reset: hook.reset,
+  };
+};
+
+/**
+ * Hook to cancel a slash proposal.
  */
 export const useCancelSlashTx = () => {
   const chainId = useChainId();
   const hook = useContractWrite(
     TANGLE_ABI,
-    (params: SlashActionParams) => {
+    (params: SlashReasonParams) => {
       let contracts: ReturnType<typeof getContractsByChainId>;
       try {
         contracts = getContractsByChainId(chainId);
@@ -410,7 +1322,7 @@ export const formatSlashAmount = (amount: bigint, decimals = 18): string => {
   // Calculate divisor without using exponentiation operator
   let divisor = BigInt(1);
   for (let i = 0; i < decimals; i++) {
-    divisor = divisor * BigInt(10);
+    divisor *= BigInt(10);
   }
   const whole = amount / divisor;
   const fractional = amount % divisor;
diff --git a/libs/tangle-shared-ui/src/hooks/useContractWrite.ts b/libs/tangle-shared-ui/src/hooks/useContractWrite.ts
index 99b877dc0..5ddf10096 100644
--- a/libs/tangle-shared-ui/src/hooks/useContractWrite.ts
+++ b/libs/tangle-shared-ui/src/hooks/useContractWrite.ts
@@ -186,6 +186,11 @@ export interface TxResult {
   hash: Hash;
   status: 'success' | 'reverted';
   blockNumber: bigint;
+  /**
+   * Result returned by viem simulation for the executed function.
+   * Useful for non-view writes that return values (e.g. proposed slash ID).
+   */
+  simulatedResult?: unknown;
 }
 
 // Contract call configuration
@@ -364,6 +369,7 @@ const useContractWrite = <
         // This avoids wallet/provider-specific issues that can prevent the signing prompt.
         type WriteRequest = Parameters<typeof writeContract>[1];
         let request: WriteRequest | null = null;
+        let simulatedResult: unknown = undefined;
 
         try {
           const simulated = await simulateContract(publicClient, {
@@ -375,6 +381,7 @@ const useContractWrite = <
             account: activeAddress,
           });
           request = simulated.request as WriteRequest;
+          simulatedResult = simulated.result;
         } catch (simulateError) {
           // If simulation fails due to an RPC transport issue, fall back to sending directly.
           // This preserves the normal "wallet pops up" UX in local/dev environments.
@@ -443,6 +450,7 @@ const useContractWrite = <
           hash,
           status: receipt.status,
           blockNumber: receipt.blockNumber,
+          simulatedResult,
         };
 
         setResult(txResult);