diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index df2580f27..c08c6d34c 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -13,9 +13,11 @@ import { useStore } from '~/store'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useLogger from '~/composables/useLogger'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
+
 import Input from '~/components/ui/Input.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
@@ -412,13 +414,9 @@ fetchOwnedApps()
           <dangerous-button
             :class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']"
             :action="submitPassword"
+            :title="t('components.auth.Settings.modal.changePassword.header')"
           >
             {{ t('components.auth.Settings.button.password') }}
-            <template #modal-header>
-              <p>
-                {{ t('components.auth.Settings.modal.changePassword.header') }}
-              </p>
-            </template>
             <template #modal-content>
               <div>
                 <p>
@@ -558,22 +556,14 @@ fetchOwnedApps()
                 <dangerous-button
                   :class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
                   @confirm="revokeApp(app.client_id)"
+                  :title="t('components.auth.Settings.modal.revokeApp.header', {app: app.name})"
                 >
                   {{ t('components.auth.Settings.button.revoke') }}
-                  <template #modal-header>
-                    <p>
-                      {{ t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
-                    </p>
-                  </template>
                   <template #modal-content>
-                    <p>
-                      {{ t('components.auth.Settings.modal.revokeApp.content.warning') }}
-                    </p>
+                    {{ t('components.auth.Settings.modal.revokeApp.content.warning') }}
                   </template>
                   <template #modal-confirm>
-                    <div>
-                      {{ t('components.auth.Settings.button.revokeAccess') }}
-                    </div>
+                    {{ t('components.auth.Settings.button.revokeAccess') }}
                   </template>
                 </dangerous-button>
               </td>
@@ -648,29 +638,20 @@ fetchOwnedApps()
                 >
                   {{ t('components.auth.Settings.button.edit') }}
                 </Link>
-                <Button
-                  color="destructive"
+                <DangerousButton
                   :is-loading="isDeleting.has(app.client_id)"
                   class="tiny"
                   @confirm="deleteApp(app.client_id)"
+                  :title="t('components.auth.Settings.modal.deleteApp.header', {app: app.name})"
                 >
                   {{ t('components.auth.Settings.button.remove') }}
-                  <template #modal-header>
-                    <p>
-                      {{ t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
-                    </p>
-                  </template>
                   <template #modal-content>
-                    <p>
-                      {{ t('components.auth.Settings.modal.deleteApp.content.warning') }}
-                    </p>
+                    {{ t('components.auth.Settings.modal.deleteApp.content.warning') }}
                   </template>
                   <template #modal-confirm>
-                    <div>
-                      {{ t('components.auth.Settings.button.removeApp') }}
-                    </div>
+                    {{ t('components.auth.Settings.button.removeApp') }}
                   </template>
-                </Button>
+                </DangerousButton>
               </td>
             </tr>
           </tbody>
@@ -804,26 +785,18 @@ fetchOwnedApps()
             />
           </div>
           <dangerous-button
-            :class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']"
+            :is-loading="isDeletingAccount"
+            :disabled="!deleteAccountPassword || undefined"
+            :class="{danger: deleteAccountPassword}"
             :action="deleteAccount"
+            :title="t('components.auth.Settings.modal.deleteAccount.header')"
           >
             {{ t('components.auth.Settings.button.deleteAccount') }}
-            <template #modal-header>
-              <p>
-                {{ t('components.auth.Settings.modal.deleteAccount.header') }}
-              </p>
-            </template>
             <template #modal-content>
-              <div>
-                <p>
-                  {{ t('components.auth.Settings.modal.deleteAccount.content.warning') }}
-                </p>
-              </div>
+              {{ t('components.auth.Settings.modal.deleteAccount.content.warning') }}
             </template>
             <template #modal-confirm>
-              <div>
-                {{ t('components.auth.Settings.button.deleteAccountConfirm') }}
-              </div>
+              {{ t('components.auth.Settings.button.deleteAccountConfirm') }}
             </template>
           </dangerous-button>
         </Layout>
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index 2f0c7a11c..292e7c1a1 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -6,6 +6,8 @@ import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 import PasswordInput from '~/components/forms/PasswordInput.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
@@ -147,29 +149,20 @@ fetchToken()
           :default-show="showToken"
         />
       </div>
-      <Button
+      <DangerousButton
         v-if="token"
-        destructive
         :is-loading="isLoading"
         :action="requestNewToken"
+        :title="t('components.auth.SubsonicTokenForm.modal.newPassword.header')"
       >
         {{ t('components.auth.SubsonicTokenForm.button.newPassword') }}
-        <template #modal-header>
-          <p>
-            {{ t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
-          </p>
-        </template>
         <template #modal-content>
-          <p>
-            {{ t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
-          </p>
+          {{ t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
         </template>
         <template #modal-confirm>
-          <div>
-            {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
-          </div>
+          {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
         </template>
-      </Button>
+      </DangerousButton>
       <Button
         primary
         v-else
@@ -178,30 +171,20 @@ fetchToken()
       >
         {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
       </Button>
-      <Button
-        primary
+      <DangerousButton
         v-if="token"
         :is-loading="isLoading"
-        color="destructive"
         :action="disable"
+        :title="t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header')"
       >
         {{ t('components.auth.SubsonicTokenForm.button.disable') }}
-        <template #modal-header>
-          <p>
-            {{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
-          </p>
-        </template>
         <template #modal-content>
-          <p>
-            {{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
-          </p>
+          {{ t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
         </template>
         <template #modal-confirm>
-          <div>
-            {{ t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
-          </div>
+          {{ t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
         </template>
-      </Button>
+      </DangerousButton>
     </template>
   </form>
 </template>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 8ae5a5138..f8ef6aa16 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -4,6 +4,8 @@ import type { BackendError } from '~/types'
 import { ref, computed, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 import axios from 'axios'
 
 interface Action {
@@ -203,33 +205,26 @@ const launchAction = async () => {
                 <div class="field">
                   <dangerous-button
                     v-if="selectAll || currentAction?.isDangerous"
-                    :class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
+                    :disabled="checked.length === 0 || undefined"
+                    :isLoading="isLoading"
                     :confirm-color="currentAction?.confirmColor ?? 'success'"
                     :aria-label="labels.performAction"
                     @confirm="launchAction"
+                    :title="t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount)"
                   >
                     {{ t('components.common.ActionTable.button.go') }}
-                    <template #modal-header>
-                      <p>
-                        <span key="1">
-                          {{ t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount) }}
-                        </span>
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <p>
-                        <template v-if="currentAction?.confirmationMessage">
-                          {{ currentAction?.confirmationMessage }}
-                        </template>
-                        <span v-else>
-                          {{ t('components.common.ActionTable.modal.performAction.content.warning') }}
-                        </span>
-                      </p>
+                      <template v-if="currentAction?.confirmationMessage">
+                        {{ currentAction?.confirmationMessage }}
+                      </template>
+                      <span v-else>
+                        {{ t('components.common.ActionTable.modal.performAction.content.warning') }}
+                      </span>
                     </template>
                     <template #modal-confirm>
-                      <div :aria-label="labels.performAction">
+                      <span :aria-label="labels.performAction">
                         {{ t('components.common.ActionTable.button.launch') }}
-                      </div>
+                      </span>
                     </template>
                   </dangerous-button>
                   <button
diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
index fb6fee03b..bc690de57 100644
--- a/front/src/components/common/DangerousButton.vue
+++ b/front/src/components/common/DangerousButton.vue
@@ -2,27 +2,23 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SemanticModal from '~/components/semantic/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Modal from '~/components/ui/Modal.vue'
 
 interface Events {
   (e: 'confirm'): void
 }
 
-interface Props {
-  action?: () => void
-  disabled?: boolean
-  confirmColor?: 'destructive' | 'primary'
-}
+// Note that properties such as [disabled] and 'destructive' | 'primary' are inherited.
+const props = defineProps<{
+  title?: string
+  action?: () => void,
+  confirmColor?:'success' | 'danger'
+}>()
 
 const { t } = useI18n()
 
 const emit = defineEmits<Events>()
-const props = withDefaults(defineProps<Props>(), {
-  action: () => undefined,      // -> Button.onClick prop
-  disabled: false,              // -> Pure html/css. Just add attribute `disabled` and the button is inert.
-  confirmColor: 'destructive'
-})
 
 const showModal = ref(false)
 
@@ -36,22 +32,16 @@ const confirm = () => {
 <template>
   <Button
     destructive
-    :class="{ 'is-disabled': disabled }"
-    :disabled="disabled"
     @click.prevent.stop="showModal = true"
   >
     <slot />
 
-    <SemanticModal
-      v-model:show="showModal"
-      :title="t('components.common.DangerousButton.header.confirm')"
-      class="small"
+    <Modal
+      destructive
+      v-model="showModal"
+      :title="title || t('components.common.DangerousButton.header.confirm')"
+      :cancel="t('components.common.DangerousButton.button.cancel')"
     >
-      <h4 class="header">
-        <slot name="modal-header">
-          {{ t('components.common.DangerousButton.header.confirm') }}
-        </slot>
-      </h4>
       <div class="scrolling content">
         <div class="description">
           <slot name="modal-content" />
@@ -59,14 +49,7 @@ const confirm = () => {
       </div>
       <template #actions>
         <Button
-          secondary
-          outline
-          @click="showModal = false"
-        >
-          {{ t('components.common.DangerousButton.button.cancel') }}
-        </Button>
-        <Button
-          :color="confirmColor"
+          v-bind="{[{success: 'primary', danger: 'destructive'}[confirmColor || 'success']]: true}"
           @click="confirm"
         >
           <slot name="modal-confirm">
@@ -74,6 +57,6 @@ const confirm = () => {
           </slot>
         </Button>
       </template>
-    </SemanticModal>
+    </Modal>
   </Button>
 </template>
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index 7b534c7f5..1233362a4 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -334,26 +334,16 @@ const alertProps = computed(() => {
       <!--TODO: Make Dangerous Button hand through isLoading prop -->
       <dangerous-button
         v-if="canDelete"
-        :class="['ui', {loading: isLoading}, 'basic danger button']"
+        :isLoading="isLoading"
         :action="remove"
+        :title="t('components.library.EditCard.modal.delete.header')"
       >
         {{ t('components.library.EditCard.button.delete') }}
-        <template #modal-header>
-          <p>
-            {{ t('components.library.EditCard.modal.delete.header') }}
-          </p>
-        </template>
         <template #modal-content>
-          <div>
-            <p>
-              {{ t('components.library.EditCard.modal.content.warning') }}
-            </p>
-          </div>
+          {{ t('components.library.EditCard.modal.content.warning') }}
         </template>
         <template #modal-confirm>
-          <p>
-            {{ t('components.library.EditCard.button.delete') }}
-          </p>
+          {{ t('components.library.EditCard.button.delete') }}
         </template>
       </dangerous-button>
     </template>
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index b4dae5ddb..7cb3d930c 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -7,6 +7,8 @@ import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Events {
   (e: 'save', data: InstancePolicy): void
   (e: 'delete'): void
@@ -238,24 +240,16 @@ const remove = async () => {
     </button>
     <dangerous-button
       v-if="object"
-      class="ui right floated basic danger button"
+      style="float: right;"
       @confirm="remove"
+      :title="t('components.manage.moderation.InstancePolicyForm.modal.delete.header')"
     >
       {{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
-      <template #modal-header>
-        <p>
-          {{ t('components.manage.moderation.InstancePolicyForm.modal.delete.header') }}
-        </p>
-      </template>
       <template #modal-content>
-        <p>
-          {{ t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
-        </p>
+        {{ t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
       </template>
       <template #modal-confirm>
-        <div>
-          {{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
-        </div>
+        {{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
       </template>
     </dangerous-button>
   </form>
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
index 9f02b4603..c37ff473f 100644
--- a/front/src/components/manage/moderation/NotesThread.vue
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -5,11 +5,12 @@ import { useMarkdownRaw } from '~/composables/useMarkdown'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Events {
   (e: 'deleted', uuid: string): void
 }
@@ -64,27 +65,19 @@ const remove = async (note: Note) => {
         </div>
         <div class="meta">
           <dangerous-button
-            :class="['ui', {loading: isLoading}, 'basic borderless mini button']"
+            :is-loading="isLoading"
+            low-height
             @confirm="remove(note)"
+            icon="bi-trash"
+            :title="t('components.manage.moderation.NotesThread.modal.delete.header')"
           >
-            <i class="trash icon" />
             {{ t('components.manage.moderation.NotesThread.button.delete') }}
-            <template #modal-header>
-              <p>
-                {{ t('components.manage.moderation.NotesThread.modal.delete.header') }}
-              </p>
-            </template>
+
             <template #modal-content>
-              <div>
-                <p>
-                  {{ t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
-                </p>
-              </div>
+              {{ t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
             </template>
             <template #modal-confirm>
-              <p>
-                {{ t('components.manage.moderation.NotesThread.button.delete') }}
-              </p>
+              {{ t('components.manage.moderation.NotesThread.button.delete') }}
             </template>
           </dangerous-button>
         </div>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index 3c3c64858..d3c892348 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -11,6 +11,7 @@ import InstancePolicyModal from '~/components/manage/moderation/InstancePolicyMo
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import NotesThread from '~/components/manage/moderation/NotesThread.vue'
 import NoteForm from '~/components/manage/moderation/NoteForm.vue'
+import DangerousButton from '~/components/common/DangerousButton.vue'
 
 import useReportConfigs from '~/composables/moderation/useReportConfigs'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -446,21 +447,17 @@ const handleRemovedNote = (uuid: string) => {
             >
               <dangerous-button
                 v-if="action.dangerous && action.show(obj)"
-                :class="['ui', {loading: isLoading}, 'button']"
+                :is-loading="isLoading"
                 :action="action.handler"
+                :title="action.modalHeader"
+                :icon="`${action.iconColor} ${action.icon}`"
               >
-                <i :class="[action.iconColor, action.icon, 'icon']" />&nbsp;
                 {{ action.label }}
-                <template #modal-header>
-                  <p>{{ action.modalHeader }}</p>
-                </template>
                 <template #modal-content>
-                  <div>
-                    <p>{{ action.modalContent }}</p>
-                  </div>
+                  {{ action.modalContent }}
                 </template>
                 <template #modal-confirm>
-                  <p>{{ action.modalConfirmLabel }}</p>
+                  {{ action.modalConfirmLabel }}
                 </template>
               </dangerous-button>
             </template>
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index b63d11ce0..f05c666a4 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -13,7 +13,9 @@ import { useStore } from '~/store'
 import draggable from 'vuedraggable'
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import PlaylistForm from '~/components/playlists/Form.vue'
+
 import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Alert from '~/components/ui/Alert.vue'
@@ -237,25 +239,17 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
 
       <dangerous-button
         :disabled="tracks.length === 0"
-        class="ui labeled right floated danger icon button"
+        icon="bi-eraser-fill"
+        style="float: right;"
         :action="clearPlaylist"
+        :title="t('components.playlists.Editor.modal.clearPlaylist.header', { playlist: playlist?.name })"
       >
-        <i class="eraser icon" />
         {{ t('components.playlists.Editor.button.clear') }}
-        <template #modal-header>
-          <p>
-            {{ t('components.playlists.Editor.modal.clearPlaylist.header', {playlist: playlist?.name}) }}
-          </p>
-        </template>
         <template #modal-content>
-          <p>
-            {{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
-          </p>
+          {{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
         </template>
         <template #modal-confirm>
-          <div>
-            {{ t('components.playlists.Editor.button.clear') }}
-          </div>
+          {{ t('components.playlists.Editor.button.clear') }}
         </template>
       </dangerous-button>
       <div class="ui hidden divider" />
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index 7d7256e35..d8ee4c0fa 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -12,6 +12,8 @@ import TagsList from '~/components/tags/List.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Props {
   id: number
 }
@@ -172,26 +174,16 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.ChannelDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.ChannelDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.ChannelDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.ChannelDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.ChannelDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.ChannelDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.ChannelDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 5f9a0560e..590047508 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -7,6 +7,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import FetchButton from '~/components/federation/FetchButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
@@ -193,26 +194,16 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.AlbumDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.AlbumDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.AlbumDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.AlbumDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.AlbumDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.AlbumDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.AlbumDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 66280157f..121a4246d 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -7,6 +7,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import FetchButton from '~/components/federation/FetchButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
@@ -181,37 +182,27 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                   </button>
                 </div>
                 <div class="ui buttons">
-                  <router-link
+                  <Link solid secondary
                     v-if="object.is_local"
                     :to="{name: 'library.artists.edit', params: {id: object.id }}"
                     class="ui labeled icon button"
+                    icon="bi-pencil-fill"
                   >
-                    <i class="edit icon" />
                     {{ t('views.admin.library.ArtistDetail.button.edit') }}
-                  </router-link>
+                  </Link>
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.ArtistDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.ArtistDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.ArtistDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.ArtistDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.ArtistDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.ArtistDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.ArtistDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index 261348fa6..61cca9aaa 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -13,6 +13,8 @@ import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 const PRIVACY_LEVELS = ['me', 'instance', 'everyone'] as PrivacyLevel[]
 
 interface Props {
@@ -168,26 +170,16 @@ const updateObj = async (attr: string) => {
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.LibraryDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.LibraryDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.LibraryDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.LibraryDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.LibraryDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.LibraryDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.LibraryDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
index 4c3890d84..29b5de3cc 100644
--- a/front/src/views/admin/library/TagDetail.vue
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -9,6 +9,8 @@ import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Props {
   id: number
 }
@@ -105,26 +107,16 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.TagDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.TagDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.TagDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.TagDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.TagDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.TagDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.TagDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 9347eb5d6..59d5b91b1 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -12,6 +12,8 @@ import TagsList from '~/components/tags/List.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Props {
   id: number
 }
@@ -193,26 +195,16 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.TrackDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.TrackDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.TrackDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.TrackDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.TrackDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.TrackDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.TrackDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 7012affd7..b1150e5da 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -15,6 +15,8 @@ import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 interface Props {
   id: number
 }
@@ -155,26 +157,16 @@ const showUploadDetailModal = ref(false)
                 </div>
                 <div class="ui buttons">
                   <dangerous-button
-                    :class="['ui', {loading: isLoading}, 'basic danger button']"
+                    :is-loading="isLoading"
                     :action="remove"
+                    :title="t('views.admin.library.UploadDetail.modal.delete.header')"
                   >
                     {{ t('views.admin.library.UploadDetail.button.delete') }}
-                    <template #modal-header>
-                      <p>
-                        {{ t('views.admin.library.UploadDetail.modal.delete.header') }}
-                      </p>
-                    </template>
                     <template #modal-content>
-                      <div>
-                        <p>
-                          {{ t('views.admin.library.UploadDetail.modal.delete.content.warning') }}
-                        </p>
-                      </div>
+                      {{ t('views.admin.library.UploadDetail.modal.delete.content.warning') }}
                     </template>
                     <template #modal-confirm>
-                      <p>
-                        {{ t('views.admin.library.UploadDetail.button.delete') }}
-                      </p>
+                      {{ t('views.admin.library.UploadDetail.button.delete') }}
                     </template>
                   </dangerous-button>
                 </div>
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index cf2885c65..3030c5f66 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -11,6 +11,7 @@ import axios from 'axios'
 import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import SubscribeButton from '~/components/channels/SubscribeButton.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
@@ -305,22 +306,13 @@ const updateSubscriptionCount = (delta: number) => {
                     </PopoverItem>
                     <dangerous-button
                       v-if="object"
-                      :class="['ui', {loading: isLoading}, 'item']"
+                      :title="t('views.channels.DetailBase.button.delete')"
+                      :is-loading="isLoading"
+                      icon="bi-trash"
                       @confirm="remove()"
                     >
-                      <i class="bi bi-trash" />
-                      {{ t('views.channels.DetailBase.button.delete') }}
-                      <template #modal-header>
-                        <p>
-                          {{ t('views.channels.DetailBase.modal.delete.header') }}
-                        </p>
-                      </template>
                       <template #modal-content>
-                        <div>
-                          <p>
-                            {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
-                          </p>
-                        </div>
+                        {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
                       </template>
                       <template #modal-confirm>
                         <p>
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index 4ec5f2280..02bbf8ce0 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -9,6 +9,8 @@ import axios from 'axios'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 const PRIVACY_LEVELS = ['me', 'instance', 'everyone'] as PrivacyLevel[]
 
 interface Events {
@@ -169,25 +171,16 @@ const remove = async () => {
     </button>
     <dangerous-button
       v-if="library"
-      type="button"
-      class="ui right floated basic danger button"
+      style="float: right;"
       @confirm="remove"
+      :title="t('views.content.libraries.Form.modal.delete.header')"
     >
       {{ t('views.content.libraries.Form.button.delete') }}
-      <template #modal-header>
-        <p>
-          {{ t('views.content.libraries.Form.modal.delete.header') }}
-        </p>
-      </template>
       <template #modal-content>
-        <p>
-          {{ t('views.content.libraries.Form.modal.delete.content.warning') }}
-        </p>
+        {{ t('views.content.libraries.Form.modal.delete.content.warning') }}
       </template>
       <template #modal-confirm>
-        <div>
-          {{ t('views.content.libraries.Form.button.confirm') }}
-        </div>
+        {{ t('views.content.libraries.Form.button.confirm') }}
       </template>
     </dangerous-button>
   </form>
diff --git a/front/src/views/content/libraries/Quota.vue b/front/src/views/content/libraries/Quota.vue
index 90463dd9f..d1bbcdc32 100644
--- a/front/src/views/content/libraries/Quota.vue
+++ b/front/src/views/content/libraries/Quota.vue
@@ -10,6 +10,8 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import axios from 'axios'
 import { useI18n } from 'vue-i18n'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
+
 const { t } = useI18n()
 
 const quotaStatus = ref()
@@ -111,24 +113,16 @@ const purgeErroredFiles = () => purge('errored')
           </router-link>
 
           <dangerous-button
-            class="ui basic tiny button"
+            low-height
             :action="purgePendingFiles"
+            :title="t('views.content.libraries.Quota.modal.purgePending.header')"
           >
             {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-header>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgePending.header') }}
-              </p>
-            </template>
             <template #modal-content>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
-              </p>
+              {{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
             </template>
             <template #modal-confirm>
-              <div>
-                {{ t('views.content.libraries.Quota.button.purge') }}
-              </div>
+              {{ t('views.content.libraries.Quota.button.purge') }}
             </template>
           </dangerous-button>
         </div>
@@ -153,24 +147,16 @@ const purgeErroredFiles = () => purge('errored')
             {{ t('views.content.libraries.Quota.link.viewFiles') }}
           </router-link>
           <dangerous-button
-            class="ui basic tiny button"
+            low-height
             :action="purgeSkippedFiles"
+            :title="t('views.content.libraries.Quota.modal.purgeSkipped.header')"
           >
             {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-header>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgeSkipped.header') }}
-              </p>
-            </template>
             <template #modal-content>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
-              </p>
+              {{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
             </template>
             <template #modal-confirm>
-              <div>
-                {{ t('views.content.libraries.Quota.button.purge') }}
-              </div>
+              {{ t('views.content.libraries.Quota.button.purge') }}
             </template>
           </dangerous-button>
         </div>
@@ -195,24 +181,16 @@ const purgeErroredFiles = () => purge('errored')
             {{ t('views.content.libraries.Quota.link.viewFiles') }}
           </router-link>
           <dangerous-button
-            class="ui basic tiny button"
+            low-height
             :action="purgeErroredFiles"
+            :title="t('views.content.libraries.Quota.modal.purgeErrored.header')"
           >
             {{ t('views.content.libraries.Quota.button.purge') }}
-            <template #modal-header>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgeErrored.header') }}
-              </p>
-            </template>
             <template #modal-content>
-              <p>
-                {{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
-              </p>
+              {{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
             </template>
             <template #modal-confirm>
-              <div>
-                {{ t('views.content.libraries.Quota.button.purge') }}
-              </div>
+              {{ t('views.content.libraries.Quota.button.purge') }}
             </template>
           </dangerous-button>
         </div>
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index e4b3a95b8..51add9d12 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -8,6 +8,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Card from '~/components/ui/Card.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -321,26 +322,15 @@ const isOpen = ref(false)
           </template>
           <template v-else-if="library.follow.approved">
             <dangerous-button
-              :class="['ui', 'button']"
               :action="unfollow"
+              :title="t('views.content.remote.Card.modal.unfollow.header')"
             >
               {{ t('views.content.remote.Card.button.unfollow') }}
-              <template #modal-header>
-                <p>
-                  {{ t('views.content.remote.Card.modal.unfollow.header') }}
-                </p>
-              </template>
               <template #modal-content>
-                <div>
-                  <p>
-                    {{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
-                  </p>
-                </div>
+                {{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
               </template>
               <template #modal-confirm>
-                <div>
-                  {{ t('views.content.remote.Card.button.unfollow') }}
-                </div>
+                {{ t('views.content.remote.Card.button.unfollow') }}
               </template>
             </dangerous-button>
           </template>
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 1fc7f5424..2bbf3909e 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -8,12 +8,13 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import DangerousButton from '~/components/common/DangerousButton.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
+
 import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
 import Section from '~/components/ui/Section.vue'
-import Spacer from '~/components/ui/Spacer.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
@@ -98,24 +99,16 @@ const deleteRadio = async () => {
           {{ t('views.radios.Detail.button.edit') }}
         </Button>
         <dangerous-button
-          class="ui labeled danger icon button"
           :action="deleteRadio"
+          :title="t('views.radios.Detail.modal.delete.header', {radio: radio.name})"
+          icon="bi-trash"
         >
-          <i class="bi bi-trash" /> {{ t('views.radios.Detail.button.delete') }}
-          <template #modal-header>
-            <p>
-              {{ t('views.radios.Detail.modal.delete.header', {radio: radio.name}) }}
-            </p>
-          </template>
+          {{ t('views.radios.Detail.button.delete') }}
           <template #modal-content>
-            <p>
-              {{ t('views.radios.Detail.modal.delete.content.warning') }}
-            </p>
+            {{ t('views.radios.Detail.modal.delete.content.warning') }}
           </template>
           <template #modal-confirm>
-            <p>
-              {{ t('views.radios.Detail.button.confirm') }}
-            </p>
+            {{ t('views.radios.Detail.button.confirm') }}
           </template>
         </dangerous-button>
       </template>
@@ -127,9 +120,8 @@ const deleteRadio = async () => {
       <track-table :tracks="tracks" />
         <Pagination
           v-if="totalTracks > 25"
-          v-model:current="page"
-          :paginate-by="25"
-          :total="totalTracks"
+          v-model:page="page"
+          :pages="Math.ceil(totalTracks / 25)"
         />
     </Section>
     <Alert