diff --git a/src/routes/HomePage.tsx b/src/routes/HomePage.tsx
index 38393f2c..4d348ed2 100644
--- a/src/routes/HomePage.tsx
+++ b/src/routes/HomePage.tsx
@@ -62,8 +62,13 @@ export default function HomePage() {
             {rowToUse.title}
           </td>
           <td>{rowToUse.state}</td>
+          <td>{rowToUse.process_instance_status}</td>
           <td>
-            <Button variant="primary" href={taskUrl}>
+            <Button
+              variant="primary"
+              href={taskUrl}
+              hidden={rowToUse.process_instance_status === 'suspended'}
+            >
               Complete Task
             </Button>
           </td>
@@ -78,6 +83,7 @@ export default function HomePage() {
             <th>Process Instance</th>
             <th>Task Name</th>
             <th>Status</th>
+            <th>Process Instance Status</th>
             <th>Actions</th>
           </tr>
         </thead>
diff --git a/src/routes/ProcessInstanceShow.tsx b/src/routes/ProcessInstanceShow.tsx
index 32daf05c..72a43899 100644
--- a/src/routes/ProcessInstanceShow.tsx
+++ b/src/routes/ProcessInstanceShow.tsx
@@ -53,6 +53,22 @@ export default function ProcessInstanceShow() {
     });
   };
 
+  const suspendProcessInstance = () => {
+    HttpService.makeCallToBackend({
+      path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/suspend`,
+      successCallback: refreshPage,
+      httpMethod: 'POST',
+    });
+  };
+
+  const resumeProcessInstance = () => {
+    HttpService.makeCallToBackend({
+      path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}/resume`,
+      successCallback: refreshPage,
+      httpMethod: 'POST',
+    });
+  };
+
   const getTaskIds = () => {
     const taskIds = { completed: [], readyOrWaiting: [] };
     if (tasks) {
@@ -126,6 +142,32 @@ export default function ProcessInstanceShow() {
     return <div />;
   };
 
+  const suspendButton = (processInstanceToUse: any) => {
+    if (
+      ['complete', 'terminated', 'faulted', 'suspended'].indexOf(
+        processInstanceToUse.status
+      ) === -1
+    ) {
+      return (
+        <Button onClick={suspendProcessInstance} variant="warning">
+          Suspend
+        </Button>
+      );
+    }
+    return <div />;
+  };
+
+  const resumeButton = (processInstanceToUse: any) => {
+    if (processInstanceToUse.status === 'suspended') {
+      return (
+        <Button onClick={resumeProcessInstance} variant="warning">
+          Resume
+        </Button>
+      );
+    }
+    return <div />;
+  };
+
   const handleClickedDiagramTask = (shapeElement: any) => {
     if (tasks) {
       const matchingTask = tasks.find(
@@ -217,6 +259,8 @@ export default function ProcessInstanceShow() {
             buttonLabel="Delete"
           />
           {terminateButton(processInstanceToUse)}
+          {suspendButton(processInstanceToUse)}
+          {resumeButton(processInstanceToUse)}
         </Stack>
         {getInfoTag(processInstanceToUse)}
         {taskDataDisplayArea()}