diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
index 6d49e7d4..d2e25ea4 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@@ -1,7 +1,17 @@
 {
   "accounts": {
+    "instructionsOfLogin": "LOGIN TO YOUR ACCOUNT",
     "login": "Login",
     "logout": "Logout",
+    "fieldCompany": "Company",
+    "fieldLoginId": "Login ID",
+    "fieldLoginPw": "Login password",
+    "fieldPassword": "Password",
+    "fieldCurrentPassword": "Current password",
+    "fieldNewPassword": "New password",
+    "fieldNewPasswordConfirm": "New password confirm",
+    "rememberMe": "Remember me",
+    "autoLogin": "Auto login",
     "consentOfPrivacy": "Agreement of ",
     "changePassword": "Change password",
     "resetPassword": "Reset password",
@@ -12,6 +22,22 @@
       "changedPassword": "Password changed. Please log in again."
     },
     "errors": {
+      "requireLoginId": "Login ID is required.",
+      "requireLoginPw": "Login password is required.",
+      "requireCompany": "Company is required.",
+      "requireCurrentPassword": "Current password is required.",
+      "notSameWithCurrentPassword": "Does not match current password",
+      "sameWithCurrentPassword": "Same as current password",
+      "requireNewPassword": "New password is required.",
+      "requireNewPasswordConfirm": "New password confirm is required.",
+      "notSameWithNewPassword": "Does not match new password and new password confirm.",
+      "notContainSpacesForPassword": "Passwords cannot contain spaces",
+      "notContainUseridForPassword": "User ID cannot be included in the password",
+      "notContainPhonenumberForPassword": "Your mobile phone number cannot be included in your password",
+      "notAllowedAlphaNumOver3TimesForPassword": "You can't use numbers or letters over 3 times.",
+      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "You cannot use consecutive numbers or letters more than 3 times.",
+      "notSatisfiedCombineForPassword": "Combination of two or more kinds of letters, numbers and special characters.",
+      "minLengthCombineForPassword": "Password must be {{lengthOfPassword}} characters if {{countOfCombine}} combination.",
       "failToChangePassword": "Failed to change password."
     }
   },
@@ -64,6 +90,7 @@
   "chat": {
     "label": "Chat",
     "room": "Chat room",
+    "send": "Send",
     "searchRoomByName": "Search by room name",
     "searchEventByText": "Search by chat",
     "nameOfRoom": "Name of chat room",
@@ -212,6 +239,7 @@
       "downloadSelected": "Download selected",
       "openDownloadFolder": "Open download folder",
       "selectFiles": "Select files",
+      "dropZoneForUpload": "Drop files here to upload.",
       "type": {
         "label": "Type of file",
         "images": "Images",
@@ -229,7 +257,9 @@
         "failToSave": "File save failed.",
         "failToSaveSomeOfAll": "Some of file(s) save failed",
         "failToSpecifyPath": "Specifing of save path failed.",
-        "expired": "This file has expired"
+        "expired": "This file has expired",
+        "noPreview": "This file does not support preview.",
+        "notSupporedType": "File format is not supported."
       }
     },
     "clipboard": {
@@ -250,10 +280,13 @@
       "modify": "Modify",
       "remove": "Remove",
       "apply": "Apply",
-      "Minimize window": "창 최소화",
-      "Maxmize window": "창 최대화",
-      "Restore window": "창 이전 크기",
-      "Close window": "창 닫기"
+      "minimizeWindow": "Minimize window",
+      "maxmizeWindow": "Maxmize window",
+      "restoreWindow": "Restore window",
+      "Close window": "Close window",
+      "zoomOut": "Zoom out",
+      "zoomIn": "Zoom in",
+      "zoomReset": "Zoom reset"
     },
     "paginator": {
       "itemsPerPage": "Items per page",
@@ -262,10 +295,20 @@
       "firstPage": "First page",
       "lastPage": "Last page"
     },
+    "player": {
+      "play": "Play",
+      "stop": "Stop"
+    },
     "pronoun": {
       "me": "Me",
       "all": "All"
     },
