diff --git a/client/src/components/DialogBox.vue b/client/src/components/DialogBox.vue
index d94d084..7847b61 100644
--- a/client/src/components/DialogBox.vue
+++ b/client/src/components/DialogBox.vue
@@ -37,7 +37,12 @@ const emit = defineEmits(['close'])
     border-radius: 8px;
     color: $dialog-box-text-color;
     z-index: 12;
+
+    @media (max-width: $phone-max-width) {
+      min-width: unset;
+    }
   }
+  
 
   &__header {
     display: flex;
diff --git a/client/src/pages/setup.vue b/client/src/pages/setup.vue
index 89240cb..3937e0c 100644
--- a/client/src/pages/setup.vue
+++ b/client/src/pages/setup.vue
@@ -7,12 +7,17 @@
         <p>{{ $t('description-2') }}</p>
       </div>
       <div class="page-setup__button">
-        <Button @click="createAdminAccount">{{ $t('create admin user') }}</Button>
+        <Button @click="openModal">{{ $t('create admin user') }}</Button>
 
         <ModalDialog v-if="showAdminAccountCreatedDialog" :no-close-button="true" @close="showAdminAccountCreatedDialog = false">
-          <div class="create-team-dialog__auth-message">{{ $t('pin') }}</div>
-          <div class="create-team-dialog__pin">{{ authcode }}</div>
-          <div class="create-team-dialog__auth-message">{{ $t('remember-and-log-in') }}</div>
+          <div class="page-setup__auth-message">{{ $t('pin') }}</div>
+          <div class="page-setup__pin">{{ authcode }}</div>
+          <div class="page-setup__auth-message">{{ $t('remember-and-log-in') }}</div>
+          <template v-slot:footer>
+            <div class="page-setup__cta">
+              <Button @click="createAdminAccount">{{ $t('complete-setup') }}</Button>
+            </div>
+          </template>
         </ModalDialog>
       </div>
     </div>
@@ -27,27 +32,28 @@ import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
   'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' },
-  'description-1': { 
-    en: 'Congratulation!', 
-    de: 'Herzlichen Glückwunsch! ' 
-  },
-  'description-2': { 
-    en: 'You\'ve successfully installed Know Your Teammates.', 
-    de: 'Know Your Teammates wurde erfolgreich installiert.'
-  },
+  'description-1': { en: 'Congratulation!', de: 'Herzlichen Glückwunsch!' },
+  'description-2': { en: 'You\'ve successfully installed Know Your Teammates.', de: 'Know Your Teammates wurde erfolgreich installiert.' },
+  'pin': { en: 'Your pin code is:', de: 'Deine PIN lautet:' },
+  'remember-and-log-in': { en: 'Write it down now.', de: 'Schreibe sie Dir jetzt auf.' },
+  'complete-setup': { en: 'Complete setup', de: 'Setup abschließen' },
 })
 
 await useAuth().authenticateAndLoadUserInfo(['setup'])
 
 const showAdminAccountCreatedDialog = ref(false)
 const authcode = ref('000000')
-const createAdminAccount = () => {
+const openModal = () => {
   authcode.value = ''
   for (var i = 0; i < 6; i++) {
     authcode.value += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
   }
   showAdminAccountCreatedDialog.value = true
 }
+
+const createAdminAccount = () => {
+
+}
 </script>
 
 <style lang="scss">
@@ -62,6 +68,7 @@ const createAdminAccount = () => {
 
     @media (max-width: $phone-max-width) {
       margin: 32px 0 0 0;
+      width: 100%;
     }
   }
 
@@ -71,9 +78,27 @@ const createAdminAccount = () => {
     text-align: center;
   }
 
+  &__auth-message {
+    font-family: $font-secondary;
+    font-size: 24px;
+    text-align: center;
+    margin: 32px;
+  }
+
+  &__pin {
+    font-family: $font-secondary;
+    font-size: 32px;
+    font-weight: 800;
+    text-align: center;
+  }
+
   &__button {
     display: flex;
     margin: 32px auto;
   }
+
+  &__cta {
+    margin: 0 auto;
+  }
 }
 </style>
\ No newline at end of file