diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.ts b/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
index 2dd87207d2faf8192312fbefeaf84466e3a7108b..8ccefdd5fd8c863c1344f89344d64fe1203d69ad 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
+++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.ts
@@ -7,7 +7,7 @@ import { MatSidenav } from '@angular/material/sidenav';
 import { AppService } from '../../../../../service/app.service';
 import { Observable, of as observableOf, of } from 'rxjs';
 import { MatDialog } from '@angular/material';
-import { switchMap, catchError, filter, exhaustMap, tap, debounceTime, distinctUntilChanged, finalize } from 'rxjs/operators';
+import { switchMap, catchError, filter, exhaustMap, tap, debounceTime, distinctUntilChanged, finalize, map } from 'rxjs/operators';
 import { FormControl, Validators, ValidatorFn } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -311,6 +311,10 @@ export class ContactsFormComponent implements OnInit {
                     this.initAutocompleteAddressBan();
                 }),
                 exhaustMap(() => this.http.get("../../rest/contacts/" + this.contactId)),
+                map((data: any) => {
+                    data.civility = data.civility.id !== undefined ? data.civility.id : null;
+                    return data;
+                }),
                 tap((data) => {
                     this.setContactData(data);
                 }),
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
index bdb8b5bf23a0c53faf3ad180d2f6829c88a2d257..5a260dad4358a62fbb58fdf86bfa9a6e6814769a 100644
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
@@ -17,9 +17,9 @@
                                 [title]="lang['contact_'+option.type]">
                             </div>
                             <mat-card-title *ngIf="!empty(option.firstname) || !empty(option.lastname)"
-                                [title]="option.civilityLabel + ' ' + option.firstname + ' ' + option.lastname">
-                                <sup
-                                    *ngIf="!empty(option.civility)">{{option.civilityShortLabel}}&nbsp;</sup>{{option.firstname}}
+                                [title]="option.civility.label + ' ' + option.firstname + ' ' + option.lastname">
+                                <sup style="color: #666;"
+                                    *ngIf="!empty(option.civility)">{{option.civility.abbreviation}}&nbsp;</sup>{{option.firstname}}
                                 {{option.lastname}}</mat-card-title>
                             <mat-card-title *ngIf="empty(option.firstname) && empty(option.lastname)"
                                 [title]="option.company">{{option.company}}</mat-card-title>
@@ -75,12 +75,13 @@
                                     <p mat-line class="contact-content" *ngIf="!empty(option.addressCountry)"
                                         [title]="option.addressCountry"> {{option.addressCountry}} </p>
                                 </mat-list-item>
-                                <ng-container *ngFor="let keyVal of option.customFields | keyvalue" >
+                                <ng-container *ngFor="let keyVal of option.customFields | keyvalue">
                                     <mat-list-item class="contact-item" *ngIf="keyVal.value.value !== null">
                                         <mat-icon mat-list-icon class="contact-group fas fa-hashtag"
                                             [title]="keyVal.value.label">
                                         </mat-icon>
-                                        <p mat-line class="contact-content" [title]="keyVal.value.value"> {{keyVal.value.value}} </p>
+                                        <p mat-line class="contact-content" [title]="keyVal.value.value">
+                                            {{keyVal.value.value}} </p>
                                     </mat-list-item>
                                 </ng-container>
                             </mat-list>
@@ -91,7 +92,8 @@
             <mat-option class="autoCompleteInfoResult smallInputInfo" *ngIf="options.length === 0 && !loading" disabled
                 [innerHTML]="listInfo">
             </mat-option>
