diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.js b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
index 8996ec8..163a01d 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
@@ -43,7 +43,9 @@
         var winWidth = fs.windowSize().width,
             winHeight = fs.windowSize().height,
             style = {
-                display: 'inline-block'
+                display: 'inline-block',
+                left: 'auto',
+                right: 'auto'
             };
 
         if (mouseX <= (winWidth / 2)) {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 23ef0b5..d65df90 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -85,6 +85,17 @@
     top: 320px;
 }
 
+#topo-p-detail .actionBtns {
+    text-align: center;
+}
+#topo-p-detail .actionBtns .actionBtn {
+    display: inline-block;
+}
+#topo-p-detail .actionBtns .actionBtn svg {
+    width: 30px;
+    height: 30px;
+}
+
 /* --- general topo-panel styling --- */
 
 .topo-p svg {
@@ -161,38 +172,6 @@
     color: #888;
 }
 
-
-.topo-p .actionBtn {
-    margin: 6px 12px;
-    padding: 2px 6px;
-    font-size: 9pt;
-    cursor: pointer;
-    width: 200px;
-    text-align: center;
-    border-radius: 4px;
-}
-.light .topo-p .actionBtn {
-    border: 2px solid #ddd;
-    color: #eee;
-    background: #888;
-}
-.dark .topo-p .actionBtn {
-    border: 2px solid #222;
-    color: #888;
-    background: #444;
-}
-
-.light .topo-p .actionBtn:hover {
-    color: #eee;
-    background: #444;
-}
-.dark .topo-p .actionBtn:hover {
-    color: #eee;
-    background: #666;
-}
-
-
-
 /* --- Topo Instance Panel --- */
 
 #topo-p-instance {
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index 579ebde..af6e879 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, fs, ps, gs, flash, wss;
+    var $log, fs, ps, gs, flash, wss, bns;
 
     // constants
     var pCls = 'topo-p',
@@ -50,7 +50,12 @@
 
     function addProp(tbody, label, value) {
         var tr = tbody.append('tr'),
+            lab;
+        if (typeof label === 'string') {
             lab = label.replace(/_/g, ' ');
+        } else {
+            lab = label;
+        }
 
         function addCell(cls, txt) {
             tr.append('td').attr('class', cls).html(txt);
@@ -110,6 +115,7 @@
         title.text(data.id);
         listProps(tbody, data);
         dpa('hr');
+        dpa('div').classed('actionBtns', true);
     }
 
     function displayMulti(ids) {
@@ -124,13 +130,15 @@
             addProp(tbody, i+1, d);
         });
         dpa('hr');
+        dpa('div').classed('actionBtns', true);
     }
 
