diff --git a/dev/dev-notes.md b/dev/dev-notes.md
index e7dfbe0d8..efa32af75 100644
--- a/dev/dev-notes.md
+++ b/dev/dev-notes.md
@@ -20,6 +20,7 @@ Documentation
 - [ ] V0.1.0 Release Notes
 - [ ] Nextcloud Migration How To
 - [ ] New Docker Setup with Sqlite
+- [ ] Update Env Variables
 - [ ] New Roadmap / Milestones
 
 Frontend
diff --git a/frontend/src/components/Settings/Backup/BackupCard.vue b/frontend/src/components/Settings/Backup/BackupCard.vue
new file mode 100644
index 000000000..0981819ff
--- /dev/null
+++ b/frontend/src/components/Settings/Backup/BackupCard.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <ImportDialog
+      :name="selectedName"
+      :date="selectedDate"
+      ref="import_dialog"
+    />
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="3"
+        :xl="3"
+        v-for="backup in backups"
+        :key="backup.name"
+      >
+        <v-card @click="openDialog(backup)">
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="12" sm="2">
+                <v-icon color="primary"> mdi-backup-restore </v-icon>
+              </v-col>
+              <v-col cols="12" sm="10">
+                <div>
+                  <strong>{{ backup.name }}</strong>
+                </div>
+                <div>{{ backup.date }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import ImportDialog from "./ImportDialog";
+export default {
+  props: {
+    backups: Object,
+  },
+  components: {
+    ImportDialog,
+  },
+  data() {
+    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" },
+      // ],
+    };
+  },
+  methods: {
+    openDialog(backup) {
+      this.selectedDate = backup.date;
+      this.selectedName = backup.name;
+      this.$refs.import_dialog.open();
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/Backup/ImportDialog.vue b/frontend/src/components/Settings/Backup/ImportDialog.vue
new file mode 100644
index 000000000..90e9c6242
--- /dev/null
+++ b/frontend/src/components/Settings/Backup/ImportDialog.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-card-title> {{ name }} </v-card-title>
+        <v-card-subtitle class="mb-n3"> {{ date }} </v-card-subtitle>
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-checkbox
+                class="mb-n4 mt-1"
+                dense
+                label="Import Recipes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                label="Import Themes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                label="Import Settings"
+              ></v-checkbox>
+            </v-col>
+            <v-col>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Force"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span>Force update existing recipes</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Rebase"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span
+                  >Removes all recipes, and then imports recipes from the
+                  backup</span
+                >
+              </v-tooltip>
+            </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-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-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<script>
+export default {
+  props: {
+    name: {
+      default: "Backup Name",
+    },
+    date: {
+      default: "Backup Date",
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index b609d2c80..1917dccfd 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -26,7 +26,7 @@
           ></v-combobox>
         </v-col>
         <v-col dense cols="12" sm="12" md="2">
-          <v-btn block color="accent" @click="createBackup" width="165">
+          <v-btn block text color="accent" @click="createBackup" width="165">
             Backup Recipes
           </v-btn>
         </v-col>
@@ -56,6 +56,7 @@
           </v-btn>
         </v-col>
       </v-row>
+      <BackupCard :backups="availableBackups" />
       <SuccessFailureAlert
         success-header="Successfully Imported"
         :success="successfulImports"
@@ -69,10 +70,12 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import BackupCard from "./BackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
+    BackupCard,
   },
   data() {
     return {
diff --git a/mealie/data/db/mealie.sqlite b/mealie/data/db/mealie.sqlite
index 825847d36..fba967d48 100644
Binary files a/mealie/data/db/mealie.sqlite and b/mealie/data/db/mealie.sqlite differ