diff --git a/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.css b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.css
new file mode 100755
index 0000000..8729afe
--- /dev/null
+++ b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.css
@@ -0,0 +1 @@
+/* css for sfcweb app topology overlay  */
diff --git a/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.html b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.html
new file mode 100755
index 0000000..4a420ea
--- /dev/null
+++ b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopov.html
@@ -0,0 +1,4 @@
+<!-- partial HTML -->
+<div id="ov-sfcweb-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovDemo.js b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovDemo.js
new file mode 100755
index 0000000..ebaf482
--- /dev/null
+++ b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovDemo.js
@@ -0,0 +1,154 @@
+/*
+ * Copyright 2016-present 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ sfc web gui overlay implementation.
+ */
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss, tds, ds, handlerMap = {};
+
+    // constants
+    var displayStart     = 'sfcwebTopovDisplayStart',
+        showSfcInf       = 'showSfcInfo',
+        clearMessage     = 'sfcTopovClear',
+        configSfpMessage = 'configSfpMessage' ;
+
+    // internal state
+    var currentMode = null;
+
+    // === Main API functions
+
+    function start() {
+        handlerMap[showSfcInf] = showSfcInformation;
+        wss.bindHandlers(handlerMap);
+        wss.sendEvent(displayStart);
+    }
+
+    function dOk() {
+        var sfcId = null;
+        sfcId = d3.select('#sfp-value').property("value");
+
+        if (sfcId) {
+            console.log(sfcId);
+        }
+
+       $log.debug('Dialog OK button clicked');
+
+       wss.sendEvent(configSfpMessage, {
+            id: sfcId
+        });
+
+        flash.flash('SFP ID query:');
+    }
+
+    function dClose() {
+        $log.debug('Dialog Close button clicked (or Esc pressed)');
+    }
+
+    function createUserText() {
+        var content = ds.createDiv();
+        var form = content.append('form');
+        var p = form.append('p');
+
+        p.append('input').attr({
+            id: 'sfp-value',
+            type: 'string',
+            name: 'sfp-value-name'
+        });
+        p.append('span').text('ID');
+        p.append('br');
+
+        return content;
+    }
+
+    function configSfp() {
+        tds.openDialog()
+        .setTitle('SFP ID User Input')
+        .addContent(createUserText())
+        .addOk(dOk, 'OK')
+        .addCancel(dClose, 'Close')
+        .bindKeys();
+    }
+
+    function showSfcInformation(data) {
+        console.log(data);
+        wss.unbindHandlers(handlerMap);
+
+        // Get the modal
+        var modal = document.getElementById('myModal');
+
+        // Get the button that opens the modal
+        var btn = document.getElementById("myBtn");
+
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+
+        modal.style.display = "block";
+
+        var tBody = document.getElementById('sfc-info-body');
+
+        var tdString = '' ;
+
+        for (var i = 0; i < data.a.length; i++) {
+            tdString += '<tr> <td>'+ data.a[i] +'</td></tr>';
+        }
+
+        tBody.innerHTML = tdString;
+
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+
+    }
+
+    function clear() {
+        wss.sendEvent(clearMessage);
+        flash.flash('Cleared SFC overlay');
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+    angular.module('ovSfcwebTopov', [])
+        .factory('SfcwebTopovDemoService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService', 'TopoDialogService', 'DialogService',
+        function (_$log_, _fs_, _flash_, _wss_, _tds_, _ds_) {
+            $log = _$log_;
+            fs = _fs_;
+            flash = _flash_;
+            wss = _wss_;
+            tds = _tds_;
+            ds = _ds_;
+            return {
+                start: start,
+                showSfcInformation: showSfcInformation,
+                clear: clear,
+                configSfp: configSfp
+            };
+        }]);
+
+}());
diff --git a/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovOverlay.js b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovOverlay.js
new file mode 100755
index 0000000..75bccb1
--- /dev/null
+++ b/apps/vtn/sfcweb/src/main/resources/app/view/sfcwebTopov/sfcwebTopovOverlay.js
@@ -0,0 +1,83 @@
+// sfcweb topology overlay - client side
+//
+// This is the glue that binds our business logic (in sfcwebTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, pps;
+    var longPrefix = 'M15.9,19.1h-8v-13h8V19.1z M90.5,6.1H75.6v13h14.9V6.1' +
+            'z M71.9,6.1H56.9v13h14.9V6.1z M53.2,6.1H38.3v13h14.9V6.1z M34.5,' +
+            '6.1H19.6v13h14.9V6.1z M102.2,6.1h-8v13h8V6.1z' ;
+
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in SfcWebUiTopovOverlay
+        overlayId: 'SFC-Service-overlay',
+        glyphId: '*star4',
+        tooltip: 'SFC web service Topo Overlay',
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'star4' is installed as 'meowster-overlay-star4'
+        // They can be referenced (from this overlay) as '*star4'
+        // That is, the '*' prefix stands in for 'meowster-overlay-'
+        glyphs: {
+            star4: {
+                vb: '0 0 8 8',
+                d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+            },
+            jp: {
+                vb: '0 0 110 110',
+                d: 'M84.3,89.3L58.9,64.2l-1.4,1.4L83,90.7L84.3,89.3z M27,7.6H7.4v19.2H27V7.6z' +
+                'M59.3,47.1H39.8v19.2h19.5V47.1z M102.1,79.5H82.6v19.2h19.5V79.5z M41.7,47.6L19,25.1l-1.2,1.2l22.7,22.5L41.7,47.6z'
+            }
+        },
+        activate: function () {
+            $log.debug("SFC service topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            pps.clear();
+            $log.debug("SFC service topology overlay DEACTIVATED");
+        },
+
+        // Key bindings for traffic overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        // FIXME: find better keys for shortest paths & disjoint paths modes
+        keyBindings: {
+            4: {
+                cb: function () {
+                    pps.start();
+                },
+                tt: 'Query SFP active list information',
+                gid: 'summary'
+            },
+            5: {
+                cb: function () {
+                    pps.configSfp();
+                },
+                tt: 'Highlight SFP active list information',
+                gid: '*jp'
+            },
+
+            _keyOrder: [
+                '4' , '5'
+            ]
+        }
+
+    };
+
+    // invoke code to register with the overlay service
+    angular.module('ovSfcwebTopov')
+        .run(['$log', 'TopoOverlayService', 'SfcwebTopovDemoService',
+
+        function (_$log_, _tov_, _pps_) {
+            $log = _$log_;
+            tov = _tov_;
+            pps = _pps_;
+            tov.register(overlay);
+            $log.debug('ovSfcwebTopov run');
+        }]);
+
+}());