diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
index 15a319b520..b0c90483f7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
@@ -36,7 +36,7 @@
 }
 
 .umb-content-grid__icon.-light {
-   color: @gray-8;
+   color: @gray-5;
 }
 
 
@@ -58,7 +58,7 @@
 }
 
 .umb-content-grid__item-name.-light {
-   color: @gray-8;
+   color: @gray-5;
 }
 
 .umb-content-grid__details-list {
@@ -69,7 +69,7 @@
 }
 
 .umb-content-grid__details-list.-light {
-   color: @gray-8;
+   color: @gray-5;
 }
 
 .umb-content-grid__details-label {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
index 33be361206..30e2b81a1c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
@@ -15,12 +15,16 @@
             {{ item.name }}
         </div>
 
-          <ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published&& item.updater != null}">
-              <li class="umb-content-grid__details-item" ng-repeat="property in contentProperties">
-                  <div class="umb-content-grid__details-label">{{ property.header }}:</div>
-                  <div class="umb-content-grid__details-value">{{ item[property.alias] }}</div>
-              </li>
-          </ul>
+        <ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published&& item.updater != null}">
+            <li class="umb-content-grid__details-item" ng-if="item.state">
+                <div class="umb-content-grid__details-label"><localize key="general_status"></localize>:</div>
+                <div class="umb-content-grid__details-value"><umb-variant-state variant="item"></umb-variant-state></div>
+            </li>
+            <li class="umb-content-grid__details-item" ng-repeat="property in contentProperties">
+                <div class="umb-content-grid__details-label">{{ property.header }}:</div>
+                <div class="umb-content-grid__details-value">{{ item[property.alias] }}</div>
+            </li>
+        </ul>
 
       </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
index 5245384aac..91c0af5005 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
@@ -15,6 +15,9 @@
                         <i class="umb-table-head__icon icon" ng-class="{'icon-navigation-up': isSortDirection('Name', 'asc'), 'icon-navigation-down': isSortDirection('Name', 'desc')}"></i>
                     </a>
                 </div>
+                <div class="umb-table-cell" ng-if="items[0].state">
+                    <localize key="general_status">Status</localize>
+                </div>
                 <div class="umb-table-cell" ng-repeat="column in itemProperties">
                     <a class="umb-table-head__link" title="Sort by {{ column.header }}" href="#"
                        ng-click="sort(column.alias, column.allowSorting, column.isSystem)"
@@ -46,6 +49,11 @@
                        ng-bind="item.name">
                     </a>
                 </div>
+                <div class="umb-table-cell" ng-if="item.state">
+                    <umb-variant-state
+                        variant="item">
+                    </umb-variant-state>
+                </div>
                 <div class="umb-table-cell" ng-repeat="column in itemProperties">
                     <span title="{{column.header}}: {{item[column.alias]}}">