-    function addAction(text, cb) {
-        dpa('div')
-            .classed('actionBtn', true)
-            .text(text)
-            .on('click', cb);
+    function addAction(o) {
+        var btnDiv = d3.select('#' + idDet)
+            .select('.actionBtns')
+            .append('div')
+            .classed('actionBtn', true);
+        bns.button(btnDiv, idDet + o.id, o.gid, o.cb, o.tt);
     }
 
     var friendlyIndex = {
@@ -336,15 +344,16 @@
     angular.module('ovTopo')
     .factory('TopoPanelService',
         ['$log', 'FnService', 'PanelService', 'GlyphService',
-            'FlashService', 'WebSocketService',
+            'FlashService', 'WebSocketService', 'ButtonService',
 
-        function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_) {
+        function (_$log_, _fs_, _ps_, _gs_, _flash_, _wss_, _bns_) {
             $log = _$log_;
             fs = _fs_;
             ps = _ps_;
             gs = _gs_;
             flash = _flash_;
             wss = _wss_;
+            bns = _bns_;
 
             return {
                 initPanels: initPanels,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
index c83373c..44fd14a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
@@ -186,13 +186,28 @@
         tps.displayMulti(selectOrder);
 
         // always add the 'show traffic' action
-        tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction);
+        tps.addAction({
+            id: '-mult-rel-traf-btn',
+            gid: 'allTraffic',
+            cb:  tts.showRelatedIntentsAction,
+            tt: 'Show Related Traffic'
+        });
 
         // add other actions, based on what is selected...
         if (nSel() === 2 && allSelectionsClass('host')) {
-            tps.addAction('Create Host-to-Host Flow', tts.addHostIntentAction);
+            tps.addAction({
+                id: 'host-flow-btn',
+                gid: 'endstation',
+                cb: tts.addHostIntentAction,
+                tt: 'Create Host-to-Host Flow'
+            });
         } else if (nSel() >= 2 && allSelectionsClass('host')) {
-            tps.addAction('Create Multi-Source Flow', tts.addMultiSourceIntentAction);
+            tps.addAction({
+                id: 'mult-src-flow-btn',
+                gid: 'flows',
+                cb: tts.addMultiSourceIntentAction,
+                tt: 'Create Multi-Source Flow'
+            });
         }
 
         tts.cancelTraffic();
@@ -209,11 +224,21 @@
         tps.displaySingle(data);
 
         // always add the 'show traffic' action
-        tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction);
+        tps.addAction({
+            id: '-sin-rel-traf-btn',
+            gid: 'intentTraffic',
+            cb: tts.showRelatedIntentsAction,
+            tt: 'Show Related Traffic'
+        });
 
         // add other actions, based on what is selected...
         if (data.type === 'switch') {
-            tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction);
+            tps.addAction({
+                id: 'sin-dev-flows-btn',
+                gid: 'flows',
+                cb: tts.showDeviceLinkFlowsAction,
+                tt: 'Show Device Flows'
+            });
         }
 
         tps.displaySomething();
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
index 7e35dd9..ef94711 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoEvent-spec.js
@@ -18,14 +18,17 @@
  ONOS GUI -- Topo View -- Topo Event Service - Unit Tests
  */
 describe('factory: view/topo/topoEvent.js', function() {
-    var $log, fs, tes;
+    var $log, fs, tes, bns;
 
-    beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute'));
+    beforeEach(module('ovTopo', 'onosNav', 'onosUtil', 'onosLayer', 'ngRoute',
+        'onosWidget'));
 
-    beforeEach(inject(function (_$log_, FnService, TopoEventService) {
+    beforeEach(inject(function (_$log_, FnService,
+                                TopoEventService, ButtonService) {
         $log = _$log_;
         fs = FnService;
         tes = TopoEventService;
+        bns = ButtonService;
     }));
 
     it('should define TopoEventService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
index fc5b512..eebccfc 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoFilter-spec.js
@@ -18,7 +18,7 @@
  ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
  */
 describe('factory: view/topo/topoFilter.js', function() {
-    var $log, fs, fltr, api;
+    var $log, fs, fltr, bns, api;
 
     var mockNodes = {
             each: function () {},
@@ -29,12 +29,15 @@
             classed: function () {}
         };
 
-    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+        'onosWidget'));
 
-    beforeEach(inject(function (_$log_, FnService, TopoFilterService) {
+    beforeEach(inject(function (_$log_, FnService,
+                                TopoFilterService, ButtonService) {
         $log = _$log_;
         fs = FnService;
         fltr = TopoFilterService;
+        bns = ButtonService;
 
         api = {
             node: function () { return mockNodes; },
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
index 37fe0ef..edb1cc5 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoForce-spec.js
@@ -18,14 +18,17 @@
  ONOS GUI -- Topo View -- Topo Force Service - Unit Tests
  */
 describe('factory: view/topo/topoForce.js', function() {
-    var $log, fs, tfs;
+    var $log, fs, tfs, bns;
 
-    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+        'onosWidget'));
 
-    beforeEach(inject(function (_$log_, FnService, TopoForceService) {
+    beforeEach(inject(function (_$log_, FnService,
+                                TopoForceService, ButtonService) {
         $log = _$log_;
         fs = FnService;
         tfs = TopoForceService;
+        bns = ButtonService;
     }));
 
     it('should define TopoForceService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
index b4ad55c..1b2a573 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
@@ -18,14 +18,17 @@
  ONOS GUI -- Topo View -- Topo Panel Service - Unit Tests
  */
 describe('factory: view/topo/topoPanel.js', function() {
-    var $log, fs, tps;
+    var $log, fs, tps, bns;
 
-    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+        'onosWidget'));
 
-    beforeEach(inject(function (_$log_, FnService, TopoPanelService) {
+    beforeEach(inject(function (_$log_, FnService,
+                                TopoPanelService, ButtonService) {
         $log = _$log_;
         fs = FnService;
         tps = TopoPanelService;
+        bns = ButtonService;
     }));
 
     it('should define TopoPanelService', function () {
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
index d78a4fd..c8c051c 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js
@@ -18,14 +18,17 @@
  ONOS GUI -- Topo View -- Topo Selection Service - Unit Tests
  */
 describe('factory: view/topo/topoSelect.js', function() {
-    var $log, fs, tss;
+    var $log, fs, tss, bns;
 
-    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav'));
+    beforeEach(module('ovTopo', 'onosUtil', 'onosLayer', 'ngRoute', 'onosNav',
+        'onosWidget'));
 
-    beforeEach(inject(function (_$log_, FnService, TopoSelectService) {
+    beforeEach(inject(function (_$log_, FnService,
+                                TopoSelectService, ButtonService) {
         $log = _$log_;
         fs = FnService;
         tss = TopoSelectService;
+        bns = ButtonService;
     }));
 
     it('should define TopoSelectService', function () {