diff --git a/web/modals/unsaved-changes-modal.css b/web/modals/unsaved-changes-modal.css
index 7d3d7c9a1..455de07f9 100644
--- a/web/modals/unsaved-changes-modal.css
+++ b/web/modals/unsaved-changes-modal.css
@@ -1,27 +1,17 @@
 .unsavedChangesModalText {
   color: var(--unsaved-changes-modal-text-color);
   font-size: var(--l-font-18);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 50px;
-}
-
-.unsavedChangesModalButtons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-self: center;
-  align-items: stretch;
-  margin: 16px 64px 16px 0;
+  margin-bottom: 16px;
 }
 
 .unsavedChangesCloseModalButton {
   margin-left: 8px;
   padding: 10px 20px;
 }
 
 .unsavedChangesBackButton {
   padding: 10px 20px;
 }
diff --git a/web/modals/unsaved-changes-modal.react.js b/web/modals/unsaved-changes-modal.react.js
index fe33e4ef0..3de80e155 100644
--- a/web/modals/unsaved-changes-modal.react.js
+++ b/web/modals/unsaved-changes-modal.react.js
@@ -1,53 +1,68 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
 import Modal from './modal.react.js';
 import css from './unsaved-changes-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 
 function UnsavedChangesModal(): React.Node {
-  const modalName = '';
   const { popModal } = useModalContext();
 
   const onCloseModalClick = React.useCallback(() => {
     // Pop the unsaved changes modal and the modal that triggered it.
     popModal();
     popModal();
   }, [popModal]);
 
-  return (
-    <Modal
-      name={modalName}
-      onClose={popModal}
-      withCloseButton={false}
-      size="large"
-    >
-      <div className={css.unsavedChangesModalText}>
-        You have unsaved changes, are you sure you want to close the modal? You
-        will lose all your progress.
-      </div>
-      <div className={css.unsavedChangesModalButtons}>
-        <Button
-          variant="outline"
-          className={css.unsavedChangesBackButton}
-          onClick={popModal}
-        >
-          Back
-        </Button>
-        <Button
-          variant="filled"
-          className={css.unsavedChangesCloseModalButton}
-          buttonColor={buttonThemes.danger}
-          onClick={onCloseModalClick}
-        >
-          Close Modal
-        </Button>
-      </div>
-    </Modal>
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        className={css.unsavedChangesCloseModalButton}
+        buttonColor={buttonThemes.danger}
+        onClick={onCloseModalClick}
+      >
+        Close Modal
+      </Button>
+    ),
+    [onCloseModalClick],
   );
+
+  const secondaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="outline"
+        className={css.unsavedChangesBackButton}
+        onClick={popModal}
+      >
+        Back
+      </Button>
+    ),
+    [popModal],
+  );
+
+  const unsavedChangesModal = React.useMemo(
+    () => (
+      <Modal
+        onClose={popModal}
+        withCloseButton={false}
+        size="large"
+        primaryButton={primaryButton}
+        secondaryButton={secondaryButton}
+      >
+        <div className={css.unsavedChangesModalText}>
+          You have unsaved changes. Are you sure you want to close the modal?
+          You will lose all your progress.
+        </div>
+      </Modal>
+    ),
+    [popModal, primaryButton, secondaryButton],
+  );
+
+  return unsavedChangesModal;
 }
 
 export default UnsavedChangesModal;