diff --git a/frontend/src/api/backup.js b/frontend/src/api/backup.js
index 1957b2b16..da5e36711 100644
--- a/frontend/src/api/backup.js
+++ b/frontend/src/api/backup.js
@@ -18,8 +18,8 @@ export default {
     return response.data;
   },
 
-  async import(fileName) {
-    let response = await apiReq.post(backupURLs.importBackup(fileName));
+  async import(fileName, data) {
+    let response = await apiReq.post(backupURLs.importBackup(fileName), data);
     store.dispatch("requestRecentRecipes");
     return response;
   },
diff --git a/frontend/src/components/Settings/Backup/BackupCard.vue b/frontend/src/components/Settings/Backup/BackupCard.vue
index 0981819ff..c89d6915f 100644
--- a/frontend/src/components/Settings/Backup/BackupCard.vue
+++ b/frontend/src/components/Settings/Backup/BackupCard.vue
@@ -4,13 +4,15 @@
       :name="selectedName"
       :date="selectedDate"
       ref="import_dialog"
+      @import="importBackup"
+      @delete="deleteBackup"
     />
     <v-row>
       <v-col
         :sm="6"
         :md="6"
-        :lg="3"
-        :xl="3"
+        :lg="4"
+        :xl="4"
         v-for="backup in backups"
         :key="backup.name"
       >
@@ -24,7 +26,7 @@
                 <div>
                   <strong>{{ backup.name }}</strong>
                 </div>
-                <div>{{ backup.date }}</div>
+                <div>{{ readableTime(backup.date) }}</div>
               </v-col>
             </v-row>
           </v-card-text>
@@ -36,9 +38,11 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
+import api from "../../../api";
+import utils from "../../../utils";
 export default {
   props: {
-    backups: Object,
+    backups: Array,
   },
   components: {
     ImportDialog,
@@ -47,20 +51,37 @@ export default {
     return {
       selectedName: "",
       selectedDate: "",
-      // backups: [
-      //   { name: "Backup 1", date: " August 23rd" },
-      //   { name: "Backup 2", date: " August 24rd" },
-      //   { name: "Backup 3", date: " August 25rd" },
-      //   { name: "Backup 4", date: " August 25rd" },
-      // ],
+      loading: false,
     };
   },
   methods: {
     openDialog(backup) {
-      this.selectedDate = backup.date;
+      this.selectedDate = this.readableTime(backup.date);
       this.selectedName = backup.name;
       this.$refs.import_dialog.open();
     },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+    async importBackup(data) {
+      this.$emit("loading");
+      let response = await api.backups.import(data.name, data);
+
+      let failed = response.data.failed;
+      let succesful = response.data.successful;
+
+      this.$emit("finished", succesful, failed);
+    },
+    deleteBackup(data) {
+      this.$emit("loading");
+
+      api.backups.delete(data.name);
+      this.selectedBackup = null;
+      this.backupLoading = false;
+
+      this.$emit("finished");
+    },
   },
 };
 </script>
diff --git a/frontend/src/components/Settings/Backup/ImportDialog.vue b/frontend/src/components/Settings/Backup/ImportDialog.vue
index 90e9c6242..9edc575c2 100644
--- a/frontend/src/components/Settings/Backup/ImportDialog.vue
+++ b/frontend/src/components/Settings/Backup/ImportDialog.vue
@@ -13,19 +13,22 @@
                 class="mb-n4 mt-1"
                 dense
                 label="Import Recipes"
+                v-model="importRecipes"
               ></v-checkbox>
               <v-checkbox
                 class="my-n4"
                 dense
                 label="Import Themes"
+                v-model="importThemes"
               ></v-checkbox>
               <v-checkbox
                 class="my-n4"
                 dense
                 label="Import Settings"
+                v-model="importSettings"
               ></v-checkbox>
             </v-col>
-            <v-col>
+            <!-- <v-col>
               <v-tooltip top>
                 <template v-slot:activator="{ on, attrs }">
                   <span v-on="on" v-bind="attrs">
@@ -33,6 +36,7 @@
                       class="mb-n4 mt-1"
                       dense
                       label="Force"
+                      v-model="forceImport"
                     ></v-checkbox>
                   </span>
                 </template>
@@ -45,6 +49,7 @@
                       class="mb-n4 mt-1"
                       dense
                       label="Rebase"
+                      v-model="rebaseImport"
                     ></v-checkbox>
                   </span>
                 </template>
@@ -53,26 +58,29 @@
                   backup</span
                 >
               </v-tooltip>
-            </v-col>
+            </v-col> -->
           </v-row>
         </v-card-text>
 
         <v-divider></v-divider>
 
         <v-card-actions>
-          <v-btn color="success" text @click="dialog = false"> Download </v-btn>
+          <v-btn disabled color="success" text @click="raiseEvent('download')">
+            Download
+          </v-btn>
           <v-spacer></v-spacer>
-          <v-btn color="error" text @click="dialog = false"> Delete </v-btn>
-          <v-btn color="success" text @click="dialog = false"> Import </v-btn>
+          <v-btn color="error" text @click="raiseEvent('delete')">
+            Delete
+          </v-btn>
+          <v-btn color="success" text @click="raiseEvent('import')">
+            Import
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
-<script>
-export default {};
-</script>
 
 <script>
 export default {
@@ -87,12 +95,32 @@ export default {
   data() {
     return {
       dialog: false,
+      importRecipes: true,
+      forceImport: false,
+      rebaseImport: false,
+      importThemes: false,
+      importSettings: false,
     };
   },
   methods: {
     open() {
       this.dialog = true;
     },
+    close() {
+      this.dialog = false;
+    },
+    raiseEvent(event) {
+      let eventData = {
+        name: this.name,
+        recipes: this.importRecipes,
+        force: this.forceImport,
+        rebase: this.rebaseImport,
+        themes: this.importThemes,
+        settings: this.importSettings,
+      };
+      this.close();
+      this.$emit(event, eventData);
+    },
   },
 };
 </script>
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index 1917dccfd..73c9ebf6f 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -31,32 +31,11 @@
           </v-btn>
         </v-col>
       </v-row>
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-form ref="form">
-            <v-combobox
-              auto-select-first
-              label="Select a Backup for Import"
-              :items="availableBackups"
-              v-model="selectedBackup"
-              :rules="[(v) => !!v || 'Backup Selection is Required']"
-              required
-            ></v-combobox>
-          </v-form>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="3" lg="2">
-          <v-btn block color="accent" @click="importBackup">
-            Import Backup
-          </v-btn>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2" lg="2">
-          <v-btn block color="error" @click="deleteBackup">
-            Delete Backup
-          </v-btn>
-        </v-col>
-      </v-row>
-      <BackupCard :backups="availableBackups" />
+      <BackupCard
+        @loading="backupLoading = true"
+        @finished="processFinished"
+        :backups="availableBackups"
+      />
       <SuccessFailureAlert
         success-header="Successfully Imported"
         :success="successfulImports"
@@ -98,18 +77,6 @@ export default {
       this.availableBackups = response.imports;
       this.availableTemplates = response.templates;
     },
-    async importBackup() {
-      if (this.$refs.form.validate()) {
-        this.backupLoading = true;
-
-        let response = await api.backups.import(this.selectedBackup);
-        console.log(response.data);
-        this.failedImports = response.data.failed;
-        this.successfulImports = response.data.successful;
-
-        this.backupLoading = false;
-      }
-    },
     deleteBackup() {
       if (this.$refs.form.validate()) {
         this.backupLoading = true;
@@ -132,6 +99,12 @@ export default {
         this.backupLoading = false;
       }
     },
+    processFinished(successful = null, failed = null) {
+      this.getAvailableBackups();
+      this.backupLoading = false;
+      this.successfulImports = successful;
+      this.failedImports = failed;
+    },
   },
 };
 </script>