diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index fd83322f5..58d39d31c 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -569,11 +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!",
+    "newTermsAndConditions": "Neue Nutzungsbedingungen",
+    "termsAndConditionsNewConfirmText": "Neue Nutzungsbedingungen jetzt lesen!",
+    "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
+    "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 500cbdb76..b8ec54f5f 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -571,8 +571,8 @@
   "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",
+    "termsAndConditionsNewConfirmText": "Read new terms of conditions now!",
+    "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "agree": "I agree!",
     "risk": {
       "title": "Risk of accident",
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index 706046fda..19196df9a 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -1,16 +1,59 @@
 <template>
   <ds-container width="medium">
     <ds-card icon="balance-scale" header=" " primary centered>
-      <ds-text
-        tag="h2"
-        v-html="$t(`termsAndConditions.termsAndConditionsNewConfirmText`)"
-      ></ds-text>
+      <ds-text>
+        <input
+          id="checkbox"
+          type="checkbox"
+          v-model="termsAndConditionsConfirmed"
+          :checked="checked"
+        />
+        <label
+          for="checkbox"
+          v-html="$t('termsAndConditions.termsAndConditionsNewConfirm')"
+        ></label>
+
+        <ds-button ghost @click="isOpen = true">
+          {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
+        </ds-button>
+      </ds-text>
+
       <template slot="footer">
-        <ds-button @click="submit">
-          {{ $t(`termsAndConditions.termsAndConditionsNewConfirm`) }}
+        <ds-button
+          secondary
+          @click="submit"
+          :disabled="disabledSubmitButton && !termsAndConditionsConfirmed"
+        >
+          {{ $t(`actions.save`) }}
         </ds-button>
       </template>
     </ds-card>
+
+    <ds-modal
+      v-if="isOpen"
+      v-model="isOpen"
+      :title="$t('termsAndConditions.newTermsAndConditions')"
+      force
+      extended
+      :confirm-label="$t('termsAndConditions.agree')"
+      :cancel-label="$t('actions.cancel')"
+      v-on:confirm=";(disabledSubmitButton = false), (termsAndConditionsConfirmed = true)"
+      v-on:cancel="disabledSubmitButton = true"
+    >
+      <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>
+    </ds-modal>
   </ds-container>
 </template>
 
@@ -37,10 +80,18 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    compiledData() {
+      return {
+        template: `<p>${this.data}</p>`,
+      }
+    },
   },
   data() {
     return {
-      isOpen: false,
+      disabledSubmitButton: false,
+      isOpen: true,
+      termsAndConditionsConfirmed: false,
+      checked: false,
       sections: [
         'risk',
         'data-privacy',