diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
index 80c1e75..baacbae 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/ApplicationViewMessageHandler.java
@@ -15,6 +15,7 @@
  */
 package org.onosproject.ui.impl;
 
+import com.fasterxml.jackson.databind.node.ArrayNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.app.ApplicationAdminService;
@@ -42,6 +43,10 @@
 
     private static final String APP_MGMT_REQ = "appManagementRequest";
 
+    private static final String APP_DETAILS_REQ = "appDetailsRequest";
+    private static final String APP_DETAILS_RESP = "appDetailsResponse";
+    private static final String DETAILS = "details";
+
     private static final String STATE = "state";
     private static final String STATE_IID = "_iconid_state";
     private static final String ID = "id";
@@ -51,19 +56,25 @@
     private static final String ORIGIN = "origin";
     private static final String DESC = "desc";
     private static final String URL = "url";
+    private static final String README = "readme";
+    private static final String ROLE = "role";
+    private static final String REQUIRED_APPS = "_required_apps";
+    private static final String FEATURES = "features";
 
     private static final String ICON_ID_ACTIVE = "active";
     private static final String ICON_ID_INACTIVE = "appInactive";
 
     private static final String[] COL_IDS = {
-            STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC, URL
+            STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC,
+            URL, README, ROLE, REQUIRED_APPS, FEATURES
     };
 
     @Override
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(
                 new AppDataRequest(),
-                new AppMgmtRequest()
+                new AppMgmtRequest(),
+                new DetailRequestHandler()
         );
     }
 
@@ -135,4 +146,46 @@
             }
         }
     }
+
+    // handler for selected application detail requests
+    private final class DetailRequestHandler extends RequestHandler {
+        private DetailRequestHandler() {
+            super(APP_DETAILS_REQ);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID);
+            ApplicationService as = get(ApplicationService.class);
+            ApplicationId appId = as.getId(id);
+            ApplicationState state = as.getState(appId);
+            Application app = as.getApplication(appId);
+            ObjectNode data = objectNode();
+
+            data.put(STATE, state.toString());
+            data.put(ID, appId.name());
+            data.put(VERSION, app.version().toString());
+            data.put(ROLE, app.role().toString());
+            data.put(CATEGORY, app.category());
+            data.put(ORIGIN, app.origin());
+            data.put(README, app.readme());
+            data.put(URL, app.url());
+
+            // process required applications
+            ArrayNode requiredApps = arrayNode();
+            app.requiredApps().forEach(s -> requiredApps.add(s));
+
+            data.set(REQUIRED_APPS, requiredApps);
+
+            // process features
+            ArrayNode features = arrayNode();
+            app.features().forEach(f -> features.add(f));
+
+            data.set(FEATURES, features);
+
+            ObjectNode rootNode = objectNode();
+            rootNode.set(DETAILS, data);
+            sendMessage(APP_DETAILS_RESP, 0, rootNode);
+        }
+    }
 }
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index c015459..a1c9349 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Open Networking Laboratory
+ * Copyright 2015-2016 Open Networking Laboratory
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -60,3 +60,118 @@
 .dark #app-dialog.floatpanel.dialog {
     background-color: #444;
 }
