diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
index 1945902b2..17ca68d49 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
@@ -29,8 +29,7 @@ h1, h2, .h1, .h2 {
    display: block;
 }
 
-label:not(.form-check-label),
-legend.col-form-label {
+.col-form-label {
    padding-top: .5em;
    padding-bottom: .5em;
    font-weight: 700;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index 83e81aa01..44d444247 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -76,4 +76,8 @@ export default {
       -webkit-transform: scale(1.1);
       transform: scale(1.1);
    }
+   h3.modal-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+   }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 6657b2ad5..0155d89dc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -3,7 +3,7 @@
    <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
    
    <div>
-      <label>{{ $tc('persons_associated.counter', counter) }}</label>
+      <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
    
    <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index 7ace7fafd..1e3e9a877 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -3,7 +3,7 @@
    <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
 
    <div class="my-4">
-      <label for="selectReferrer">
+      <label class="col-form-label" for="selectReferrer">
          {{ $t('referrer.label') }}
       </label>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 1e15e5ea2..6a39a138f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -4,7 +4,7 @@
    <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
    
    <div>
-      <label>{{ $tc('resources.counter', counter) }}</label>
+      <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
    </div>
    
    <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index 5e1bd7624..c42571721 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -163,6 +163,7 @@ div#content {
             box-sizing: border-box;
             margin-bottom: -3px;
             color: #71859669;
+            text-decoration: none;
             &.top {
                color: #718596;
             }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 26e0e1d25..9cd31e277 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -20,7 +20,7 @@
             <div class="modal-body">
                <div class="search">
                   
-                  <label style="float: right;">
+                  <label class="col-form-label" style="float: right;">
                      {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
                   </label>
 
@@ -231,8 +231,9 @@ export default {
          div.search {
             position: relative;
             input { 
+               width: 100%;
                padding: 1.2em 1.5em 1.2em 2.5em;
-               margin: 1em 0;
+               //margin: 1em 0;
             }
             i {
                position: absolute;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
index 172e241ad..931830fd3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
          
-         <div class="container">
+         <div>
             <input 
                v-bind:type="type" 
                v-model="selected"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
index 71fb73baa..27d6b48a8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue
@@ -54,30 +54,55 @@
 </div>
 <div v-else-if="action === 'edit' || action === 'create'">
    
-   <input v-model="firstName" :placeholder="$t('person.firstname')" />
-   <input v-model="lastName" :placeholder="$t('person.lastname')" />
+   <div class="form-floating mb-3">
+      <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
+      <label for="firstname">{{ $t('person.firstname') }}</label>
+   </div>
+   
+   <div class="form-floating mb-3">
+      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <label for="lastname">{{ $t('person.lastname') }}</label>
+   </div>
    
    <!--  TODO fix placeholder if undefined 
-         TODO dynamically get gender options
    -->
-   <select v-model="gender">
-      <option disabled value="">{{ $t('person.gender.placeholder') }}</option> 
-      <option value="woman">{{ $t('person.gender.woman') }}</option>
-      <option value="man">{{ $t('person.gender.man') }}</option>
-      <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
-   </select>
+   <div class="form-floating mb-3">
+      <select class="form-select form-select-lg" id="gender" v-model="gender">
+         <option selected disabled >{{ $t('person.gender.placeholder') }}</option> 
+         <option value="woman">{{ $t('person.gender.woman') }}</option>
+         <option value="man">{{ $t('person.gender.man') }}</option>
+         <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
+      </select>
+      <label for="gender">{{ $t('person.gender.title') }}</label>
+   </div>
    
-   <i class="fa fa-birthday-cake"></i>
-   <input type="date"
-      id="chill_personbundle_person_birthdate" 
-      name="chill_personbundle_person[birthdate]" 
-      v-model="birthDate"
-   />
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
+      <input type="date" 
+         class="form-control form-control-lg" 
+         id="chill_personbundle_person_birthdate" 
+         name="chill_personbundle_person[birthdate]" 
+         v-model="birthDate"
+         aria-describedby="birthdate" />
+   </div>
    
-   <i class="fa fa-phone">
-   </i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
-   <i class="fa fa-mobile">
-   </i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
+      <input class="form-control form-control-lg" 
+         v-model="phonenumber" 
+         v-bind:placeholder="$t('person.phonenumber')" 
+         v-bind:aria-label="$t('person.phonenumber')" 
+         aria-describedby="phonenumber" />
+   </div>
+   
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
+      <input class="form-control form-control-lg" 
+         v-model="mobilenumber" 
+         v-bind:placeholder="$t('person.mobilenumber')"
+         v-bind:aria-label="$t('person.mobilenumber')" 
+         aria-describedby="mobilenumber" />
+   </div>
    
 </div>
 </template>