diff --git a/html/css/styles.css b/html/css/styles.css
index b35f89aa4b..ca54d9cb40 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -358,7 +358,6 @@ A.purple:visited, a.purple, .purple { color: #740074; }
 
 .box-desc {
   font-size: 12px;
-  font-style: italic;
 }
 
 .interface-desc {
diff --git a/html/pages/device/services.inc.php b/html/pages/device/services.inc.php
index 4c4e6f031e..5ee130450f 100644
--- a/html/pages/device/services.inc.php
+++ b/html/pages/device/services.inc.php
@@ -53,35 +53,32 @@ if (count($services) > '0') {
 <?php
 foreach ($services as $service) {
     $service['service_ds'] = htmlspecialchars_decode($service['service_ds']);
-    if ($service['service_status'] == 0) {
-        $status = "<span class='green'>Ok</span>";
-    } elseif ($service['service_status'] == 1) {
-        $status = "<span class='red'>Warning</span>";
-    } elseif ($service['service_status'] == 2) {
-        $status = "<span class='red'>Critical</span>";
+    if ($service['service_status'] == '2') {
+        $status = "<span class='col-sm-12 label label-danger label-border'><b>".$service['service_type']."</b></span>";
+    } elseif ($service['service_status'] == '1') {
+        $status = "<span class='col-sm-12 label label-warning label-border'><b>".$service['service_type']."</b></span>";
+    } elseif ($service['service_status'] == '0') {
+        $status = "<span class='col-sm-12 label label-success label-border'><b>".$service['service_type']."</b></span>";
     } else {
-        $status = "<span class='grey'>Unknown</span>";
+        $status = "<span class='col-sm-12 label label-info label-border'><b>".$service['service_type']."</b></span>";
     }
 ?>
     <tr id="row_<?php echo $service['service_id']?>">
-        <td>
-            <div class="col-sm-12">
-                <div class="col-sm-2"><?php echo $service['service_type']?></div>
-                <div class="col-sm-6"><?php echo $service['service_desc']?></div>
-                <div class="col-sm-2"><?php echo $status?></div>
-                <div class="pull-right">
+    <td class="col-sm-12">
+        <div class="col-sm-1"><?php echo $status?></div>
+        <div class="col-sm-2 text-muted"><?php echo formatUptime(time() - $service['service_changed'])?></div>
+        <div class="col-sm-2 text-muted"><?php echo $service['service_desc']?></div>
+        <div class="col-sm-5"><?php echo nl2br(trim($service['service_message']))?></div>
+        <div class="col-sm-2">
+            <div class="pull-right">
 <?php
 if (is_admin() === true) {
     echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='{$service['service_id']}' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
         <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button";
 }
 ?>
-                </div>
-            </div>
-            <div class="col-sm-12">
-                <div class="col-sm-8"><?php echo nl2br(trim($service['service_message']))?></div>
-                <div class="col-sm-4"><?php echo formatUptime(time() - $service['service_changed'])?></div>
             </div>
+        </div>
 <?php
 if ($vars['view'] == 'details') {
     // if we have a script for this check, use it.
@@ -102,18 +99,18 @@ if ($vars['view'] == 'details') {
         $graph_array['service'] = $service['service_id'];
         $graph_array['ds'] = $k;
 ?>
+        <tr><td colspan="5">
             <div class="col-sm-12">
 <?php
         include 'includes/print-graphrow.inc.php';
 ?>
             </div>
+        </td></tr>
 <?php
     }
 }
 }
 ?>
-                </td>
-            </tr>
         </table>
 <?php
 } else {
diff --git a/html/pages/services.inc.php b/html/pages/services.inc.php
index 6ba968381a..04e4ba185c 100644
--- a/html/pages/services.inc.php
+++ b/html/pages/services.inc.php
@@ -2,6 +2,11 @@
 
 $pagetitle[] = 'Services';
 
+?>
+<div class="container-fluid">
+  <div class="row">
+<?php
+
 print_optionbar_start();
 
 require_once 'includes/modal/new_service.inc.php';
@@ -88,15 +93,6 @@ if (isset($state)) {
 
 ?>
 <div class="row col-sm-12"><span id="message"></span></div>
-<table class="table table-hover table-condensed table-striped">
-    <tr>
-        <th>Device</th>
-        <th>Service</th>
-        <th>Changed</th>
-        <th>Message</th>
-        <th>Description</th>
-        <th>&nbsp;</th>
-    </tr>
 <?php
 if ($_SESSION['userlevel'] >= '5') {
     $host_sql = 'SELECT `D`.`device_id`,`D`.`hostname` FROM devices AS D, services AS S WHERE D.device_id = S.device_id GROUP BY `D`.`hostname`, `D`.`device_id` ORDER BY D.hostname';
@@ -118,34 +114,49 @@ foreach (dbFetchRows($host_sql, $host_par) as $device) {
         $sql_param[0] = $device_id;
     }
 
-    foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ? $where", $sql_param) as $service) {
+
+        $head=true;
+    foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ? $where ORDER BY service_type", $sql_param) as $service) {
         if ($service['service_status'] == '2') {
-            $status = "<span class='red'><b>".$service['service_type']."</b></span>";
+            $status = "<span class='col-sm-12 label label-danger threeqtr-width'><b>".$service['service_type']."</b></span>";
+        } elseif ($service['service_status'] == '1') {
+            $status = "<span class='col-sm-12 label label-warning threeqtr-width'><b>".$service['service_type']."</b></span>";
         } elseif ($service['service_status'] == '0') {
-            $status = "<span class='green'><b>".$service['service_type']."</b></span>";
+            $status = "<span class='col-sm-12 label label-success threeqtr-width'><b>".$service['service_type']."</b></span>";
         } else {
-            $status = "<span class='grey'><b>".$service['service_type']."</b></span>";
+            $status = "<span class='col-sm-12 label label-info threeqtr-width'><b>".$service['service_type']."</b></span>";
         }
+        if ($head) {
+            echo '
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">'.$devlink.'</h3>
+    </div>
+    <div class="panel-body">
+                ';
+        }
+        $head=false;
 ?>
-    <tr id="row_<?php echo $service['service_id']?>">
-        <td><?php echo $devlink?></td>
-        <td><?php echo $status?></td>
-        <td><?php echo formatUptime(time() - $service['service_changed'])?></td>
-        <td><span class='box-desc'><?php echo nl2br(display($service['service_message']))?></span></td>
-        <td><span class='box-desc'><?php echo nl2br(display($service['service_desc']))?></span></td>
-        <td>
+        <div class="row">
+            <div class="col-md-1"><h4><?php echo $status?></h4></div>
+            <div class="col-md-2"><div class="text-muted"><?php echo formatUptime(time() - $service['service_changed'])?></div></div>
+            <div class="col-md-3"><div class="text-muted"><span class='box-desc'><?php echo nl2br(display($service['service_desc']))?></div></span></div>
+            <div class="col-md-5"><span class='box-desc'><?php echo nl2br(display($service['service_message']))?></span></div>
+            <div class="col-md-1">
 <?php
 if (is_admin() === true) {
     echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='{$service['service_id']}' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
-    <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>";
+                <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>";
 }
 ?>
-        </td>
-    </tr>
+            </div>
+        </div>
+        <div class="row"><div class="col-sm-12">&nbsp;</div></div>
 <?php
     }//end foreach
-
+    echo "</div></div>";
     unset($samehost);
 }//end foreach
 ?>
-</table>
+  </div>
+</div>