diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 4c95f5d2..803a52d0 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -327,9 +327,20 @@
   </div>
   <div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
   <div class="setting">
-    <button mat-menu-item class="zoom minus-square">축소</button
+    <button
+      mat-menu-item
+      class="zoom minus-square"
+      (click)="onClickZoomOut($event)"
+    >
+      축소</button
     ><span class="set-size">100%</span
-    ><button mat-menu-item class="zoom plus-square">확대</button>
+    ><button
+      mat-menu-item
+      class="zoom plus-square"
+      (click)="onClickZoomIn($event)"
+    >
+      확대
+    </button>
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickSettings()">설정</button>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index 8720537d..b89bc837 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -1,4 +1,11 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Inject,
+  OnDestroy,
+  ChangeDetectorRef,
+  ViewChild
+} from '@angular/core';
 import {
   UCAP_NATIVE_SERVICE,
   NativeService,
@@ -47,6 +54,8 @@ import {
   ProfileDialogData
 } from '@app/layouts/messenger/dialogs/profile/profile.dialog.component';
 import { DialogService } from '@ucap-webmessenger/ui';
+import { DOCUMENT } from '@angular/common';
+import { MatMenu } from '@angular/material';
 
 @Component({
   selector: 'app-layout-native-top-bar',
@@ -70,6 +79,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
 
   WebLinkType = WebLinkType;
 
+  @ViewChild('profileMenu', { static: true })
+  profileMenu: MatMenu;
+
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -78,6 +90,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
     private sessionStorageService: SessionStorageService,
     private daesangApiService: DaesangApiService,
     private daesangProtocolService: DaesangProtocolService,
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(DOCUMENT) private document: Document,
     private logger: NGXLogger
   ) {}
 
@@ -256,9 +270,6 @@ export class TopBarComponent implements OnInit, OnDestroy {
     //   .subscribe();
     event.preventDefault();
 
-    this.logger.debug('onClickOpenProfile');
-    return;
-
     // [Daesang]
     this.daesangProtocolService
       .dataUserDaesang({
@@ -317,4 +328,16 @@ export class TopBarComponent implements OnInit, OnDestroy {
   onClickUpdate() {
     this.store.dispatch(UpdateStore.applyInstantUpdate());
   }
+
+  onClickZoomOut(event: Event) {
+    event.stopPropagation();
+
+    this.document.body.style.zoom = '80%';
+  }
+
+  onClickZoomIn(event: Event) {
+    event.stopPropagation();
+
+    this.document.body.style.zoom = '120%';
+  }
 }