diff --git a/apps/mappingmanagement/web/src/main/java/org/onosproject/mapping/web/gui/MappingsViewMessageHandler.java b/apps/mappingmanagement/web/src/main/java/org/onosproject/mapping/web/gui/MappingsViewMessageHandler.java
index 67b570e..b46e3cd 100644
--- a/apps/mappingmanagement/web/src/main/java/org/onosproject/mapping/web/gui/MappingsViewMessageHandler.java
+++ b/apps/mappingmanagement/web/src/main/java/org/onosproject/mapping/web/gui/MappingsViewMessageHandler.java
@@ -20,14 +20,22 @@
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.mapping.MappingEntry;
 import org.onosproject.mapping.MappingService;
+import org.onosproject.mapping.MappingTreatment;
+import org.onosproject.mapping.MappingValue;
+import org.onosproject.mapping.addresses.MappingAddress;
 import org.onosproject.net.DeviceId;
 import org.onosproject.ui.RequestHandler;
 import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.table.CellFormatter;
 import org.onosproject.ui.table.TableModel;
 import org.onosproject.ui.table.TableRequestHandler;
+import org.onosproject.ui.table.cell.EnumFormatter;
+import org.onosproject.ui.table.cell.HexLongFormatter;
 
 import java.util.Collection;
+import java.util.List;
 
+import static org.onosproject.mapping.MappingStore.Type.MAP_CACHE;
 import static org.onosproject.mapping.MappingStore.Type.MAP_DATABASE;
 
 /**
@@ -40,14 +48,32 @@
     private static final String MAPPINGS = "mappings";
 
     private static final String ID = "id";
+    private static final String MAPPING_KEY = "mappingKey";
+    private static final String MAPPING_VALUE = "mappingValue";
+    private static final String MAPPING_ACTION = "mappingAction";
+    private static final String TYPE = "type";
+    private static final String STATE = "state";
+    private static final String DATABASE = "database";
+    private static final String CACHE = "cache";
 
-    private static final String[] COL_IDS = {ID};
+    private static final String COMMA = ", ";
+    private static final String OX = "0x";
+    private static final String EMPTY = "";
+
+    private static final String NULL_ADDRESS_MSG = "(No mapping address for this mapping)";
+
+    private static final String[] COL_IDS = {
+            ID, MAPPING_KEY, MAPPING_VALUE, STATE, MAPPING_ACTION, TYPE
+    };
 
     @Override
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(new MappingMessageRequest());
     }
 
+    /**
+     * Handler for mapping message requests.
+     */
     private final class MappingMessageRequest extends TableRequestHandler {
 
         private static final String NO_ROWS_MESSAGE = "No mappings found";
@@ -67,19 +93,88 @@
         }
 
         @Override
+        protected TableModel createTableModel() {
+            TableModel tm = super.createTableModel();
+            tm.setFormatter(ID, HexLongFormatter.INSTANCE);
+            tm.setFormatter(TYPE, EnumFormatter.INSTANCE);
+            tm.setFormatter(STATE, EnumFormatter.INSTANCE);
+            tm.setFormatter(MAPPING_KEY, new MappingKeyFormatter());
+            tm.setFormatter(MAPPING_VALUE, new MappingValueFormatter());
+            return tm;
+        }
+
+        @Override
         protected void populateTable(TableModel tm, ObjectNode payload) {
             String uri = string(payload, "devId");
             if (!Strings.isNullOrEmpty(uri)) {
                 DeviceId deviceId = DeviceId.deviceId(uri);
                 MappingService ms = get(MappingService.class);
+
                 for (MappingEntry mapping : ms.getMappingEntries(MAP_DATABASE, deviceId)) {
-                    populateRow(tm.addRow(), mapping);
+                    populateRow(tm.addRow(), mapping, DATABASE);
+                }
+
+                for (MappingEntry mapping : ms.getMappingEntries(MAP_CACHE, deviceId)) {
+                    populateRow(tm.addRow(), mapping, CACHE);
                 }
             }
         }
 
-        private void populateRow(TableModel.Row row, MappingEntry mapping) {
-            row.cell(ID, mapping.id().value());
+        private void populateRow(TableModel.Row row, MappingEntry mapping,
+                                         String type) {
+            row.cell(ID, mapping.id().value())
+                    .cell(STATE, mapping.state())
+                    .cell(TYPE, type)
+                    .cell(MAPPING_ACTION, mapping.value().action())
+                    .cell(MAPPING_KEY, mapping)
+                    .cell(MAPPING_VALUE, mapping);
+        }
+    }
+
+    /**
+     * A formatter for formatting mapping key.
+     */
+    private final class MappingKeyFormatter implements CellFormatter {
+
+        @Override
+        public String format(Object value) {
+            MappingEntry mapping = (MappingEntry) value;
+            MappingAddress address = mapping.key().address();
+
+            if (address == null) {
+                return NULL_ADDRESS_MSG;
+            }
+            StringBuilder sb = new StringBuilder("Mapping address: ");
+            sb.append(address.toString());
+
+            return sb.toString();
+        }
+    }
+
+    /**
+     * A formatter for formatting mapping value.
+     */
+    private final class MappingValueFormatter implements CellFormatter {
+
+        @Override
+        public String format(Object value) {
+            MappingEntry mapping = (MappingEntry) value;
+            MappingValue mappingValue = mapping.value();
+            List<MappingTreatment> treatments = mappingValue.treatments();
+
+            StringBuilder sb = new StringBuilder("Treatments: ");
+            formatTreatments(sb, treatments);
+
+            return sb.toString();
+        }
+
+        private void formatTreatments(StringBuilder sb,
+                                      List<MappingTreatment> treatments) {
+            if (!treatments.isEmpty()) {
+                for (MappingTreatment t : treatments) {
+                    sb.append(t).append(COMMA);
+                }
+            }
         }
     }
 }
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
index 7b5018b..16f65cd 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.css
@@ -18,25 +18,20 @@
  ONOS GUI -- Mapping Management -- CSS file
  */
 
