diff --git a/src/frontend/app/attachments/attachment-create/attachment-create.component.html b/src/frontend/app/attachments/attachment-create/attachment-create.component.html
index bfe5fa4ee757cca93b5ddc84b8a7d4f5a715ed60..1543489518071573632f62808f9ed847d9fbd682 100644
--- a/src/frontend/app/attachments/attachment-create/attachment-create.component.html
+++ b/src/frontend/app/attachments/attachment-create/attachment-create.component.html
@@ -50,9 +50,8 @@
                             </div>
                         </div>
                         <div class="attachment-form-item">
-                            <mat-form-field class="input-form">
-                                <input matInput placeholder="{{lang.contact}}">
-                            </mat-form-field>
+                            <app-contact-autocomplete [control]="attachment['recipient']" style="width:100%;" [singleMode]="true">
+                            </app-contact-autocomplete>
                             <div class="fieldState">
                                 <i class="fas fa-asterisk noMandatory"></i>
                             </div>
diff --git a/src/frontend/app/attachments/attachment-create/attachment-create.component.ts b/src/frontend/app/attachments/attachment-create/attachment-create.component.ts
index 4468cc583da0cb734b6638b0a7779e830820f40d..f287ffb67f16f4862f29871bff3593bc4c93ecee 100644
--- a/src/frontend/app/attachments/attachment-create/attachment-create.component.ts
+++ b/src/frontend/app/attachments/attachment-create/attachment-create.component.ts
@@ -76,7 +76,7 @@ export class AttachmentCreateComponent implements OnInit {
             tap((data: any) => {
                 this.attachments.push({
                     title: new FormControl({ value: data.subject, disabled: false }, [Validators.required]),
-                    contact: new FormControl({ value: '', disabled: false }),
+                    recipient: new FormControl({ value: '', disabled: false }),
                     type: new FormControl({ value: '', disabled: false }, [Validators.required]),
                     validationDate: new FormControl({ value: '', disabled: false }),
                     format: new FormControl({ value: '', disabled: false }, [Validators.required]),
@@ -100,6 +100,8 @@ export class AttachmentCreateComponent implements OnInit {
                 resIdMaster: this.data.resIdMaster,
                 type: element.type.value,
                 title: element.title.value,
+                recipientId: element.recipient.value.length > 0 ? element.recipient.value[0].id : null,
+                recipientType: element.recipient.value.length > 0 ? element.recipient.value[0].type : null,
                 validationDate: element.validationDate.value !== '' ? element.validationDate.value : null,
                 encodedFile: element.encodedFile.value,
                 format: element.format.value
@@ -193,7 +195,7 @@ export class AttachmentCreateComponent implements OnInit {
                 this.attachments[this.indexTab].format.setValue(data.format);
                 this.attachments.push({
                     title: new FormControl({ value: '', disabled: false }, [Validators.required]),
-                    contact: new FormControl({ value: null, disabled: false }),
+                    recipientId: new FormControl({ value: null, disabled: false }),
                     type: new FormControl({ value: '', disabled: false }, [Validators.required]),
                     validationDate: new FormControl({ value: null, disabled: false }),
                     encodedFile: new FormControl({ value: '', disabled: false }, [Validators.required]),
diff --git a/src/frontend/app/attachments/attachments-page/attachment-page.component.html b/src/frontend/app/attachments/attachments-page/attachment-page.component.html
index 98075b0f803cd4a6510ae0e4d1f45e437622c208..f3ae7b9f5e21e21c89cbd463dccd7a151d370787 100644
--- a/src/frontend/app/attachments/attachments-page/attachment-page.component.html
+++ b/src/frontend/app/attachments/attachments-page/attachment-page.component.html
@@ -65,9 +65,8 @@
                             </div>
                         </div>
                         <div class="attachment-form-item">
-                            <mat-form-field class="input-form">
-                                <input matInput placeholder="{{lang.contact}}">
-                            </mat-form-field>
+                            <app-contact-autocomplete [control]="attachment['recipient']" style="width:100%;" [singleMode]="true">
+                            </app-contact-autocomplete>
                             <div class="fieldState">
                                 <i class="fas fa-asterisk noMandatory"></i>
                             </div>
diff --git a/src/frontend/app/attachments/attachments-page/attachment-page.component.ts b/src/frontend/app/attachments/attachments-page/attachment-page.component.ts
index 1d958d4182709812e2f2c670388da188862a764b..28bd30901b521553b338593721eed1a389f83143 100644
--- a/src/frontend/app/attachments/attachments-page/attachment-page.component.ts
+++ b/src/frontend/app/attachments/attachments-page/attachment-page.component.ts
@@ -78,6 +78,11 @@ export class AttachmentPageComponent implements OnInit {
                     this.editMode = true;
                 }
 
+                const contact: any = [{
+                    id: data.recipientId,
+                    type: data.recipientType
+                }];
+
                 this.attachment = {
                     typist: new FormControl({ value: data.typist, disabled: true }, [Validators.required]),
                     typistLabel: new FormControl({ value: data.typistLabel, disabled: true }, [Validators.required]),
@@ -93,7 +98,7 @@ export class AttachmentPageComponent implements OnInit {
                     status: new FormControl({ value: data.status, disabled: true }, [Validators.required]),
                     relation: new FormControl({ value: data.relation, disabled: true }, [Validators.required]),
                     title: new FormControl({ value: data.title, disabled: !this.editMode }, [Validators.required]),
-                    contact: new FormControl({ value: null, disabled: !this.editMode }),
+                    recipient: new FormControl({ value: contact, disabled: !this.editMode }),
                     type: new FormControl({ value: data.type, disabled: !this.editMode }, [Validators.required]),
                     validationDate: new FormControl({ value: data.validationDate !== null ? new Date(data.validationDate) : null, disabled: !this.editMode }),
                     signedResponse: new FormControl({ value: data.signedResponse, disabled: false }),
@@ -135,7 +140,7 @@ export class AttachmentPageComponent implements OnInit {
         ).subscribe();
     }
 
-    updateAttachment() {
+    updateAttachment() {       
         this.sendingData = true;
         this.appAttachmentViewer.getFile().pipe(
             tap((data) => {
@@ -178,6 +183,9 @@ export class AttachmentPageComponent implements OnInit {
                     let month = this.attachment[element].value.getMonth() + 1;
                     let year = this.attachment[element].value.getFullYear();
                     attachmentValues[element] = ('00' + day).slice(-2) + '-' + ('00' + month).slice(-2) + '-' + year + ' 23:59:59';
+                } else if(element === 'recipient') {
+                    attachmentValues['recipientId'] = this.attachment[element].value.length > 0 ? this.attachment[element].value[0].id : null;
+                    attachmentValues['recipientType'] = this.attachment[element].value.length > 0 ? this.attachment[element].value[0].type : null;
                 } else {
                     attachmentValues[element] = this.attachment[element].value;
                 }
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
index 221d34f19c32daaaea0050bcaf47e68a1e1b1d06..6efad773fd7e1a8279b418caedbc47986068bec6 100644
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.html
@@ -1,11 +1,11 @@
 <form>
     <input type="hidden" [formControl]="controlAutocomplete">
-    <mat-form-field floatLabel="never" class="input-form" *ngIf="!controlAutocomplete.disabled">
+    <mat-form-field floatLabel="never" class="input-form" *ngIf="(!controlAutocomplete.disabled && !singleMode) || (singleMode && controlAutocomplete.value.length === 0)">
         <mat-icon color="primary" class="fa fa-search" matPrefix style="padding-left: 20px;font-size: 15px;"></mat-icon>
         <input type="text" #autoCompleteInput [placeholder]="lang.searchContact" matInput [formControl]="myControl"
             [matAutocomplete]="auto" (click)="$event.stopPropagation()" (focus)="resetAutocomplete()" maxlength="128">
         <button [disabled]="!canAdd" type="button" matSuffix mat-icon-button (click)="$event.stopPropagation();openContact()">
-            <mat-icon class="fa fa-plus" [title]="lang.add">
+            <mat-icon class="fa fa-plus" [title]="lang.createContact">
             </mat-icon>
         </button>
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOpt($event)">
@@ -73,7 +73,7 @@
                                 </mat-list-item>
                             </mat-list>
                         </mat-card-content>
-                    </mat-card>
+                    </mat-card >
                 </mat-option>
             </ng-container>
             <mat-option class="autoCompleteInfoResult smallInputInfo" *ngIf="options.length === 0 && !loading" disabled
diff --git a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
index 0fc97ff2fb92ee6ebccab80a4de93853bd64e374..92784729f528761318eaffdc720efdced43beb4b 100755
--- a/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
+++ b/src/frontend/app/contact/autocomplete/contact-autocomplete.component.ts
@@ -48,6 +48,9 @@ export class ContactAutocompleteComponent implements OnInit {
      */
     @Input('control') controlAutocomplete: FormControl;
 
+    @Input('singleMode') singleMode: boolean = false;
+
+
     @ViewChild('autoCompleteInput', { static: true }) autoCompleteInput: ElementRef;
 
     constructor(
@@ -81,6 +84,10 @@ export class ContactAutocompleteComponent implements OnInit {
                 distinctUntilChanged(),
                 tap(() => this.loading = true),
                 switchMap((data: any) => this.getDatas(data)),
+                map((data: any) => {
+                    data = data.filter((contact: any) => !this.singleMode || (contact.type !== 'contactGroup' && this.singleMode));
+                    return data;
+                }),
                 tap((data: any) => {
                     if (data.length === 0) {
                         this.listInfo = this.lang.noAvailableValue;
@@ -272,6 +279,8 @@ export class ContactAutocompleteComponent implements OnInit {
                     return of(false);
                 })
             ).subscribe();
+        } else {
+            this.dialog.open(ContactModalComponent, { width: '1200px', maxWidth: '100vw', data: { editMode: this.canUpdate, contactId: contact !== null ? contact.id : null } });
         }
     }
 
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index 8afefdc02d42ad16beb5daf59d6fa3560f585f09..82e0cc5b5f4e4522f0602d757ccbfb1cdd816984 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1364,4 +1364,5 @@ export const LANG_EN = {
     "contactFilledTo": "Contact filled to",
     "targetFillingField": "Target field for filling",
     "arGenWithModelMessage" : "The summary sheets with the fields defined in the resource's indexing model.",
+    "createContact": "Create a contact",
 };
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index 157bf2b14b77a03be7bbd34a2fab3d28bd51690a..5631c48547b8c3c126c72fd5cc863af94f5c4a2e 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1402,4 +1402,5 @@ export const LANG_FR = {
     "contactFilledTo": "Contact rempli à",
     "targetFillingField": "Champ cible de complétude",
     "arGenWithModelMessage" : "Les fiches de liaisons seront générées avec les champs définis dans le model d'enregistrement du courrier.",
+    "createContact": "Créer un contact",
 };
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index 88ca567aa56ef0a924c0deaccc8f63890dc0d3ea..c1f82ad4945d03f8c820cae5a90118b1bce1eb9c 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1389,4 +1389,5 @@ export const LANG_NL = {
     "contactFilledTo": "Contact filled to", //_TO_TRANSLATE
     "targetFillingField": "Target field for filling", //_TO_TRANSLATE
     "arGenWithModelMessage" : "The summary sheets with the fields defined in the resource's indexing model.", //_TO_TRANSLATE
+    "createContact": "Create a contact", //_TO_TRANSLATE
 };
diff --git a/src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.ts b/src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.ts
index ebaa93bd381114cf7992e07920bf1ad0e3f7836b..d2c3dc152feb30cea500163594719d4052f06140 100644
--- a/src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.ts
+++ b/src/frontend/plugins/onlyoffice-api-js/onlyoffice-viewer.component.ts
@@ -53,7 +53,7 @@ export class EcplOnlyofficeViewerComponent implements OnInit, AfterViewInit {
 
     @HostListener('window:message', ['$event'])
     onMessage(e: any) {
-        console.log(e);
+        //console.log(e);
         const response = JSON.parse(e.data);
 
         // EVENT TO CONSTANTLY UPDATE CURRENT DOCUMENT