+
+#application-details-panel.floatpanel {
+    -moz-border-radius: 0;
+    border-radius: 0;
+    z-index: 0;
+}
+
+.light #application-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #application-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#application-details-panel .container {
+    padding: 0 12px;
+}
+
+#application-details-panel .close-btn {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    cursor: pointer;
+}
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #ccc;
+}
+
+#application-details-panel .dev-icon {
+    display: inline-block;
+    padding: 0 6px 0 0;
+    vertical-align: middle;
+}
+.light .dev-icon svg.embeddedIcon .glyph {
+    fill: rgb(0, 172, 229);
+}
+.dark .dev-icon svg.embeddedIcon .glyph {
+    fill: #486D91;
+}
+
+#application-details-panel h2 {
+    display: inline-block;
+    margin: 8px 0;
+}
+
+#application-details-panel .top div.left {
+    float: left;
+    padding: 0 18px 0 0;
+}
+#application-details-panel .top div.right {
+    display: inline-block;
+}
+
+#application-details-panel td.label {
+    font-style: italic;
+    padding-right: 12px;
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+#application-details-panel .actionBtns div {
+    padding: 12px 6px;
+}
+
+#application-details-panel .top hr {
+    width: 95%;
+    margin: 0 auto;
+}
+
+.light #application-details-panel hr {
+    opacity: .5;
+    border-color: #FFF;
+}
+.dark #application-details-panel hr {
+    border-color: #666;
+}
+
+#application-details-panel .bottom table {
+    border-spacing: 0;
+}
+
+#application-details-panel .bottom th {
+    letter-spacing: 0.02em;
+}
+
+.light #application-details-panel .bottom th {
+    background-color: #CCC;
+    /* default text color */
+}
+.dark #application-details-panel .bottom th {
+    background-color: #131313;
+    color: #ccc;
+}
+
+#application-details-panel .bottom th,
+#application-details-panel .bottom td {
+    padding: 6px 12px;
+    text-align: center;
+}
+
+.light #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+.light #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #EBEDF2;
+}
+.dark #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #333;
+}
+.dark #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #555;
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index 2cd9d65..8e307f8 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -67,7 +67,8 @@
                     <td class="table-icon">
                         <div icon icon-id="{{app._iconid_state}}"></div>
                     </td>
-                    <td><img data-ng-src="./rs/applications/{{app.icon}}/icon" height="28px" width="28px" /></td>
+                    <td><img data-ng-src="./rs/applications/{{app.icon}}/icon"
+                             height="28px" width="28px" /></td>
                     <td>{{app.id}}</td>
                     <td>{{app.version}}</td>
                     <td>{{app.category}}</td>
@@ -80,4 +81,6 @@
 
     </div>
 
+    <application-details-panel></application-details-panel>
+
 </div>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index c4166d1..5e8d600 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Open Networking Laboratory
