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 9a8d1bd6c4c33de79be8cd187ef1c075279e808d..245b609d5eee164e78e92dd9cf2761985d016638 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
@@ -57,6 +57,17 @@ export class ContactsFormComponent implements OnInit {
             filling: false,
             values: []
         },
+        {
+            id: 'civility',
+            unit: 'mainInfo',
+            label: this.lang.contactsParameters_civility,
+            type: 'select',
+            control: new FormControl(),
+            required: false,
+            display: false,
+            filling: false,
+            values: []
+        },
         {
             id: 'firstname',
             unit: 'mainInfo',
@@ -244,6 +255,10 @@ export class ContactsFormComponent implements OnInit {
                     this.fillingParameters = data.contactsFilling;
                     this.initElemForm(data);
                 }),
+                exhaustMap(() => this.http.get("../../rest/civilities")),
+                tap((data: any) => {
+                    this.initCivilities(data.civilities);
+                }),
                 exhaustMap(() => this.http.get("../../rest/contactsCustomFields")),
                 tap((data: any) => {
                     this.initCustomElementForm(data);
@@ -269,6 +284,10 @@ export class ContactsFormComponent implements OnInit {
                     this.initElemForm(data);
                     
                 }),
+                exhaustMap(() => this.http.get("../../rest/civilities")),
+                tap((data: any) => {
+                    this.initCivilities(data.civilities);
+                }),
                 exhaustMap(() => this.http.get("../../rest/contactsCustomFields")),
                 tap((data: any) => {
                     this.initCustomElementForm(data);
@@ -317,7 +336,7 @@ export class ContactsFormComponent implements OnInit {
                 targetField = this.contactForm.filter(contact => contact.id === field.id)[0];
             }
             if (targetField !== undefined) {
-                if ((element.mandatory || element.filling) && this.creationMode) {
+                if ((element.filling && this.creationMode) || element.mandatory) {
                     targetField.display = true;
                 }
 
@@ -341,6 +360,19 @@ export class ContactsFormComponent implements OnInit {
         });
     }
 
+    initCivilities(civilities: any) {
+        let formatedCivilities: any[] = [];
+
+        Object.keys(civilities).forEach(element => {
+            formatedCivilities.push({
+                id: element,
+                label: civilities[element].label
+            })
+        });
+
+        this.contactForm.filter(contact => contact.id === 'civility')[0].values = formatedCivilities;
+    }
+
     initCustomElementForm(data: any) {
         let valArr: ValidatorFn[] = [];
 
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
index e8a35770a3853640f354a6580792ef7da8976033..3875a6422a4bfd6a430588b8305ec0a91dffffc9 100644
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
@@ -18,7 +18,8 @@
                                 [class.fa-sitemap]="option.type ==='entity'" [class.fa-user]="option.type ==='user'"
                                 [title]="lang['contact_'+option.type]">
                             </div>
-                            <mat-card-title *ngIf="!empty(option.firstname) || !empty(option.lastname)" [title]="option.firstname + ' ' + option.lastname">{{option.firstname}}
+                            <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}}
                                 {{option.lastname}}</mat-card-title>
                             <mat-card-title *ngIf="empty(option.firstname) && empty(option.lastname)" [title]="option.company">{{option.company}}</mat-card-title>
                             <mat-card-subtitle [title]="option.function" *ngIf="!empty(option.function)">
diff --git a/src/frontend/app/contact/list/contacts-list.component.html b/src/frontend/app/contact/list/contacts-list.component.html
index dbdb6b9853fec1148e9aad05aab23085d878983b..0f850fd964992e1b05c67c1f49fa946831495973 100644
--- a/src/frontend/app/contact/list/contacts-list.component.html
+++ b/src/frontend/app/contact/list/contacts-list.component.html
@@ -11,8 +11,10 @@
                     [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.firstname + ' ' + contact.lastname">{{contact.firstname}}
-                    {{contact.lastname}}</mat-card-title>
+                <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}}
+                    {{contact.lastname}}
+                </mat-card-title>
                 <mat-card-title *ngIf="empty(contact.firstname) && empty(contact.lastname)" [title]="contact.company">{{contact.company}}</mat-card-title>
                 <mat-card-subtitle [title]="contact.function" *ngIf="!empty(contact.function)">
                     {{contact.function}}&nbsp;
diff --git a/src/frontend/app/contact/list/contacts-list.component.ts b/src/frontend/app/contact/list/contacts-list.component.ts
index 481a99a6e7589f30c7925665e64850fe1bfd336f..2fe869986f265dc6d09eb7924466fcb35e497099 100644
--- a/src/frontend/app/contact/list/contacts-list.component.ts
+++ b/src/frontend/app/contact/list/contacts-list.component.ts
@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { LANG } from '../../translate.component';
 import { NotificationService } from '../../notification.service';
 import { tap, finalize, catchError } from 'rxjs/operators';
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 
 @Component({
     selector: 'app-contacts-list',
@@ -49,7 +49,7 @@ export class ContactsListComponent implements OnInit {
             this.loadContactsOfResource(this.resId, this.mode);
         } else if (this.contact !== null) {
             this.loadContact(this.contact.id, this.contact.type);
-        }  
+        }
     }
 
     loadContactsOfResource(resId: number, mode: string) {
@@ -73,6 +73,8 @@ export class ContactsListComponent implements OnInit {
                 tap((contact: any) => {
                     this.contacts[0] = {
                         ...contact,
+                        civilityShortLabel: '',
+                        civilityLabel: '',
                         type: 'contact'
                     };
                 }),
@@ -87,6 +89,8 @@ export class ContactsListComponent implements OnInit {
                 tap((data: any) => {
                     this.contacts[0] = {
                         type: 'user',
+                        civilityShortLabel: '',
+                        civilityLabel: '',
                         firstname: data.firstname,
                         lastname: data.lastname,
                     };
@@ -102,6 +106,8 @@ export class ContactsListComponent implements OnInit {
                 tap((data: any) => {
                     this.contacts[0] = {
                         type: 'entity',
+                        civilityShortLabel: '',
+                        civilityLabel: '',
                         lastname: data.short_label,
                     };
                 }),
@@ -115,7 +121,7 @@ export class ContactsListComponent implements OnInit {
     }
 
     goTo(contact: any) {
-        window.open(`https://www.google.com/maps/search/${contact.addressNumber}+${contact.addressStreet},+${contact.addressPostcode}+${contact.addressTown},+${contact.addressCountry}`,'_blank')
+        window.open(`https://www.google.com/maps/search/${contact.addressNumber}+${contact.addressStreet},+${contact.addressPostcode}+${contact.addressTown},+${contact.addressCountry}`, '_blank')
     }
 
     empty(value: any) {