diff --git a/src/frontend/app/attachments/attachments-list.component.html b/src/frontend/app/attachments/attachments-list.component.html
index 0a4342e6fdedffc47ac21fca60c214268dd2eab3..f0f7e5c463be91d43a2bd60ced078888041dfc03 100644
--- a/src/frontend/app/attachments/attachments-list.component.html
+++ b/src/frontend/app/attachments/attachments-list.component.html
@@ -1,13 +1,23 @@
-<div *ngIf="loading" style="display:flex;height:100%;">
-    <mat-spinner style="margin:auto;"></mat-spinner>
-</div>
-<div style="text-align:center;font-weight:bold;opacity:0.3;">{{data.chrono}} - {{lang.attachments}}</div>
-<mat-nav-list *ngIf="!loading" style="min-width:650px;">
+<ng-container *ngIf="!loading">
+    <div *ngIf="attachments.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
+        AUCUN ATTACHEMENT
+    </div>
+    <mat-card *ngFor="let attachment of attachments" style="margin: 30px;">
+       <div class="thumbnailPj">
+        <img>
+       </div>
+       <div class="infosPj">
+
+       </div>
+    </mat-card>
+</ng-container>
+
+<!--<mat-nav-list *ngIf="!loading">
     <div *ngIf="attachments.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
         AUCUN ATTACHEMENT
     </div>
     <ng-container *ngFor="let attachment of attachments">
-        <a target="_blank" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{data.resId}}&id={{attachment.res_id}}" mat-list-item (click)="openLink($event)" style="height:auto;">
+        <a target="_blank" href="index.php?display=true&module=attachments&page=view_attachment&res_id_master={{resIds[0]}}&id={{attachment.res_id}}" mat-list-item (click)="openLink($event)" style="height:auto;">
             <span mat-line>
                 <div style="display:flex;color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;">
                     <span style="flex:1;text-align: center;">
@@ -45,11 +55,8 @@
                         </div>
                     </div>
                 </div>
-
-
             </span>
         </a>
         <mat-divider style="margin:10px;"></mat-divider>
     </ng-container>
-
-</mat-nav-list>
\ No newline at end of file
+</mat-nav-list>-->
\ No newline at end of file
diff --git a/src/frontend/app/attachments/attachments-list.component.ts b/src/frontend/app/attachments/attachments-list.component.ts
index 707baea4765f1efdac0c076b8e55279f8722f2c4..7161bc9d500855785ca2b96e844382fb7e1c1ef9 100644
--- a/src/frontend/app/attachments/attachments-list.component.ts
+++ b/src/frontend/app/attachments/attachments-list.component.ts
@@ -1,10 +1,7 @@
-import { Component, AfterViewInit, Inject } from '@angular/core';
+import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { LANG } from '../translate.component';
 import { NotificationService } from '../notification.service';
-import { MAT_BOTTOM_SHEET_DATA } from '@angular/material';
-
-declare function $j(selector: any): any;
 
 @Component({
     selector: 'app-attachments-list',
@@ -12,20 +9,28 @@ declare function $j(selector: any): any;
     styleUrls: ['attachments-list.component.scss'],
     providers: [NotificationService]
 })
