diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
index 2a579ef2..ca4427cd 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.ts
@@ -33,6 +33,12 @@ import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { ModuleConfig } from '@ucap-webmessenger/api-common';
 import { _MODULE_CONFIG } from 'projects/ucap-webmessenger-api-common/src/lib/config/token';
 import { AppFileService } from '@app/services/file.service';
+import { DialogService } from '@ucap-webmessenger/ui';
+import {
+  FileViewerDialogComponent,
+  FileViewerDialogResult,
+  FileViewerDialogData
+} from '@app/layouts/common/dialogs/file-viewer.dialog.component';
 
 export interface FileInfoTotal {
   info: FileInfo;
@@ -75,6 +81,7 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private appFileService: AppFileService,
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private dialogService: DialogService,
     private logger: NGXLogger
   ) {
     this.loginRes = this.sessionStorageService.get<LoginResponse>(
@@ -261,4 +268,29 @@ export class AlbumBoxComponent implements OnInit, OnDestroy {
       this.playable = false;
     }
   }
+
+  async onFileViewer(event: MouseEvent, fileInfos: FileInfoTotal) {
+    // const result = await this.dialogService.open<
+    //   FileViewerDialogComponent,
+    //   FileViewerDialogData,
+    //   FileViewerDialogResult
+    // >(FileViewerDialogComponent, {
+    //   position: {
+    //     top: '50px'
+    //   },
+    //   maxWidth: '100vw',
+    //   maxHeight: '100vh',
+    //   height: 'calc(100% - 50px)',
+    //   width: '100%',
+    //   hasBackdrop: false,
+    //   panelClass: 'app-dialog-full',
+    //   data: {
+    //     fileInfo: fileInfos.info.sentMessageJson,
+    //     downloadUrl: this.sessionVerinfo.downloadUrl,
+    //     deviceType: this.environmentsInfo.deviceType,
+    //     token: this.loginRes.tokenString,
+    //     userSeq: this.loginRes.userSeq
+    //   }
+    // });
+  }
 }