diff --git a/projects/ucap-webmessenger-api-prompt/src/lib/services/call.service.ts b/projects/ucap-webmessenger-api-prompt/src/lib/services/call.service.ts
index eb36b9c2..d05af8c1 100644
--- a/projects/ucap-webmessenger-api-prompt/src/lib/services/call.service.ts
+++ b/projects/ucap-webmessenger-api-prompt/src/lib/services/call.service.ts
@@ -2,7 +2,7 @@ import { Injectable, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, catchError } from 'rxjs/operators';
 
 import { _MODULE_CONFIG } from '../config/token';
 import { ModuleConfig } from '../config/module-config';
@@ -14,6 +14,7 @@ import {
   encodeCall,
   decodeCall
 } from '../apis/call';
+import { NGXLogger } from 'ngx-logger';
 
 @Injectable({
   providedIn: 'root'
@@ -23,7 +24,8 @@ export class CallService {
 
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private logger: NGXLogger
   ) {
     this.urls = UrlConfig.getUrls(
       this.moduleConfig.hostConfig,
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
index 3bdeac04..f9e2c908 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
@@ -27,8 +27,8 @@ import {
 } from '@ucap-webmessenger/ui';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { map, take, finalize } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
+import { map, take, finalize, catchError } from 'rxjs/operators';
+import { Subscription, of } from 'rxjs';
 import {
   SelectGroupDialogComponent,
   SelectGroupDialogData,
@@ -203,7 +203,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
               } else {
                 this.logger.error(res);
               }
-            })
+            }),
+            catchError(error => of(this.logger.debug(error)))
           )
           .subscribe();
       }
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 e0d96f80..19230011 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
@@ -7,6 +7,7 @@
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
     <button
       mat-icon-button
+      *ngIf="weblink.length > 0"
       class="button app-layout-native-title-bar-logout"
       matTooltip="웹링크"
       (click)="onToggleWebLinkSelector()"
@@ -235,7 +236,15 @@
     <div class="img-item">
       <ul>
         <li *ngFor="let link of weblink" (click)="onClickWebLink(link)">
-          <div class="icon" [matTooltip]="link.title">
+          <div
+            class="icon"
+            [matBadgeHidden]="getShowWebLinkbadge(link)"
+            [matBadge]="getWebLinkBadgeCount(link)"
+            matBadgeDescription="확인하지 않은 메시지가 있습니다."
+            matBadgeColor="accent"
+            matBadgePosition="above after"
+            [matTooltip]="link.title"
+          >
             <span class="mdi mdi-star-circle-outline mdi-48px"></span>
           </div>
           <div class="description ellipsis">{{ link.title }}</div>
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 406ff40b..ed8f6f5b 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
@@ -5,7 +5,7 @@ import {
   WindowState,
   UpdateInfo
 } from '@ucap-webmessenger/native';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -15,18 +15,25 @@ import * as SettingsStore from '@app/store/messenger/settings';
 import * as UpdateStore from '@app/store/setting/update';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { tap } from 'rxjs/operators';
+import { tap, take, map, catchError } from 'rxjs/operators';
 import {
   RightDrawer,
   KEY_URL_INFO,
   LoginInfo,
-  KEY_LOGIN_INFO
+  KEY_LOGIN_INFO,
+  KEY_LOGIN_RES_INFO
 } from '@app/types';
 import {
   WebLink,
   DaesangUrlInfoResponse
 } from '@ucap-webmessenger/api-external';
