diff --git a/spiffworkflow-frontend/cypress/e2e/process_models.cy.js b/spiffworkflow-frontend/cypress/e2e/process_models.cy.js
index 3b28514bb..48b65d5d8 100644
--- a/spiffworkflow-frontend/cypress/e2e/process_models.cy.js
+++ b/spiffworkflow-frontend/cypress/e2e/process_models.cy.js
@@ -99,7 +99,7 @@ describe('process-models', () => {
     cy.contains(/^Process Model File$/);
     // Some reason, cypress evals json strings so we have to escape it it with '{{}'
     cy.get('.view-line').type('{{} "test_key": "test_value" }');
-    cy.contains('Save').click();
+    cy.getBySel('file-save-button').click();
     cy.get('input[name=file_name]').type(jsonFileName);
     cy.contains('Save Changes').click();
     cy.contains(`Process Model File: ${jsonFileName}`);
@@ -168,12 +168,8 @@ describe('process-models', () => {
   });
 
   it('can allow searching for model', () => {
-    cy.get('[name=process-model-selection]').click();
-    cy.get('[name=process-model-selection]').type('model-3');
-    cy.get(
-      `[aria-label="acceptance-tests-group-one/acceptance-tests-model-3"]`
-    ).click();
-
-    cy.contains('Process Instances').click();
+    cy.getBySel('process-model-selection').click().type('model-3');
+    cy.contains('acceptance-tests-group-one/acceptance-tests-model-3').click();
+    cy.contains('List').click();
   });
 });
diff --git a/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx b/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx
index 31a8e5efd..25aaadc18 100644
--- a/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx
+++ b/spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx
@@ -45,30 +45,11 @@ export default function ButtonWithConfirmation({
         onRequestSubmit={handleConfirmation}
       />
     );
-    // return (
-    //   <Modal
-    //     show={showConfirmationPrompt}
-    //     onHide={handleConfirmationPromptCancel}
-    //   >
-    //     <Modal.Header closeButton>
-    //       <Modal.Title>{title}</Modal.Title>
-    //     </Modal.Header>
-    //     {modalBodyElement()}
-    //     <Modal.Footer>
-    //       <Button variant="secondary" onClick={handleConfirmationPromptCancel}>
-    //         Cancel
-    //       </Button>
-    //       <Button variant="primary" onClick={handleConfirmation}>
-    //         {confirmButtonLabel}
-    //       </Button>
-    //     </Modal.Footer>
-    //   </Modal>
-    // );
   };
 
   return (
     <>
-      <Button onClick={handleShowConfirmationPrompt} variant="danger">
+      <Button onClick={handleShowConfirmationPrompt} kind="danger">
         {buttonLabel}
       </Button>
       {confirmationDialog()}
diff --git a/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx b/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx
index 1f138f6ea..98419d6c1 100644
--- a/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx
@@ -29,6 +29,7 @@ export default function ProcessModelSearch({
     <ComboBox
       onChange={onChange}
       id="process-model-select"
+      data-qa="process-model-selection"
       items={processModels}
       itemToString={(processModel: ProcessModel) => {
         if (processModel) {
diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
index 9728e7d50..2bbf64db0 100644
--- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
+++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
@@ -18,7 +18,8 @@ import {
 } from 'dmn-js-properties-panel';
 
 import React, { useRef, useEffect, useState } from 'react';
-import Button from 'react-bootstrap/Button';
+// @ts-ignore
+import { Button } from '@carbon/react';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index 787db12c3..f6fb211f3 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -194,31 +194,25 @@ export default function ProcessModelEditDiagram() {
   const newFileNameBox = () => {
     const fileExtension = `.${searchParams.get('file_type')}`;
     return (
-      <Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
-        <Modal.Header closeButton>
-          <Modal.Title>Process Model File Name</Modal.Title>
-        </Modal.Header>
-        <form onSubmit={handleFileNameSave}>
-          <label>File Name:</label>
-          <span>
-            <input
-              name="file_name"
-              type="text"
-              value={newFileName}
-              onChange={(e) => setNewFileName(e.target.value)}
-              autoFocus
-            />
-            {fileExtension}
-          </span>
-          <Modal.Footer>
-            <Button variant="secondary" onClick={handleFileNameCancel}>
-              Cancel
-            </Button>
-            <Button variant="primary" type="submit">
-              Save Changes
-            </Button>
-          </Modal.Footer>
-        </form>
+      <Modal
+        open={showFileNameEditor}
+        modalHeading="Processs Model File Name"
+        primaryButtonText="Save Changes"
+        secondaryButtonText="Cancel"
+        onSecondarySubmit={handleFileNameCancel}
+        onRequestSubmit={handleFileNameSave}
+      >
+        <label>File Name:</label>
+        <span>
+          <input
+            name="file_name"
+            type="text"
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            autoFocus
+          />
+          {fileExtension}
+        </span>
       </Modal>
     );
   };
diff --git a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
index 2b92ea197..e706a3ef3 100644
--- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
+++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx
@@ -119,31 +119,25 @@ export default function ReactFormEditor() {
 
   const newFileNameBox = () => {
     return (
-      <Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
-        <Modal.Header closeButton>
-          <Modal.Title>Process Model File Name</Modal.Title>
-        </Modal.Header>
-        <form onSubmit={handleFileNameSave}>
-          <label>File Name:</label>
-          <span>
-            <input
-              name="file_name"
-              type="text"
-              value={newFileName}
-              onChange={(e) => setNewFileName(e.target.value)}
-              autoFocus
-            />
-            .{fileExtension}
-          </span>
-          <Modal.Footer>
-            <Button variant="secondary" onClick={handleFileNameCancel}>
-              Cancel
-            </Button>
-            <Button variant="primary" type="submit">
-              Save Changes
-            </Button>
-          </Modal.Footer>
-        </form>
+      <Modal
+        open={showFileNameEditor}
+        modalHeading="Processs Model File Name"
+        primaryButtonText="Save Changes"
+        secondaryButtonText="Cancel"
+        onSecondarySubmit={handleFileNameCancel}
+        onRequestSubmit={handleFileNameSave}
+      >
+        <label>File Name:</label>
+        <span>
+          <input
+            name="file_name"
+            type="text"
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            autoFocus
+          />
+          {fileExtension}
+        </span>
       </Modal>
     );
   };
@@ -161,7 +155,7 @@ export default function ReactFormEditor() {
           {processModelFile ? `: ${(processModelFile as any).name}` : ''}
         </h2>
         {newFileNameBox()}
-        <Button onClick={saveFile} variant="danger">
+        <Button onClick={saveFile} variant="danger" data-qa="file-save-button">
           Save
         </Button>
         {params.file_name ? (