+ * Copyright 2015-2016 Open Networking Laboratory
  *
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
@@ -21,11 +21,32 @@
 (function () {
     'use strict';
 
+    // injected refs
+    var $log, $scope, $loc, fs, ps, wss, is, ns, ks, is;
+
+    // internal state
+    var  detailsPanel,
+         pStartY,
+         pHeight,
+         top,
+         bottom,
+         iconDiv,
+         wSize = false;
+
     // constants
     var INSTALLED = 'INSTALLED',
         ACTIVE = 'ACTIVE',
         appMgmtReq = 'appManagementRequest',
+        topPdg = 50,
+        ctnrPdg = 24,
+        winWidth = 500,
+        scrollSize = 17,
+        pName = 'application-details-panel',
+        detailsReq = 'appDetailsRequest',
+        detailsResp = 'appDetailsResponse',
         fileUploadUrl = 'applications/upload',
+        iconUrlPrefix = 'rs/applications/',
+        iconUrlSuffix = '/icon',
         dialogId = 'app-dialog',
         dialogOpts = {
             edge: 'right'
@@ -34,26 +55,199 @@
             'org.onosproject.drivers': true
         },
         discouragement = 'Deactivating or uninstalling this component can' +
-        ' have serious negative consequences! Do so at your own risk!!';
+        ' have serious negative consequences! Do so at your own risk!!',
+        propOrder = ['id', 'state', 'category', 'version', 'origin', 'role', 'url'],
+        friendlyProps = ['App ID', 'State', 'Category', 'Version', 'Origin', 'Role', 'URL'];
+
+    function createDetailsPane() {
+        detailsPanel = ps.createPanel(pName, {
+            width: wSize.width,
+            margin: 0,
+            hideMargin: 0
+        });
+        detailsPanel.el().style({
+            position: 'absolute',
+            top: pStartY + 'px'
+        });
+        $scope.hidePanel = function () { detailsPanel.hide(); };
+        detailsPanel.hide();
+    }
+
+    function closePanel() {
+        if (detailsPanel.isVisible()) {
+            $scope.selId = null;
+            detailsPanel.hide();
+            return true;
+        }
+        return false;
+    }
+
+    function handleEscape() {
+        return editNameCancel() || closePanel();
+    }
+
+    function addCloseBtn(div) {
+        is.loadEmbeddedIcon(div, 'plus', 30);
+        div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
+        div.on('click', closePanel);
+    }
+
+    function setUpPanel() {
+        var container, closeBtn, tblDiv;
+        detailsPanel.empty();
+
+        container = detailsPanel.append('div').classed('container', true);
+
+        top = container.append('div').classed('top', true);
+        closeBtn = top.append('div').classed('close-btn', true);
+        addCloseBtn(closeBtn);
+        iconDiv = top.append('div').classed('dev-icon', true);
+        top.append('h2');
+
+        tblDiv = top.append('div').classed('top-tables', true);
+        tblDiv.append('div').classed('left', true).append('table');
+        tblDiv.append('div').classed('right', true).append('table');
+        tblDiv.append('div').classed('readme', true).append('table');
+
+        top.append('hr');
+
+        // TODO: need add required applications and features
+        bottom = container.append('div').classed('bottom', true);
+        bottom.append('h2');
+        bottom.append('table');
+    }
+
+    function addProp(tbody, index, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).html(txt);
+        }
+        addCell('label', friendlyProps[index] + ' :');
+        addCell('value', value);
+    }
+
+    function addIcon(tbody, value) {
+        var tr = tbody.append('tr');
+        var td = tr.append('td');
+        td.append('img').attr('src', iconUrlPrefix + value + iconUrlSuffix);
+    }
+
+    function addReadme(tbody, value) {
+        var tr = tbody.append('tr');
+        tr.append('td').html(value);
+    }
+
+    function populateTop(tblDiv, details) {
+        var leftTbl = tblDiv.select('.left')
+                        .select('table')
+                        .append('tbody'),
+            rightTbl = tblDiv.select('.right')
+                        .select('table')
+                        .append('tbody'),
+            readmeTbl = tblDiv.select('.readme')
+                        .select('table')
+                        .append('tbody');
+
+        top.select('h2').html(details.name);
+
+        // place application icon to the left table
+        addIcon(leftTbl, details.id);
+
+        // place rest of the fields to the right table
+        propOrder.forEach(function (prop, i) {
+            addProp(rightTbl, i, details[prop]);
+        });
+
+        // place readme field to the readme table
+        addReadme(readmeTbl, details.readme);
+    }
+
+    function populateName(div, name) {
+        var lab = div.select('.label'),
+            val = div.select('.value');
+        lab.html('Friendly Name:');
+        val.html(name);
+    }
+
+    function populateDetails(details) {
+        var nameDiv, topTbs, btmTbl, ports;
+        setUpPanel();
+
+        nameDiv = top.select('.name-div');
+        topTbs = top.select('.top-tables');
+        btmTbl = bottom.select('table');
+
+        populateName(nameDiv, details.name);
+        populateTop(topTbs, details);
+        populateBottom(btmTbl);
+
+        detailsPanel.height(pHeight);
+    }
+
+    function populateBottom(table) {
+        var theader = table.append('thead').append('tr'),
+            tbody = table.append('tbody'),
+            tbWidth, tbHeight;
+
+        tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize;
+        tbHeight = pHeight
+                    - (fs.noPxStyle(detailsPanel.el()
+                                        .select('.top'), 'height'));
+        table.style({
+            height: tbHeight + 'px',
+            width: tbWidth + 'px',
+            overflow: 'auto',
+            display: 'block'
+        });
+
+        detailsPanel.width(winWidth + ctnrPdg);
+    }
+
+    function respDetailsCb(data) {
+        $scope.panelData = data.details;
+        $scope.$apply();
+    }
 
     angular.module('ovApp', [])
     .controller('OvAppCtrl',
         ['$log', '$scope', '$http',
-        'FnService', 'TableBuilderService', 'WebSocketService', 'UrlFnService',
-        'KeyService', 'DialogService',
+        'FnService', 'TableBuilderService', 'PanelService', 'WebSocketService',
+        'IconService', 'UrlFnService', 'KeyService', 'DialogService',
 
-    function ($log, $scope, $http, fs, tbs, wss, ufs, ks, ds) {
+    function (_$log_, _$scope_, $http, _fs_, tbs, _ps_, _wss_, _is_, ufs, _ks_, ds) {
+        $log = _$log_;
+        $scope = _$scope_;
+        wss = _wss_;
+        ks = _ks_;
+        fs = _fs_;
+        ps = _ps_;
+        is = _is_;
+        $scope.panelData = {};
         $scope.ctrlBtnState = {};
         $scope.uploadTip = 'Upload an application (.oar file)';
         $scope.activateTip = 'Activate selected application';
         $scope.deactivateTip = 'Deactivate selected application';
         $scope.uninstallTip = 'Uninstall selected application';
 
+        var handlers = {};
+
+        // details panel handlers
+        handlers[detailsResp] = respDetailsCb;
+        wss.bindHandlers(handlers);
+
         function selCb($event, row) {
             // $scope.selId is set by code in tableBuilder
             $scope.ctrlBtnState.selection = !!$scope.selId;
             refreshCtrls();
             ds.closeDialog();  // don't want dialog from previous selection
+
+            if ($scope.selId) {
+                wss.sendEvent(detailsReq, { id: row.id });
+            } else {
+                $scope.hidePanel();
+            }
+            $log.debug('Got a click on:', row);
         }
 
         function refreshCtrls() {
@@ -94,7 +288,6 @@
             ['scroll down', 'See more apps']
         ]);
 
-
         function createConfirmationText(action, itemId) {
             var content = ds.createDiv();
             content.append('p').text(action + ' ' + itemId);
@@ -154,6 +347,7 @@
 
         $scope.$on('$destroy', function () {
             ks.unbindKeys();
+            wss.unbindHandlers(handlers);
         });
 
         $log.log('OvAppCtrl has been created');
@@ -190,5 +384,72 @@
                 });
             }
         };
