diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
index 98d9bd3d83d..bc30f74c525 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
@@ -41,6 +41,6 @@ describe('Editor integration test', () => {
     maximizeBtn.simulate('click');
 
     integrationTestHelper.takeStoreAndLastActionSnapshot('entered fullscreen');
-    expect(component.find('.editor-modal.in').length).toBeGreaterThan(0);
+    expect(component.find('.editor-modal').length).toBeGreaterThan(0);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
index 90b40860c36..693b9c420bd 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Icon, Button } from 'patternfly-react';
+import { Modal, Title } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import EditorView from './EditorView';
@@ -26,27 +26,32 @@ const EditorModal = ({
   liveAutocompletion,
   title,
   toggleModal,
-}) => (
-  <Modal show={isMaximized} onHide={toggleModal} className="editor-modal">
-    <Modal.Header className={`${selectedView} ${theme.toLowerCase()}`}>
-      <h4 id="editor-modal-h4">{title}</h4>
-      <Button
-        className="close"
-        onClick={toggleModal}
-        aria-hidden="true"
-        aria-label="Close"
-        bsStyle="link"
-      >
-        <Icon type="pf" name="close" />
-      </Button>
+}) => {
+  const header = (
+    <div className={`${selectedView} ${theme.toLowerCase()}`}>
+      <Title headingLevel="h4" id="editor-modal-h4" ouiaId="editor-modal-title">
+        {title}
+      </Title>
       {selectedView === 'diff' && (
         <DiffToggle
           stateView={diffViewType}
           changeState={viewType => changeDiffViewType(viewType)}
         />
       )}
-    </Modal.Header>
-    <Modal.Body className={selectedView}>
+    </div>
+  );
+  return (
+    <Modal
+      position="top"
+      aria-labelledby="editor-modal-h4"
+      ouiaId="editor-modal-component"
+      id="editor-modal"
+      className={`${selectedView} ${theme.toLowerCase()} editor-modal`}
+      variant="primary"
+      isOpen={isMaximized}
+      onClose={toggleModal}
+      header={header}
+    >
       {selectedView === 'diff' ? (
         <div id="diff-table">
           <DiffView
@@ -70,9 +75,9 @@ const EditorModal = ({
           liveAutocompletion={liveAutocompletion}
         />
       )}
-    </Modal.Body>
-  </Modal>
-);
+    </Modal>
+  );
+};
 
 EditorModal.propTypes = {
   changeDiffViewType: PropTypes.func.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
index 1931b507466..17d79cfab2c 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
@@ -2,152 +2,102 @@
 
 exports[`EditorModal should render renders EditorModal diff 1`] = `
 <Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  className="editor-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={false}
->
-  <ModalHeader
-    bsClass="modal-header"
-    className="diff monokai"
-    closeButton={false}
-    closeLabel="Close"
-  >
-    <h4
-      id="editor-modal-h4"
-    />
-    <Button
-      active={false}
-      aria-hidden="true"
-      aria-label="Close"
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="close"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon
-        name="close"
-        type="pf"
-      />
-    </Button>
-    <DiffToggle
-      changeState={[Function]}
-      stateView="split"
-    />
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    className="diff"
-    componentClass="div"
-  >
+  actions={Array []}
+  appendTo={[Function]}
+  aria-describedby=""
+  aria-label=""
+  aria-labelledby="editor-modal-h4"
+  className="diff monokai editor-modal"
+  hasNoBodyWrapper={false}
+  header={
     <div
-      id="diff-table"
+      className="diff monokai"
     >
-      <DiffView
-        newText="</>"
-        oldText="<? />"
-        patch=""
-        viewType="split"
+      <Title
+        headingLevel="h4"
+        id="editor-modal-h4"
+        ouiaId="editor-modal-title"
+      >
+        
+      </Title>
+      <DiffToggle
+        changeState={[Function]}
+        stateView="split"
       />
     </div>
-  </ModalBody>
+  }
+  id="editor-modal"
+  isOpen={false}
+  onClose={[Function]}
+  ouiaId="editor-modal-component"
+  ouiaSafe={true}
+  position="top"
+  showClose={true}
+  title=""
+  titleIconVariant={null}
+  titleLabel=""
+  variant="primary"
+>
+  <div
+    id="diff-table"
+  >
+    <DiffView
+      newText="</>"
+      oldText="<? />"
+      patch=""
+      viewType="split"
+    />
+  </div>
 </Modal>
 `;
 
 exports[`EditorModal should render renders EditorModal editor 1`] = `
 <Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  className="editor-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
+  actions={Array []}
+  appendTo={[Function]}
+  aria-describedby=""
+  aria-label=""
+  aria-labelledby="editor-modal-h4"
+  className="input monokai editor-modal"
+  hasNoBodyWrapper={false}
+  header={
+    <div
+      className="input monokai"
+    >
+      <Title
+        headingLevel="h4"
+        id="editor-modal-h4"
+        ouiaId="editor-modal-title"
+      >
+        
+      </Title>
+    </div>
   }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={false}
+  id="editor-modal"
+  isOpen={false}
+  onClose={[Function]}
+  ouiaId="editor-modal-component"
+  ouiaSafe={true}
+  position="top"
+  showClose={true}
+  title=""
+  titleIconVariant={null}
+  titleLabel=""
+  variant="primary"
 >
-  <ModalHeader
-    bsClass="modal-header"
-    className="input monokai"
-    closeButton={false}
-    closeLabel="Close"
-  >
-    <h4
-      id="editor-modal-h4"
-    />
-    <Button
-      active={false}
-      aria-hidden="true"
-      aria-label="Close"
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="close"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon
-        name="close"
-        type="pf"
-      />
-    </Button>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    className="input"
-    componentClass="div"
-  >
-    <EditorView
-      autocompletion={true}
-      className="editor ace_editor_modal"
-      isMasked={false}
-      isSelected={true}
-      keyBinding="Default"
-      liveAutocompletion={false}
-      mode="Ruby"
-      name="editor"
-      onChange={[Function]}
-      readOnly={false}
-      theme="Monokai"
-      value="</>"
-    />
-  </ModalBody>
+  <EditorView
+    autocompletion={true}
+    className="editor ace_editor_modal"
+    isMasked={false}
+    isSelected={true}
+    keyBinding="Default"
+    liveAutocompletion={false}
+    mode="Ruby"
+    name="editor"
+    onChange={[Function]}
+    readOnly={false}
+    theme="Monokai"
+    value="</>"
+  />
 </Modal>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/editor.scss b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
index 993c931a59c..c3129ca00df 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/editor.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
@@ -25,71 +25,40 @@
   }
 }
 
+#editor-modal{
+  margin: 15px;
+  max-width: unset;
+}
+
 .editor-modal {
-  .modal-content {
-    height: -webkit-fill-available;
+  .pf-c-modal-box__body{
+    padding: 0;
   }
 
-  .modal-header {
-    #diff-toggle-buttons {
-      margin-bottom: unset;
-      margin-right: 15px;
-
-      button {
-        outline: none;
-      }
-    }
-
-    #editor-modal-h4 {
-      margin-top: 4px;
-      margin-bottom: 0;
-      float: left;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 700px;
-    }
+  .pf-c-modal-box__header{
+    margin-right: 0;
+    padding-bottom: 10px;
+    padding-top: 10px;
   }
+  .pf-c-button.pf-m-plain{
+    top: 7px;
+  }
+}
 
-  .modal-dialog {
-    padding: 15px;
-    width: auto !important;
-
-    .input.modal-body {
-      background-color: #363636;
-    }
-
-    .modal-body {
-      padding: 0;
-      overflow: auto;
-      height: 100%;
+.monokai:not(.diff) {
 
-      .ace_editor {
-        border: none !important;
-      }
+  header {
+    background-color: var(--pf-v5-global--palette--black-800);
 
-      #diff-table {
-        max-height: 80vh;
-
-        div {
-          border: none;
-        }
-      }
+    h4 {
+      color: var(--pf-v5-global--palette--white);
     }
+  }
 
-    .input.modal-header.monokai,
-    .preview.modal-header.monokai {
-      background-color: #363636;
-
-      h4 {
-        color: #fff;
-      }
-
-      .pficon-close {
-        color: #fff;
-      }
-    }
+  button {
+    color: var(--pf-v5-global--palette--white);
   }
+
 }
 
 .navbar-editor {