diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c7fa781..8a864ea 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -1,57 +1,55 @@
 <loader loading="loading"></loader>
-<div class="inventory-overview">
-  <div class="row column no-padding">
+<div class="inventory__container">
+  <div class="row column">
     <h1>Hardware status</h1>
+  </div>
+  <div class="row column">
     <div class="page-header">
       <h2 class="inline">All hardware in the system</h2>
       <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="inline btn-export float-right"  download="export_inventory.json" ng-show="hardwares.length">Export</a>
-
     </div>
   </div>
-  <section class="row column">
-    <!-- search -->
+  <div class="row column">
     <p class="content-label" aria-label="hardware filter">Filter hardware components</p>
     <div class="content__search">
-      <label for="content__search-input">Search</label> <input id="content__search-input" type="text"
-        ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+      <label for="content__search-input">Search</label>
+      <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
       <div class="search-submit__wrapper">
         <button class="clear-input" ng-click="clear()">&#10005;</button>
         <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
       </div>
-
     </div>
-
-  </section>
-  <!-- end search -->
-  <section id="inventory-categories" class="row column">
-    <div class="row column header-row">
-      <div class="column large-12 header__actions-bar">
-        <div class="inline inventory__heading inventory__device-col">Hardware</div>
-        <div class="inline inventory__heading inventory__function-col">&nbsp;</div>
-        <div class="inline inventory__heading inventory__assoc-event"><!--Associated events--></div>
+  </div>
+  <div class="row column inventory__table">
+    <h3 class="small-12 hardware__header">
+      Hardware
+    </h3>
+    <div class="small-12 harware__details" ng-repeat="inventory in hardwares|filter:filterBySearchTerms">
+      <div class="hardware__title row column" ng-class="{'expanded': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
+        <h4>{{inventory.title}}</h4>
+        <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
       </div>
