diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 9145593..adcd531 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -3,7 +3,7 @@
 <div class="portlet-body">
   <div class="tabbable-custom nav-justified">
     <ul class="nav nav-tabs">
-      <li class="active sbold font">
+      <li class="sbold font">
         <a href="#tab1" data-toggle="tab" aria-expanded="false">ติดตั้ง
           <span class="badge"> {{resultNum}} </span>
         </a>
@@ -38,9 +38,9 @@
           <span class="badge"> {{resultNum6}} </span>
         </a>
       </li>
-      <li class="sbold">
+      <li class="active sbold">
         <a href="#tab8" data-toggle="tab" aria-expanded="true">Smart IT
-          <span class="badge"> </span>
+          <span class="badge"> {{resultNum}} </span>
         </a>
       </li>
     </ul>
@@ -66,7 +66,7 @@
         <div class="panel-body">
           <div class="row">
             <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''">
-              <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p>
+              <!-- <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p> -->
               <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
                 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
@@ -118,7 +118,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -173,7 +173,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -230,7 +230,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton2Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -284,7 +284,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton3(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton3(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -341,7 +341,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton3Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton3Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -395,7 +395,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton4(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton4(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -452,7 +452,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton4Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton4Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -506,7 +506,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton5(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton5(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -563,7 +563,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton5Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton5Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -617,7 +617,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton6(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton6(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -674,7 +674,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton6Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton6Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -713,8 +713,6 @@
           </div>
         </div>
       </div>
-
-      <!--แท้บใหม่ 7 afterservice-->
       <div class="panel tab-pane" id="tab7">
         <div class="caption">
           <h1 class="icon-bubble font-green-sharp">
@@ -730,7 +728,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton7(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton7(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
 
           <br>
@@ -789,7 +787,7 @@
           </div>
           <br>
           <br>
-          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton7Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton7Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <!-- <br><br>
           <button *ngFor="let name of ButtonValue" (click)="getButton(name.valueN)">{{ name.name }}</button> -->
           <hr>
@@ -831,73 +829,67 @@
           </div>
         </div>
       </div>
-
       <div class="panel tab-pane active" id="tab8">
-        <div class="container">
+        <div class="caption">
+          <h1 class="icon-bubble font-green-sharp">
+            <span class="caption-subject font-green-sharp sbold font"> Active</span>
+          </h1>
+          <div class="input-group" style="float: right; margin-top: 11px;">
+            <div class="input-icon right">
+              <i class="icon-magnifier">
+              </i>
+              <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
+            </div>
+          </div>
+          <br>
+          <br>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button>
+          <hr>
+          <br>
+        </div>
+        <div class="panel-body">
           <div class="row">
-            <div class="col-xs-12">
-              <!-- <button class="btn" (click)="onToggleDetails()">
-                Display Details</button>
-              <p *ngIf="showSecret">Sercet Password = tuna</p> -->
-              <hr>
-              <div class="input-group" style="float: right; margin-top: 11px;">
-                <div class="input-icon right">
-                  <i class="icon-magnifier">
-                  </i>
-                  <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
+            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''">
+              <!-- <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p> -->
+              <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
+                <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
+                <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
+                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
+                <div class="visual">
+                  <i class="fa fa-comments"></i>
                 </div>
-              </div>
-              <br>
-              <br>
-              <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button>
-              <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p>
-              <hr>
-              <br>
-            </div>
-            <div class="panel-body">
-              <div class="row">
-                <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''">
-
-
-                  
-
-
-
-                  <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
-                    <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
-                    <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
-                    <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
-                    <div class="visual">
-                      <i class="fa fa-comments"></i>
+                <table>
+                  <tr>
+                    <div class="details" style="width: calc(100% - 50px);">
+                      <div style="text-align: right; margin-top: -60px; color: black;">{{item.type | textshort}}</div>
+                      <div style="text-align: right; color: black;">{{item.STATUS}}</div>
+                      <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;">
+                        <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
+                      </div>
+                      <div class="desc" style=" color: black;">{{item.team}}</div>
+                      <br>
+                      <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
                     </div>
-                    <table>
-                      <tr>
-                        <div class="details" style="width: calc(100% - 50px);">
-                          <div style="text-align: right; margin-top: -60px; color: black;">{{item.type | textshort}}</div>
-                          <div style="text-align: right; color: black;">{{item.STATUS}}</div>
-                          <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;">
-                            <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
-                          </div>
-                          <div class="desc" style=" color: black;">{{item.team}}</div>
-                          <br>
-                          <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
-                        </div>
-                      </tr>
-                      <tr>
-                        <div class="details" style="width: calc(100% - 50px);">
-                          <div class="desc" style="text-align: left; color: black; margin-top: 120px;">{{item.COMMENT | short}}</div>
-                          <!-- <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div> -->
-                          <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div>
-                        </div>
-                      </tr>
-                    </table>
-                  </a>
-                </div>
-              </div>
+                  </tr>
+                  <tr>
+                    <div class="details" style="width: calc(100% - 50px);">
+                      <div class="desc" style="text-align: left; color: black; margin-top: 120px;">{{item.COMMENT | short}}</div>
+                      <!-- <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div> -->
+                      <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div>
+                    </div>
+                  </tr>
+                </table>
+              </a>
             </div>
           </div>
         </div>
+        <br>
+        <br>
+        <br>
+        <br>
+        <!-- On Hold -->
       </div>
+      
     </div>
 
     <!-- งานเก่า
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index d18694a..d6cbbc6 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -61,11 +61,6 @@ btn.active {
     top: 4px;
     right: 0px;
 }
-.btn:focus {
-  color: white;
-  background: #32c5d2;
-  border-color: #32c5d2;
-}
 
 .button {
   background-color: white;
@@ -74,3 +69,9 @@ btn.active {
   display: inline-block;
   cursor: pointer;
 }
+
+.btn:focus {
+  color: white;
+  background: #32c5d2;
+  border-color: #32c5d2;
+}
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 0ff0390..251461f 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -87,134 +87,167 @@ export class DashboardComponent implements OnInit {
 
   ButtonValue = [
     {
+      id: 1,
       name: 'ACC',
       valueN: 'acc'
     },
     {
+      id: 2,
       name: 'ADE',
       valueN: 'ade'
     },
     {
+      id: 3,
       name: 'ADM',
       valueN: 'adm'
     },
     {
+      id: 4,
       name: 'APD',
       valueN: 'apd'
     },
     {
+      id: 5,
       name: 'BNW',
       valueN: 'bnw'
     },
     {
+      id: 6,
       name: 'CRS',
       valueN: 'crs'
     },
     {
+      id: 7,
       name: 'CUS',
       valueN: 'cus'
     },
     {
+      id: 8,
       name: 'DVR',
       valueN: 'dvr'
     },
     {
+      id: 9,
       name: 'ETC',
       valueN: 'etc'
     },
     {
+      id: 10,
       name: 'HWE',
       valueN: 'hwe'
     },
     {
+      id: 11,
       name: 'ITS',
       valueN: 'its'
     },
     {
+      id: 12,
       name: 'LWS',
       valueN: 'lws'
     },
     {
+      id: 13,
       name: 'NDS',
       valueN: 'nds'
     },
     {
+      id: 14,
       name: 'NED',
       valueN: 'ned'
     },
     {
+      id: 15,
       name: 'NES',
       valueN: 'nes'
     },
     {
+      id: 16,
       name: 'NET',
       valueN: 'net'
     },
     {
+      id: 17,
       name: 'NEW',
       valueN: 'new'
     },
     {
+      id: 18,
       name: 'OSC',
       valueN: 'osc'
     },
     {
+      id: 19,
       name: 'PM',
       valueN: 'pm'
     },
     {
+      id: 20,
       name: 'PRS',
       valueN: 'prs'
     },
     {
+      id: 21,
       name: 'RND',
       valueN: 'rnd'
     },
     {
+      id: 22,
       name: 'SDE',
       valueN: 'sde'
     },
     {
+      id: 23,
       name: 'SDN',
       valueN: 'sdn'
     },
     {
+      id: 24,
       name: 'SET',
       valueN: 'set'
     },
     {
+      id: 25,
       name: 'SEV',
       valueN: 'sev'
     },
     {
+      id: 26,
       name: 'SID',
       valueN: 'sid'
     },
     {
+      id: 27,
       name: 'SSH',
       valueN: 'ssh'
     },
     {
+      id: 28,
       name: 'SUV',
       valueN: 'suv'
     },
     {
+      id: 29,
       name: 'SYS',
       valueN: 'sys'
     },
     {
+      id: 30,
       name: 'TST',
       valueN: 'tst'
     },
     {
+      id: 31,
       name: 'UDI',
       valueN: 'udi'
     },
     {
+      id: 32,
       name: 'WEB',
       valueN: 'web'
     },
     {
+      id: 33,
       name: 'All',
       valueN: ''
     },
@@ -664,7 +697,7 @@ export class DashboardComponent implements OnInit {
     if (this.Show1.length === 0) {
       return this.Show1;
     }
-
+    
     const resultArray = [];
     for (const item of this.Show1) {
       console.log('item: ', item);
--
libgit2 0.21.2