diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
index 71c7d5a..8f2a0a5 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
@@ -23,6 +23,7 @@
 import org.onosproject.app.ApplicationService;
 import org.onosproject.core.Application;
 import org.onosproject.core.ApplicationId;
+import org.onosproject.core.CoreService;
 import org.onosproject.core.DefaultApplicationId;
 import org.onosproject.net.DeviceId;
 import org.onosproject.net.flow.FlowEntry;
@@ -76,7 +77,8 @@
     private static final String SELECTOR = "selector";
     private static final String TREATMENT_C = "treatment_c"; // for table column
     private static final String TREATMENT = "treatment";
-    private static final String TIMEOUT = "timeout";
+    private static final String IDLE_TIMEOUT = "idleTimeout";
+    private static final String HARD_TIMEOUT = "hardTimeout";
     private static final String PERMANENT = "permanent";
     private static final String STATE = "state";
     private static final String PACKETS = "packets";
@@ -134,7 +136,7 @@
             APP_NAME,
 
             GROUP_ID,
-            TIMEOUT,
+            IDLE_TIMEOUT,
             PERMANENT,
 
             SELECTOR_C,
@@ -170,7 +172,11 @@
     private String makeAppName(short id, Map<Short, ApplicationId> lookup) {
         ApplicationId appId = lookup.get(id);
         if (appId == null) {
-            return UNKNOWN + SPACE + ANGLE_O + id + ANGLE_C;
+            appId = get(CoreService.class).getAppId(id);
+            if (appId == null) {
+                return UNKNOWN + SPACE + ANGLE_O + id + ANGLE_C;
+            }
+            lookup.put(id, appId);
         }
         String appName = appId.name();
         return appName.startsWith(ONOS_PREFIX)
@@ -238,7 +244,7 @@
                     .cell(APP_NAME, makeAppName(flow.appId(), lookup))
 
                     .cell(GROUP_ID, flow.groupId().id())
-                    .cell(TIMEOUT, flow.timeout())
+                    .cell(IDLE_TIMEOUT, flow.timeout())
                     .cell(PERMANENT, flow.isPermanent())
 
                     .cell(SELECTOR_C, flow)
@@ -415,7 +421,8 @@
                 data.put(APP_NAME, makeAppName(flow.appId(), appShortMap()));
 
                 data.put(GROUP_ID, decorateGroupId(flow));
-                data.put(TIMEOUT, flow.hardTimeout());
+                data.put(IDLE_TIMEOUT, flow.timeout());
+                data.put(HARD_TIMEOUT, flow.hardTimeout());
                 data.put(PERMANENT, flow.isPermanent());
 
                 data.set(SELECTOR, jsonCriteria(flow));
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 06e9b1a..cbe0cdb 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -64,10 +64,20 @@
 #flow-details-panel h2 {
     display: inline-block;
     margin: 8px 0;
+    font-size: 16pt;
+    font-weight: lighter;
+}
+
+#flow-details-panel h3 {
+    display: inline-block;
+    margin: 8px 0;
+    font-size: 11pt;
+    font-variant: small-caps;
+    text-transform: uppercase;
 }
 
 #flow-details-panel .top-content table {
-    font-size: 12pt;
+    font-size: 10pt;
 }
 
 #flow-details-panel td.label {
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index 71794bd..4392d42 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -30,8 +30,6 @@
         pHeight,
         top,
         topTable,
-        trtDiv,
-        selDiv,
         topSelTable,
         topTrtTable,
         iconDiv,
@@ -39,7 +37,7 @@
 
     // constants
     var topPdg = 28,
-        wtPdg = 532,
+        wtPdg = 400,
 
         pName = 'flow-details-panel',
         detailsReq = 'flowDetailsRequest',
@@ -59,7 +57,8 @@
             'appId',
 
             'groupId',
-            'timeout',
+            'idleTimeout',
+            'hardTimeout',
             'permanent',
         ],
         friendlyProps = [
@@ -76,7 +75,8 @@
             'App ID',
 
             'Group ID',
-            'Timeout',
+            'Idle Timeout',
+            'Hard Timeout',
             'Permanent',
         ];
 
@@ -112,16 +112,12 @@
             .append('table');
         top.append('hr');
 
-        selDiv = container.append('div').classed('top', true);
-        selDiv.append('h2').text('Selector');
-        topSelTable = selDiv.append('div').classed('top-content', true)
-            .append('table');
-        selDiv.append('hr');
+        top.append('h3').text('Selector');
+        topSelTable = top.append('div').classed('top-content', true).append('table');
+        top.append('hr');
 
-        trtDiv = container.append('div').classed('top', true);
-        trtDiv.append('h2').text('Treatment');
-        topTrtTable = trtDiv.append('div').classed('top-content', true)
-            .append('table');
+        top.append('h3').text('Treatment');
+        topTrtTable = top.append('div').classed('top-content', true).append('table');
     }
 
     function addProp(tbody, label, value) {