diff --git a/plugins/backstage-plugin-flux/package.json b/plugins/backstage-plugin-flux/package.json
index eb464bb..0c73965 100644
--- a/plugins/backstage-plugin-flux/package.json
+++ b/plugins/backstage-plugin-flux/package.json
@@ -46,7 +46,7 @@
     "luxon": "^3.3.0",
     "react-use": "^17.4.0",
     "styled-components": "^6.1.1",
-    "use-deep-compare": "^1.1.0",
+    "use-deep-compare": "^1.2.1",
     "yaml": "^2.3.1"
   },
   "peerDependencies": {
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/EntityFluxDeploymentsCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/EntityFluxDeploymentsCard.tsx
index 84ea551..3b12a04 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/EntityFluxDeploymentsCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/EntityFluxDeploymentsCard.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
 import { useFluxDeployments } from '../../hooks';
 import { FluxDeploymentsTable, defaultColumns } from './FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const DeploymentsPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useFluxDeployments(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -29,6 +31,12 @@ const DeploymentsPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/FluxDeploymentsTable.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/FluxDeploymentsTable.tsx
index 40f8d80..e75448d 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/FluxDeploymentsTable.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxDeploymentsCard/FluxDeploymentsTable.tsx
@@ -33,6 +33,7 @@ type Props = {
   isLoading: boolean;
   columns: TableColumn<Deployment>[];
   many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const FluxDeploymentsTable = ({
@@ -40,6 +41,7 @@ export const FluxDeploymentsTable = ({
   isLoading,
   columns,
   many,
+  setSelectedRow,
 }: Props) => {
   let helmChart = {} as HelmChart;
   let path = '';
@@ -99,6 +101,7 @@ export const FluxDeploymentsTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={setSelectedRow}
     />
   );
 };
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxGitRepositoriesCard/EntityFluxGitRepositoriesCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxGitRepositoriesCard/EntityFluxGitRepositoriesCard.tsx
index 0a4b412..4ffa317 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxGitRepositoriesCard/EntityFluxGitRepositoriesCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxGitRepositoriesCard/EntityFluxGitRepositoriesCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useGitRepositories } from '../../hooks/query';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const GitRepositoriesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useGitRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const GitRepositoriesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={gitOciDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxHelmReleasesCard/EntityFluxHelmReleasesCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxHelmReleasesCard/EntityFluxHelmReleasesCard.tsx
index 9fffd83..3266abd 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxHelmReleasesCard/EntityFluxHelmReleasesCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxHelmReleasesCard/EntityFluxHelmReleasesCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { useHelmReleases } from '../../hooks/query';
@@ -7,10 +7,12 @@ import {
   FluxDeploymentsTable,
   defaultColumns,
 } from '../EntityFluxDeploymentsCard/FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const HelmReleasePanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useHelmReleases(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -32,6 +34,12 @@ const HelmReleasePanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxHelmRepositoriesCard/EntityFluxHelmRepositoriesCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxHelmRepositoriesCard/EntityFluxHelmRepositoriesCard.tsx
index 9961837..02b6e76 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxHelmRepositoriesCard/EntityFluxHelmRepositoriesCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxHelmRepositoriesCard/EntityFluxHelmRepositoriesCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useHelmRepositories } from '../../hooks';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const HelmRepositoriesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useHelmRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const HelmRepositoriesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={helmDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxImagePoliciesCard/FluxImagePoliciesTable.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxImagePoliciesCard/FluxImagePoliciesTable.tsx
index b900410..080d219 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxImagePoliciesCard/FluxImagePoliciesTable.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxImagePoliciesCard/FluxImagePoliciesTable.tsx
@@ -77,6 +77,7 @@ export const FluxImagePoliciesTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={() => {}}
     />
   );
 };
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxKustomizationsCard/EntityFluxKustomizationsCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxKustomizationsCard/EntityFluxKustomizationsCard.tsx
index 73a644d..cf27832 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxKustomizationsCard/EntityFluxKustomizationsCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxKustomizationsCard/EntityFluxKustomizationsCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
@@ -7,10 +7,12 @@ import {
   FluxDeploymentsTable,
   defaultColumns,
 } from '../EntityFluxDeploymentsCard/FluxDeploymentsTable';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const KustomizationPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useKustomizations(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -32,6 +34,12 @@ const KustomizationPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={defaultColumns}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxOCIRepositoriesCard/EntityFluxOCIRepositoriesCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxOCIRepositoriesCard/EntityFluxOCIRepositoriesCard.tsx
index f18fe16..eb8c61e 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxOCIRepositoriesCard/EntityFluxOCIRepositoriesCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxOCIRepositoriesCard/EntityFluxOCIRepositoriesCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
@@ -8,10 +8,12 @@ import {
   FluxSourcesTable,
 } from '../EntityFluxSourcesCard/FluxSourcesTable';
 import { Source } from '../helpers';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 const OCIRepositoryPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useOCIRepositories(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -33,6 +35,12 @@ const OCIRepositoryPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={gitOciDefaultColumns as TableColumn<Source>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/EntityFluxSourcesCard.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/EntityFluxSourcesCard.tsx
index ee7589d..a836bd0 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/EntityFluxSourcesCard.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/EntityFluxSourcesCard.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useFluxSources } from '../../hooks';
-import {
-  FluxSourcesTable,
-  sourceDefaultColumns,
-} from './FluxSourcesTable';
+import { FluxSourcesTable, sourceDefaultColumns } from './FluxSourcesTable';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
 import { InfoCard, TableColumn } from '@backstage/core-components';
 import { GitRepository, HelmRepository, OCIRepository } from '../../objects';
+import SuspendMessageModal from '../SuspendMessageModal';
 
 export type GH = GitRepository & HelmRepository;
 export type OH = OCIRepository & HelmRepository;
@@ -15,6 +13,7 @@ export type OH = OCIRepository & HelmRepository;
 const SourcesPanel = ({ many }: { many?: boolean }) => {
   const { entity } = useEntity();
   const { data, loading, errors } = useFluxSources(entity);
+  const [selectedRow, setSelectedRow] = useState<string>('');
 
   if (errors) {
     return (
@@ -36,6 +35,12 @@ const SourcesPanel = ({ many }: { many?: boolean }) => {
         isLoading={loading && !data}
         columns={sourceDefaultColumns as TableColumn<GH | OH>[]}
         many={many}
+        setSelectedRow={setSelectedRow}
+      />
+      <SuspendMessageModal
+        data={data}
+        selectedRow={selectedRow}
+        setSelectedRow={setSelectedRow}
       />
     </InfoCard>
   );
diff --git a/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/FluxSourcesTable.tsx b/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/FluxSourcesTable.tsx
index cbce68d..fe959da 100644
--- a/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/FluxSourcesTable.tsx
+++ b/plugins/backstage-plugin-flux/src/components/EntityFluxSourcesCard/FluxSourcesTable.tsx
@@ -57,6 +57,7 @@ type Props = {
   isLoading: boolean;
   columns: TableColumn<any>[];
   many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const FluxSourcesTable = ({
@@ -64,6 +65,7 @@ export const FluxSourcesTable = ({
   isLoading,
   columns,
   many,
+  setSelectedRow,
 }: Props) => {
   let provider = '';
   let isVerifiable = false;
@@ -117,6 +119,7 @@ export const FluxSourcesTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={setSelectedRow}
     />
   );
 };
diff --git a/plugins/backstage-plugin-flux/src/components/FluxEntityTable.tsx b/plugins/backstage-plugin-flux/src/components/FluxEntityTable.tsx
index 4bf193f..396a296 100644
--- a/plugins/backstage-plugin-flux/src/components/FluxEntityTable.tsx
+++ b/plugins/backstage-plugin-flux/src/components/FluxEntityTable.tsx
@@ -11,7 +11,11 @@ export function FluxEntityTable<T extends object = {}>({
   columns,
   filters,
   many,
-}: TableProps<T> & { many?: boolean }) {
+  setSelectedRow,
+}: TableProps<T> & {
+  many?: boolean;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
+}) {
   const classes = useStyles();
 
   // We use this memo not really for performance, but to avoid
@@ -33,6 +37,13 @@ export function FluxEntityTable<T extends object = {}>({
           emptyRowsWhenPaging: false,
           columnsButton: true,
         }}
+        onRowClick={row => {
+          const { id } = row?.target as HTMLButtonElement;
+          const resource = id.split(' ')[1];
+          if (id.includes('suspend')) {
+            setSelectedRow(resource);
+          }
+        }}
         data={data}
         isLoading={isLoading}
         emptyContent={
@@ -46,5 +57,14 @@ export function FluxEntityTable<T extends object = {}>({
         filters={Boolean(many) ? filters : []}
       />
     );
-  }, [data, title, isLoading, classes.empty, columns]);
+  }, [
+    data,
+    title,
+    isLoading,
+    classes.empty,
+    columns,
+    many,
+    filters,
+    setSelectedRow,
+  ]);
 }
diff --git a/plugins/backstage-plugin-flux/src/components/FluxRuntimeCard/FluxRuntimeTable.tsx b/plugins/backstage-plugin-flux/src/components/FluxRuntimeCard/FluxRuntimeTable.tsx
index 803471e..d528d1c 100644
--- a/plugins/backstage-plugin-flux/src/components/FluxRuntimeCard/FluxRuntimeTable.tsx
+++ b/plugins/backstage-plugin-flux/src/components/FluxRuntimeCard/FluxRuntimeTable.tsx
@@ -81,6 +81,7 @@ export const FluxRuntimeTable = ({
       isLoading={isLoading}
       filters={filters}
       many={many}
+      setSelectedRow={() => {}}
     />
   );
 };
diff --git a/plugins/backstage-plugin-flux/src/components/Modal.tsx b/plugins/backstage-plugin-flux/src/components/Modal.tsx
new file mode 100644
index 0000000..829bd7a
--- /dev/null
+++ b/plugins/backstage-plugin-flux/src/components/Modal.tsx
@@ -0,0 +1,75 @@
+import MaterialModal from '@material-ui/core/Modal';
+import * as React from 'react';
+import styled from 'styled-components';
+import Flex from './Flex';
+import { IconButton } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+/** Modal Properties */
+export interface Props {
+  /** CSS MUI Overrides or other styling. (for the `<div />` that wraps Modal) */
+  className?: string;
+  /** state variable to display Modal */
+  open: boolean;
+  /** Close event handler function */
+  onClose: () => void;
+  /** `<h2 />` element appearing at the top of the modal */
+  title: string;
+  /** `<p />` element appearing below title */
+  description: string;
+  /** Modal content */
+  children: any;
+}
+
+export const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  background-color: ${props => props.theme.colors.neutral00};
+  margin: 0 auto;
+  max-width: 540px;
+  padding: 16px 32px;
+
+  // vertically center using transform:
+  transform: translateY(-50%);
+  top: 50%;
+  position: relative;
+
+  max-height: 90vh;
+`;
+
+/** Form Modal */
+function UnstyledModal({
+  className,
+  open,
+  onClose,
+  title,
+  description,
+  children,
+}: Props) {
+  return (
+    <MaterialModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+    >
+      <Body className={className}>
+        <Flex column>
+          <Flex row wide align between>
+            <h2 id="simple-modal-title">{title}</h2>
+            <IconButton onClick={onClose} className={className} color="inherit">
+              <CloseIcon />
+            </IconButton>
+          </Flex>
+
+          <p id="simple-modal-description">{description}</p>
+        </Flex>
+        {children}
+      </Body>
+    </MaterialModal>
+  );
+}
+
+export const Modal = styled(UnstyledModal)``;
+export default Modal;
diff --git a/plugins/backstage-plugin-flux/src/components/SuspendMessageModal.tsx b/plugins/backstage-plugin-flux/src/components/SuspendMessageModal.tsx
new file mode 100644
index 0000000..72be432
--- /dev/null
+++ b/plugins/backstage-plugin-flux/src/components/SuspendMessageModal.tsx
@@ -0,0 +1,97 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Flex from './Flex';
+import Modal from './Modal';
+import { Button } from '@material-ui/core';
+import { useToggleSuspendResource } from '../hooks/useToggleSuspendResource';
+import { Deployment, Source } from './helpers';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { ImagePolicy } from '../objects';
+
+export type Props = {
+  data?: (Source | Deployment | ImagePolicy)[];
+  selectedRow: string | null;
+  className?: string;
+  setSelectedRow: Dispatch<SetStateAction<string>>;
+};
+
+const MessageTextarea = styled.textarea`
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 100%;
+  border-radius: ${props => props.theme.spacing.xxs};
+  resize: none;
+  margin-bottom: ${props => props.theme.spacing.base};
+  padding: ${props => props.theme.spacing.xs};
+  &:focus {
+    outline: ${props => props.theme.colors.primary} solid 2px;
+  }
+`;
+
+function SuspendMessageModal({
+  data,
+  selectedRow,
+  className,
+  setSelectedRow,
+}: Props) {
+  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [suspendMessage, setSuspendMessage] = useState('');
+  const selectedResource = data?.find(
+    d => `${d.obj.metadata.namespace}/${d.obj.metadata.name}` === selectedRow,
+  );
+
+  const { toggleSuspend } = useToggleSuspendResource(
+    selectedResource as Source | Deployment,
+    true,
+    suspendMessage,
+  );
+
+  const closeHandler = () => {
+    setSuspendMessage('');
+    setOpenModal(false);
+    setSelectedRow('');
+  };
+
+  const suspendHandler = () => {
+    setSuspendMessage(suspendMessage);
+    toggleSuspend();
+    setSuspendMessage('');
+    setOpenModal(false);
+    setSelectedRow('');
+  };
+
+  const onClose = () => closeHandler();
+
+  useEffect(() => setOpenModal(selectedRow !== ''), [selectedRow]);
+
+  const content = (
+    <>
+      <MessageTextarea
+        rows={5}
+        value={suspendMessage}
+        onChange={ev => setSuspendMessage(ev.target.value)}
+      />
+      <Flex wide end>
+        <Button onClick={suspendHandler} color="inherit" variant="text">
+          Suspend
+        </Button>
+      </Flex>
+    </>
+  );
+
+  return useDeepCompareMemo(() => {
+    return (
+      <Modal
+        open={openModal}
+        onClose={onClose}
+        title="Suspend Reason"
+        description="Add reason for suspending"
+        children={content}
+        className={className}
+      />
+    );
+  }, [openModal, className, content, onClose]);
+}
+
+export default SuspendMessageModal;
diff --git a/plugins/backstage-plugin-flux/src/components/helpers.tsx b/plugins/backstage-plugin-flux/src/components/helpers.tsx
index 93d55cd..20a0078 100644
--- a/plugins/backstage-plugin-flux/src/components/helpers.tsx
+++ b/plugins/backstage-plugin-flux/src/components/helpers.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { DateTime } from 'luxon';
 import {
@@ -119,7 +119,6 @@ export function SyncButton({
 
 export function SuspendButton({
   resource,
-  toggleSuspend,
   status,
   readOnly,
 }: {
@@ -128,24 +127,27 @@ export function SuspendButton({
   status: boolean;
   readOnly?: boolean;
 }) {
+  const [suspendMessageModalOpen, setSuspendMessageModalOpen] = useState(false);
   const classes = useStyles();
   const label = `${resource.namespace}/${resource.name}`;
   const title = status ? `Suspending ${label}` : `Suspend ${label}`;
 
   return (
-    <Tooltip title={readOnly ? 'Read-only mode is enabled' : title}>
-      <div>
-        <IconButton
-          data-testid={`suspend ${label}`}
-          className={classes.actionButton}
-          size="small"
-          onClick={toggleSuspend}
-          disabled={resource.suspended || readOnly}
-        >
-          <PauseIcon />
-        </IconButton>
-      </div>
-    </Tooltip>
+    <>
+      <Tooltip title={readOnly ? 'Read-only mode is enabled' : title}>
+        <div>
+          <IconButton
+            data-testid={`suspend ${label}`}
+            className={classes.actionButton}
+            size="small"
+            onClick={() => setSuspendMessageModalOpen(!suspendMessageModalOpen)}
+            disabled={resource.suspended || readOnly}
+          >
+            <PauseIcon id={`suspend ${label}`} />
+          </IconButton>
+        </div>
+      </Tooltip>
+    </>
   );
 }
 
diff --git a/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.test.ts b/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.test.ts
index b727074..06d581e 100644
--- a/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.test.ts
+++ b/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.test.ts
@@ -176,13 +176,14 @@ describe('toggleSuspendResource', () => {
       alertApi,
       false,
       'Guest',
+      'This is the suspend comment',
     );
 
     // ASSERT we tried to PATCH the resource
     expect(kubernetesApi.proxy).toHaveBeenCalledWith({
       clusterName: 'test-clusterName',
       init: {
-        body: `{"metadata":{"annotations":{"weave.works/suspended-by":"Guest"}},"spec":{"suspend":false}}`,
+        body: `{"metadata":{"annotations":{"weave.works/suspended-by":"Guest","weave.works/suspended-comment":"This is the suspend comment"}},"spec":{"suspend":false}}`,
         headers: {
           'Content-Type': 'application/merge-patch+json',
         },
diff --git a/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.ts b/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.ts
index 6e29ced..14b66e1 100644
--- a/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.ts
+++ b/plugins/backstage-plugin-flux/src/hooks/useToggleSuspendResource.ts
@@ -31,6 +31,7 @@ export function toggleSuspendRequest(
   gvk: CustomResourceMatcher,
   suspend: boolean,
   user: string,
+  suspendMessage?: string,
 ) {
   return {
     clusterName,
@@ -44,6 +45,7 @@ export function toggleSuspendRequest(
         metadata: {
           annotations: {
             'weave.works/suspended-by': user,
+            'weave.works/suspended-comment': suspendMessage,
           },
         },
         spec: {
@@ -74,9 +76,18 @@ export async function requestToggleSuspendResource(
   gvk: CustomResourceMatcher,
   suspend: boolean,
   user: string,
+  suspendMessage?: string,
 ) {
   const res = await kubernetesApi.proxy(
-    toggleSuspendRequest(name, namespace, clusterName, gvk, suspend, user),
+    toggleSuspendRequest(
+      name,
+      namespace,
+      clusterName,
+      gvk,
+      suspend,
+      user,
+      suspendMessage,
+    ),
   );
   const key = suspend ? 'Suspend' : 'Resume';
   if (!res.ok) {
@@ -92,6 +103,7 @@ export async function toggleSuspendResource(
   alertApi: AlertApi,
   suspend: boolean,
   user: string,
+  suspendMessage?: string,
 ) {
   const key = suspend ? 'Suspend' : 'Resume';
 
@@ -109,6 +121,7 @@ export async function toggleSuspendResource(
       gvk,
       suspend,
       user,
+      suspendMessage,
     );
 
     alertApi.post({
@@ -132,6 +145,7 @@ export async function toggleSuspendResource(
 export function useToggleSuspendResource(
   resource: Source | Deployment,
   suspend: boolean,
+  suspendMessage?: string,
 ) {
   const kubernetesApi = useApi(kubernetesApiRef);
   const alertApi = useApi(alertApiRef);
@@ -144,8 +158,15 @@ export function useToggleSuspendResource(
 
   const [{ loading }, toggleSuspend] = useAsyncFn(
     () =>
-      toggleSuspendResource(resource, kubernetesApi, alertApi, suspend, user),
-    [resource, kubernetesApi, alert, user],
+      toggleSuspendResource(
+        resource,
+        kubernetesApi,
+        alertApi,
+        suspend,
+        user,
+        suspendMessage,
+      ),
+    [resource, kubernetesApi, alert, user, suspendMessage],
   );
 
   return { loading, toggleSuspend };
diff --git a/yarn.lock b/yarn.lock
index be068ca..1b6b926 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12201,12 +12201,7 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-dequal@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-1.0.0.tgz#41c6065e70de738541c82cdbedea5292277a017e"
-  integrity sha512-/Nd1EQbQbI9UbSHrMiKZjFLrXSnU328iQdZKPQf78XQI6C+gutkFUeoHpG5J08Ioa6HeRbRNFpSIclh1xyG0mw==
-
-dequal@^2.0.0:
+dequal@2.0.3, dequal@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -23351,12 +23346,12 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
-use-deep-compare@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-1.1.0.tgz#85580dde751f68400bf6ef7e043c7f986595cef8"
-  integrity sha512-6yY3zmKNCJ1jjIivfZMZMReZjr8e6iC6Uqtp701jvWJ6ejC/usXD+JjmslZDPJQgX8P4B1Oi5XSLHkOLeYSJsA==
+use-deep-compare@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-1.2.1.tgz#076c9865868d98509e619206e27bc8eff0b8ed7c"
+  integrity sha512-JTnOZAr0fq1ix6CQ4XANoWIh03xAiMFlP/lVAYDdAOZwur6nqBSdATn1/Q9PLIGIW+C7xmFZBCcaA4KLDcQJtg==
   dependencies:
-    dequal "1.0.0"
+    dequal "2.0.3"
 
 use-immer@^0.9.0:
   version "0.9.0"