diff --git a/apps/home/static/home/js/tabs/filters.js b/apps/home/static/home/js/tabs/filters.js
index 166f131..5c4649e 100644
--- a/apps/home/static/home/js/tabs/filters.js
+++ b/apps/home/static/home/js/tabs/filters.js
@@ -78,51 +78,88 @@ $(filterModalId).find(".modal-del-btn").on("click", async function() {
     const filter = $(filterTableId).DataTable().row((idx, row) => { return row.id === id }).data();
     const name = sanitise(filter.name);
 
-    await confirmationModal(
-        `Delete a Content Filter`,
-        `Do you wish to permanently delete <b>${name}</b>?`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            await ajaxRequest(`/api/filters/${filter.id}/`, "DELETE");
-            setTimeout(async () => {
-                $(filterTableId).trigger("doDataLoad");
-                await loadSubModalOptions(
-                    $(subModalId).find('[data-field="filters"]'),
-                    `/api/filters/?server=${selectedServer.id}`
-                );
-            }, 600);
-        },
-        () => { $(filterModalId).modal("show") }
-    );
-})
+    const deleteFilter = async () => {
+        await ajaxRequest(`/api/filters/${filter.id}/`, "DELETE");
+        setTimeout(async () => {
+            $(filterTableId).trigger("doDataLoad");
+            await loadSubModalOptions(
+                $(subModalId).find('[data-field="filters"]'),
+                `/api/filters/?server=${selectedServer.id}`
+            );
+        }, 600);
+    }
+
+    createModal({
+        title: "Delete a Content Filter",
+        texts: [
+            {
+                content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
+                html: true
+            },
+            { content: "This action is irreversible, you will lose this filter forever." }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteFilter,
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true,
+                onClick: async () => $(filterModalId).modal("show")
+            }
+        ]
+    });
+});
 
 getTableFiltersComponent(filterTableId).find(".table-del-btn").on("click", async function() {
     const rows = getSelectedTableRows(filterTableId);
     const isMany = rows.length > 1;
     const names = rows.map(row => row.name);
-    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
-    
-    await confirmationModal(
-        `Delete ${isMany ? "Many Content Filters" : "a Content Filter"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> content filter${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            rows.forEach(async row => {
-                await ajaxRequest(`/api/filters/${row.id}/`, "DELETE");
-            });
-    
-            setTimeout(async () => {
-                $(filterTableId).trigger("doDataLoad");
-                await loadSubModalOptions(
-                    $(subModalId).find('[data-field="filters"]'),
-                    `/api/filters/?server=${selectedServer.id}`
-                );
-            }, 600);
-        },
-        null
-    )
+
+    const deleteFilters = async () => {
+        rows.forEach(async row => {
+            await ajaxRequest(`/api/filters/${row.id}/`, "DELETE");
+        });
+
+        setTimeout(async () => {
+            $(filterTableId).trigger("doDataLoad");
+            await loadSubModalOptions(
+                $(subModalId).find('[data-field="filters"]'),
+                `/api/filters/?server=${selectedServer.id}`
+            );
+        }, 600);
+    }
+
+    createModal({
+        title: `Delete ${isMany ? "Many Content Filters" : "Content Filter"}`,
+        texts: [
+            {
+                content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} content filter${isMany ? "s" : ""}?</p>`,
+                html: true
+            },
+            {
+                content: arrayToHtmlList(names, true).prop("outerHTML"),
+                html: true
+            }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteFilters
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    });
 });
 
 
diff --git a/apps/home/static/home/js/tabs/styles.js b/apps/home/static/home/js/tabs/styles.js
index 2fef73a..3af2b4c 100644
--- a/apps/home/static/home/js/tabs/styles.js
+++ b/apps/home/static/home/js/tabs/styles.js
@@ -123,23 +123,41 @@ $(styleModalId).find(".modal-del-btn").on("click", async function() {
     const style = $(styleTableId).DataTable().row((idx, row) => { return row.id === id }).data();
     const name = sanitise(style.name);
 
-    await confirmationModal(
-        `Delete a Message Style`,
-        `Do you wish to permanently delete <b>${name}</b>?`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            await ajaxRequest(`/api/message-styles/${style.id}/`, "DELETE");
-            setTimeout(async () => {
-                $(styleTableId).trigger("doDataLoad");
-                await loadSubModalOptions(
-                    $(subModalId).find('[data-field="message_style"]'),
-                    `/api/message-styles/?server=${selectedServer.id}`
-                );
-            }, 600);
-        },
-        () => { $(styleModalId).modal("show") }
-    );
+    const deleteStyle = async () => {
+        await ajaxRequest(`/api/message-styles/${style.id}/`, "DELETE");
+        setTimeout(async () => {
+            $(styleTableId).trigger("doDataLoad");
+            await loadSubModalOptions(
+                $(subModalId).find('[data-field="message_style"]'),
+                `/api/message-styles/?server=${selectedServer.id}`
+            );
+        }, 600);
+    }
+
+    createModal({
+        title: "Delete a Message Style",
+        texts: [
+            {
+                content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
+                html: true
+            },
+            { content: "This action is irreversible, you will lose this filter forever." }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteStyle,
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true,
+                onClick: async () => $(styleModalId).modal("show")
+            }
+        ]
+    });
 });
 
 getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async function() {
@@ -151,39 +169,68 @@ getTableFiltersComponent(styleTableId).find(".table-del-btn").on("click", async
             continue;
         }
 
-        await okModal(
-            "Cannot Delete Style",
-            `<b>${row.name}</b> can't be deleted, as it was created by the system, and thus is immutable.`,
-            "warning",
-            "bi-arrow-return-right",
-            null,
-        );
+        createModal({
+            title: "Cannot Delete Style",
+            texts: [
+                {
+                    content: `<p><b>${sanitise(row.name)}</b> can't be deleted, as it was created by the system.</p>`,
+                    html: true
+                },
+                { content: "System-owned styles cannot be modified or deleted." },
+            ],
+            buttons: [
+                {
+                    className: "btn-warning px-4",
+                    iconClass: "bi-arrow-return-right",
+                    closeModal: true
+                }
+            ]
+        });
         return
     }
 
     const names = rows.map(row => row.name);
