diff --git a/src/frontend/app/administration/contact/modal/contact-modal.component.html b/src/frontend/app/administration/contact/modal/contact-modal.component.html
index 68857ae59061ee5950ca50d9c0f1eb48528703b2..de8dca2448af4a30b207908a91ae3b33fc9eeaa5 100644
--- a/src/frontend/app/administration/contact/modal/contact-modal.component.html
+++ b/src/frontend/app/administration/contact/modal/contact-modal.component.html
@@ -1,10 +1,10 @@
 <h1 mat-dialog-title>
     <span style="flex: 1;">
-        content
+        {{creationMode ? lang.contactCreation : lang.contact}}
     </span>
     <button [title]="lang.close" mat-icon-button (click)="dialogRef.close();">
         <mat-icon class="fa fa-times"></mat-icon>
     </button></h1>
 <mat-dialog-content class="modal-container">
-    <app-contact-form (onSubmitEvent)="dialogRef.close($event)"></app-contact-form>
+    <app-contact-form [creationMode]="creationMode" [contactId]="data.contactId" (onSubmitEvent)="dialogRef.close($event)"></app-contact-form>
 </mat-dialog-content>
\ No newline at end of file
diff --git a/src/frontend/app/administration/contact/modal/contact-modal.component.ts b/src/frontend/app/administration/contact/modal/contact-modal.component.ts
index edb6e9cc77fc3db4c92ae912e870031662e050fd..5dac984cf5054331a5c2e5d2a0938353678b9003 100644
--- a/src/frontend/app/administration/contact/modal/contact-modal.component.ts
+++ b/src/frontend/app/administration/contact/modal/contact-modal.component.ts
@@ -9,6 +9,7 @@ import { HttpClient } from '@angular/common/http';
 })
 export class ContactModalComponent {
     lang: any = LANG;
+    creationMode: boolean = true;
 
     constructor(
         public http: HttpClient,
@@ -16,5 +17,7 @@ export class ContactModalComponent {
         public dialogRef: MatDialogRef<ContactModalComponent>) {
     }
 
-    ngOnInit(): void { }
+    ngOnInit(): void {
+        this.creationMode = this.data.contactId !== null ? false : true;
+    }
 }
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
index b483a86bf605eefacc110a008c5ec04d86de6cc5..0a06b6205714b2205a6825c8ee0810b4b9140c46 100644
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
@@ -89,7 +89,7 @@
             color="default">
             <ng-container *ngIf="!loadingValues">
                 <mat-chip *ngFor="let item of controlAutocomplete.value;let i=index" class="listAutocomplete"
-                    color="default" [removable]="!controlAutocomplete.disabled" (removed)="removeItem(i)">
+                    color="default" [removable]="!controlAutocomplete.disabled" (removed)="removeItem(i)" (click)="openContact(item)" [class.locked]="!canOpenContact(item)" [disableRipple]="!canOpenContact(item)">
                     <span style="display: flex;flex: 1;align-items: center;">
                         <i class="fa" [class.fa-address-card]="this.valuesToDisplay[item.id].type === 'contact'"
                             [class.fa-sitemap]="this.valuesToDisplay[item.id].type ==='entity'"
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.scss b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.scss
index 6d822ba97d6c3ef7df99198d5c1e0fb0798fa676..893828a20843d3cd6c2ce0a121535516cfd29655 100644
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.scss
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.scss
@@ -21,9 +21,22 @@
 }
 
 .listAutocomplete {
+    cursor: pointer;
     height: auto;
 }
 
+.locked {
+    cursor: default;
+
+    &:active {
+        box-shadow: none;
+    }
+
+    &:hover::after, &:focus::after {
+        opacity: 0;
+    }
+}
+
 .itemChip {
     display: block;
     width: 95%;
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
index 0165766041558fad9c45706fd6f943fbb2582286..16c34f6c659ac469afefcee5bfe47e54c3b7c5da 100755
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
@@ -33,6 +33,7 @@ export class ContactAutocompleteComponent implements OnInit {
     key: string = 'id';
 
     canAdd: boolean = false;
+    canUpdate: boolean = false;
 
     listInfo: string;
     myControl = new FormControl();
@@ -63,7 +64,8 @@ export class ContactAutocompleteComponent implements OnInit {
 
     ngOnInit() {
         this.controlAutocomplete.setValue(this.controlAutocomplete.value === null || this.controlAutocomplete.value === '' ? [] : this.controlAutocomplete.value);
-        this.canAdd = this.privilegeService.hasCurrentUserPrivilege('manage_tags_application');
+        this.canAdd = this.privilegeService.hasCurrentUserPrivilege('create_contacts');
+        this.canUpdate = this.privilegeService.hasCurrentUserPrivilege('update_contacts');
         this.initFormValue();
         this.initAutocompleteRoute();
     }
@@ -120,7 +122,7 @@ export class ContactAutocompleteComponent implements OnInit {
                             lastname: data.lastname,
                             company: data.company
                         };
-                        
+
                     }),
                     finalize(() => this.loadingValues = false),
                     catchError((err: any) => {
@@ -157,7 +159,7 @@ export class ContactAutocompleteComponent implements OnInit {
                         return of(false);
                     })
                 ).subscribe();
-            }            
+            }
         });
     }
 
@@ -220,20 +222,34 @@ export class ContactAutocompleteComponent implements OnInit {
         }
     }
 
-    openContact() {
-        const dialogRef = this.dialog.open(ContactModalComponent, { width : '1200px', maxWidth : '100vw', data: { } });
-
-        dialogRef.afterClosed().pipe(
-            //filter((data: string) => data === 'ok'),
-            tap((data) => {
-                console.log(data);
-                
-            }),
-            catchError((err: any) => {
-                this.notify.handleErrors(err);
-                return of(false);
-            })
-        ).subscribe();
+    openContact(contact: any = null) {
+        if ((this.canAdd && contact === null) || this.canOpenContact(contact)) {
+            const dialogRef = this.dialog.open(ContactModalComponent, { width: '1200px', maxWidth: '100vw', data: { editMode: this.canUpdate, contactId: contact !== null ? contact.id : null } });
+
+            dialogRef.afterClosed().pipe(
+                filter((data: number) => data !== undefined),
+                tap((contactId: number) => {
+                    const contact = {
+                        type: 'contact',
+                        id: contactId
+                    };
+                    this.setFormValue(contact);
+                    this.initFormValue();
+                }),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        }
+    }
+
+    canOpenContact(contact: any) {
+        if (this.canUpdate && contact.type === 'contact') {
+            return true;
+        } else {
+            return false;
+        }
     }
 
     empty(value: any) {