+    "translations": {
+      "targetLanguage": "Traget language",
+      "noTranslation": "No translation",
+      "simpleView": "Simple View",
+      "preview": "Preview"
+    },
     "timezone": {
       "Africa/Abidjan": "Africa/Abidjan",
       "Africa/Accra": "Africa/Accra",
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
index 433c7b92..900942ca 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@@ -1,7 +1,17 @@
 {
   "accounts": {
+    "instructionsOfLogin": "계정에 로그인 하세요.",
     "login": "로그인",
     "logout": "로그아웃",
+    "fieldCompany": "회사",
+    "fieldLoginId": "로그인 아이디",
+    "fieldLoginPw": "로그인 비밀번호",
+    "fieldPassword": "비밀번호",
+    "fieldCurrentPassword": "현재 비밀번호",
+    "fieldNewPassword": "신규 비밀번호",
+    "fieldNewPasswordConfirm": "신규 비밀번호 확인",
+    "rememberMe": "아이디 저장",
+    "autoLogin": "자동 로그인",
     "consentOfPrivacy": "개인정보 동의",
     "changePassword": "비밀번호 변경",
     "resetPassword": "비밀번호 초기화",
@@ -12,6 +22,22 @@
       "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오"
     },
     "errors": {
+      "requireLoginId": "로그인 아이디를 입력해 주세요.",
+      "requireLoginPw": "로그인 비밀번호를 입력해 주세요.",
+      "requireCompany": "회사를 입력해 주세요.",
+      "requireCurrentPassword": "현재 비밀번호를 입력해 주세요",
+      "notSameWithCurrentPassword": "현재 비밀번호와 일치하지 않습니다",
+      "sameWithCurrentPassword": "현재 비밀번호와 동일합니다",
+      "requireNewPassword": "신규 비밀번호를 입력해 주세요",
+      "requireNewPasswordConfirm": "신규 비밀번호 확인을 입력해 주세요",
+      "notSameWithNewPassword": "신규 비밀번호와 신규 비밀번호 확인이 다릅니다",
+      "notContainSpacesForPassword": "비밀번호에는 공백을 입력할 수 없습니다",
+      "notContainUseridForPassword": "사용자 ID를 비밀번호에 포함할 수 없습니다",
+      "notContainPhonenumberForPassword": "사용자 휴대폰번호를 비밀번호에 포함할 수 없습니다",
+      "notAllowedAlphaNumOver3TimesForPassword": "숫자나 문자를 3번이상 반복적으로 사용할 수 없습니다",
+      "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "연속되는 숫자나 문자를 3번이상 사용할 수 없습니다",
+      "notSatisfiedCombineForPassword": "문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다",
+      "minLengthCombineForPassword": "비밀번호는 {{countOfCombine}}가지가 조합된 경우 {{lengthOfPassword}}자를 넘어야 합니다",
       "failToChangePassword": "비밀번호 변경에 실패하였습니다."
     }
   },
@@ -64,6 +90,7 @@
   "chat": {
     "label": "대화",
     "room": "대화방",
+    "send": "보내기",
     "searchRoomByName": "대화방 이름 검색",
     "searchEventByText": "대화 내용 검색",
     "nameOfRoom": "대화방 이름",
@@ -212,6 +239,7 @@
       "downloadSelected": "선택된 파일 다운로드",
       "openDownloadFolder": "다운로드 폴더 열기",
       "selectFiles": "파일을 선택하세요",
+      "dropZoneForUpload": "여기에 파일을 Drop하시면 업로드 됩니다.",
       "type": {
         "label": "파일 종류",
         "images": "이미지",
@@ -229,7 +257,9 @@
         "failToSave": "파일 저장에 실패하였습니다.",
         "failToSaveSomeOfAll": "파일 저장 중 일부 파일이 실패하였습니다.",
         "failToSpecifyPath": "저장경로 지정에 실패하였습니다.",
-        "expired": "기간이 만료된 파일입니다"
+        "expired": "기간이 만료된 파일입니다",
+        "noPreview": "미리보기를 지원하지 않는 파일입니다.",
+        "notSupporedType": "지원하지 않는 파일형식입니다."
       }
     },
     "clipboard": {
@@ -253,7 +283,10 @@
       "minimizeWindow": "창 최소화",
       "maxmizeWindow": "창 최대화",
       "restoreWindow": "창 이전 크기",
-      "closeWindow": "창 닫기"
+      "closeWindow": "창 닫기",
+      "zoomOut": "축소",
+      "zoomIn": "확대",
+      "zoomReset": "원본 비율"
     },
     "paginator": {
       "itemsPerPage": "페이지별 갯수",
@@ -262,10 +295,20 @@
       "firstPage": "처음 페이지",
       "lastPage": "마지막 페이지"
     },
+    "player": {
+      "play": "재생",
+      "stop": "멈춤"
+    },
     "pronoun": {
       "me": "나",
       "all": "전체"
     },
+    "translations": {
+      "targetLanguage": "대상 언어",
+      "noTranslation": "번역 없음",
+      "simpleView": "간략 보기",
+      "preview": "미리 보기"
+    },
     "timezone": {
       "Africa/Abidjan": "아프리카/아비 장",
       "Africa/Accra": "아프리카/아크라",
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
index 8e897a3b..a916f173 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/change-password.component.html
@@ -1,7 +1,7 @@
 <div class="change-password-form">
   <form name="changePasswordForm" [formGroup]="changePasswordForm" novalidate>
     <mat-form-field>
-      <mat-label>현재 패스워드</mat-label>
+      <mat-label>{{ 'accounts.fieldCurrentPassword' | translate }}</mat-label>
       <input
         matInput
         type="password"
@@ -9,11 +9,13 @@
       />
     </mat-form-field>
     <mat-form-field>
-      <mat-label>신규 패스워드</mat-label>
+      <mat-label>{{ 'accounts.fieldNewPassword' | translate }}</mat-label>
       <input matInput type="password" [formControl]="newLoginPwFormControl" />
     </mat-form-field>
     <mat-form-field>
-      <mat-label>신규 패스워드 확인</mat-label>
+      <mat-label>{{
+        'accounts.fieldNewPasswordConfirm' | translate
+      }}</mat-label>
       <input
         matInput
         type="password"
@@ -28,7 +30,7 @@
           currentLoginPwFormControl.hasError('required')
         "
       >
-        현재 비밀번호를 입력해 주세요
+        {{ 'accounts.errors.requireCurrentPassword' | translate }}
       </mat-error>
       <mat-error
         *ngIf="
@@ -36,7 +38,7 @@
           currentLoginPwFormControl.hasError('ucapPasswordSame')
         "
       >
-        현재 비밀번호와 일치하지 않습니다
+        {{ 'accounts.errors.notSameWithCurrentPassword' | translate }}
       </mat-error>
 
       <mat-error
@@ -45,7 +47,7 @@
           newLoginPwFormControl.hasError('required')
         "
       >
-        신규 비밀번호를 입력해 주세요
+        {{ 'accounts.errors.requireNewPassword' | translate }}
       </mat-error>
       <mat-error
         *ngIf="
@@ -53,7 +55,7 @@
           newLoginPwFormControl.hasError('ucapNotSameWith')
         "
       >
-        현재 비밀번호와 동일합니다
+        {{ 'accounts.errors.sameWithCurrentPassword' | translate }}
       </mat-error>
       <mat-error
         *ngIf="
@@ -67,46 +69,60 @@
           "
         >
           <ng-container *ngSwitchCase="PasswordValidationResult.IncludeSpace">
-            비밀번호에는 공백을 입력할 수 없습니다
+            {{ 'accounts.errors.notContainSpacesForPassword' | translate }}
           </ng-container>
           <ng-container *ngSwitchCase="PasswordValidationResult.IncludeUserId">
-            사용자 ID를 비밀번호에 포함할 수 없습니다
+            {{ 'accounts.errors.notContainUseridForPassword' | translate }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.IncludePhoneNumber"
           >
-            사용자 휴대폰번호를 비밀번호에 포함할 수 없습니다
+            {{ 'accounts.errors.notContainPhonenumberForPassword' | translate }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.IncludeRepeated"
           >
-            숫자나 문자를 3번이상 반복적으로 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedAlphaNumOver3TimesForPassword'
+                | translate
+            }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.IncludeIncrements"
           >
-            연속되는 숫자나 문자를 3번이상 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
+                | translate
+            }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.IncludeDecrements"
           >
-            연속되는 숫자나 문자를 3번이상 사용할 수 없습니다
+            {{
+              'accounts.errors.notAllowedConsecutiveAlphaNumOver3TimesForPassword'
+                | translate
+            }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.LackOfCombination"
           >
-            문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다
+            {{ 'accounts.errors.notSatisfiedCombineForPassword' | translate }}
           </ng-container>
           <ng-container
             *ngSwitchCase="PasswordValidationResult.TooShortCombinationLength"
           >
-            비밀번호는{{
-              newLoginPwFormControl.getError('ucapPassword').result.extra
-                .combinationCount
-            }}가지가 조합된 경우{{
-              newLoginPwFormControl.getError('ucapPassword').result.extra
-                .minPwLen
-            }}자를 넘어야 합니다
+            {{
+              'accounts.errors.minLengthCombineForPassword'
+                | translate
+                  : {
+                      countOfCombine: newLoginPwFormControl.getError(
+                        'ucapPassword'
+                      ).result.extra.combinationCount,
+                      lengthOfPassword: newLoginPwFormControl.getError(
+                        'ucapPassword'
+                      ).result.extra.minPwLen
+                    }
+            }}
           </ng-container>
         </ng-container>
       </mat-error>
@@ -116,7 +132,7 @@
           newConfirmLoginPwFormControl.hasError('required')
         "
       >
-        신규 비밀번호 확인을 입력해 주세요
+        {{ 'accounts.errors.requireNewPassword' | translate }}
       </mat-error>
       <mat-error
         *ngIf="
@@ -124,7 +140,7 @@
           newConfirmLoginPwFormControl.hasError('ucapSameWith')
         "
       >
-        신규 비밀번호와 신규 비밀번호 확인이 다릅니다
+        {{ 'accounts.errors.notSameWithNewPassword' | translate }}
       </mat-error>
     </div>
 
@@ -135,7 +151,7 @@
       [disabled]="changePasswordForm.invalid"
       (click)="onClickChangePassword()"
     >
-      패스워드 변경
+      {{ 'accounts.changePassword' | translate }}
     </button>
   </form>
 </div>
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
index 12e04546..19fac539 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
@@ -3,12 +3,12 @@
     class="mat-title"
     style="background-image: url(./assets/images/logo/bg_login_w160.png);"
   >
-    LOGIN TO YOUR ACCOUNT
+    {{ 'accounts.instructionsOfLogin' | translate }}
   </div>
 
   <form name="loginForm" [formGroup]="loginForm" novalidate>
     <mat-form-field [style.display]="!!curCompanyCode ? 'none' : 'block'">
-      <mat-label>Company</mat-label>
+      <mat-label>{{ 'accounts.fieldCompany' | translate }}</mat-label>
       <mat-select formControlName="companyCode" required>
         <mat-option
           *ngFor="let company of companyList"
@@ -17,26 +17,23 @@
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
-        Company is required
+        {{ 'accounts.errors.requireCompany' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>Login ID</mat-label>
+      <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
       <input matInput formControlName="loginId" />
       <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
-        Login ID is required
-      </mat-error>
-      <mat-error *ngIf="!loginForm.get('loginId').hasError('required')">
-        Please enter a valid login id
+        {{ 'accounts.errors.requireLoginId' | translate }}
       </mat-error>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>Password</mat-label>
+      <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
       <input matInput type="password" formControlName="loginPw" #loginPw />
       <mat-error>
-        Password is required
+        {{ 'accounts.errors.requireLoginPw' | translate }}
       </mat-error>
     </mat-form-field>
 
@@ -62,7 +59,7 @@
         formControlName="rememberMe"
         aria-label="Remember Me"
       >
-        아이디 저장
+        {{ 'accounts.rememberMe' | translate }}
       </mat-checkbox>
 
       <mat-checkbox
@@ -71,7 +68,7 @@
         formControlName="autoLogin"
         aria-label="Auto Login"
       >
-        자동 로그인
+        {{ 'accounts.autoLogin' | translate }}
       </mat-checkbox>
     </div>
   </form>
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
index 40d29598..a8046031 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
+++ b/projects/ucap-webmessenger-ui-account/src/lib/ucap-ui-account.module.ts
@@ -15,6 +15,7 @@ import { ChangePasswordComponent } from './components/change-password.component'
 import { LoginComponent } from './components/login.component';
 
 import { AccountService } from './services/account.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [ChangePasswordComponent, LoginComponent];
 const SERVICES = [AccountService];
@@ -31,7 +32,9 @@ const SERVICES = [AccountService];
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatSelectModule
+    MatSelectModule,
+
+    TranslateModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 2b4158a2..4856720d 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -72,8 +72,6 @@
       </div>
 
       <div class="date">
-        <!-- {{ roomInfo.finalEventDate | dateToStringChatList }}
-        .. -->
         {{ roomInfo.finalEventDate | ucapDate: 'C' }}
       </div>
     </dd>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
index 9990fad3..dcfeef8a 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
@@ -3,11 +3,20 @@
     <div fxLayout="row" class="file-upload-info">
       <!--<mat-icon>image</mat-icon>-->
       <!--파일이미지 svg-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
         <path
-          d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
-        </path>
+          d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+        ></path>
       </svg>
 
       <div class="file-upload-name">{{ fileUploadItem.file.name }}</div>
@@ -17,13 +26,16 @@
     </div>
 
     <div fxLayout="row" class="file-upload-progress">
-      <mat-progress-bar mode="determinate" [value]="fileUploadItem.uploadingProgress$ | async">
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileUploadItem.uploadingProgress$ | async"
+      >
       </mat-progress-bar>
     </div>
   </div>
 
   <div *ngIf="uploadItems" fxLayout="column">
-    <div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
+    <div>{{ 'common.file.dropZoneForUpload' | translate }}</div>
     <div></div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
index 66f712ed..1f7d40a4 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
@@ -23,7 +23,7 @@
     <button
       mat-icon-button
       class="ucap-binary-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
       matTooltipPosition="below"
       aria-label=""
       (click)="onClickDownload()"
@@ -92,7 +92,7 @@
         </div>
       </div>
       <div class="guide-msg">
-        미리보기를 지원하지 않는 파일입니다.
+        {{ 'common.file.errors.noPreview' | translate }}
       </div>
       <div>
         <button
@@ -101,7 +101,7 @@
           aria-label=""
           (click)="onClickDownload()"
         >
-          Download
+          {{ 'common.file.download' | translate }}
         </button>
       </div>
     </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
index c336f3c0..c9cc1cff 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@@ -23,7 +23,7 @@
     <button
       mat-icon-button
       class="ucap-image-viewer-action"
-      matTooltip="이미지 크기 재설정"
+      matTooltip="{{ 'common.messages.zoomReset' | translate }}"
       matTooltipPosition="below"
       aria-label=""
     >
@@ -48,7 +48,7 @@
     <button
       mat-icon-button
       class="ucap-image-viewer-action"
-      matTooltip="축소"
+      matTooltip="{{ 'common.messages.zoomOut' | translate }}"
       matTooltipPosition="below"
       aria-label=""
     >
@@ -72,7 +72,7 @@
     <button
       mat-icon-button
       class="ucap-image-viewer-action"
-      matTooltip="확대"
+      matTooltip="{{ 'common.messages.zoomIn' | translate }}"
       matTooltipPosition="below"
       aria-label=""
     >
@@ -97,7 +97,7 @@
     <button
       mat-icon-button
       class="ucap-image-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
       matTooltipPosition="below"
       aria-label=""
       (click)="onClickDownload()"
@@ -124,7 +124,7 @@
       mat-icon-button
       color="warn"
       class="ucap-image-viewer-action btn-close"
-      matTooltip="뷰어닫기"
+      matTooltip="{{ 'common.messages.close' | translate }}"
       (click)="onClickClose()"
     >
       <svg
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
index 4a40a037..318b98ef 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
@@ -6,7 +6,7 @@
     <button
       mat-icon-button
       class="ucap-image-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
       matTooltipPosition="below"
       aria-label=""
       (click)="onClickDownload()"
@@ -33,6 +33,7 @@
       mat-icon-button
       color="warn"
       class="ucap-image-viewer-action btn-close"
+      matTooltip="{{ 'common.messages.close' | translate }}"
       (click)="onClickClose()"
     >
       <svg
@@ -125,7 +126,9 @@
         <button
           mat-icon-button
           class="ucap-sound-viewer-action"
-          [matTooltip]="playing ? '멈춤' : '재생'"
+          matTooltip="{{
+            (playing ? 'common.player.stop' : 'common.player.play') | translate
+          }}"
           aria-label=""
           (click)="onClickPlayOrPause()"
         >
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
index d06f5100..e53a7a22 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
@@ -27,7 +27,7 @@
     <button
       mat-icon-button
       class="ucap-video-viewer-action"
-      matTooltip="다운로드"
+      matTooltip="{{ 'common.file.download' | translate }}"
       matTooltipPosition="below"
       aria-label=""
       (click)="onClickDownload()"
@@ -54,7 +54,7 @@
       mat-icon-button
       color="warn"
       class="ucap-image-viewer-action btn-close"
-      matTooltip="뷰어닫기"
+      matTooltip="{{ 'common.messages.close' | translate }}"
       (click)="onClickClose()"
     >
       <svg
@@ -130,7 +130,9 @@
         <button
           mat-icon-button
           class="ucap-video-viewer-action"
-          [matTooltip]="playing ? '멈춤' : '재생'"
+          matTooltip="{{
+            (playing ? 'common.player.stop' : 'common.player.play') | translate
+          }}"
           aria-label=""
           (click)="onClickPlayOrPause()"
         >
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
index 50b59682..5863e031 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
@@ -15,7 +15,7 @@
     mat-stroked-button
     (click)="onClickSendTranslationMessage(translationPreviewInfo)"
   >
-    Send
+    {{ 'chat.send' | translate }}
   </button>
   <span class="btn-close">
     <button
@@ -32,12 +32,16 @@
 <div>
   <form name="translationForm" [formGroup]="translationForm">
     <mat-form-field>
-      <mat-label>Dest Type</mat-label>
+      <mat-label>{{
+        'common.translations.targetLanguage' | translate
+      }}</mat-label>
       <mat-select
         formControlName="destType"
         (selectionChange)="onChangeSelection($event)"
       >
-        <mat-option value="">번역없음</mat-option>
+        <mat-option value="">{{
+          'common.translations.noTranslation' | translate
+        }}</mat-option>
         <mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
           >{{ dest.text }}
         </mat-option>
@@ -47,13 +51,13 @@
       labelPosition="before"
       [checked]="simpleView"
       (change)="onChangToggleSimpleview($event)"
-      >Simple View</mat-slide-toggle
+      >{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
     >
     <mat-slide-toggle
       labelPosition="before"
       [checked]="preView"
       (change)="onChangTogglePreview($event)"
-      >Preview</mat-slide-toggle
+      >{{ 'common.translations.preview' | translate }}</mat-slide-toggle
     >
   </form>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
index c4bd857f..f1fa0c59 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@@ -10,7 +10,7 @@
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
     <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
-      Confirm
+      {{ 'common.messages.confirm' | translate }}
     </button>
   </mat-card-actions>
 </mat-card>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
index 418d988c..b83605b0 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@@ -1,6 +1,11 @@
 <mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle class="card-header">
-    <mat-card-title >{{ data.title }}</mat-card-title>
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>{{ data.title }}</mat-card-title>
     <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
   </mat-card-header>
   <mat-card-content>
@@ -14,10 +19,10 @@
       (click)="onClickChoice(false)"
       class="mat-primary"
     >
-      No
+      {{ 'common.messages.no' | translate }}
     </button>
     <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      Yes
+      {{ 'common.messages.yes' | translate }}
     </button>
   </mat-card-actions>
 </mat-card>
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts
index ea8b4b9c..32927fc4 100644
--- a/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/click-debounce.directive.ts
@@ -32,7 +32,7 @@ export class ClickDebounceDirective implements OnInit, OnDestroy {
   }
 
   @HostListener('click', ['$event'])
-  clickEvent(event) {
+  clickEvent(event: Event) {
     event.preventDefault();
     event.stopPropagation();
     this.clicks.next(event);
diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
index 9f95c533..d245f47e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts
@@ -19,6 +19,7 @@ import {
   AlertDialogResult,
   AlertDialogData
 } from '../dialogs/alert.dialog.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Directive({
   selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]'
@@ -45,6 +46,7 @@ export class FileUploadForDirective implements AfterViewInit {
     private commonApiService: CommonApiService,
     private elementRef: ElementRef,
     private logger: NGXLogger,
+    private translateService: TranslateService,
     private dialogService: DialogService
   ) {}
 
@@ -126,7 +128,9 @@ export class FileUploadForDirective implements AfterViewInit {
       >(AlertDialogComponent, {
         data: {
           title: 'Alert',
-          html: `지원하지 않는 파일형식입니다.${
+          html: `${this.translateService.instant(
+            'common.file.errors.notSupporedType'
+          )} ${
             checkExt.reject.length > 0
               ? '<br/>(' + checkExt.reject.join(',') + ')'
               : ''
diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
deleted file mode 100644
index 504d3656..00000000
--- a/projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { StringUtil } from '../utils/string.util';
-import moment from 'moment';
-
-@Pipe({
-  name: 'dateToStringChatList'
-})
-export class DateToStringForChatRoomListPipe implements PipeTransform {
-  transform(value: any): string {
-    const curDate = new Date();
-    const yesterDate = new Date(curDate.getTime() - 1 * 24 * 60 * 60 * 1000);
-    let date: Date;
-    if (typeof value === 'string') {
-      date = moment(value.toString()).toDate();
-    } else if (value instanceof Date) {
-      date = value;
-    } else {
-      return value;
-    }
-
-    if (
-      curDate.getFullYear() === date.getFullYear() &&
-      curDate.getMonth() === date.getMonth() &&
-      curDate.getDate() === date.getDate()
-    ) {
-      // 당일
-      return StringUtil.dateFormat(date, 'a/p HH:mm');
-    } else if (
-      yesterDate.getFullYear() === date.getFullYear() &&
-      yesterDate.getMonth() === date.getMonth() &&
-      yesterDate.getDate() === date.getDate()
-    ) {
-      // 어제
-      return '어제';
-    } else {
-      return StringUtil.dateFormat(date, 'MM.dd');
-    }
-  }
-}
-
-@Pipe({
-  name: 'dateToStringFormat'
-})
-export class DateToStringFormatPipe implements PipeTransform {
-  transform(value: any, format?: string): string {
-    const date = moment(value.toString()).toDate();
-
-    if (!!format) {
-      return StringUtil.dateFormat(date, format);
-    } else {
-      return StringUtil.dateFormat(date, 'YYYY.MM.DD');
-    }
-  }
-}
-
-@Pipe({
-  name: 'dateDistanceToDay'
-})
-export class DateDistanceToDatePipe implements PipeTransform {
-  transform(value: any, distanceDay?: number): Date {
-    distanceDay = distanceDay || 0;
-    const date: Date = moment(value.toString()).toDate();
-    date.setDate(date.getDate() + distanceDay);
-    return date;
-  }
-}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index 51f20765..b3a59dbf 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -27,6 +27,8 @@ import {
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
+import { TranslateModule } from '@ngx-translate/core';
+
 import { FileUploadQueueComponent } from './components/file-upload-queue.component';
 import { FloatActionButtonComponent } from './components/float-action-button.component';
 import { FileViewerComponent } from './components/file-viewer.component';
@@ -62,11 +64,6 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
 
 import { BytesPipe } from './pipes/bytes.pipe';
 import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
-import {
-  DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe,
-  DateDistanceToDatePipe
-} from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
 import { TranslatePipe } from './pipes/translate.pipe';
@@ -109,9 +106,6 @@ const PIPES = [
   BytesPipe,
   LinefeedToHtmlPipe,
   HtmlToLinefeedPipe,
-  DateToStringForChatRoomListPipe,
-  DateToStringFormatPipe,
-  DateDistanceToDatePipe,
   SecondsToMinutesPipe,
   LinkyPipe,
   TranslatePipe,
@@ -152,7 +146,8 @@ const SERVICES = [
     MatDatepickerModule,
     MatSelectModule,
     MatSlideToggleModule,
-    DragDropModule
+    DragDropModule,
+    TranslateModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],
   declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES],