diff --git a/webapp/components/DeleteData/DeleteData.spec.js b/webapp/components/DeleteData/DeleteData.spec.js
index 3529c1b7b..e9205fa5a 100644
--- a/webapp/components/DeleteData/DeleteData.spec.js
+++ b/webapp/components/DeleteData/DeleteData.spec.js
@@ -88,7 +88,7 @@ describe('DeleteData.vue', () => {
 
     describe('calls the delete user mutation', () => {
       beforeEach(() => {
-        enableDeletionInput = wrapper.find('.enable-deletion-input input')
+        enableDeletionInput = wrapper.find('.ds-input')
         enableDeletionInput.setValue(deleteAccountName)
         deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
       })
@@ -107,7 +107,7 @@ describe('DeleteData.vue', () => {
 
       it("deletes a user's posts if requested", () => {
         mocks.$t.mockImplementation(() => deleteContributionsMessage)
-        enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
+        enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
         enableContributionDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
@@ -122,7 +122,7 @@ describe('DeleteData.vue', () => {
 
       it("deletes a user's comments if requested", () => {
         mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
+        enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
         enableCommentDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
@@ -137,10 +137,10 @@ describe('DeleteData.vue', () => {
 
       it("deletes a user's posts and comments if requested", () => {
         mocks.$t.mockImplementation(() => deleteContributionsMessage)
-        enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
+        enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
         enableContributionDeletionCheckbox.trigger('click')
         mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
+        enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
         enableCommentDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
@@ -166,7 +166,7 @@ describe('DeleteData.vue', () => {
 
     describe('error handling', () => {
       it('shows an error toaster when the mutation rejects', async () => {
-        enableDeletionInput = wrapper.find('.enable-deletion-input input')
+        enableDeletionInput = wrapper.find('.ds-input')
         enableDeletionInput.setValue(deleteAccountName)
         await Vue.nextTick()
         deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index 66a31205a..699fe9b8e 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -1,80 +1,46 @@
 <template>
-  <div>
-    <ds-card hover>
-      <ds-space />
-      <ds-container>
-        <ds-flex>
-          <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
-            <base-icon name="warning" class="delete-warning-icon" />
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
-            <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
-          </ds-flex-item>
-          <ds-space />
-          <ds-heading tag="h4">
-            {{ $t('settings.deleteUserAccount.accountDescription') }}
-          </ds-heading>
-        </ds-flex>
-      </ds-container>
-      <ds-space />
-      <ds-container>
-        <transition name="slide-up">
-          <div v-if="deleteEnabled">
-            <label v-if="currentUser.contributionsCount" class="checkbox-container">
-              <input type="checkbox" v-model="deleteContributions" />
-              <span class="checkmark"></span>
-              {{
-                $t('settings.deleteUserAccount.contributionsCount', {
-                  count: currentUser.contributionsCount,
-                })
-              }}
-            </label>
-            <ds-space margin-bottom="small" />
-            <label v-if="currentUser.commentedCount" class="checkbox-container">
-              <input type="checkbox" v-model="deleteComments" />
-              <span class="checkmark"></span>
-              {{
-                $t('settings.deleteUserAccount.commentedCount', {
-                  count: currentUser.commentedCount,
-                })
-              }}
-            </label>
-            <ds-space margin-bottom="small" />
-            <ds-section id="delete-user-account-warning">
-              <div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
-            </ds-section>
-          </div>
-        </transition>
-      </ds-container>
-      <template slot="footer" class="delete-data-footer">
-        <ds-container>
-          <div
-            class="delete-input-label"
-            v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
-          ></div>
-          <ds-space margin-bottom="xx-small" />
-          <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
-            <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
-              <ds-input v-model="enableDeletionValue" class="enable-deletion-input" />
-            </ds-flex-item>
-            <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
-              <base-button
-                icon="trash"
-                danger
-                filled
-                :disabled="!deleteEnabled"
-                data-test="delete-button"
-                @click="handleSubmit"
-              >
-                {{ $t('settings.deleteUserAccount.name') }}
-              </base-button>
-            </ds-flex-item>
-          </ds-flex>
-        </ds-container>
-      </template>
-    </ds-card>
-  </div>
+  <base-card class="delete-data">
+    <h2 class="card-heading">
+      <base-icon name="warning" />
+      {{ $t('settings.deleteUserAccount.name') }}
+    </h2>
+    <label>
+      {{ $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name }) }}
+    </label>
+    <ds-input v-model="enableDeletionValue" />
+    <p class="notice">{{ $t('settings.deleteUserAccount.accountDescription') }}</p>
+    <label v-if="currentUser.contributionsCount" class="checkbox">
+      <input type="checkbox" v-model="deleteContributions" />
+      {{
+        $t('settings.deleteUserAccount.contributionsCount', {
+          count: currentUser.contributionsCount,
+        })
+      }}
+    </label>
+    <label v-if="currentUser.commentedCount" class="checkbox">
+      <input type="checkbox" v-model="deleteComments" />
+      {{
+        $t('settings.deleteUserAccount.commentedCount', {
+          count: currentUser.commentedCount,
+        })
+      }}
+    </label>
+    <section v-if="deleteEnabled" class="warning">
+      <p>{{ $t('settings.deleteUserAccount.accountWarning') }}</p>
+    </section>
+    <base-button
+      icon="trash"
+      danger
+      filled
+      :disabled="!deleteEnabled"
+      data-test="delete-button"
+      @click="handleSubmit"
+    >
+      {{ $t('settings.deleteUserAccount.name') }}
+    </base-button>
+  </base-card>
 </template>
+
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import gql from 'graphql-tag'
@@ -131,96 +97,47 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
-.delete-warning-icon {
-  color: $color-danger;
-  font-size: $font-size-xxx-large;
-}
+.delete-data {
+  display: flex;
+  flex-direction: column;
 
-.checkbox-container {
-  display: block;
-  position: relative;
-  padding-left: 35px;
-  cursor: pointer;
-  font-size: $font-size-large;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+  > .card-heading > .base-icon {
+    color: $color-danger;
+  }
 
-.checkbox-container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
+  > .ds-form-item {
+    align-self: flex-start;
+    margin-top: $space-xxx-small;
+  }
 
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 20px;
-  width: 20px;
-  border: 2px solid $background-color-inverse-softer;
-  background-color: $background-color-base;
-  border-radius: $border-radius-x-large;
-}
+  > .notice {
+    font-weight: $font-weight-bold;
+    margin-bottom: $space-small;
+  }
 
-.checkbox-container:hover input ~ .checkmark {
-  background-color: $background-color-softest;
-}
+  > .checkbox {
+    margin-left: $space-base;
+    margin-bottom: $space-x-small;
 
-.checkbox-container input:checked ~ .checkmark {
-  background-color: $background-color-danger-active;
-}
+    &:last-of-type {
+      margin-bottom: $space-small;
+    }
+  }
 
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
+  > .warning {
+    padding: $space-large;
+    margin-bottom: $space-small;
+    border-radius: $border-radius-base;
 
-.checkbox-container input:checked ~ .checkmark:after {
-  display: block;
-}
+    color: $color-danger;
+    background-color: $color-danger-inverse;
+    border-left: 4px solid $color-danger;
+  }
 
-.checkbox-container .checkmark:after {
-  left: 6px;
-  top: 3px;
-  width: 5px;
-  height: 10px;
-  border: solid $background-color-base;
-  border-width: 0 $border-size-large $border-size-large 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.enable-deletion-input input:focus {
-  border-color: $border-color-danger;
-}
-
-.delete-input-label {
-  font-size: $font-size-base;
-}
-
-b.is-danger {
-  color: $text-color-danger;
-}
-
-.delete-data-footer {
-  border-top: $border-size-base solid $border-color-softest;
-  background-color: $background-color-danger-inverse;
-}
-
-#delete-user-account-warning {
-  background-color: $background-color-danger-inverse;
-  border-left: $border-size-x-large solid $background-color-danger-active;
-  color: $text-color-danger;
-  margin-left: 0px;
-  margin-right: 0px;
-  border-radius: $border-radius-x-large;
+  > .base-button {
+    align-self: flex-start;
+  }
 }
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d552d51ba..5b83e4090 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -119,9 +119,9 @@
             "contributionsCount": "Meine {count} Beiträge löschen",
             "commentedCount": "Meine {count} Kommentare löschen",
             "accountDescription": "Sei dir bewusst, dass deine Beiträge und Kommentare für unsere Community wichtig sind. Wenn du sie trotzdem löschen möchtest, musst du sie unten markieren.",
-            "accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!<\/b>",
+            "accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen WEDER VERWALTEN NOCH WIEDERHERSTELLEN!",
             "success": "Konto erfolgreich gelöscht!",
-            "pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!<\/b> Gib <b>{confirm}<\/b> ein, um zu bestätigen."
+            "pleaseConfirm": "Zerstörerische Aktion! Gib „{confirm}“ ein, um zu bestätigen."
         },
         "embeds": {
             "name": "Drittanbieter",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d15614ecc..d8f359be5 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -278,9 +278,9 @@
       "contributionsCount": "Delete my {count} posts",
       "commentedCount": "Delete my {count} comments",
       "accountDescription": "Be aware that your Posts and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
-      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts, or Comments after deleting your account!",
+      "accountWarning": "You CAN'T MANAGE and CAN'T RECOVER your Account, Posts, or Comments after deleting your account!",
       "success": "Account successfully deleted!",
-      "pleaseConfirm": "<b class='is-danger'>Destructive action!</b> Type <b>{confirm}</b> to confirm"
+      "pleaseConfirm": "Destructive action! Type “{confirm}” to confirm."
     },
     "embeds": {
       "name": "Third party providers",
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index f916f849b..18d67c7a4 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -117,9 +117,9 @@
             "contributionsCount": "Eliminar mis {count} contribuciones",
             "commentedCount": "Eliminar mis {count} comentarios",
             "accountDescription": "Tenga en cuenta que su contribución y sus comentarios son importantes para nuestra comunidad. Si aún decide borrarlos, debe marcarlos a continuación.",
-            "accountWarning": "¡<b> NO PUEDE GESTIONAR <\/b> y <b> NO PUEDE RECUPERAR <\/b> su cuenta, contribuciones o comentarios después de eliminar su cuenta!",
+            "accountWarning": "¡NO PUEDE GESTIONAR y NO PUEDE RECUPERAR su cuenta, contribuciones o comentarios después de eliminar su cuenta!",
             "success": "¡Cuenta eliminada con éxito!",
-            "pleaseConfirm": "<b class='is-danger'> ¡Acción destructiva! <\/b> Escriba <b> {confirm} <\/b> para confirmar"
+            "pleaseConfirm": "¡Acción destructiva! Escriba “{confirm}” para confirmar."
         },
         "embeds": {
             "name": "Proveedores externos",
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 92ca5482e..73334a1a4 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -117,9 +117,9 @@
             "contributionsCount": "Supprimer mes {count} postes",
             "commentedCount": "Supprimer mes {count} commentaires",
             "accountDescription": "Sachez que vos postes et commentaires sont importants pour notre communauté. Si vous voulez quand même les supprimer, vous devez les marquer ci-dessous.",
-            "accountWarning": "Vous <b>NE POUVEZ PAS GÉRER<\/b> et <b>NE POUVEZ PAS RECOUVRIR<\/b> votre compte, vos messages ou vos commentaires après avoir supprimé votre compte !",
+            "accountWarning": "Vous NE POUVEZ PAS GÉRER et NE POUVEZ PAS RECOUVRIR votre compte, vos messages ou vos commentaires après avoir supprimé votre compte !",
             "success": "Compte supprimer avec succès!",
-            "pleaseConfirm": "<b class='is-danger'> Action destructive! <\/b> Saisissez <b> {confirm} <\/b> pour confirmer"
+            "pleaseConfirm": "Action destructive! Saisissez “{confirm}” pour confirmer."
         },
         "embeds": {
             "name": "Fournisseurs tiers",
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index d07f95086..4bf95dd5e 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -117,9 +117,9 @@
             "contributionsCount": "Cancellare i miei {count} messaggi",
             "commentedCount": "Cancella i miei {count} commenti",
             "accountDescription": "Essere consapevoli che i tuoi post e commenti sono importanti per la nostra comunità. Se cancelli il tuo account utente, tutto scomparirà per sempre - e sarebbe un vero peccato!",
-            "accountWarning": "Attenzione!Tu <b>Non puoi gestire</b> e <b>Non puoi recuperare il tuo account, i tuoi messaggi o commenti dopo aver cancellato il tuo account!",
+            "accountWarning": "Attenzione! Tu NON PUOI GESTIRE e NON PUOI RECUPERARE il tuo account, i tuoi messaggi o commenti dopo aver cancellato il tuo account!",
             "success": "Account eliminato con successo!",
-            "pleaseConfirm": "<b class='is-danger'>Azione distruttiva! </b> Digita <b>{conferma}</b> per confermare"
+            "pleaseConfirm": "Azione distruttiva! Digita “{confirm}” per confermare."
         },
         "embeds": {
             "name": "",
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index 7207c1e71..9f9174caa 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -129,9 +129,9 @@
       "contributionsCount": "Usuń {count} moich postów",
       "commentedCount": "Usuń {count} moich komentarzy",
       "accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
-      "accountWarning": "Po usunięcie Twojego konta, nie możesz <b>ZARZĄDZAĆ</b> ani <b>ODZYSKAĆ</b> danych, wpisów oraz komentarzy!",
+      "accountWarning": "Po usunięcie Twojego konta, nie możesz ZARZĄDZAĆ ani ODZYSKAĆ danych, wpisów oraz komentarzy!",
       "success": "Konto zostało usunięte",
-      "pleaseConfirm": "<b class='is-danger'>Uwaga, niebezpieczeństwo!</b> Wpisz <b>{confirm}</b>, aby potwierdzić"
+      "pleaseConfirm": "Uwaga, niebezpieczeństwo! Wpisz „{confirm}”, aby potwierdzić."
     },
     "organizations": {
       "name": "My Organizations"
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 29fe301c8..3deda86ca 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -117,9 +117,9 @@
             "contributionsCount": "Deletar minhas {count} publicações",
             "commentedCount": "Deletar meus {count} comentários",
             "accountDescription": "Esteja ciente de que o suas Publicações e Comentários são importantes para a nossa comunidade. Se você ainda optar por excluí-los, você tem que marcá-los abaixo.",
-            "accountWarning": "Você <b>NÃO PODE GERENCIAR<\/b> e <b>NÃO PODE RECUPERAR<\/b> sua conta, Publicações, ou Comentários após excluir sua conta!",
+            "accountWarning": "Você NÃO PODE GERENCIAR e NÃO PODE RECUPERAR sua conta, Publicações, ou Comentários após excluir sua conta!",
             "success": "Conta eliminada com sucesso!",
-            "pleaseConfirm": "<b class='is-danger'>Ação destrutiva!<\/b> Digitar <b>{confirm}<\/b> para confirmar"
+            "pleaseConfirm": "Ação destrutiva! Digitar “{confirm}” para confirmar."
         },
         "embeds": {
             "name": "Fornecedores de terceiros",
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 64af8f693..235a1ef77 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -627,11 +627,11 @@
     },
     "deleteUserAccount": {
       "accountDescription": "Обратите внимание, что ваши посты и комментарии важны для сообщества. Если вы все равно хотите их удалить, то вы должны отметить соответствующие опции ниже.",
-      "accountWarning": "Вы <b>НЕ СМОЖЕТЕ<\/b> восстановить свой аккаунт, посты или комментарии после удаления.",
+      "accountWarning": "Вы НЕ СМОЖЕТЕ восстановить свой аккаунт, посты или комментарии после удаления.",
       "commentedCount": "Удалить мои комментарии: {count}",
       "contributionsCount": "Удалить мои посты: {count}",
       "name": "Удалить данные",
-      "pleaseConfirm": "<b class='is-danger'>Разрушительное действие!<\/b> Введите <b>{confirm}<\/b> для подтверждения.",
+      "pleaseConfirm": "Разрушительное действие! Введите „{confirm}“ для подтверждения.",
       "success": "Аккаунт успешно удален!"
     },
     "download": {