diff --git a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
index 834b2b1969..6a6a5a8060 100644
--- a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
@@ -6,8 +6,10 @@
     Input,
     Heading,
     Body,
+    Modal,
   } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CreateRestoreModal from "./CreateRestoreModal.svelte"
   import { createEventDispatcher } from "svelte"
   import download from "downloadjs"
   import { backups } from "stores/portal"
@@ -19,12 +21,14 @@
   let updateDialog
   let name
   let restoreBackupName
+  let restoreBackupModal
 
   const dispatch = createEventDispatcher()
 
-  const onClickRestore = () => {
+  const onClickRestore = name => {
     dispatch("buttonclick", {
       type: "backupRestore",
+      name,
       backupId: row._id,
       restoreBackupName,
     })
@@ -68,6 +72,10 @@
   </ActionMenu>
 </div>
 
+<Modal bind:this={restoreBackupModal}>
+  <CreateRestoreModal confirm={name => onClickRestore(name)} />
+</Modal>
+
 <ConfirmDialog
   bind:this={deleteDialog}
   okText="Delete Backup"
@@ -81,8 +89,8 @@
 
 <ConfirmDialog
   bind:this={restoreDialog}
-  okText="Restore Backup"
-  onOk={onClickRestore}
+  okText="Continue"
+  onOk={restoreBackupModal?.show}
   title="Confirm Restore"
   warning={false}
 >
diff --git a/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte b/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte
new file mode 100644
index 0000000000..3c554563da
--- /dev/null
+++ b/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { ModalContent, Input, Body } from "@budibase/bbui"
+
+  export let confirm
+
+  let name
+</script>
+
+<ModalContent
+  onConfirm={() => confirm(name)}
+  title="Backup your current version"
+  confirmText="Confirm Restore"
+>
+  <Body size="S"
+    >Create a backup of your current app to allow you to roll back after
+    restoring this backup</Body
+  >
+  <Input label="Backup name" bind:value={name} />
+</ModalContent>
+
+<style>
+</style>
diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js
index 82fb9533d8..85df0eab1e 100644
--- a/packages/frontend-core/src/api/backups.js
+++ b/packages/frontend-core/src/api/backups.js
@@ -40,9 +40,10 @@ export const buildBackupsEndpoints = API => ({
     })
   },
 
-  restoreBackup: async ({ appId, backupId }) => {
+  restoreBackup: async ({ appId, backupId, name }) => {
     return await API.post({
       url: `/api/apps/${appId}/backups/${backupId}/import`,
+      body: { name },
     })
   },
 
diff --git a/packages/types/src/documents/app/backup.ts b/packages/types/src/documents/app/backup.ts
index 520013a8bb..9179852331 100644
--- a/packages/types/src/documents/app/backup.ts
+++ b/packages/types/src/documents/app/backup.ts
@@ -59,6 +59,7 @@ export interface AppBackupQueueData {
   }
   import?: {
     backupId: string
+    nameForBackup: string
     createdBy?: string
   }
 }
