diff --git a/incubator/api/src/main/java/org/onosproject/incubator/net/tunnel/TunnelEndPointFormatter.java b/incubator/api/src/main/java/org/onosproject/incubator/net/tunnel/TunnelEndPointFormatter.java
new file mode 100644
index 0000000..964d451
--- /dev/null
+++ b/incubator/api/src/main/java/org/onosproject/incubator/net/tunnel/TunnelEndPointFormatter.java
@@ -0,0 +1,33 @@
+package org.onosproject.incubator.net.tunnel;
+
+
+import org.onosproject.ui.table.CellFormatter;
+import org.onosproject.ui.table.cell.AbstractCellFormatter;
+
+/**
+ * Formats a optical tunnel endpoint as "(type)/(element-id)/(port)".
+ * Formats a ip tunnel endpoint as "ip".
+ */
+public final class TunnelEndPointFormatter extends AbstractCellFormatter {
+    //non-instantiable
+    private TunnelEndPointFormatter() {
+    }
+
+    @Override
+    protected String nonNullFormat(Object value) {
+
+        if (value instanceof DefaultOpticalTunnelEndPoint) {
+            DefaultOpticalTunnelEndPoint cp = (DefaultOpticalTunnelEndPoint) value;
+            return cp.type() + "/" + cp.elementId().get() + "/" + cp.portNumber().get();
+        } else if (value instanceof IpTunnelEndPoint) {
+            IpTunnelEndPoint cp = (IpTunnelEndPoint) value;
+            return cp.ip().toString();
+        }
+        return "";
+    }
+
+    /**
+     * An instance of this class.
+     */
+    public static final CellFormatter INSTANCE = new TunnelEndPointFormatter();
+}
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/TunnelViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/TunnelViewMessageHandler.java
index c0a2725..13ce939 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/TunnelViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/TunnelViewMessageHandler.java
@@ -3,6 +3,7 @@
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.incubator.net.tunnel.Tunnel;
+import org.onosproject.incubator.net.tunnel.TunnelEndPointFormatter;
 import org.onosproject.incubator.net.tunnel.TunnelService;
 import org.onosproject.ui.RequestHandler;
 import org.onosproject.ui.UiMessageHandler;
@@ -52,6 +53,8 @@
         protected TableModel createTableModel() {
             TableModel tm = super.createTableModel();
             //TODO add more formater class so that we can get a more readable table
+            tm.setFormatter(ONE, TunnelEndPointFormatter.INSTANCE);
+            tm.setFormatter(TWO, TunnelEndPointFormatter.INSTANCE);
             tm.setFormatter(TYPE, EnumFormatter.INSTANCE);
             return tm;
         }
@@ -59,9 +62,7 @@
         @Override
         protected void populateTable(TableModel tm, ObjectNode payload) {
             TunnelService ts = get(TunnelService.class);
-            ts.queryAllTunnels().forEach(tunnel -> {
-                populateRow(tm.addRow(), tunnel);
-            });
+            ts.queryAllTunnels().forEach(tunnel -> populateRow(tm.addRow(), tunnel));
         }
 
     }
diff --git a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
index 3f1d761..4909cc0 100644
--- a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
+++ b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
@@ -61,6 +61,7 @@
                     <td>{{tunnel.two}}</td>
                     <td>{{tunnel.type}}</td>
                     <td>{{tunnel.group_id}}</td>
+                    <td>{{tunnel.bandwidth}}</td>
                     <td>{{tunnel.path}}</td>
                 </tr>
             </table>