diff --git a/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
index 7caa806..7da46b0 100644
--- a/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
+++ b/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
@@ -1,17 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
-<Modal
-  body={
+exports[`EditModal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+<ModalDialog
+  closeLabel="Close"
+  hasCloseButton={true}
+  isBlocking={false}
+  isFullscreenOnMobile={true}
+  isFullscreenScroll={false}
+  isOpen={true}
+  onClose={[MockFunction this.closeAssignmentModal]}
+  size="xl"
+  variant="default"
+>
+  <ModalDialogHeader
+    as="div"
+  >
+    <ModalDialogTitle
+      as="h2"
+    >
+      <FormattedMessage
+        defaultMessage="Edit Grades"
+        description="Edit Modal title"
+        id="gradebook.GradesView.EditModal.title"
+      />
+    </ModalDialogTitle>
+  </ModalDialogHeader>
+  <ModalDialogBody
+    as="div"
+  >
     <div>
       <ModalHeaders />
-      <Alert
+      <ForwardRef
+        closeLabel="Dismiss"
         dismissible={false}
+        onClose={[Function]}
         show={true}
+        stacked={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "displayName": "Fade",
+            "render": [Function],
+          }
+        }
         variant="danger"
       >
         Weve been trying to contact you regarding...
-      </Alert>
+      </ForwardRef>
       <OverrideTable />
       <div>
         <FormattedMessage
@@ -28,10 +70,48 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
         />
       </div>
     </div>
-  }
-  buttons={
-    Array [
-      <Button
+  </ModalDialogBody>
+  <ModalDialogFooter
+    as="div"
+  >
+    <ActionRow
+      as="div"
+      isStacked={false}
+    >
+      <ForwardRef
+        as={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "Deprecated": [Function],
+            "defaultProps": Object {
+              "active": false,
+              "children": undefined,
+              "className": undefined,
+              "disabled": false,
+              "iconAfter": undefined,
+              "iconBefore": undefined,
+              "variant": "primary",
+            },
+            "propTypes": Object {
+              "children": [Function],
+              "className": [Function],
+              "iconAfter": [Function],
+              "iconBefore": [Function],
+            },
+            "render": [Function],
+          }
+        }
+        variant="tertiary"
+      >
+        <FormattedMessage
+          defaultMessage="Cancel"
+          description="Edit Modal close button text"
+          id="gradebook.GradesView.EditModal.closeText"
+        />
+      </ForwardRef>
+      <ForwardRef
+        active={false}
+        disabled={false}
         onClick={[MockFunction this.handleAdjustedGradeClick]}
         variant="primary"
       >
@@ -40,40 +120,66 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
           description="Edit Modal Save button label"
           id="gradebook.GradesView.EditModal.saveGrade"
         />
-      </Button>,
-    ]
-  }
-  closeText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      description="Edit Modal close button text"
-      id="gradebook.GradesView.EditModal.closeText"
-    />
-  }
-  onClose={[MockFunction this.closeAssignmentModal]}
-  open={true}
-  title={
-    <FormattedMessage
-      defaultMessage="Edit Grades"
-      description="Edit Modal title"
-      id="gradebook.GradesView.EditModal.title"
-    />
-  }
-/>
+      </ForwardRef>
+    </ActionRow>
+  </ModalDialogFooter>
+</ModalDialog>
 `;
 
-exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
-<Modal
-  body={
+exports[`EditModal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
+<ModalDialog
+  closeLabel="Close"
+  hasCloseButton={true}
+  isBlocking={false}
+  isFullscreenOnMobile={true}
+  isFullscreenScroll={false}
+  isOpen={true}
+  onClose={[MockFunction this.closeAssignmentModal]}
+  size="xl"
+  variant="default"
+>
+  <ModalDialogHeader
+    as="div"
+  >
+    <ModalDialogTitle
+      as="h2"
+    >
+      <FormattedMessage
+        defaultMessage="Edit Grades"
+        description="Edit Modal title"
+        id="gradebook.GradesView.EditModal.title"
+      />
+    </ModalDialogTitle>
+  </ModalDialogHeader>
+  <ModalDialogBody
+    as="div"
+  >
     <div>
       <ModalHeaders />
-      <Alert
+      <ForwardRef
+        closeLabel="Dismiss"
         dismissible={false}
+        onClose={[Function]}
         show={false}
+        stacked={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "displayName": "Fade",
+            "render": [Function],
+          }
+        }
         variant="danger"
       >
         
-      </Alert>
+      </ForwardRef>
       <OverrideTable />
       <div>
         <FormattedMessage
@@ -90,10 +196,48 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
         />
       </div>
     </div>
-  }
-  buttons={
-    Array [
-      <Button
+  </ModalDialogBody>
+  <ModalDialogFooter
+    as="div"
+  >
+    <ActionRow
+      as="div"
+      isStacked={false}
+    >
+      <ForwardRef
+        as={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "Deprecated": [Function],
+            "defaultProps": Object {
+              "active": false,
+              "children": undefined,
+              "className": undefined,
+              "disabled": false,
+              "iconAfter": undefined,
+              "iconBefore": undefined,
+              "variant": "primary",
+            },
+            "propTypes": Object {
+              "children": [Function],
+              "className": [Function],
+              "iconAfter": [Function],
+              "iconBefore": [Function],
+            },
+            "render": [Function],
+          }
+        }
+        variant="tertiary"
+      >
+        <FormattedMessage
+          defaultMessage="Cancel"
+          description="Edit Modal close button text"
+          id="gradebook.GradesView.EditModal.closeText"
+        />
+      </ForwardRef>
+      <ForwardRef
+        active={false}
+        disabled={false}
         onClick={[MockFunction this.handleAdjustedGradeClick]}
         variant="primary"
       >
@@ -102,24 +246,8 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
           description="Edit Modal Save button label"
           id="gradebook.GradesView.EditModal.saveGrade"
         />
-      </Button>,
-    ]
-  }
-  closeText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      description="Edit Modal close button text"
-      id="gradebook.GradesView.EditModal.closeText"
-    />
-  }
-  onClose={[MockFunction this.closeAssignmentModal]}
-  open={false}
-  title={
-    <FormattedMessage
-      defaultMessage="Edit Grades"
-      description="Edit Modal title"
-      id="gradebook.GradesView.EditModal.title"
-    />
-  }
-/>
+      </ForwardRef>
+    </ActionRow>
+  </ModalDialogFooter>
+</ModalDialog>
 `;
diff --git a/src/components/GradesView/EditModal/index.jsx b/src/components/GradesView/EditModal/index.jsx
index b02a807..3ac2602 100644
--- a/src/components/GradesView/EditModal/index.jsx
+++ b/src/components/GradesView/EditModal/index.jsx
@@ -5,8 +5,9 @@ import { connect } from 'react-redux';
 
 import {
   Button,
-  Modal,
   Alert,
+  ModalDialog,
+  ActionRow,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -46,11 +47,20 @@ export class EditModal extends React.Component {
 
   render() {
     return (
-      <Modal
-        open={this.props.open}
-        title={<FormattedMessage {...messages.title} />}
-        closeText={<FormattedMessage {...messages.closeText} />}
-        body={(
+
+      <ModalDialog
+        isOpen
+        onClose={this.closeAssignmentModal}
+        size="xl"
+        hasCloseButton
+        isFullscreenOnMobile
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            <FormattedMessage {...messages.title} />
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
           <div>
             <ModalHeaders />
             <Alert
@@ -64,14 +74,18 @@ export class EditModal extends React.Component {
             <div><FormattedMessage {...messages.visibility} /></div>
             <div><FormattedMessage {...messages.saveVisibility} /></div>
           </div>
-        )}
-        buttons={[
-          <Button variant="primary" onClick={this.handleAdjustedGradeClick}>
-            <FormattedMessage {...messages.saveGrade} />
-          </Button>,
-        ]}
-        onClose={this.closeAssignmentModal}
-      />
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              <FormattedMessage {...messages.closeText} />
+            </ModalDialog.CloseButton>
+            <Button variant="primary" onClick={this.handleAdjustedGradeClick}>
+              <FormattedMessage {...messages.saveGrade} />
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     );
   }
 }
diff --git a/src/components/GradesView/EditModal/test.jsx b/src/components/GradesView/EditModal/test.jsx
index 24a0347..07df08a 100644
--- a/src/components/GradesView/EditModal/test.jsx
+++ b/src/components/GradesView/EditModal/test.jsx
@@ -10,14 +10,8 @@ import {
   mapDispatchToProps,
   mapStateToProps,
 } from '.';
-
 jest.mock('./OverrideTable', () => 'OverrideTable');
 jest.mock('./ModalHeaders', () => 'ModalHeaders');
-jest.mock('@edx/paragon', () => ({
-  Button: () => 'Button',
-  Modal: () => 'Modal',
-  Alert: () => 'Alert',
-}));
 jest.mock('data/actions', () => ({
   __esModule: true,
   default: {
@@ -44,7 +38,7 @@ jest.mock('data/selectors', () => ({
     },
   },
 }));
-describe('EditMoal', () => {
+describe('EditModal', () => {
   let props;
   beforeEach(() => {
     props = {