diff --git a/CHANGELOG.md b/CHANGELOG.md
index f708d1831..adb22b0b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 - Create build script for GitHub pages with GitHub actions to allow for custom building
   [#1203](https://github.com/nextcloud/cookbook/pull/1203) @christianlupus
 - Added a new client and badges to the readme @TheMBeat
+- Replace native alert and confirm dialogs with custom ones from nextcloud vue
+  [#1261](https://github.com/nextcloud/cookbook/pull/1261) @MarcelRobitaille
 
 ### Fixed
 - Added new public page styling in preparation for NC25
diff --git a/package-lock.json b/package-lock.json
index 6d3278147..edc12dfce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "vue": "^2.6.11",
         "vue-i18n": "^8.17.1",
         "vue-material-design-icons": "^5.1.2",
+        "vue-modal-dialogs": "3.0.0",
         "vue-router": "^3.1.6",
         "vue-showdown": "^2.4.1",
         "vuex": "^3.1.3"
@@ -9848,6 +9849,11 @@
       "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
       "integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
     },
+    "node_modules/vue-modal-dialogs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-modal-dialogs/-/vue-modal-dialogs-3.0.0.tgz",
+      "integrity": "sha512-52x3DR3mfDLV0yubhoyiXuljRVNpu5EjHAWoKXPIqpVNx3E8DEs4mbXmDYP6xPIlIYfFiYN2aAlEhoMgXkjrBg=="
+    },
     "node_modules/vue-multiselect": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
@@ -18317,6 +18323,11 @@
       "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
       "integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
     },
+    "vue-modal-dialogs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-modal-dialogs/-/vue-modal-dialogs-3.0.0.tgz",
+      "integrity": "sha512-52x3DR3mfDLV0yubhoyiXuljRVNpu5EjHAWoKXPIqpVNx3E8DEs4mbXmDYP6xPIlIYfFiYN2aAlEhoMgXkjrBg=="
+    },
     "vue-multiselect": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
diff --git a/package.json b/package.json
index 93814d1da..d6698f38a 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "vue": "^2.6.11",
     "vue-i18n": "^8.17.1",
     "vue-material-design-icons": "^5.1.2",
+    "vue-modal-dialogs": "3.0.0",
     "vue-router": "^3.1.6",
     "vue-showdown": "^2.4.1",
     "vuex": "^3.1.3"
diff --git a/src/components/AppControls/AppControls.vue b/src/components/AppControls/AppControls.vue
index 9603c42cd..cc634c6f3 100644
--- a/src/components/AppControls/AppControls.vue
+++ b/src/components/AppControls/AppControls.vue
@@ -153,8 +153,6 @@
 </template>
 
 <script>
-import helpers from "cookbook/js/helper"
-
 import Actions from "@nextcloud/vue/dist/Components/Actions"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 // Cannot use `Button` else get `vue/no-reserved-component-names` eslint errors
@@ -166,6 +164,12 @@ import LoadingIcon from "icons/Loading.vue"
 import CheckmarkIcon from "icons/Check.vue"
 import PrinterIcon from "icons/Printer.vue"
 
+import helpers from "cookbook/js/helper"
+import {
+    showSimpleAlertModal,
+    showSimpleConfirmModal,
+} from "cookbook/js/modals"
+
 import Location from "./Location.vue"
 import ModeIndicator from "./ModeIndicator.vue"
 
