diff --git a/src/library-authoring/author-library/LibraryAuthoringPage.jsx b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
index 458c366f..50cbbe6e 100644
--- a/src/library-authoring/author-library/LibraryAuthoringPage.jsx
+++ b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
@@ -7,11 +7,12 @@ import {
   Button,
   Card,
   Navbar,
-  Modal,
   Dropdown,
   SearchField,
   Form,
   Pagination,
+  ModalDialog,
+  ActionRow,
 } from '@edx/paragon';
 import { v4 as uuid4 } from 'uuid';
 import { faPlus, faSync } from '@fortawesome/free-solid-svg-icons';
@@ -79,7 +80,7 @@ export const BlockPreviewBase = ({
     <Navbar className="border">
       <Navbar.Brand>{block.display_name}</Navbar.Brand>
       <Navbar.Collapse className="justify-content-end">
-        { library.allow_lti && (
+        {library.allow_lti && (
           <>
             <Button disabled={isLtiUrlGenerating} size="lg" className="mr-1" onClick={() => { props.fetchBlockLtiUrl({ blockId: block.id }); }}>
               <FontAwesomeIcon icon={faClipboard} className="pr-1" />
@@ -103,25 +104,29 @@ export const BlockPreviewBase = ({
         </Button>
       </Navbar.Collapse>
     </Navbar>
-    <Modal
-      open={showDeleteModal}
-      title={intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
+    <ModalDialog
+      isOpen={showDeleteModal}
       onClose={() => setShowDeleteModal(false)}
-      body={(
-        <div>
-          <p>
-            {intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
-          </p>
-        </div>
-      )}
-      buttons={[
-        <Button
-          onClick={() => props.deleteLibraryBlock({ blockId: block.id })}
-        >
-          {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-        </Button>,
-      ]}
-    />
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        {intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="link">
+            Close
+          </ModalDialog.CloseButton>
+          <Button onClick={() => props.deleteLibraryBlock({ blockId: block.id })} variant="primary">
+            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
     {showPreviews && (
       <Card>
         <Card.Body>
@@ -274,7 +279,7 @@ const ButtonTogglesBase = ({
     </Button>
     <Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg">
       <FontAwesomeIcon icon={faSync} className="pr-1" />
-      { intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
+      {intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews'])}
     </Button>
   </>
 );
@@ -425,16 +430,16 @@ export const LibraryAuthoringPageBase = ({
                 : null}
               <Col xs={12} className="text-center py-3 add-buttons-container">
                 {library.type !== LIBRARY_TYPES.COMPLEX && (
-                <Button
-                  variant="success"
-                  size="lg"
-                  disabled={sending}
-                  onClick={() => addBlock(library.type)}
-                  className="cta-button"
-                >
-                  <FontAwesomeIcon icon={faPlus} className="pr-1" />
-                  {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
-                </Button>
+                  <Button
+                    variant="success"
+                    size="lg"
+                    disabled={sending}
+                    onClick={() => addBlock(library.type)}
+                    className="cta-button"
+                  >
+                    <FontAwesomeIcon icon={faPlus} className="pr-1" />
+                    {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
+                  </Button>
                 )}
                 {library.type === LIBRARY_TYPES.COMPLEX && (
                   <Row>
diff --git a/src/library-authoring/library-access/UserAccessWidget.jsx b/src/library-authoring/library-access/UserAccessWidget.jsx
index c391e40e..8e961cab 100644
--- a/src/library-authoring/library-access/UserAccessWidget.jsx
+++ b/src/library-authoring/library-access/UserAccessWidget.jsx
@@ -2,8 +2,9 @@
 Component for displaying and modifying a user's access level for a library.
  */
 import {
+  ActionRow,
   Badge,
-  Button, Card, Col, Modal, Row,
+  Button, Card, Col, ModalDialog, Row,
 } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -40,99 +41,113 @@ export const UserAccessWidget = ({
             </span>
           </Col>
           {isAdmin && (
-          <Col xs={12} md={6}>
-            <Row>
-              {(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
-              <Col xs={12} className="text-center text-md-right">
-                <small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
-              <Col xs={10} className="text-left text-md-right">
-                <Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
-                  {intl.formatMessage(messages['library.access.remove_admin'])}
-                </Button>
-                <Modal
-                  open={showDeprivModal}
-                  title={intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
-                  onClose={() => setShowDeprivModal(false)}
-                  body={(
-                    <div>
-                      <p>
+            <Col xs={12} md={6}>
+              <Row>
+                {(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
+                  <Col xs={12} className="text-center text-md-right">
+                    <small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
+                  </Col>
+                )}
+                {user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
+                  <Col xs={10} className="text-left text-md-right">
+                    <Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
+                      {intl.formatMessage(messages['library.access.remove_admin'])}
+                    </Button>
+                    <ModalDialog
+                      isOpen={showDeprivModal}
+                      onClose={() => setShowDeprivModal(false)}
+                    >
+
+                      <ModalDialog.Header>
+                        <ModalDialog.Title>
+                          {intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
+                        </ModalDialog.Title>
+                      </ModalDialog.Header>
+                      <ModalDialog.Body>
                         {intl.formatMessage(
                           messages['library.access.modal.remove_admin.body'],
                           { library: library.title, email: user.email },
                         )}
-                      </p>
-                    </div>
-                  )}
-                  buttons={[
-                    <Button
-                      onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
-                    >
-                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-                    </Button>,
-                  ]}
-                />
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.READ && (
-              <Col xs={10} className="text-left text-md-right">
-                <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
-                  {intl.formatMessage(messages['library.access.add_author'])}
-                </Button>
-              </Col>
-              )}
-              {user.access_level === LIBRARY_ACCESS.AUTHOR && (
-                <>
-                  <Col xs={5} className="text-left text-md-right pl-md-1">
-                    <Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
-                      {intl.formatMessage(messages['library.access.remove_author'])}
-                    </Button>
+                      </ModalDialog.Body>
+                      <ModalDialog.Footer>
+                        <ActionRow>
+                          <ModalDialog.CloseButton variant="link">
+                            Close
+                          </ModalDialog.CloseButton>
+                          <Button
+                            onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
+                          >
+                            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+                          </Button>,
+                        </ActionRow>
+                      </ModalDialog.Footer>
+                    </ModalDialog>
                   </Col>
-                  <Col xs={5} className="text-left text-md-right pl-md-1">
-                    <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
-                      {intl.formatMessage(messages['library.access.add_admin'])}
+                )}
+                {user.access_level === LIBRARY_ACCESS.READ && (
+                  <Col xs={10} className="text-left text-md-right">
+                    <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
+                      {intl.formatMessage(messages['library.access.add_author'])}
                     </Button>
                   </Col>
-                </>
-              )}
-              {(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
-              <Col xs={2} className="text-right text-md-center">
-                <Button
-                  size="lg"
-                  variant="danger"
-                  onClick={() => setShowRemoveModal(true)}
-                  aria-label={
-                    intl.formatMessage(messages['library.access.remove_user'])
-                  }
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </Button>
-                <Modal
-                  open={showRemoveModal}
-                  title={intl.formatMessage(messages['library.access.modal.remove.title'])}
-                  onClose={() => setShowRemoveModal(false)}
-                  body={(
-                    <div>
-                      <p>
+                )}
+                {user.access_level === LIBRARY_ACCESS.AUTHOR && (
+                  <>
+                    <Col xs={5} className="text-left text-md-right pl-md-1">
+                      <Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
+                        {intl.formatMessage(messages['library.access.remove_author'])}
+                      </Button>
+                    </Col>
+                    <Col xs={5} className="text-left text-md-right pl-md-1">
+                      <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
+                        {intl.formatMessage(messages['library.access.add_admin'])}
+                      </Button>
+                    </Col>
+                  </>
+                )}
+                {(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
+                  <Col xs={2} className="text-right text-md-center">
+                    <Button
+                      size="lg"
+                      variant="danger"
+                      onClick={() => setShowRemoveModal(true)}
+                      aria-label={
+                        intl.formatMessage(messages['library.access.remove_user'])
+                      }
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </Button>
+                    <ModalDialog
+                      isOpen={showRemoveModal}
+                      onClose={() => setShowRemoveModal(false)}
+                    >
+
+                      <ModalDialog.Header>
+                        <ModalDialog.Title>
+                          {intl.formatMessage(messages['library.access.modal.remove.title'])}
+                        </ModalDialog.Title>
+                      </ModalDialog.Header>
+                      <ModalDialog.Body>
                         {intl.formatMessage(
                           messages['library.access.modal.remove.body'],
                           { library: library.title, email: user.email },
                         )}
-                      </p>
-                    </div>
-                    )}
-                  buttons={[
-                    <Button onClick={() => removeAccess()}>
-                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
-                    </Button>,
-                  ]}
-                />
-              </Col>
-              )}
-            </Row>
-          </Col>
+                      </ModalDialog.Body>
+                      <ModalDialog.Footer>
+                        <ActionRow>
+                          <ModalDialog.CloseButton variant="link">
+                            Close
+                          </ModalDialog.CloseButton>
+                          <Button onClick={() => removeAccess()}>
+                            {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
+                          </Button>,
+                        </ActionRow>
+                      </ModalDialog.Footer>
+                    </ModalDialog>
+                  </Col>
+                )}
+              </Row>
+            </Col>
           )}
         </Row>
       </Card.Body>