diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index ce7b6647c..fd83322f5 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -21,11 +21,11 @@
     }
   },
   "site": {
+    "thx": "Danke!",
     "made": "Mit ❤ gemacht",
     "imprint": "Impressum",
     "data-privacy": "Datenschutz",
     "termsAndConditions": "Nutzungsbedingungen",
-    "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "changelog": "Änderungen & Verlauf",
     "contact": "Kontakt",
     "tribunal": "Registergericht",
@@ -35,9 +35,7 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex",
-    "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu.",
-    "termsAndConditionsNewConfirm": "Bestätige bitte die neuen Nutzungsbedingungen"
+    "code-of-conduct": "Verhaltenscodex"
   },
   "sorting": {
     "newest": "Neuste",
@@ -571,6 +569,11 @@
     "get-help": "Wenn du einem inakzeptablen Verhalten ausgesetzt bist, es miterlebst oder andere Bedenken hast, benachrichtige bitte so schnell wie möglich einen Organisator der Gemeinschaft und verlinke oder verweise auf den entsprechenden Inhalt:"
   },
   "termsAndConditions": {
+    "newTermsAndConditions": "Neue Nutzungsbedingungen",
+    "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu.",
+    "termsAndConditionsNewConfirmText": "Unsere <a href=\"/terms-and-conditions\" target=\"_blank\"><span class=\"ds-chip ds-chip-size-large ds-chip-warning ds-chip-round\">Nutzungsbedingungen</span></a> haben sich geändert!",
+    "termsAndConditionsNewConfirm": "Ich bestätige die neuen Nutzungsbedingungen",
+    "agree": "Ich Stimme zu!",
     "risk": {
       "title": "Unfallgefahr",
       "description": "Das ist eine Testversion! Alle Daten, Dein Profil und die Server können jederzeit komplett vernichtet, verloren, verbrannt und vielleicht auch in der Nähe von Alpha Centauri synchronisiert werden. Die Benutzung läuft auf eigene Gefahr. Mit kommerziellen Nebenwirkungen ist jedoch nicht zu rechnen."
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 594101d7a..500cbdb76 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -21,10 +21,10 @@
     }
   },
   "site": {
+    "thx": "Thanks!",
     "made": "Made with &#10084;",
     "imprint": "Imprint",
     "termsAndConditions": "Terms and conditions",
-    "newTermsAndConditions": "New Terms and conditions",
     "data-privacy": "Data privacy",
     "changelog": "Changes & History",
     "contact": "Contact",
@@ -35,9 +35,7 @@
     "responsible": "responsible for contents of this page (§ 55 Abs. 2 RStV)",
     "bank": "bank account",
     "germany": "Germany",
-    "code-of-conduct": "Code of Conduct",
-    "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">terms and conditions</a>.",
-    "termsAndConditionsNewConfirm": "Please confirm the new Terms and Conditions"
+    "code-of-conduct": "Code of Conduct"
   },
   "sorting": {
     "newest": "Newest",
@@ -571,6 +569,11 @@
     "get-help": "If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible and link or refer to the corresponding content:"
   },
   "termsAndConditions": {
+    "newTermsAndConditions": "New Terms and Conditions",
+    "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">Terms and Conditions</a>.",
+    "termsAndConditionsNewConfirmText": "Our <a href=\"/terms-and-conditions\" target=\"_blank\"><span class=\"ds-chip ds-chip-size-large ds-chip-warning ds-chip-round\">Terms and Conditions</span></a> have changed!",
+    "termsAndConditionsNewConfirm": "I confirm the new Terms and Conditions",
+    "agree": "I agree!",
     "risk": {
       "title": "Risk of accident",
       "description": "This is a test version! All data, your profile and the server can be completely destroyed, wiped out, lost, burnt and eventually synchronised near Alpha Centauri at any time. Use on your own risk. Commercial effects are not likely though."
diff --git a/webapp/middleware/termsAndConditions.js b/webapp/middleware/termsAndConditions.js
index c5a27fa21..64141eed0 100644
--- a/webapp/middleware/termsAndConditions.js
+++ b/webapp/middleware/termsAndConditions.js
@@ -8,7 +8,7 @@ export default async ({ store, env, route, redirect }) => {
   }
   if (route.name === 'terms-and-conditions-confirm') return true // avoid endless loop
 
-  if(store.getters['auth/termsAndConditionsAgreed']) return true
+  if (store.getters['auth/termsAndConditionsAgreed']) return true
 
   let params = {}
   if (!isEmpty(route.path) && route.path !== '/') {
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index c28346587..706046fda 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -1,34 +1,17 @@
 <template>
-  <div>
-    <ds-space>
-      <ds-heading tag="h2">{{ $t(`site.newTermsAndConditions`) }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div>
-        <ds-button secondary class="display:none" @click="submit">
-          {{ $t(`site.termsAndConditionsNewConfirm`) }}
+  <ds-container width="medium">
+    <ds-card icon="balance-scale" header=" " primary centered>
+      <ds-text
+        tag="h2"
+        v-html="$t(`termsAndConditions.termsAndConditionsNewConfirmText`)"
+      ></ds-text>
+      <template slot="footer">
+        <ds-button @click="submit">
+          {{ $t(`termsAndConditions.termsAndConditionsNewConfirm`) }}
         </ds-button>
-      </div>
-      <div>
-        <ol>
-          <li v-for="section in sections" :key="section">
-            <strong>{{ $t(`termsAndConditions.${section}.title`) }}:</strong>
-            <p v-html="$t(`termsAndConditions.${section}.description`)" />
-          </li>
-        </ol>
-        <p>{{ $t(`termsAndConditions.have-fun`) }}</p>
-        <br />
-        <p>
-          <strong v-html="$t(`termsAndConditions.closing`)" />
-        </p>
-      </div>
-      <div>
-        <ds-button secondary class="display:none" @click="submit">
-          {{ $t(`site.termsAndConditionsNewConfirm`) }}
-        </ds-button>
-      </div>
-    </ds-container>
-  </div>
+      </template>
+    </ds-card>
+  </ds-container>
 </template>
 
 <script>
@@ -47,7 +30,7 @@ export default {
   layout: 'default',
   head() {
     return {
-      title: this.$t('site.newTermsAndConditions'),
+      title: this.$t('termsAndConditions.newTermsAndConditions'),
     }
   },
   computed: {
@@ -95,7 +78,7 @@ export default {
             })
           },
         })
-        this.$toast.success(this.$t('DANKE'))
+        this.$toast.success(this.$t('site.thx'))
         this.$router.replace(this.$route.query.path || '/')
       } catch (err) {
         this.$toast.error(err.message)
diff --git a/webapp/store/auth.js b/webapp/store/auth.js
index 0f93a1d56..71113064b 100644
--- a/webapp/store/auth.js
+++ b/webapp/store/auth.js
@@ -45,7 +45,7 @@ export const getters = {
   },
   termsAndConditionsAgreed(state) {
     return state.user && state.user.termsAndConditionsAgreedVersion === VERSION
-  }
+  },
 }
 
 export const actions = {