-#ov-mapping {
-    padding: 20px;
-    position: relative;
-}
-.light #ov-mapping {
-    color: navy;
-}
-.dark #ov-mapping {
-    color: #88f;
+#ov-mapping h2 {
+    display: inline-block;
 }
 
-#ov-mapping .button-panel {
-    margin: 10px;
-    width: 200px;
+#ov-mapping div.ctrl-btns {
 }
 
-.light #ov-mapping .button-panel {
-    background-color: #ccf;
+#ov-mapping td {
+    text-align: center;
 }
-.dark #ov-mapping .button-panel {
-    background-color: #444;
+#ov-mapping td.right {
+    text-align: right;
+}
+#ov-mapping td.mappingValue {
+    text-align: left;
+    padding-left: 36px;
 }
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
index 1b82ca5..0971144 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.html
@@ -1,3 +1,77 @@
 <!-- partial HTML -->
 <div id="ov-mapping">
+    <div class="tabular-header">
+        <h2>
+            Mappings for Device {{devId || "(No device selected)"}}
+            ({{tableData.length}} total)
+        </h2>
+
+        <div class="ctrl-btns">
+            <div class="refresh" ng-class="{active: autoRefresh}"
+                 icon icon-size="42" icon-id="refresh"
+                 tooltip tt-msg="autoRefreshTip"
+                 ng-click="toggleRefresh()"></div>
+
+            <div class="separator"></div>
+
+            <span ng-if="brief">
+            <div class="active"
+                 icon icon-id="plus" icon-size="42"
+                 tooltip tt-msg="detailTip"
+                 ng-click="briefToggle()"> </div>
+            </span>
+
+            <span ng-if="!brief">
+            <div class="active"
+                 icon icon-id="minus" icon-size="42"
+                 tooltip tt-msg="briefTip"
+                 ng-click="briefToggle()"> </div>
+            </span>
+
+            <div class="separator"></div>
+
+            <div class="active"
+                 icon icon-id="deviceTable" icon-size="42"
+                 tooltip tt-msg="deviceTip"
+                 ng-click="nav('device')"></div>
+        </div>
+    </div>
+
+    <div class="summary-list" onos-table-resize>
+        <div class="table-header" onos-sortable-header>
+            <table>
+                <tr>
+                    <td colId="id" col-width="180px" sortable>Mapping ID </td>
+                    <td colId="type" sortable>Type </td>
+                    <td colId="state" sortable>State </td>
+                    <td colId="mappingKey" sortable>Mapping Key </td>
+                    <td colId="mappingAction" sortable>Mapping Action </td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table onos-flash-changes id-prop="id">
+                <tr ng-if="!tableData.length" class="no-data">
+                    <td colspan="5">
+                        {{annots.no_rows_msg}}
+                    </td>
+                </tr>
+
+                <tr ng-repeat-start="mapping in tableData | filter:queryFilter track by $index"
+                    ng-click="selectCallback($event, mapping)"
+                    ng-class="{selected: mapping.id === selId}"
+                    ng-repeat-complete row-id="{{mapping.id}}">
+                    <td>{{mapping.id}}</td>
+                    <td>{{mapping.type}}</td>
+                    <td>{{mapping.state}}</td>
+                    <td>{{mapping.mappingKey}}</td>
+                    <td>{{mapping.mappingAction}}</td>
+                </tr>
+                <tr row-id="{{mapping.id}}" ng-repeat-end ng-hide="brief">
+                    <td class="mappingValue" colspan="5">{{mapping.mappingValue}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
 </div>
diff --git a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
index 00262f9..f047ebc 100644
--- a/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
+++ b/apps/mappingmanagement/web/src/main/resources/app/view/mapping/mapping.js
@@ -21,17 +21,30 @@
     'use strict';
 
     // injected references
-    var $log, $scope, $location;
+    var $log, $scope, $location, tbs;
 
     angular.module('ovMapping', [])
         .controller('OvMappingCtrl',
-        ['$log', '$scope', '$location',
+        ['$log', '$scope', '$location', 'TableBuilderService',
 
-        function (_$log_, _$scope_, _$location_) {
+        function (_$log_, _$scope_, _$location_, _tbs_) {
             var params;
+
             $log = _$log_;
             $scope = _$scope_;
             $location = _$location_;
+            tbs = _tbs_;
+
+            params = $location.search();
+            if (params.hasOwnProperty('devId')) {
+                $scope.devId = params['devId'];
+            }
+
+            tbs.buildTable({
+                scope: $scope,
+                tag: 'mapping',
+                query: params
+             });
 
             $log.log('OvMappingCtrl has been created');
         }]);