-    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
-    
-    await confirmationModal(
-        `Delete ${isMany ? "Many Message Styles" : "a Message Style"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> message style${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            rows.forEach(async row => {
-                await ajaxRequest(`/api/message-styles/${row.id}/`, "DELETE");
-            });
-    
-            setTimeout(async () => {
-                $(styleTableId).trigger("doDataLoad");
-                await loadSubModalOptions(
-                    $(subModalId).find('[data-field="message_style"]'),
-                    `/api/message-styles/?server=${selectedServer.id}`
-                );
-            }, 600);
-        },
-        null
-    )
+
+    const deleteStyles = async () => {
+        rows.forEach(async row => {
+            await ajaxRequest(`/api/message-styles/${row.id}/`, "DELETE");
+        });
+
+        setTimeout(async () => {
+            $(styleTableId).trigger("doDataLoad");
+            await loadSubModalOptions(
+                $(subModalId).find('[data-field="message_style"]'),
+                `/api/message-styles/?server=${selectedServer.id}`
+            );
+        }, 600);
+    }
+
+    createModal({
+        title: `Delete ${isMany ? "Many Message Styles" : "Message Style"}`,
+        texts: [
+            {
+                content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} message style${isMany ? "s" : ""}?</p>`,
+                html: true
+            },
+            {
+                content: arrayToHtmlList(names, true).prop("outerHTML"),
+                html: true
+            }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteStyles
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    });
 });
 
 
diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index fb334b8..2bdf984 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -124,40 +124,76 @@ $(subModalId).find(".modal-del-btn").on("click", async function() {
     const subscription = $(subTableId).DataTable().row((idx, row) => { return row.id === id }).data();
     const name = sanitise(subscription.name);
 
-    await confirmationModal(
-        `Delete a Subscription`,
-        `Do you wish to permanently delete <b>${name}</b>?`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            await ajaxRequest(`/api/subscriptions/${subscription.id}/`, "DELETE");
-            setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
-        },
-        () => { $(subModalId).modal("show") }
-    );
+    const deleteSubscription = async () => {
+        await ajaxRequest(`/api/subscriptions/${subscription.id}/`, "DELETE");
+        setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
+    }
+
+    createModal({
+        title: "Delete a Subscriptions",
+        texts: [
+            {
+                content: `<span>Do you wish to permanently delete <b>${name}</b>?</span>`,
+                html: true
+            },
+            { content: "This action is irreversible, you will lose this subscription forever." }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteSubscription,
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true,
+                onClick: async () => $(subModalId).modal("show")
+            }
+        ]
+    });
 })
 
 getTableFiltersComponent(subTableId).find(".table-del-btn").on("click", async function() {
     const rows = getSelectedTableRows(subTableId);
-
     const names = rows.map(row => row.name);
-    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
     const isMany = names.length > 1;
-    
-    await confirmationModal(
-        `Delete ${isMany ? "Many Subscriptions" : "a Subscription"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> subscription${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
-        "bi-trash3",
-        async () => {
-            rows.forEach(async row => {
-                await ajaxRequest(`/api/subscriptions/${row.id}/`, "DELETE");
-            });
-    
-            setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
-        },
-        null
-    )
+
+    const deleteSubscriptions = () => {
+        rows.forEach(async row => {
+            await ajaxRequest(`/api/subscriptions/${row.id}/`, "DELETE");
+        });
+
+        setTimeout(() => { $(subTableId).trigger("doDataLoad") }, 600);
+    }
+
+    createModal({
+        title: `Delete ${isMany ? "Many Subscriptions" : "Subscription"}`,
+        texts: [
+            {
+                content: `<p>Do you wish to permanently delete ${isMany ? "these" : "these"} subscription${isMany ? "s" : ""}?</p>`,
+                html: true
+            },
+            {
+                content: arrayToHtmlList(names, true).prop("outerHTML"),
+                html: true
+            }
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: deleteSubscriptions
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    });
 });