diff --git a/src/app/pages/alert/alert-page.component.html b/src/app/pages/alert/alert-page.component.html
index 86a475d..da9b447 100644
--- a/src/app/pages/alert/alert-page.component.html
+++ b/src/app/pages/alert/alert-page.component.html
@@ -3,7 +3,62 @@
         <div class="ui-g-12">
             <div class="card no-margin">
                 <h1>Alert</h1>
+
+                <div class="ui-g form-group">
+                    <div class="ui-g-12 ui-md-2">
+                        <div class="ui-g">
+                            <div class="ui-g-6">All</div>
+                            <div class="ui-g-6">13</div>
+                        </div>
+                        <div class="ui-g"  [ngStyle]="{'background-color': bgMap.get('Down')}">
+                            <div class="ui-g-6">Down</div>
+                            <div class="ui-g-6">3</div>
+                        </div>
+                        <div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Warn')}">
+                            <div class="ui-g-6">Warn</div>
+                            <div class="ui-g-6">5</div>
+                        </div>
+                        <div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Error')}">
+                            <div class="ui-g-6">Error</div>
+                            <div class="ui-g-6">5</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="ui-g form-group" [style]="{width: '700px'}">
+                    <p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
+                        <ng-template let-alert pTemplate="alert">
+                            <div [ngStyle]="{'border-bottom': '1px solid #bdbdbd','background-color': bgMap.get(alert.status)}" class="clearfix car-item">
+
+                                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
+                                <div class="car-details" style="display:inline-block;vertical-align:middle">
+                                    {{alert.msg}}
+                                </div>
+                                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
+                            </div>
+                        </ng-template>
+                    </p-dataList>
+
+                    &nbsp;
+
+                    <p-dataList [value]="systemAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
+                        <ng-template let-alert pTemplate="alert">
+                            <div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
+                                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
+                                <div class="car-details" style="display:inline-block;vertical-align:middle">
+                                    {{alert.msg}}
+                                </div>
+                                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
+                            </div>
+                        </ng-template>
+                    </p-dataList>
+                </div>
             </div>
+
         </div>
+
+
     </div>
+
+
 </div>
\ No newline at end of file
diff --git a/src/app/pages/alert/alert-page.component.ts b/src/app/pages/alert/alert-page.component.ts
index 202a915..c962163 100644
--- a/src/app/pages/alert/alert-page.component.ts
+++ b/src/app/pages/alert/alert-page.component.ts
@@ -1,16 +1,127 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
+
+export interface Alert {
+  created: string;
+  msg: string;
+
+}
+
+export interface MetricAlert extends Alert {
+  status: string;
+}
+
+export interface SystemAlert extends Alert {
+  status?: string; // test
+}
+
 @Component({
   selector: 'of-pages-alert',
   templateUrl: './alert-page.component.html',
 })
 export class AlertPageComponent implements OnInit {
 
+  metricAlerts: MetricAlert[] = exampleAlerts;
+  systemAlerts: SystemAlert[] = exampleSystemAlerts;
+
+ bgMap: Map<string, string> = new Map();
+
   constructor(private route: ActivatedRoute, private router: Router) {
   }
 
   ngOnInit() {
+    this.bgMap.set('Warn', '#ffc107');
+    this.bgMap.set('Error', '#f30000');
+    this.bgMap.set('Down', '#607D8B');
   }
 
 }
+
+const exampleSystemAlerts = [
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
+  },
+];
+
+
+const exampleAlerts = [
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Down'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Error'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  },
+  {
+    created: '2018-04-19',
+    msg: 'Host 192.168.1.106 disk < 5%',
+    status: 'Warn'
+  }
+];
diff --git a/src/app/pages/alert/alert-page.module.ts b/src/app/pages/alert/alert-page.module.ts
index 8c53d23..1a0cd63 100644
--- a/src/app/pages/alert/alert-page.module.ts
+++ b/src/app/pages/alert/alert-page.module.ts
@@ -4,11 +4,14 @@ import { CommonModule } from '@angular/common';
 import { AlertPageRoutingModule } from './alert-page-routing.module';
 import { AlertPageComponent } from './alert-page.component';
 
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+
 @NgModule({
   imports: [
     CommonModule,
     AlertPageRoutingModule,
     // NotificationModule,
+    PrimeNGModules
   ],
   declarations: [
     AlertPageComponent,