-export class AttachmentsListComponent implements AfterViewInit {
+export class AttachmentsListComponent implements OnInit {
 
     lang: any = LANG;
     attachments: any;
     attachmentTypes: any;
     loading: boolean = true;
+    resIds: number[] = [];
+    @Input('injectDatas') injectDatas: any;
+    @Output('reloadBadgeAttachments') reloadBadgeNotes = new EventEmitter<string>();
+
+    constructor(public http: HttpClient) { }
 
-    constructor(public http: HttpClient, @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) { }
+    ngOnInit(): void { }
 
-    ngAfterViewInit() {
-        this.http.get("../../rest/res/" + this.data.resId + "/attachments")
+    loadAttachments(resId: number) {
+        this.resIds[0] = resId;
+        this.loading = true;
+        this.http.get("../../rest/res/" + this.resIds[0] + "/attachments")
             .subscribe((data: any) => {
                 this.attachments = data.attachments;
                 this.attachmentTypes = data.attachment_types;
+                this.reloadBadgeNotes.emit(`${this.attachments.length}`);
                 this.loading = false;
             });
     }
diff --git a/src/frontend/app/list/basket-list.component.html b/src/frontend/app/list/basket-list.component.html
index cb24c5c63cea60e3735d36e5c2fe2ee77c532027..b1f9b7c8fe12fab51830bc62059f1e78b7b83063 100644
--- a/src/frontend/app/list/basket-list.component.html
+++ b/src/frontend/app/list/basket-list.component.html
@@ -65,8 +65,8 @@
 
                             <ng-container matColumnDef="res_id">
                                 <td mat-cell *matCellDef="let row"
-                                    style="padding:0;border-top: solid 1px rgba(0, 0, 0, 0.12);"
-                                    [class.selected-data]="row.checked">
+                                    style="padding:0;border-top: solid 1px rgba(0, 0, 0, 0.12);cursor:pointer;"
+                                    [class.selected-data]="row.checked" (click)="launch(defaultAction,row);">
                                     <div *ngIf="!snav2.opened && !mobileMode && row.display.length > 0" class="sub-info">
                                         <span class="sub-info-data" [class]="data.cssClasses.join(' ')"
                                             *ngFor="let data of row.display" style="flex:1;white-space: pre;
@@ -144,7 +144,7 @@
                                                 </mat-icon>
                                             </button>
                                             <button mat-icon-button title="{{lang.attachments}}"
-                                                (click)="$event.stopPropagation();openAttachSheet(row)"
+                                                (click)="$event.stopPropagation();togglePanel('attachment',row)"
                                                 [class.noData]="row.countAttachments == 0">
                                                 <mat-icon matBadgeHidden="{{row.countAttachments == 0}}" fontSet="fas"
                                                     matBadge="{{row.countAttachments}}" fontIcon="fa-paperclip fa-2x">
diff --git a/src/frontend/app/list/basket-list.component.ts b/src/frontend/app/list/basket-list.component.ts
index 95dec47d4f79bc4a843ef0641a307e9d93afda2c..74bebf9ad1267475dc62a8f1d04c9cc731076506 100755
--- a/src/frontend/app/list/basket-list.component.ts
+++ b/src/frontend/app/list/basket-list.component.ts
@@ -11,15 +11,10 @@ import { startWith, switchMap, map, catchError } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HeaderService } from '../../service/header.service';
 import { FiltersListService } from '../../service/filtersList.service';
-import { NotesListComponent } from '../notes/notes.component';
-import { AttachmentsListComponent } from '../attachments/attachments-list.component';
-import { DiffusionsListComponent } from '../diffusions/diffusions-list.component';
 import { FiltersToolComponent } from './filters/filters-tool.component';
 
 import { ActionsListComponent } from '../actions/actions-list.component';
 import { Overlay } from '@angular/cdk/overlay';
-import { VisaWorkflowComponent } from '../visa/visa-workflow.component';
-import { AvisWorkflowComponent } from '../avis/avis-workflow.component';
 import { BasketHomeComponent } from '../basket/basket-home.component';
 import { PanelListComponent } from './panel/panel-list.component';
 
@@ -225,12 +220,10 @@ export class BasketListComponent implements OnInit {
 
     refreshBadgeNotes(nb: number) {
         this.currentResource.countNotes = nb;
-    }
+    }                                     
 
-    openAttachSheet(row: any): void {
-        this.bottomSheet.open(AttachmentsListComponent, {
-            data: { resId: row.res_id, chrono: row.alt_identifier },
-        });
+    refreshBadgeAttachments(nb: number) {
+        this.currentResource.countAttachments = nb;
     }
 
     refreshDao() {
diff --git a/src/frontend/app/list/panel/panel-list.component.html b/src/frontend/app/list/panel/panel-list.component.html
index 0faf99049549811a9018dfff679dc38eee00e49e..057668e545261d1e18c0fc508d298d9ed9a3bf1a 100644
--- a/src/frontend/app/list/panel/panel-list.component.html
+++ b/src/frontend/app/list/panel/panel-list.component.html
@@ -11,7 +11,6 @@
     title="{{this.currentResource.subject}}">
     {{this.currentResource.subject | shorten: 50: '...'}}
 </div>
-
 <mat-tab-group *ngIf="this.mode == 'diffusion'" [(selectedIndex)]="selectedDiffusionTab" class="diffusionTab">
     <mat-tab label="{{lang.diffusionList}}">
         <app-diffusions-list #appDiffusionsList [injectDatas]="injectDatasParam"></app-diffusions-list>
@@ -23,5 +22,5 @@
         <app-avis-workflow #appAvisWorkflow [injectDatas]="injectDatasParam"></app-avis-workflow>
     </mat-tab>
 </mat-tab-group>
-
-<app-notes-list #appNotesList *ngIf="this.mode == 'note'" [injectDatas]="injectDatasParam" (reloadBadgeNotes)="reloadBadgeNotes($event)"></app-notes-list>
\ No newline at end of file
+<app-notes-list #appNotesList *ngIf="this.mode == 'note'" [injectDatas]="injectDatasParam" (reloadBadgeNotes)="reloadBadgeNotes($event)"></app-notes-list>
+<app-attachments-list #appAttachmentsList *ngIf="this.mode == 'attachment'" [injectDatas]="injectDatasParam" (reloadBadgeAttachments)="reloadBadgeAttachments($event)"></app-attachments-list>
\ No newline at end of file
diff --git a/src/frontend/app/list/panel/panel-list.component.ts b/src/frontend/app/list/panel/panel-list.component.ts
index 20d5d28198ba47adcab11f721d81308ec6491a04..f816b4faaf1b1585a9bfa0e4728a04a97b9ba401 100644
--- a/src/frontend/app/list/panel/panel-list.component.ts
+++ b/src/frontend/app/list/panel/panel-list.component.ts
@@ -4,6 +4,7 @@ import { DiffusionsListComponent } from '../../diffusions/diffusions-list.compon
 import { VisaWorkflowComponent } from '../../visa/visa-workflow.component';
 import { AvisWorkflowComponent } from '../../avis/avis-workflow.component';
 import { NotesListComponent } from '../../notes/notes.component';
+import { AttachmentsListComponent } from '../../attachments/attachments-list.component';
 
 declare function $j(selector: any): any;
 
@@ -29,11 +30,13 @@ export class PanelListComponent implements OnInit {
     currentResource: any = {};
 
     @Output('refreshBadgeNotes') refreshBadgeNotes = new EventEmitter<string>();
+    @Output('refreshBadgeAttachments') refreshBadgeAttachments = new EventEmitter<string>();
 
     @ViewChild('appDiffusionsList') appDiffusionsList: DiffusionsListComponent;
     @ViewChild('appVisaWorkflow') appVisaWorkflow: VisaWorkflowComponent;
     @ViewChild('appAvisWorkflow') appAvisWorkflow: AvisWorkflowComponent;
     @ViewChild('appNotesList') appNotesList: NotesListComponent;
+    @ViewChild('appAttachmentsList') appAttachmentsList: AttachmentsListComponent;
 
     constructor() { }
 
@@ -65,10 +68,19 @@ export class PanelListComponent implements OnInit {
             setTimeout(() => {
                 $j('textarea').focus();
             }, 200);
+        } else if (mode == 'attachment') {
+            setTimeout(() => {
+                this.icon = 'fa-paperclip';
+                this.appAttachmentsList.loadAttachments(this.currentResource.res_id);
+            }, 0);
         }
     }
 
     reloadBadgeNotes(nb:any) {
         this.refreshBadgeNotes.emit(nb);
     }
+
+    reloadBadgeAttachments(nb:any) {
+        this.refreshBadgeAttachments.emit(nb);
+    }
 }