-import { SessionStorageService } from '@ucap-webmessenger/web-storage';
+import {
+  SessionStorageService,
+  LocalStorageService
+} from '@ucap-webmessenger/web-storage';
+import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
+import { environment } from '../../../../environments/environment';
+import { DaesangApiService } from '@ucap-webmessenger/daesang';
 
 @Component({
   selector: 'app-layout-native-top-bar',
@@ -45,11 +52,15 @@ export class TopBarComponent implements OnInit, OnDestroy {
   showWeblink = false;
   loginInfo: LoginInfo;
   weblink: WebLink[] = [];
+  webLinkBadgeMail = 0;
+  webLinkBadgePayment = 0;
 
   constructor(
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
-    private sessionStorageService: SessionStorageService
+    private localStorageService: LocalStorageService,
+    private sessionStorageService: SessionStorageService,
+    private daesangApiService: DaesangApiService
   ) {}
 
   ngOnInit() {
@@ -77,11 +88,24 @@ export class TopBarComponent implements OnInit, OnDestroy {
   }
 
   initWebLink(): void {
+    const loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+
     const urlInfo: DaesangUrlInfoResponse = this.sessionStorageService.get<
       DaesangUrlInfoResponse
     >(KEY_URL_INFO);
 
     if (!!urlInfo && !!urlInfo.webLink) {
+      // urlInfo.webLinkAllowedList.push(
+      //   ...[
+      //     'WebLinkMail',
+      //     'WebLinkMailCnt',
+      //     'WebLinkPayment',
+      //     'WebLinkPaymentCnt'
+      //   ]
+      // );
+
       this.weblink = urlInfo.webLink.filter(
         weblink =>
           urlInfo.webLinkAllowedList.filter(type => type === weblink.key)
@@ -97,8 +121,30 @@ export class TopBarComponent implements OnInit, OnDestroy {
           weblink => weblink.key === 'WebLinkMailCnt'
         );
         if (link.length > 0) {
+          const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+            KEY_APP_USER_INFO,
+            environment.customConfig.appKey
+          );
+
           const WebLinkMailCnt = link[0];
-          // this.onClickWebLink(WebLinkMailCnt);
+          const loginPw = appUserInfo.loginPw;
+          const loginPw2 = this.loginInfo.loginPw;
+          const loginId = this.loginInfo.loginId;
+          const token = loginRes.tokenString;
+
+          const url = WebLinkMailCnt.url
+            .replace(/(\(%USER_TOKEN%\))/g, token)
+            .replace(/(\(%USER_ID%\))/g, loginId)
+            .replace(/(\(%USER_PASS%\))/g, loginPw);
+
+          this.daesangApiService
+            .retrieveMailCount(url)
+            .pipe(
+              take(1),
+              map(res => (this.webLinkBadgeMail = res.count)),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
         }
       }
       if (
@@ -110,14 +156,43 @@ export class TopBarComponent implements OnInit, OnDestroy {
           weblink => weblink.key === 'WebLinkPaymentCnt'
         );
         if (link.length > 0) {
+          const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+            KEY_APP_USER_INFO,
+            environment.customConfig.appKey
+          );
+
           const WebLinkPaymentCnt = link[0];
-          // this.onClickWebLink(WebLinkPaymentCnt);
+          const WebLinkMailCnt = link[0];
+          const loginPw = appUserInfo.loginPw;
+          const loginPw2 = this.loginInfo.loginPw;
+          const loginId = this.loginInfo.loginId;
+          const token = loginRes.tokenString;
+
+          const url = WebLinkMailCnt.url
+            .replace(/(\(%USER_TOKEN%\))/g, token)
+            .replace(/(\(%USER_ID%\))/g, loginId)
+            .replace(/(\(%USER_PASS%\))/g, loginPw);
+
+          this.daesangApiService
+            .retrievePaymentCount(url)
+            .pipe(
+              take(1),
+              map(res => {
+                this.webLinkBadgePayment = res.count;
+              }),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
         }
       }
     }
   }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    if (!!this.loginResSubscription) {
+      this.loginResSubscription.unsubscribe();
+    }
+  }
 
   onClickClose() {
     this.nativeService.windowClose();
@@ -151,13 +226,46 @@ export class TopBarComponent implements OnInit, OnDestroy {
     this.showWeblink = !this.showWeblink;
   }
   onClickWebLink(link: WebLink): void {
-    const loginPw = this.loginInfo.loginPw;
+    const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      environment.customConfig.appKey
+    );
+
+    const loginPw = appUserInfo.loginPw;
+    const loginPw2 = this.loginInfo.loginPw;
+    const loginId = this.loginInfo.loginId;
     const token = this.loginRes.tokenString;
 
-    const url = link.url.replace('(%USER_TOKEN%)', token);
+    const url = link.url
+      .replace(/(\(%USER_TOKEN%\))/g, token)
+      .replace(/(\(%USER_ID%\))/g, loginId)
+      .replace(/(\(%USER_PASS%\))/g, loginPw);
 
     this.nativeService.openDefaultBrowser(url);
   }
+  getShowWebLinkbadge(link: WebLink): boolean {
+    const showType = [
+      'WebLinkMail',
+      'WebLinkMailCnt',
+      'WebLinkPayment',
+      'WebLinkPaymentCnt'
+    ];
+
+    if (showType.indexOf(link.key) > -1) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  getWebLinkBadgeCount(link: WebLink): number {
+    if (link.key === 'WebLinkMail') {
+      return this.webLinkBadgeMail;
+    } else if (link.key === 'WebLinkPayment') {
+      return this.webLinkBadgePayment;
+    } else {
+      return 0;
+    }
+  }
 
   onClickUpdate() {
     this.store.dispatch(UpdateStore.applyInstantUpdate());
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/native.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/native.layout.module.ts
index 15554fa6..829a00f2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/native.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/native.layout.module.ts
@@ -9,7 +9,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 
 import { COMPONENTS } from './components';
-import { MatTooltipModule } from '@angular/material';
+import { MatTooltipModule, MatBadgeModule } from '@angular/material';
 
 @NgModule({
   imports: [
@@ -18,6 +18,7 @@ import { MatTooltipModule } from '@angular/material';
     MatIconModule,
     MatToolbarModule,
     MatTooltipModule,
+    MatBadgeModule,
 
     UCapUiModule
   ],
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
index 1b3f6505..bcf03160 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -1,11 +1,11 @@
-import { map, tap, take } from 'rxjs/operators';
+import { map, tap, take, catchError } from 'rxjs/operators';
 import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of } from 'rxjs';
 import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
@@ -262,7 +262,8 @@ export class MainPageComponent implements OnInit, OnDestroy {
             take(1),
             map(res => {
               console.log(res);
-            })
+            }),
+            catchError(error => of(this.logger.debug(error)))
           )
           .subscribe();
       }
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
index d2521165..01aab1f6 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@@ -53,6 +53,13 @@ export const environment: Environment = {
     }
   },
 
+  customConfig: {
+    appKey: '!@#$DAESANG%^&*',
+
+    /** 삭제,수정 불가 그룹 Seqs:number[] */
+    fixedGroupSeqs: []
+  },
+
   commonApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
index 91cbae98..da298dcb 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -53,6 +53,13 @@ export const environment: Environment = {
     }
   },
 
+  customConfig: {
+    appKey: '!@#$DAESANG%^&*',
+
+    /** 삭제,수정 불가 그룹 Seqs:number[] */
+    fixedGroupSeqs: []
+  },
+
   commonApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/projects/ucap-webmessenger-daesang/src/lib/apis/api.ts b/projects/ucap-webmessenger-daesang/src/lib/apis/api.ts
new file mode 100644
index 00000000..c9a1e1b3
--- /dev/null
+++ b/projects/ucap-webmessenger-daesang/src/lib/apis/api.ts
@@ -0,0 +1,30 @@
+import { APIDecoder, APIResponse } from '@ucap-webmessenger/api';
+
+export interface MailCountResponse {
+  systemName: string;
+  count: number;
+}
+
+export const decodeMailCount: APIDecoder<MailCountResponse> = (res: any) => {
+  const domParser = new DOMParser();
+  const dom: Document = domParser.parseFromString(res, 'text/xml');
+
+  let systemName = '';
+  const systemNameDom: HTMLCollection = dom.getElementsByTagName('COUNT');
+  if (!!systemNameDom && systemNameDom.length > 0) {
+    systemName = systemNameDom[0].textContent;
+  }
+
+  let count = 0;
+  const countDom: HTMLCollection = dom.getElementsByTagName('COUNT');
+  if (!!countDom && countDom.length > 0) {
+    count =
+      countDom[0].textContent.trim().length > 0
+        ? Number(countDom[0].textContent.trim())
+        : 0;
+  }
+  return {
+    systemName,
+    count
+  } as MailCountResponse;
+};
diff --git a/projects/ucap-webmessenger-daesang/src/lib/services/daesang-api.service.ts b/projects/ucap-webmessenger-daesang/src/lib/services/daesang-api.service.ts
new file mode 100644
index 00000000..f93e7afe
--- /dev/null
+++ b/projects/ucap-webmessenger-daesang/src/lib/services/daesang-api.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { NGXLogger } from 'ngx-logger';
+
+import { decodeMailCount, MailCountResponse } from '../apis/api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DaesangApiService {
+  constructor(private httpClient: HttpClient) {}
+
+  public retrieveMailCount(url: string): Observable<MailCountResponse> {
+    return this.httpClient
+      .post<any>(url, {}, {})
+      .pipe(map(res => decodeMailCount(res)));
+  }
+
+  public retrievePaymentCount(url: string): Observable<any> {
+    return this.httpClient
+      .post<any>(url, {}, {})
+      .pipe(map(res => decodeMailCount(res)));
+  }
+}
diff --git a/projects/ucap-webmessenger-daesang/src/lib/ucap-daesang.module.ts b/projects/ucap-webmessenger-daesang/src/lib/ucap-daesang.module.ts
index 34d47aa9..0a769a16 100644
--- a/projects/ucap-webmessenger-daesang/src/lib/ucap-daesang.module.ts
+++ b/projects/ucap-webmessenger-daesang/src/lib/ucap-daesang.module.ts
@@ -2,8 +2,13 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { DaesangCipherService } from './services/daesang-cipher.service';
 import { DaesangProtocolService } from './services/daesang-protocol.service';
+import { DaesangApiService } from './services/daesang-api.service';
 
-const SERVICES = [DaesangCipherService, DaesangProtocolService];
+const SERVICES = [
+  DaesangCipherService,
+  DaesangProtocolService,
+  DaesangApiService
+];
 
 @NgModule({
   declarations: [],
diff --git a/projects/ucap-webmessenger-daesang/src/public-api.ts b/projects/ucap-webmessenger-daesang/src/public-api.ts
index 2605da8f..1538c751 100644
--- a/projects/ucap-webmessenger-daesang/src/public-api.ts
+++ b/projects/ucap-webmessenger-daesang/src/public-api.ts
@@ -2,6 +2,9 @@
  * Public API Surface of ucap-webmessenger-daesang
  */
 
+export * from './lib/apis/api';
+
+export * from './lib/services/daesang-api.service';
 export * from './lib/services/daesang-cipher.service';
 export * from './lib/services/daesang-protocol.service';