diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 7d2d7ae..4230c30 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,40 +1,107 @@
 
     <!-- งานใหม่ -->
-    <div class="row">
-      <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
-        <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>
-          <table>
-            <tr>
-              <div class="details" style="width: calc(100% - 50px);">
-                <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
-                  <div class= "number" style=" color: black; display: block; text-align: right;">
-                    <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: 100px;">{{item.COMMENT | short}}</div> 
+  <!-- Active -->
+<div class="portlet-body">
+  <ul class="nav nav-tabs">
+    <li class="active sbold">
+      <a href="#" data-toggle="tab" aria-expanded="true">Active</a>
+    </li>
+    <li class="sbold">
+      <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
+    </li>
+    <li class="sbold">
+        <a href="#" data-toggle="tab" aria-expanded="true">xxxx</a>
+      </li>
+  </ul>
+  <br>
+    <div class="panel panel-default">
+      <div class="caption">
+        <h1 class="icon-bubble font-green-sharp">
+          <span class="caption-subject font-green-sharp sbold"> Active</span>
+        </h1>
+        <hr>
+      </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">
+              <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>
+                <table>
+                  <tr>
+                    <div class="details" style="width: calc(100% - 50px);">
+                      <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
+                        <div class= "number" style=" color: black; display: block; text-align: right;">
+                          <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: 100px;">{{item.COMMENT | short}}</div> 
+                    </div>
+                  </tr>
+                </table>
+                </a>
               </div>
-            </tr>
-
-          </table>
-         
-        </a>
+            </div>
+        </div>
       </div>
-    </div>
 
+      <!-- On Hold -->
+      <div class="panel panel-default">
+          <div class="caption">
+            <h1 class="icon-bubble font-red-mint">
+              <span class="caption-subject font-red-mint sbold"> On Hold</span>
+            </h1>
+            <hr>
+          </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">
+                  <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>
+                    <table>
+                      <tr>
+                        <div class="details" style="width: calc(100% - 50px);">
+                          <div style="text-align: right; margin-top: -50px; color: black;">{{item.STATUS}}</div>
+                            <div class= "number" style=" color: black; display: block; text-align: right;">
+                              <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: 100px;">{{item.COMMENT | short}}</div> 
+                        </div>
+                      </tr>
+                    </table>
+                    </a>
+                  </div>
+            </div>
+          </div>
+      </div>
+  </div>   
+      
     <!-- งานเก่า
     <div class="row">
       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 221b4c1..a328b35 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -17,5 +17,8 @@
 .dashboard-stat {
   overflow: visible;
   height: 220px;
-  
+}
+
+.panel {
+  padding: 30px;
 }
--
libgit2 0.21.2