diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
index 911ce46e..0a61718c 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
@@ -1,24 +1,31 @@
 <div class="bubble-main">
-  <div class="file-img video"></div>
+  <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
+  <!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
+  <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
+    <div class="ico"></div>
+  </div>
   <ul class="file-info">
     <li class="file-name">
-      {{ fileInfo.FileName }}
+      {{ fileInfo.fileName }}
     </li>
     <li class="file-size">
-      {{ fileInfo.AttSize }}
+      {{ fileInfo.attachmentSize | ucapBytes }}
     </li>
     <li class="file-ext">
-      {{ fileInfo.FileExt }}
+      {{ fileInfo.fileExt }}
     </li>
   </ul>
 </div>
-<span  class="btn-box">
-  <ul>
+<div class="btn-box">
+  <ul *ngIf="expired" class="expired">
+    <li>기간이 만료된 파일입니다.</li>
+  </ul>
+  <ul *ngIf="!expired && fileInfo && fileInfo.attachmentSeq">
     <li>
-      <button mat-button >Save</button>
+      <button mat-button (click)="onClickSave()">Save</button>
     </li>
     <li>
-      <button mat-button >Save As</button>
+      <button mat-button (click)="onClickSaveAs()">Save As</button>
     </li>
   </ul>
-</span>
+</div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.ts
index cf717735..c8fb8879 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { NGXLogger } from 'ngx-logger';
-import { FileInfo } from '../../models/file-info.json';
+import { FileEventJson } from '@ucap-webmessenger/protocol-event';
 
 @Component({
   selector: 'ucap-chat-message-box-video',
@@ -9,11 +9,21 @@ import { FileInfo } from '../../models/file-info.json';
 })
 export class VideoComponent implements OnInit {
   @Input()
-  fileInfo: FileInfo;
+  fileInfo: FileEventJson;
   @Input()
   expired = false;
 
+  @Output()
+  save = new EventEmitter<string>();
+
   constructor(private logger: NGXLogger) {}
 
   ngOnInit() {}
+
+  onClickSave() {
+    this.save.emit('save');
+  }
+  onClickSaveAs() {
+    this.save.emit('saveAs');
+  }
 }