diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index 5dee1f8..2b97bfb 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -15,9 +15,9 @@
  */
 
 /*
- ONOS GUI -- Sample View -- CSS file
+ ONOS GUI -- Device View -- CSS file
  */
 
-#ov-device {
-    /* placeholder */
+#ov-device th {
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 08b40ec..7aaf8db 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -6,18 +6,18 @@
            ng-style="setTableHW()">
         <thead>
             <tr>
-                <th></th>
-                <th>URI
+                <th colId="available"></th>
+                <th colId="id">URI
                     <div class="inline-icon"
                          icon icon-id="tableColSortAsc"
                          icon-size="10">
                     </div>
                 </th>
-                <th>Vendor</th>
-                <th>Hardware Version</th>
-                <th>Software Version</th>
-                <th>Serial Number</th>
-                <th>Protocol</th>
+                <th colId="mfr">Vendor</th>
+                <th colId="hw">Hardware Version</th>
+                <th colId="sw">Software Version</th>
+                <th colId="serial">Serial Number</th>
+                <th colId="protocol">Protocol</th>
             </tr>
         </thead>
 
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index c59944a..b97e9e7 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -15,11 +15,14 @@
  */
 
 /*
- ONOS GUI -- Sample View Module
+ ONOS GUI -- Device View Module
  */
 
 (function () {
     'use strict';
+    var currCol = {},
+        prevCol = {};
+
 
     angular.module('ovDevice', [])
         .controller('OvDeviceCtrl', ['$log', '$location', 'RestService',
@@ -35,6 +38,31 @@
                 self.deviceData = data.devices;
             });
 
+            d3.selectAll('th').on('click', function(d) {
+                var thElem = d3.select(this);
+                currCol.colId = thElem.attr('colId');
+
+                if(currCol.colId === prevCol.colId) {
+                    (currCol.icon === 'tableColSortDesc') ?
+                        currCol.icon = 'tableColSortAsc' :
+                        currCol.icon = 'tableColSortDesc';
+                    prevCol.icon = currCol.icon;
+                } else {
+                    currCol.icon = 'tableColSortAsc';
+                    prevCol.icon = 'tableColSortNone';
+                }
+
+                $log.debug('currCol clicked: ' + currCol.colId +
+                ', with sorting icon: ' + currCol.icon);
+                $log.debug('prevCol clicked: ' + prevCol.colId +
+                ', with its current sorting icon as ' + prevCol.icon);
+
+                // TODO: send the prev and currCol info to the server to use in sorting table here
+
+                prevCol.colId = currCol.colId;
+
+            });
+
             $log.log('OvDeviceCtrl has been created');
         }]);
 }());