-    </div>
-    <div ng-repeat="inventory in hardwares|filter:filterBySearchTerms" class="inventory__group"  ng-class="{'active': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
-      <p class="inline inventory__device-col">{{inventory.title}}</p>
-      <p class="inline inventory__function-col"></p>
-      <p class="inline inventory__assoc-event"><!--<a href="#/server-health/event-log">View 3 events</a>--></p>
-      <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
-      <div class="row inventory__metadata" ng-class="{'active': inventory.expanded}" ng-click="$event.stopPropagation()">
-        <div class="column large-9 no-padding">
-          <div  ng-repeat="item in inventory.items" class="inline inventory__metadata-block">
-            <p class="content-label">{{item.key}}</p>
-            <p class="courier-bold">{{item.value}}</p>
+      <div class="hardware__items" ng-hide="!inventory.expanded" ng-class="{'expanded': inventory.expanded}">
+        <div class="row column">
+          <div class="items small-12 show-scroll" ng-class="{'large-9': inventory.sub_components.length}">
+            <div class="row column">
+              <div ng-repeat="item in inventory.items" class="small-4">
+                <h5 class="content-label">{{item.key}}</h5>
+                <p class="courier-bold">{{item.value}}</p>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="column large-3 no-padding" ng-show="inventory.sub_components.length">
-          <div class="inventory__metadata-scroll show-scroll"> <!-- If content overflows; add 'show-scroll' class via JS to force visible scrollbar in webkit browsers-->
-            <div class="content-label">Subcomponents</div>
-            <div ng-repeat="sub_component in inventory.sub_components" class="inline inventory__metadata-block" ng-if="sub_component.Present">
-              <p class="courier-bold">{{sub_component.title}}<span class="icon icon__warning" ng-if="!sub_component.Functional"></span></p>
+          <div class="subcomponents show-scroll small-12 large-3" ng-show="inventory.sub_components.length">
+            <div class="row column">
+              <h5 class="small-12 content-label">Subcomponents</h5>
+              <p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
+                <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
+                {{sub_component.title}}
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </div>
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index cf6f2b4..44cb9c9 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -1,160 +1,74 @@
-@mixin col-label {
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: .8em;
-}
-
-$title-minWidth: 210px;
-
-.inventory__heading {
-  font-weight: 700;
-  padding: 1em 0;
-}
-
-// Inventory Overview
-.inventory-overview {
-  .inventory__group {
-    position: relative;
-    display: block;
-    margin: 0;
-    font-weight: 700;
-    background: $white;
-    padding: 1em 1em 0 1.5em;
-    text-decoration: none;
-    border-left: 1px solid $medgrey;
-    border-right: 1px solid $medgrey;
-    width: 100%;
-    border-bottom: 0;
-    vertical-align: middle;
-    @include fastTransition-all;
-    &:hover {
-      background: $lightblue;
-      color: $black;
-      cursor: pointer;
+.inventory__container {
+  h3,
+  h4{
+    margin-bottom: 0;
+  }
+  h4{
+    font-size: 1rem;
+    font-weight: bold;
+  }
+  padding-bottom: 5em;
+  .content__search {
+    margin-right: 0;
+  }
+  .inventory__table {
+    .hardware__header {
+      padding:1.2em 1.5em 1.2em 1.5em;
+      background: $darkblue;
+      font-weight: 700;
+      color: $white;
     }
-    &.active {
-      background: darken($lightgrey, 3%);
-      &:last-child {
+    .ng-hide {
+      height: 0;
+    }
+    .harware__details {
+       background: $lightblue;
+      .hardware__title {
+        border-left: 1px solid $medgrey;
+        border-right: 1px solid $medgrey;
+        position: relative;
+        font-weight: 700;
+        text-transform: capitalize;
+        padding: 1em 1.5em 1em 1.5em;
         border-bottom: 1px solid $medgrey;
+        background-color: $white;
+        &:hover {
+          background: $lightblue;
+          cursor: pointer;
+        }
+        &.expanded {
+          background: $lightblue;
+        }
       }
-    }
-    .inv-active {
-      color: darken($active, 20%);
-    }
-    &.inv-disabled {
-      background: $medgrey;
-      .inventory__device-col,
-      .inventory__function-col {
-        color: lighten($darkgrey, 20%);
-      }
-      .accord-trigger {
-        display: none;
-      }
-      &:hover,
-      .accord-trigger:hover {
-        cursor: default;
-      }
-    }
-  }
-
-  // Header row
-  .header__actions-bar {
-    padding: 0 1em 0 1.5em;
-    .inventory__assoc-event {
-      padding-right: 1em;
-      &:hover {
-        cursor: pointer;
+      .hardware__items {
+        background: $lightgrey;
+        border-right: 1px solid $medgrey;
+        border-left: 1px solid $medgrey;
+        display: block;
+        overflow: hidden;
+        @include fastTransition-all;
+        &.expanded {
+          height: 100%;
+          border-bottom: 1px solid $medgrey;
+        }
+        .items {
+          max-height: 320px;
+          padding: 1em 1.5em 1em 1.5em;
+          overflow:auto;
+          overflow-wrap: break-word;
+        }
+        .subcomponents {
+          max-height: 320px;
+          padding: 1em 1.5em 1em 1.5em;
+          overflow: auto;
+          border-top:1px solid $medgrey;
+          @include mediaQuery(medium) {
+            border-top:0;
+            border-left:1px solid $medgrey;
+          }
+        }
       }
     }
   }
 }
-// Inventory items
-.inventory-overview {
-  .inventory__device-col {
-    margin-right: 6px;
-    width: 50%;
-    text-transform: capitalize;
-    @include mediaQuery(medium){
-      width: auto;
-    }
-  }
-
-  .inventory__function-col {
-      @include col-label;
-      color: $severity-medium-lightbg;
-      display: none;
-  }
-  .inventory__device-col,
-  .inventory__function-col {
-    @media (min-width: 1025px){
-      display: inline-block;
-      @include calcColumn-4(5px);
-    }
-  }
-
-  .inventory__metadata {
-    height: 0;
-    max-height: 0;
-    margin: 0 -1em 0 -1.5em;
-    border-top: 1px solid $medgrey;
-    position: relative;
-    overflow: hidden;
-    @include fastTransition-all;
-    &.active {
-      height: 100%;
-      max-height: 1000px;
-      border-bottom: 1px solid $medgrey;
-      background: $lightgrey;
-      padding-bottom: 1em;
-      @include fastTransition-all;
-    }
-    &:hover {
-      cursor: default;
-    }
-  }
-
-  .inventory__metadata-block {
-    min-width: 100%;
-    padding: .5em 1em .5em 1.5em;
-    @include mediaQuery(small) {
-      @include calcColumn-3;
-    }
-    .content-label {
-      color: $darkgrey;
-    }
-  }
-
-  .inventory__metadata-scroll {
-      position: relative;
-      height: 100%;
-      max-height: 200px;
-      overflow-y: scroll;
-      bottom: 0;
-      right:0;
-      width: 100%;
-      padding-top: 1em;
-      padding-left: 1.5em;
-      border-top: 1px solid $medgrey;
-    .inventory__metadata-block {
-      @include calcSplitColumn;
-      margin-bottom: .5em;
-      padding: 0;
-    }
-    @include mediaQuery(medium) {
-      position: absolute;
-      border-left: 1px solid $medgrey;
-      border-top: 0;
-      max-height: 500px;
-      padding: .5em 1em;
-      width: 30%;
-    }
-    .icon__warning {
-      margin-top: -5px;
-      margin-left: .3em;
-    }
-  }
-}
-
-//end inventory details
-