-            <mat-option class="autoCompleteInfoResult smallInputInfo create-contact" *ngIf="canAdd && noResultFound !== null && !loading" disabled>
+            <mat-option class="autoCompleteInfoResult smallInputInfo create-contact"
+                *ngIf="canAdd && noResultFound !== null && !loading" disabled>
                 <a style="cursor: pointer;" (click)="$event.stopPropagation();openContact()">
                     {{lang.createContact}} ?
                 </a>
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
index 68a3aa1ae70fbfd2b9d3ecbcc1a9fc19904a6fd1..a4aed3eb4f23b5da27faba2f4f54c3ff8936c167 100755
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
@@ -92,6 +92,12 @@ export class ContactAutocompleteComponent implements OnInit {
                 switchMap((data: any) => this.getDatas(data)),
                 map((data: any) => {
                     data = data.filter((contact: any) => !this.singleMode || (contact.type !== 'contactGroup' && this.singleMode));
+                    data = data.map((contact: any) => {
+                        return {
+                            ...contact,
+                            civility: contact.civility !== undefined ? contact.civility : {label:'',abbreviation:''},
+                        }
+                    })
                     return data;
                 }),
                 tap((data: any) => {
diff --git a/src/frontend/app/contact/list/contacts-list.component.html b/src/frontend/app/contact/list/contacts-list.component.html
index 3dd56879e9ce0ab4d57aed45c679e7448c201cf7..b0c8f92c025c928c6a86fdaa5ed18e698af7eec7 100644
--- a/src/frontend/app/contact/list/contacts-list.component.html
+++ b/src/frontend/app/contact/list/contacts-list.component.html
@@ -11,8 +11,8 @@
                     [class.fa-sitemap]="contact.type ==='entity'" [class.fa-user]="contact.type ==='user'"
                     [title]="lang['contact_'+contact.type]">
                 </div>
-                <mat-card-title *ngIf="!empty(contact.firstname) || !empty(contact.lastname)" [title]="contact.civilityLabel + ' ' + contact.firstname + ' ' + contact.lastname">
-                    <sup *ngIf="!empty(contact.civility)">{{contact.civilityShortLabel}}&nbsp;</sup>{{contact.firstname}}
+                <mat-card-title *ngIf="!empty(contact.firstname) || !empty(contact.lastname)" [title]="contact.civility.label + ' ' + contact.firstname + ' ' + contact.lastname">
+                    <sup style="color: #666;" *ngIf="!empty(contact.civility)">{{contact.civility.abbreviation}}&nbsp;</sup>{{contact.firstname}}
                     {{contact.lastname}}
                 </mat-card-title>
                 <mat-card-title *ngIf="empty(contact.firstname) && empty(contact.lastname)" [title]="contact.company">{{contact.company}}</mat-card-title>
diff --git a/src/frontend/app/contact/list/contacts-list.component.ts b/src/frontend/app/contact/list/contacts-list.component.ts
index 7f0332974941f9f56682177291f5ac43af429114..1ca38a85e98daf056e71d013117efc27d15a8bbe 100644
--- a/src/frontend/app/contact/list/contacts-list.component.ts
+++ b/src/frontend/app/contact/list/contacts-list.component.ts
@@ -73,8 +73,6 @@ export class ContactsListComponent implements OnInit {
                 tap((contact: any) => {
                     this.contacts[0] = {
                         ...contact,
-                        civilityShortLabel: '',
-                        civilityLabel: '',
                         type: 'contact'
                     };
                 }),
@@ -89,6 +87,10 @@ export class ContactsListComponent implements OnInit {
                 tap((data: any) => {
                     this.contacts[0] = {
                         type: 'user',
+                        civility: {
+                            label:'',
+                            abbreviation:''
+                        },
                         civilityShortLabel: '',
                         civilityLabel: '',
                         firstname: data.firstname,
@@ -106,8 +108,10 @@ export class ContactsListComponent implements OnInit {
                 tap((data: any) => {
                     this.contacts[0] = {
                         type: 'entity',
-                        civilityShortLabel: '',
-                        civilityLabel: '',
+                        civility: {
+                            label:'',
+                            abbreviation:''
+                        },
                         lastname: data.short_label,
                     };
                 }),
@@ -133,7 +137,7 @@ export class ContactsListComponent implements OnInit {
     }
 
     emptyOtherInfo(contact: any) {
-        if (!this.empty(contact.communicationMeans) || contact.customFields !== null) {
+        if (!this.empty(contact.communicationMeans) || !this.empty(contact.customFields)) {
             return false;
         } else {
             return true;