@@ -254,29 +258,28 @@ export default {
         },
     },
     methods: {
-        deleteRecipe() {
+        async deleteRecipe() {
             // Confirm delete
             if (
-                // eslint-disable-next-line no-alert
-                !window.confirm(
+                !(await showSimpleConfirmModal(
                     // prettier-ignore
-                    t("cookbook","Are you sure you want to delete this recipe?")
-                )
+                    t("cookbook", "Are you sure you want to delete this recipe?")
+                ))
             ) {
                 return
             }
-            this.$store
-                .dispatch("deleteRecipe", { id: this.$store.state.recipe.id })
-                .then(() => {
-                    helpers.goTo("/")
-                })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Delete failed"))
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
+
+            try {
+                await this.$store.dispatch("deleteRecipe", {
+                    id: this.$store.state.recipe.id,
                 })
+                helpers.goTo("/")
+            } catch (e) {
+                await showSimpleAlertModal(t("cookbook", "Delete failed"))
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            }
         },
         printRecipe() {
             window.print()
diff --git a/src/components/AppMain.vue b/src/components/AppMain.vue
index 2b893a7df..2a1356b86 100644
--- a/src/components/AppMain.vue
+++ b/src/components/AppMain.vue
@@ -15,6 +15,7 @@
                 @click="closeNavigation"
             />
         </AppContent>
+        <dialogs-wrapper></dialogs-wrapper>
     </Content>
 </template>
 
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index c4a4ba1c6..4037744f3 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -119,6 +119,7 @@ import Vue from "vue"
 
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
+import { showSimpleAlertModal } from "cookbook/js/modals"
 
 import AppSettings from "./AppSettings.vue"
 import AppNavigationCaption from "./AppNavigationCaption.vue"
@@ -185,7 +186,7 @@ export default {
         /**
          * Opens a category
          */
-        categoryOpen(idx) {
+        async categoryOpen(idx) {
             if (
                 !this.categories[idx].recipes.length ||
                 this.categories[idx].recipes[0].id
@@ -197,36 +198,31 @@ export default {
             const $this = this
             Vue.set(this.isCategoryUpdating, idx, true)
 
-            api.recipes
-                .allInCategory(cat.name)
-                .then((response) => {
-                    cat.recipes = response.data
-                })
-                .catch((e) => {
-                    cat.recipes = []
-                    // eslint-disable-next-line no-alert
-                    alert(
-                        // prettier-ignore
-                        t("cookbook","Failed to load category {category} recipes",
-                            {
-                                category: cat.name,
-                            }
-                        )
+            try {
+                const response = await api.recipes.allInCategory(cat.name)
+                cat.recipes = response.data
+            } catch (e) {
+                cat.recipes = []
+                await showSimpleAlertModal(
+                    // prettier-ignore
+                    t("cookbook", "Failed to load category {category} recipes",
+                        {
+                            category: cat.name,
+                        }
                     )
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
-                })
-                .then(() => {
-                    // finally
-                    Vue.set($this.isCategoryUpdating, idx, false)
-                })
+                )
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            } finally {
+                Vue.set($this.isCategoryUpdating, idx, false)
+            }
         },
 
         /**
          * Updates the name of a category
          */
-        categoryUpdateName(idx, newName) {
+        async categoryUpdateName(idx, newName) {
             if (!this.categories[idx]) {
                 return
             }
@@ -234,161 +230,139 @@ export default {
             const oldName = this.categories[idx].name
             const $this = this
 
-            this.$store
-                .dispatch("updateCategoryName", {
+            try {
+                await this.$store.dispatch("updateCategoryName", {
                     categoryNames: [oldName, newName],
                 })
-                .then(() => {
-                    $this.categories[idx].name = newName
-                    $this.$root.$emit("categoryRenamed", [newName, oldName])
-                })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(
-                        // prettier-ignore
-                        t("cookbook",'Failed to update name of category "{category}"',
-                            {
-                                category: oldName,
-                            }
-                        )
+                $this.categories[idx].name = newName
+                $this.$root.$emit("categoryRenamed", [newName, oldName])
+            } catch (e) {
+                await showSimpleAlertModal(
+                    // prettier-ignore
+                    t("cookbook",'Failed to update name of category "{category}"',
+                        {
+                            category: oldName,
+                        }
                     )
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
-                })
-                .then(() => {
-                    // finally
-                    Vue.set($this.isCategoryUpdating, idx, false)
-                })
+                )
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            } finally {
+                Vue.set($this.isCategoryUpdating, idx, false)
+            }
         },
 
         /**
          * Download and import the recipe at given URL
          */
-        downloadRecipe(e) {
+        async downloadRecipe(e) {
             this.downloading = true
             const $this = this
-            api.recipes
-                .import(e.target[1].value)
-                .then((response) => {
-                    const recipe = response.data
-                    $this.downloading = false
-                    helpers.goTo(`/recipe/${recipe.id}`)
-                    // Refresh left navigation pane to display changes
-                    $this.$store.dispatch("setAppNavigationRefreshRequired", {
-                        isRequired: true,
-                    })
+            try {
+                const response = await api.recipes.import(e.target[1].value)
+                const recipe = response.data
+                $this.downloading = false
+                helpers.goTo(`/recipe/${recipe.id}`)
+                // Refresh left navigation pane to display changes
+                $this.$store.dispatch("setAppNavigationRefreshRequired", {
+                    isRequired: true,
                 })
-                .catch((e2) => {
-                    $this.downloading = false
+            } catch (e2) {
+                $this.downloading = false
 
-                    if (e2.response) {
-                        if (
-                            e2.response.status >= 400 &&
-                            e2.response.status < 500
-                        ) {
-                            if (e2.response.status === 409) {
-                                // There was a recipe found with the same name
+                if (e2.response) {
+                    if (e2.response.status >= 400 && e2.response.status < 500) {
+                        if (e2.response.status === 409) {
+                            // There was a recipe found with the same name
 
-                                // eslint-disable-next-line no-alert
-                                alert(e2.response.data.msg)
-                            } else {
-                                // eslint-disable-next-line no-alert
-                                alert(e2.response.data)
-                            }
+                            await showSimpleAlertModal(e2.response.data.msg)
                         } else {
-                            // eslint-disable-next-line no-console
-                            console.error(e2)
-                            // eslint-disable-next-line no-alert
-                            alert(
-                                // prettier-ignore
-                                t("cookbook","The server reported an error. Please check.")
-                            )
+                            await showSimpleAlertModal(e2.response.data)
                         }
                     } else {
                         // eslint-disable-next-line no-console
                         console.error(e2)
-                        // eslint-disable-next-line no-alert
-                        alert(
+                        await showSimpleAlertModal(
                             // prettier-ignore
-                            t("cookbook", "Could not query the server. This might be a network problem.")
+                            t("cookbook","The server reported an error. Please check.")
                         )
                     }
-                })
+                } else {
+                    // eslint-disable-next-line no-console
+                    console.error(e2)
+                    await showSimpleAlertModal(
+                        // prettier-ignore
+                        t("cookbook", "Could not query the server. This might be a network problem.")
+                    )
+                }
+            }
         },
 
         /**
          * Fetch and display recipe categories
          */
-        getCategories() {
+        async getCategories() {
             const $this = this
             this.loading.categories = true
-            api.categories
-                .getAll()
-                .then((response) => {
-                    const json = response.data || []
-                    // Reset the old values
-                    $this.uncatRecipes = 0
-                    $this.categories = []
-                    $this.isCategoryUpdating = []
+            try {
+                const response = await api.categories.getAll()
+                const json = response.data || []
+                // Reset the old values
+                $this.uncatRecipes = 0
+                $this.categories = []
+                $this.isCategoryUpdating = []
 
-                    for (let i = 0; i < json.length; i++) {
-                        if (json[i].name === "*") {
-                            $this.uncatRecipes = parseInt(
-                                json[i].recipe_count,
-                                10
+                for (let i = 0; i < json.length; i++) {
+                    if (json[i].name === "*") {
+                        $this.uncatRecipes = parseInt(json[i].recipe_count, 10)
+                    } else {
+                        $this.categories.push({
+                            name: json[i].name,
+                            recipeCount: parseInt(json[i].recipe_count, 10),
+                            recipes: [
+                                {
+                                    id: 0,
+                                    // prettier-ignore
+                                    name: t("cookbook","Loading category recipes …"),
+                                },
+                            ],
+                        })
+                        $this.isCategoryUpdating.push(false)
+                    }
+                }
+                $this.$nextTick(() => {
+                    for (let i = 0; i < $this.categories.length; i++) {
+                        // Reload recipes in open categories
+                        if (!$this.$refs[`app-navi-cat-${i}`]) {
+                            // eslint-disable-next-line no-continue
+                            continue
+                        }
+                        if ($this.$refs[`app-navi-cat-${i}`][0].opened) {
+                            // eslint-disable-next-line no-console
+                            console.log(
+                                `Reloading recipes in ${
+                                    $this.$refs[`app-navi-cat-${i}`][0].title
+                                }`
                             )
-                        } else {
-                            $this.categories.push({
-                                name: json[i].name,
-                                recipeCount: parseInt(json[i].recipe_count, 10),
-                                recipes: [
-                                    {
-                                        id: 0,
-                                        // prettier-ignore
-                                        name: t("cookbook","Loading category recipes …"),
-                                    },
-                                ],
-                            })
-                            $this.isCategoryUpdating.push(false)
+                            $this.categoryOpen(i)
                         }
                     }
-                    $this.$nextTick(() => {
-                        for (let i = 0; i < $this.categories.length; i++) {
-                            // Reload recipes in open categories
-                            if (!$this.$refs[`app-navi-cat-${i}`]) {
-                                // eslint-disable-next-line no-continue
-                                continue
-                            }
-                            if ($this.$refs[`app-navi-cat-${i}`][0].opened) {
-                                // eslint-disable-next-line no-console
-                                console.log(
-                                    `Reloading recipes in ${
-                                        $this.$refs[`app-navi-cat-${i}`][0]
-                                            .title
-                                    }`
-                                )
-                                $this.categoryOpen(i)
-                            }
-                        }
-                        // Refreshing component data has been finished
-                        $this.$store.dispatch(
-                            "setAppNavigationRefreshRequired",
-                            { isRequired: false }
-                        )
+                    // Refreshing component data has been finished
+                    $this.$store.dispatch("setAppNavigationRefreshRequired", {
+                        isRequired: false,
                     })
                 })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Failed to fetch categories"))
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
-                })
-                .then(() => {
-                    // finally
-                    $this.loading.categories = false
-                })
+            } catch (e) {
+                await showSimpleAlertModal(
+                    t("cookbook", "Failed to fetch categories")
+                )
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            } finally {
+                $this.loading.categories = false
+            }
         },
 
         /**
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index fb5badf99..ab7e221e4 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -73,6 +73,7 @@ import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationSettings"
 
 import api from "cookbook/js/api-interface"
+import { showSimpleAlertModal } from "cookbook/js/modals"
 
 export default {
     name: "AppSettings",
@@ -100,26 +101,23 @@ export default {
         }
     },
     watch: {
-        printImage(newVal, oldVal) {
+        async printImage(newVal, oldVal) {
             // Avoid infinite loop on page load and when reseting value after failed submit
             if (this.resetPrintImage) {
                 this.resetPrintImage = false
                 return
             }
-            api.config.printImage
-                .update(newVal)
-                .then(() => {
-                    // Should this check the response of the query? To catch some errors that redirect the page
-                })
-                .catch(() => {
-                    // eslint-disable-next-line no-alert
-                    alert(
-                        // prettier-ignore
-                        t("cookbook","Could not set preference for image printing")
-                    )
-                    this.resetPrintImage = true
-                    this.printImage = oldVal
-                })
+            try {
+                api.config.printImage.update(newVal)
+                // Should this check the response of the query? To catch some errors that redirect the page
+            } catch {
+                await showSimpleAlertModal(
+                    // prettier-ignore
+                    t("cookbook","Could not set preference for image printing")
+                )
+                this.resetPrintImage = true
+                this.printImage = oldVal
+            }
         },
         // eslint-disable-next-line no-unused-vars
         showTagCloudInRecipeList(newVal, oldVal) {
@@ -127,30 +125,27 @@ export default {
                 showTagCloud: newVal,
             })
         },
-        updateInterval(newVal, oldVal) {
+        async updateInterval(newVal, oldVal) {
             // Avoid infinite loop on page load and when reseting value after failed submit
             if (this.resetInterval) {
                 this.resetInterval = false
                 return
             }
-            api.config.updateInterval
-                .update(newVal)
-                .then(() => {
-                    // Should this check the response of the query? To catch some errors that redirect the page
-                })
-                .catch(() => {
-                    // eslint-disable-next-line no-alert
-                    alert(
-                        // prettier-ignore
-                        t("cookbook","Could not set recipe update interval to {interval}",
-                            {
-                                interval: newVal,
-                            }
-                        )
+            try {
+                await api.config.updateInterval.update(newVal)
+                // Should this check the response of the query? To catch some errors that redirect the page
+            } catch {
+                await showSimpleAlertModal(
+                    // prettier-ignore
+                    t("cookbook","Could not set recipe update interval to {interval}",
+                        {
+                            interval: newVal,
+                        }
                     )
-                    this.resetInterval = true
-                    this.updateInterval = oldVal
-                })
+                )
+                this.resetInterval = true
+                this.updateInterval = oldVal
+            }
         },
     },
     mounted() {
@@ -173,17 +168,16 @@ export default {
                                 $this.$router.push("/")
                             }
                         })
-                        .catch(() => {
-                            // eslint-disable-next-line no-alert
-                            alert(
+                        .catch(() =>
+                            showSimpleAlertModal(
                                 // prettier-ignore
                                 t("cookbook","Could not set recipe folder to {path}",
-                                    {
-                                        path
-                                    }
-                                )
+                                {
+                                    path
+                                }
                             )
-                        })
+                            )
+                        )
                 },
                 false,
                 ["httpd/unix-directory"],
@@ -194,27 +188,26 @@ export default {
         /**
          * Initial setup
          */
-        setup() {
-            api.config
-                .get()
-                .then((response) => {
-                    const config = response.data
-                    this.resetPrintImage = false
-                    if (config) {
-                        this.printImage = config.print_image
-                        this.showTagCloudInRecipeList =
-                            this.$store.state.localSettings.showTagCloudInRecipeList
-                        this.updateInterval = config.update_interval
-                        this.recipeFolder = config.folder
-                    } else {
-                        // eslint-disable-next-line no-alert
-                        alert(t("cookbook", "Loading config failed"))
-                    }
-                })
-                .catch(() => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Loading config failed"))
-                })
+        async setup() {
+            try {
+                const response = await api.config.get()
+                const config = response.data
+                this.resetPrintImage = false
+
+                if (!config) {
+                    throw new Error()
+                }
+
+                this.printImage = config.print_image
+                this.showTagCloudInRecipeList =
+                    this.$store.state.localSettings.showTagCloudInRecipeList
+                this.updateInterval = config.update_interval
+                this.recipeFolder = config.folder
+            } catch {
+                await showSimpleAlertModal(
+                    t("cookbook", "Loading config failed")
+                )
+            }
         },
     },
 }
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index a2401893b..e345343c0 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -122,12 +122,16 @@
 <script>
 import Vue from "vue"
 
+import Actions from "@nextcloud/vue/dist/Components/Actions"
+import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
+
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
 import NumericIcon from "icons/Numeric.vue"
-
-import Actions from "@nextcloud/vue/dist/Components/Actions"
-import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
+import {
+    showSimpleAlertModal,
+    showSimpleConfirmModal,
+} from "cookbook/js/modals"
 
 import EditImageField from "./EditImageField.vue"
 import EditInputField from "./EditInputField.vue"
@@ -136,6 +140,9 @@ import EditMultiselect from "./EditMultiselect.vue"
 import EditMultiselectInputGroup from "./EditMultiselectInputGroup.vue"
 import EditTimeField from "./EditTimeField.vue"
 
+// prettier-ignore
+const CONFIRM_MSG = t("cookbook", "You have unsaved changes! Do you still want to leave?")
+
 export default {
     name: "RecipeEdit",
     components: {
@@ -178,11 +185,14 @@ export default {
      * This can also be used to confirm that the user wants to leave the page
      * if there are unsaved changes.
      */
-    beforeRouteLeave(to, from, next) {
+    async beforeRouteLeave(to, from, next) {
         // beforeRouteLeave is called when the static route changes.
         // Cancel the navigation, if the form has unsaved edits and the user did not
         // confirm leave. This prevents accidentally losing changes
-        if (this.confirmStayInEditedForm()) {
+        if (
+            this.isNavigationDangerous &&
+            !(await showSimpleConfirmModal(CONFIRM_MSG))
+        ) {
             next(false)
         } else {
             // We have to check if the target component stays the same and reload.
@@ -345,6 +355,11 @@ export default {
             }
             return r
         },
+
+        // Whether navigation would lose data, etc.
+        isNavigationDangerous() {
+            return !this.savingRecipe && this.formDirty
+        },
     },
     watch: {
         prepTime: {
@@ -454,82 +469,68 @@ export default {
             this.recipe[field].splice(index, 0, content)
         },
         beforeWindowUnload(e) {
-            if (this.confirmStayInEditedForm()) {
+            // We cannot use our fancy modal here because `beforeunload` does not wait for promises to resolve
+            // However, we can avoid `window.confirm` by using `e.returnValue`
+            if (this.isNavigationDangerous) {
                 // Cancel the window unload event
                 e.preventDefault()
-                e.returnValue = ""
+                e.returnValue = CONFIRM_MSG
             }
         },
-        confirmLeavingPage() {
-            // eslint-disable-next-line no-alert
-            return window.confirm(
-                // prettier-ignore
-                t("cookbook", "You have unsaved changes! Do you still want to leave?")
-            )
-        },
-        confirmStayInEditedForm() {
-            return (
-                !this.savingRecipe &&
-                this.formDirty &&
-                !this.confirmLeavingPage()
-            )
-        },
         deleteEntry(field, index) {
             this.recipe[field].splice(index, 1)
         },
         /**
          * Fetch and display recipe categories
          */
-        fetchCategories() {
+        async fetchCategories() {
             const $this = this
-            api.categories
-                .getAll()
-                .then((response) => {
-                    const json = response.data || []
-                    $this.allCategories = []
-                    for (let i = 0; i < json.length; i++) {
-                        if (json[i].name !== "*") {
-                            $this.allCategories.push(json[i].name)
-                        }
+            try {
+                const response = await api.categories.getAll()
+                const json = response.data || []
+                $this.allCategories = []
+                for (let i = 0; i < json.length; i++) {
+                    if (json[i].name !== "*") {
+                        $this.allCategories.push(json[i].name)
                     }
-                    $this.isFetchingCategories = false
-                })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Failed to fetch categories"))
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
-                })
+                }
+                $this.isFetchingCategories = false
+            } catch (e) {
+                await showSimpleAlertModal(
+                    t("cookbook", "Failed to fetch categories")
+                )
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            }
         },
         /**
          * Fetch and display recipe keywords
          */
-        fetchKeywords() {
+        async fetchKeywords() {
             const $this = this
-            api.keywords
-                .getAll()
-                .then((response) => {
-                    const json = response.data || []
-                    if (json) {
-                        $this.allKeywords = []
-                        for (let i = 0; i < json.length; i++) {
-                            if (json[i].name !== "*") {
-                                $this.allKeywords.push(json[i].name)
-                            }
+            try {
+                const response = await api.keywords.getAll()
+                const json = response.data || []
+                if (json) {
+                    $this.allKeywords = []
+                    for (let i = 0; i < json.length; i++) {
+                        if (json[i].name !== "*") {
+                            $this.allKeywords.push(json[i].name)
                         }
                     }
-                    $this.isFetchingKeywords = false
-                })
-                .catch((e) => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Failed to fetch keywords"))
-                    if (e && e instanceof Error) {
-                        throw e
-                    }
-                })
+                }
+                $this.isFetchingKeywords = false
+            } catch (e) {
+                await showSimpleAlertModal(
+                    t("cookbook", "Failed to fetch keywords")
+                )
+                if (e && e instanceof Error) {
+                    throw e
+                }
+            }
         },
-        loadRecipeData() {
+        async loadRecipeData() {
             if (!this.$store.state.recipe) {
                 // Make the control row show that a recipe is loading
                 this.$store.dispatch("setLoadingRecipe", {
@@ -545,29 +546,28 @@ export default {
                 })
             }
             const $this = this
-            api.recipes
-                .get(this.$route.params.id)
-                .then((response) => {
-                    const recipe = response.data
-                    $this.$store.dispatch("setRecipe", { recipe })
-                    $this.setup()
-                })
-                .catch(() => {
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Loading recipe failed"))
-                    // Disable loading indicator
-                    if ($this.$store.state.loadingRecipe) {
-                        $this.$store.dispatch("setLoadingRecipe", { recipe: 0 })
-                    } else if ($this.$store.state.reloadingRecipe) {
-                        $this.$store.dispatch("setReloadingRecipe", {
-                            recipe: 0,
-                        })
-                    }
-                    // Browse to new recipe creation
-                    helpers.goTo("/recipe/create")
-                })
+            try {
+                const response = await api.recipes.get(this.$route.params.id)
+                const recipe = response.data
+                $this.$store.dispatch("setRecipe", { recipe })
+                $this.setup()
+            } catch {
+                await showSimpleAlertModal(
+                    t("cookbook", "Loading recipe failed")
+                )
+                // Disable loading indicator
+                if ($this.$store.state.loadingRecipe) {
+                    $this.$store.dispatch("setLoadingRecipe", { recipe: 0 })
+                } else if ($this.$store.state.reloadingRecipe) {
+                    $this.$store.dispatch("setReloadingRecipe", {
+                        recipe: 0,
+                    })
+                }
+                // Browse to new recipe creation
+                helpers.goTo("/recipe/create")
+            }
         },
-        save() {
+        async save() {
             this.savingRecipe = true
             this.$store.dispatch("setSavingRecipe", { saving: true })
             const $this = this
@@ -583,56 +583,47 @@ export default {
                 })
             })()
 
-            request
-                .then((response) => {
-                    helpers.goTo(`/recipe/${response.data}`)
-                })
-                .catch((e) => {
-                    // error
-
-                    if (e.response) {
-                        // Non 2xx state returned
+            try {
+                const response = await request
+                helpers.goTo(`/recipe/${response.data}`)
+            } catch (e) {
+                if (e.response) {
+                    // Non 2xx state returned
 
-                        switch (e.response.status) {
-                            case 409:
-                            case 422:
-                                // eslint-disable-next-line no-alert
-                                alert(e.response.data.msg)
-                                break
+                    switch (e.response.status) {
+                        case 409:
+                        case 422:
+                            await showSimpleAlertModal(e.response.data.msg)
+                            break
 
-                            default:
-                                // eslint-disable-next-line no-alert
-                                alert(
-                                    // prettier-ignore
-                                    t("cookbook","Unknown answer returned from server. See logs.")
-                                )
-                                // eslint-disable-next-line no-console
-                                console.log(e.response)
-                        }
-                    } else if (e.request) {
-                        // eslint-disable-next-line no-alert
-                        alert(
-                            t("cookbook", "No answer for request was received.")
-                        )
-                        // eslint-disable-next-line no-console
-                        console.log(e)
-                    } else {
-                        // eslint-disable-next-line no-alert
-                        alert(
-                            // prettier-ignore
-                            t("cookbook","Could not start request to save recipe.")
-                        )
-                        // eslint-disable-next-line no-console
-                        console.log(e)
+                        default:
+                            await showSimpleAlertModal(
+                                // prettier-ignore
+                                t("cookbook","Unknown answer returned from server. See logs.")
+                            )
+                            // eslint-disable-next-line no-console
+                            console.log(e.response)
                     }
+                } else if (e.request) {
+                    await showSimpleAlertModal(
+                        t("cookbook", "No answer for request was received.")
+                    )
+                    // eslint-disable-next-line no-console
+                    console.log(e)
+                } else {
+                    await showSimpleAlertModal(
+                        // prettier-ignore
+                        t("cookbook","Could not start request to save recipe.")
+                    )
+                    // eslint-disable-next-line no-console
+                    console.log(e)
+                }
+            } finally {
+                $this.$store.dispatch("setSavingRecipe", {
+                    saving: false,
                 })
-                .then(() => {
-                    // finally
-                    $this.$store.dispatch("setSavingRecipe", {
-                        saving: false,
-                    })
-                    $this.savingRecipe = false
-                })
+                $this.savingRecipe = false
+            }
         },
         setup() {
             this.fetchCategories()
diff --git a/src/components/RecipeTimer.vue b/src/components/RecipeTimer.vue
index 8d35712a7..d5316ebab 100644
--- a/src/components/RecipeTimer.vue
+++ b/src/components/RecipeTimer.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { showSimpleAlertModal } from "cookbook/js/modals"
+
 export default {
     name: "RecipeTimer",
     props: {
@@ -65,13 +67,11 @@ export default {
     methods: {
         onTimerEnd() {
             window.clearInterval(this.countdown)
-            // I'll just use an alert until this functionality is finished
             const $this = this
-            window.setTimeout(() => {
+            window.setTimeout(async () => {
                 // The short timeout is needed or Vue doesn't have time to update the countdown
                 //  display to display 00:00:00
-                // eslint-disable-next-line no-alert
-                alert(t("cookbook", "Cooking time is up!"))
+                await showSimpleAlertModal(t("cookbook", "Cooking time is up!"))
                 // cookbook.notify(t('cookbook', 'Cooking time is up!'))
                 $this.countdown = null
                 $this.showFullTime = false
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index 9d877c625..7ffc449d5 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -259,6 +259,7 @@ import moment from "@nextcloud/moment"
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
 import normalizeMarkdown from "cookbook/js/title-rename"
+import { showSimpleAlertModal } from "cookbook/js/modals"
 
 import RecipeImages from "./RecipeImages.vue"
 import RecipeIngredient from "./RecipeIngredient.vue"
@@ -551,7 +552,7 @@ export default {
             }
             return date
         },
-        setup() {
+        async setup() {
             // Make the control row show that a recipe is loading
             if (!this.$store.state.recipe) {
                 this.$store.dispatch("setLoadingRecipe", { recipe: -1 })
@@ -574,34 +575,33 @@ export default {
 
             const $this = this
 
-            api.recipes
-                .get(this.$route.params.id)
-                .then((response) => {
-                    const recipe = response.data
-                    // Store recipe data in vuex
-                    $this.$store.dispatch("setRecipe", { recipe })
-
-                    // Always set the active page last!
-                    $this.$store.dispatch("setPage", { page: "recipe" })
-                })
-                .catch(() => {
-                    if ($this.$store.state.loadingRecipe) {
-                        // Reset loading recipe
-                        $this.$store.dispatch("setLoadingRecipe", { recipe: 0 })
-                    }
+            try {
+                const response = await api.recipes.get(this.$route.params.id)
+                const recipe = response.data
+                // Store recipe data in vuex
+                $this.$store.dispatch("setRecipe", { recipe })
+
+                // Always set the active page last!
+                $this.$store.dispatch("setPage", { page: "recipe" })
+            } catch {
+                if ($this.$store.state.loadingRecipe) {
+                    // Reset loading recipe
+                    $this.$store.dispatch("setLoadingRecipe", { recipe: 0 })
+                }
 
-                    if ($this.$store.state.reloadingRecipe) {
-                        // Reset reloading recipe
-                        $this.$store.dispatch("setReloadingRecipe", {
-                            recipe: 0,
-                        })
-                    }
+                if ($this.$store.state.reloadingRecipe) {
+                    // Reset reloading recipe
+                    $this.$store.dispatch("setReloadingRecipe", {
+                        recipe: 0,
+                    })
+                }
 
-                    $this.$store.dispatch("setPage", { page: "recipe" })
+                $this.$store.dispatch("setPage", { page: "recipe" })
 
-                    // eslint-disable-next-line no-alert
-                    alert(t("cookbook", "Loading recipe failed"))
-                })
+                await showSimpleAlertModal(
+                    t("cookbook", "Loading recipe failed")
+                )
+            }
         },
     },
 }
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 034cc1ad6..5af56426d 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -7,6 +7,7 @@
 <script>
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
+import { showSimpleAlertModal } from "cookbook/js/modals"
 
 import RecipeList from "./RecipeList.vue"
 
@@ -53,7 +54,7 @@ export default {
         })
     },
     methods: {
-        setup() {
+        async setup() {
             // TODO: This is a mess of different implementation styles, needs cleanup
             if (this.query === "name") {
                 // Search by name
@@ -62,66 +63,61 @@ export default {
                 // Search by tags
                 const $this = this
                 const tags = this.$route.params.value
-                api.recipes
-                    .allWithTag(tags)
-                    .then((response) => {
-                        $this.results = response.data
-                    })
-                    .catch((e) => {
-                        $this.results = []
-                        // eslint-disable-next-line no-alert
-                        alert(
-                            // prettier-ignore
-                            t("cookbook","Failed to load recipes with keywords: {tags}",
-                                {
-                                    tags
-                                }
-                            )
+                try {
+                    const response = await api.recipes.allWithTag(tags)
+                    $this.results = response.data
+                } catch (e) {
+                    $this.results = []
+                    await showSimpleAlertModal(
+                        // prettier-ignore
+                        t("cookbook", "Failed to load recipes with keywords: {tags}",
+                            {
+                                tags,
+                            }
                         )
-                        if (e && e instanceof Error) {
-                            throw e
-                        }
-                    })
+                    )
+                    if (e && e instanceof Error) {
+                        throw e
+                    }
+                }
             } else if (this.query === "cat") {
                 // Search by category
                 const $this = this
                 const cat = this.$route.params.value
-                api.recipes
-                    .allInCategory(cat)
-                    .then((response) => {
-                        $this.results = response.data
-                    })
-                    .catch((e) => {
-                        $this.results = []
-                        // eslint-disable-next-line no-alert
-                        alert(
-                            // prettier-ignore
-                            t("cookbook","Failed to load category {category} recipes",
-                                {
-                                    category: cat,
-                                }
-                            )
+                try {
+                    const response = await api.recipes.allInCategory(cat)
+                    $this.results = response.data
+                } catch (e) {
+                    $this.results = []
+                    await showSimpleAlertModal(
+                        // prettier-ignore
+                        t("cookbook", "Failed to load category {category} recipes",
+                            {
+                                category: cat,
+                            }
                         )
-                        if (e && e instanceof Error) {
-                            throw e
-                        }
-                    })
+                    )
+                    if (e && e instanceof Error) {
+                        throw e
+                    }
+                }
             } else {
                 // General search
                 const $this = this
-                api.recipes
-                    .search($this.$route.params.value)
-                    .then((response) => {
-                        $this.results = response.data
-                    })
-                    .catch((e) => {
-                        $this.results = []
-                        // eslint-disable-next-line no-alert
-                        alert(t("cookbook", "Failed to load search results"))
-                        if (e && e instanceof Error) {
-                            throw e
-                        }
-                    })
+                try {
+                    const response = api.recipes.search(
+                        $this.$route.params.value
+                    )
+                    $this.results = response.data
+                } catch (e) {
+                    $this.results = []
+                    await showSimpleAlertModal(
+                        t("cookbook", "Failed to load search results")
+                    )
+                    if (e && e instanceof Error) {
+                        throw e
+                    }
+                }
                 this.$store.dispatch("setPage", { page: "search" })
             }
             this.$store.dispatch("setPage", { page: "search" })
diff --git a/src/components/SimpleAlertModal.vue b/src/components/SimpleAlertModal.vue
new file mode 100644
index 000000000..4351fc9c3
--- /dev/null
+++ b/src/components/SimpleAlertModal.vue
@@ -0,0 +1,43 @@
+<template>
+    <Modal :title="title" @close="$close">
+        <div class="modal__wrapper">
+            <div class="modal__content">{{ content }}</div>
+            <div class="modal__button-bar">
+                <NcButton type="primary" @click="$close">{{
+                    t("cookbook", "Dismiss")
+                }}</NcButton>
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import Modal from "@nextcloud/vue/dist/Components/Modal"
+import NcButton from "@nextcloud/vue/dist/Components/Button"
+
+export default {
+    name: "SimpleAlertModal",
+    components: {
+        Modal,
+        NcButton,
+    },
+}
+</script>
+
+<style scoped>
+.modal__wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 25px;
+    gap: 25px;
+}
+
+.modal__content {
+    text-align: center;
+}
+
+.modal__button-bar {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
diff --git a/src/components/SimpleConfirmModal.vue b/src/components/SimpleConfirmModal.vue
new file mode 100644
index 000000000..2ed40ff7b
--- /dev/null
+++ b/src/components/SimpleConfirmModal.vue
@@ -0,0 +1,47 @@
+<template>
+    <Modal :title="title" @close="$close(false)">
+        <div class="modal__wrapper">
+            <div class="modal__content">{{ content }}</div>
+            <div class="modal__button-bar">
+                <NcButton @click="$close(false)">{{
+                    t("cookbook", "Cancel")
+                }}</NcButton>
+                <NcButton type="primary" @click="$close(true)">{{
+                    t("cookbook", "OK")
+                }}</NcButton>
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import Modal from "@nextcloud/vue/dist/Components/Modal"
+import NcButton from "@nextcloud/vue/dist/Components/Button"
+
+export default {
+    name: "SimpleConfirmModal",
+    components: {
+        Modal,
+        NcButton,
+    },
+}
+</script>
+
+<style scoped>
+.modal__wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 25px;
+    gap: 25px;
+}
+
+.modal__content {
+    text-align: center;
+}
+
+.modal__button-bar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 15px;
+}
+</style>
diff --git a/src/js/helper.js b/src/js/helper.js
index 8f2a45f96..a8a1a1a15 100644
--- a/src/js/helper.js
+++ b/src/js/helper.js
@@ -1,3 +1,5 @@
+import { showSimpleAlertModal } from "cookbook/js/modals"
+
 // Check if two routes point to the same component but have different content
 function shouldReloadContent(url1, url2) {
     if (url1 === url2) {
@@ -141,8 +143,7 @@ function notify(title, options) {
                 // eslint-disable-next-line no-unused-vars
                 const notification = new Notification(title, options)
             } else {
-                // eslint-disable-next-line no-alert
-                alert(title)
+                showSimpleAlertModal(title)
             }
         })
     }
diff --git a/src/js/modals.js b/src/js/modals.js
new file mode 100644
index 000000000..ae9569223
--- /dev/null
+++ b/src/js/modals.js
@@ -0,0 +1,11 @@
+import { create } from "vue-modal-dialogs"
+
+import SimpleAlertModal from "../components/SimpleAlertModal.vue"
+import SimpleConfirmModal from "../components/SimpleConfirmModal.vue"
+
+export const showSimpleAlertModal = create(SimpleAlertModal, "content", "title")
+export const showSimpleConfirmModal = create(
+    SimpleConfirmModal,
+    "content",
+    "title"
+)
diff --git a/src/main.js b/src/main.js
index bf72c48b1..e47631af1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,8 @@ import VueShowdown from "vue-showdown"
 
 import Vue from "vue"
 
+import * as ModalDialogs from "vue-modal-dialogs"
+
 import helpers from "cookbook/js/helper"
 
 import router from "./router"
@@ -46,6 +48,10 @@ Vue.use(VueShowdown, {
     flavor: "vanilla",
 })
 
+// TODO: Equivalent library for Vue3 when we make that transition:
+// https://github.com/rlemaigre/vue3-promise-dialog
+Vue.use(ModalDialogs)
+
 // Pass translation engine to Vue
 Vue.prototype.t = window.t