diff --git a/@overflow/commons/ui/pipe/object-keys.ts b/@overflow/commons/ui/pipe/object-keys.ts
index 7449c8c..0f94827 100644
--- a/@overflow/commons/ui/pipe/object-keys.ts
+++ b/@overflow/commons/ui/pipe/object-keys.ts
@@ -5,4 +5,4 @@ export class ObjectKeys implements PipeTransform {
   transform(value: any, args: any[] = null): any {
     return Object.keys(value);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index ef76809..68d5178 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -74,11 +74,38 @@
 
 <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
   <div *ngIf="selectedNode !== null">
-    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
+    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)" (ping)="displayPing($event)"></app-node-detail>
   </div>
 </p-sidebar>
 
 
+<p-dialog header="Ping" [(visible)]="pingDisplay" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
+  [minY]="70" [maximizable]="true" [baseZIndex]="10000">
+  <div *ngIf="pingResult">
+    <ul>
+      <li *ngFor="let key of pingResult.responses | objectKeys">
+        <span *ngIf="pingResult.responses[key].error else value">
+          {{pingResult.responses[key].error}}
+        </span>
+        <ng-template #value>
+          TTL={{pingResult.responses[key].ttl}} : {{pingResult.responses[key].time}}ms
+        </ng-template>
+      </li>
+    </ul>
+  </div>
+  <div *ngIf="pingResult">
+    <span>Sent: {{pingResult.summary.sendCount || '-'}}</span><br />
+    <span>Received: {{pingResult.summary.receiveCount || '-'}}</span><br />
+    <span>Loss: {{pingResult.summary.lossPercent || '-'}} %</span><br />
+    <span>Avg: {{pingResult.summary.avgTime || '-'}} ms</span><br />
+    <span>Min: {{pingResult.summary.minTime || '-'}} ms</span><br />
+    <span>Min: {{pingResult.summary.maxTime || '-'}} ms</span>
+  </div>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="pingDisplay=false" label="Close"></button>
+  </p-footer>
+</p-dialog>
+
 <!-- <div class="ui-fluid">
     <div class="ui-g">
         <div class="ui-g-12">
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 9871ff9..5b744eb 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -15,8 +15,8 @@ import { Link } from '../../../commons/model/link';
 
 import { RPCError } from '@overflow/rpc-js';
 import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum } from '@overflow/model/meta';
-import { Message } from 'primeng/primeng';
 import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
+import { PingResult } from '@overflow/model/ping';
 
 @Component({
   selector: 'app-pages-home',
@@ -54,6 +54,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
   ports: Map<string, Map<number, Port>>;
 
   resultMsg: string[];
+  pingDisplay = false;
+  pingResult: PingResult;
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
@@ -117,8 +119,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-
-
     this.probeService.unsubscribeNotification(this);
   }
 
@@ -903,4 +903,15 @@ export class HomePageComponent implements OnInit, OnDestroy {
       new Link(hostNode3, serviceNode32),
     );
   }
+
+
+  displayPing(pingResult: PingResult) {
+    console.log(pingResult);
+
+    if (pingResult) {
+      this.pingDisplay = true;
+      this.pingResult = pingResult;
+    }
+
+  }
 }
diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index d114cb7..340c0df 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -19,7 +19,7 @@
   </div>
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="ping()" class="ui-button-secondary ui-pingbn-position"></button>
+    <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">
diff --git a/src/commons/component/host-detail.component.ts b/src/commons/component/host-detail.component.ts
index 6ea77fe..667414c 100644
--- a/src/commons/component/host-detail.component.ts
+++ b/src/commons/component/host-detail.component.ts
@@ -1,7 +1,9 @@
-import { Component, Input } from '@angular/core';
-import { Host, DiscoverHost } from '@overflow/model/discovery';
-import { ProbeService, requesterID } from '../service/probe.service';
-import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Host } from '@overflow/model/discovery';
+import { ProbeService } from '../service/probe.service';
+import { map, catchError, take } from 'rxjs/operators';
+import { PingResult } from '@overflow/model/ping';
+import { of } from 'rxjs';
 
 
 @Component({
@@ -12,26 +14,34 @@ import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 export class HostDetailComponent {
 
   @Input() host: Host;
+  @Output() ping = new EventEmitter<PingResult>();
 
   constructor(
     private probeService: ProbeService
   ) {
   }
 
-  ping() {
-    console.log(this.host);
-    // const discoverHost: DiscoverHost = {
-    //   discoveryConfig: {},
-    //   metaIPType: this.host.metaIPType,
-    //   firstScanRange: this.host.address,
-    //   lastScanRange: this.host.address,
-    //   discoverPort: null,
-    // };
-    // this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.host.zone, discoverHost);
+  doPing() {
+    const option = {
+      Retry: 3,
+      Interval: 1,
+      Deadline: 1,
+    };
+
+    this.probeService
+      .call<PingResult>('PingService.PingHost', this.host, option)
+      .pipe(
+        map((pingResult: PingResult) => {
+          this.ping.emit(pingResult);
+        }),
+        catchError(error => {
+          console.log(error);
+          alert('An error has occurred.');
+          return of();
+        }),
+        take(1)
+      )
+      .subscribe();
   }
 
-  // @RPCSubscriber({ method: 'DiscoveryService.DiscoveredHost' })
-  // public DiscoveredHost(host: Host) {
-  //   console.log(host);
-  // }
 }
diff --git a/src/commons/component/node-detail.component.html b/src/commons/component/node-detail.component.html
index a9a2e4b..98d8490 100644
--- a/src/commons/component/node-detail.component.html
+++ b/src/commons/component/node-detail.component.html
@@ -7,11 +7,11 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="'host'">
-        <app-host-detail [host]="node.target"></app-host-detail>
+        <app-host-detail [host]="node.target" (ping)="ping.emit($event)"></app-host-detail>
       </ng-container>
 
       <ng-container *ngSwitchCase="'service'">
-        <app-service-detail [service]="node.target"></app-service-detail>
+        <app-service-detail [service]="node.target" (ping)="ping.emit($event)"></app-service-detail>
       </ng-container>
 
       <ng-container *ngSwitchDefault>
diff --git a/src/commons/component/node-detail.component.ts b/src/commons/component/node-detail.component.ts
index ad8de78..4393e49 100644
--- a/src/commons/component/node-detail.component.ts
+++ b/src/commons/component/node-detail.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, Output, Host, EventEmitter } from '@angular/core';
+import { PingResult } from '@overflow/model/ping';
 
 
 @Component({
@@ -10,6 +11,7 @@ export class NodeDetailComponent {
 
   @Input() node;
   @Output() otherHostSelect = new EventEmitter<Host>();
+  @Output() ping = new EventEmitter<PingResult>();
 
   constructor(
   ) {
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index cfb4005..57a38a8 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -21,7 +21,7 @@
 
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="ping()" class="ui-button-secondary ui-pingbn-position"></button>
+    <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">
diff --git a/src/commons/component/service-detail.component.ts b/src/commons/component/service-detail.component.ts
index 1080419..9d51566 100644
--- a/src/commons/component/service-detail.component.ts
+++ b/src/commons/component/service-detail.component.ts
@@ -1,6 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Service } from '@overflow/model/discovery';
-
+import { PingResult } from '@overflow/model/ping';
+import { ProbeService } from '../service/probe.service';
+import { map, catchError, take } from 'rxjs/operators';
+import { of } from 'rxjs';
 
 @Component({
   selector: 'app-service-detail',
@@ -10,14 +13,35 @@ import { Service } from '@overflow/model/discovery';
 export class ServiceDetailComponent {
 
   @Input() service: Service;
+  @Output() ping = new EventEmitter<PingResult>();
 
   constructor(
+    private probeService: ProbeService
   ) {
 
   }
 
-  ping() {
-    console.log(this.service);
+  doPing() {
+    const option = {
+      Retry: 3,
+      Interval: 1,
+      Deadline: 1,
+    };
+
+    this.probeService
+      .call<PingResult>('PingService.PingService', this.service, option)
+      .pipe(
+        map((pingResult: PingResult) => {
+          this.ping.emit(pingResult);
+        }),
+        catchError(error => {
+          console.log(error);
+          alert('An error has occurred.');
+          return of();
+        }),
+        take(1)
+      )
+      .subscribe();
   }
 
 }