-    }]);
+    }])
+
+    .directive('applicationDetailsPanel',
+        ['$rootScope', '$window', '$timeout', 'KeyService',
+        function ($rootScope, $window, $timeout, ks) {
+            return function (scope) {
+                var unbindWatch;
+
+                function heightCalc() {
+                    pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+                                           + topPdg;
+                    wSize = fs.windowSize(pStartY);
+                    pHeight = wSize.height;
+                }
+
+                function initPanel() {
+                    heightCalc();
+                    createDetailsPane();
+                    $log.debug('start to initialize panel!');
+                }
+
+                // Safari has a bug where it renders the fixed-layout table wrong
+                // if you ask for the window's size too early
+                if (scope.onos.browser === 'safari') {
+                    $timeout(initPanel);
+                } else {
+                    initPanel();
+                }
+                // create key bindings to handle panel
+                ks.keyBindings({
+                    esc: [handleEscape, 'Close the details panel'],
+                    _helpFormat: ['esc']
+                });
+                ks.gestureNotes([
+                    ['click', 'Select a row to show application details'],
+                    ['scroll down', 'See more application']
+                ]);
+
+                // if the panelData changes
+                scope.$watch('panelData', function () {
+                    if (!fs.isEmptyObject(scope.panelData)) {
+                        populateDetails(scope.panelData);
+                        detailsPanel.show();
+                    }
+                });
+
+                // if the window size changes
+                unbindWatch = $rootScope.$watchCollection(
+                    function () {
+                        return {
+                            h: $window.innerHeight,
+                            w: $window.innerWidth
+                        };
+                    }, function () {
+                        if (!fs.isEmptyObject(scope.panelData)) {
+                            heightCalc();
+                            populateDetails(scope.panelData);
+                        }
+                    }
+                );
+
+                scope.$on('$destroy', function () {
+                    unbindWatch();
+                    ks.unbindKeys();
+                    ps.destroyPanel(pName);
+                });
+            };
+        }]);
 }());