diff --git a/web/modals/unsaved-changes-modal.css b/web/modals/unsaved-changes-modal.css
--- a/web/modals/unsaved-changes-modal.css
+++ b/web/modals/unsaved-changes-modal.css
@@ -4,17 +4,7 @@
   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 {
diff --git a/web/modals/unsaved-changes-modal.react.js b/web/modals/unsaved-changes-modal.react.js
--- a/web/modals/unsaved-changes-modal.react.js
+++ b/web/modals/unsaved-changes-modal.react.js
@@ -9,7 +9,6 @@
 import Button, { buttonThemes } from '../components/button.react.js';
 
 function UnsavedChangesModal(): React.Node {
-  const modalName = '';
   const { popModal } = useModalContext();
 
   const onCloseModalClick = React.useCallback(() => {
@@ -18,36 +17,52 @@
     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;