diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLink.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLink.java
new file mode 100644
index 0000000..733e4c5
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLink.java
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+package org.onosproject.pceweb;
+
+import org.onosproject.net.Link;
+import org.onosproject.net.LinkKey;
+import org.onosproject.ui.topo.BiLink;
+import org.onosproject.ui.topo.LinkHighlight;
+import org.onosproject.ui.topo.LinkHighlight.Flavor;
+
+import java.util.Set;
+
+/**
+ * Provides the link color highlight mechanism for given links.
+ */
+public class PceWebLink extends BiLink {
+
+    private boolean primary;
+    private boolean secondary;
+    /**
+     * Initialize the Link key attributes.
+     */
+    public PceWebLink(LinkKey key, Link link) {
+        super(key, link);
+    }
+    /**
+     * Highlight the color of given selected links.
+     */
+    public void computeHilight(Set<Link> selectedLinks, Set<Link> allLinks) {
+        primary = selectedLinks.contains(this.one()) ||
+                (two() != null && selectedLinks.contains(two()));
+        secondary = allLinks.contains(this.one()) ||
+                (two() != null && allLinks.contains(two()));
+    }
+
+    @Override
+    public LinkHighlight highlight(Enum<?> anEnum) {
+        Flavor flavor = primary ? Flavor.PRIMARY_HIGHLIGHT :
+                (secondary ? Flavor.SECONDARY_HIGHLIGHT : Flavor.NO_HIGHLIGHT);
+        return new LinkHighlight(this.linkId(), flavor);
+    }
+}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLinkMap.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLinkMap.java
new file mode 100644
index 0000000..b958cc5
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebLinkMap.java
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+package org.onosproject.pceweb;
+
+import org.onosproject.net.Link;
+import org.onosproject.net.LinkKey;
+import org.onosproject.ui.topo.BiLinkMap;
+
+/**
+ * Our concrete link map.
+ */
+public class PceWebLinkMap extends BiLinkMap<PceWebLink> {
+
+    @Override
+    protected PceWebLink create(LinkKey linkKey, Link link) {
+        return new PceWebLink(linkKey, link);
+    }
+}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovComponent.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovComponent.java
new file mode 100644
index 0000000..5688165
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovComponent.java
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+package org.onosproject.pceweb;
+
+import com.google.common.collect.ImmutableList;
+import org.apache.felix.scr.annotations.Activate;
+import org.apache.felix.scr.annotations.Component;
+import org.apache.felix.scr.annotations.Deactivate;
+import org.apache.felix.scr.annotations.Reference;
+import org.apache.felix.scr.annotations.ReferenceCardinality;
+import org.onosproject.ui.UiExtension;
+import org.onosproject.ui.UiExtensionService;
+import org.onosproject.ui.UiMessageHandlerFactory;
+import org.onosproject.ui.UiTopoOverlayFactory;
+import org.onosproject.ui.UiView;
+import org.onosproject.ui.UiViewHidden;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.List;
+
+/**
+ * Skeletal ONOS UI Topology-Overlay application component.
+ */
+@Component(immediate = true)
+public class PceWebTopovComponent {
+
+    private static final ClassLoader CL = PceWebTopovComponent.class.getClassLoader();
+    private static final String VIEW_ID = "pcewebTopov";
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
+    protected UiExtensionService uiExtensionService;
+
+    // List of application views
+    private final List<UiView> uiViews = ImmutableList.of(
+            new UiViewHidden(VIEW_ID)
+    );
+
+    // Factory for UI message handlers
+    private final UiMessageHandlerFactory messageHandlerFactory =
+            () -> ImmutableList.of(
+                    new PceWebTopovMessageHandler()
+            );
+
+    // Factory for UI topology overlays
+    private final UiTopoOverlayFactory topoOverlayFactory =
+            () -> ImmutableList.of(
+                    new PceWebTopovOverlay()
+            );
+
+    // Application UI extension
+    protected UiExtension extension =
+            new UiExtension.Builder(CL, uiViews)
+                    .resourcePath(VIEW_ID)
+                    .messageHandlerFactory(messageHandlerFactory)
+                    .topoOverlayFactory(topoOverlayFactory)
+                    .build();
+
+    @Activate
+    protected void activate() {
+        uiExtensionService.register(extension);
+        log.info("Started");
+    }
+
+    @Deactivate
+    protected void deactivate() {
+        uiExtensionService.unregister(extension);
+        log.info("Stopped");
+    }
+
+}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
new file mode 100644
index 0000000..0c1a5b5
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovMessageHandler.java
@@ -0,0 +1,295 @@
+/*
+ * 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.
+ */
+
+package org.onosproject.pceweb;
+
+import com.fasterxml.jackson.databind.node.ObjectNode;
+
+
+import com.google.common.collect.ImmutableSet;
+import org.onlab.osgi.ServiceDirectory;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.DisjointPath;
+import org.onosproject.net.ElementId;
+import org.onosproject.net.HostId;
+import org.onosproject.net.Link;
+import org.onosproject.net.Path;
+import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.topology.LinkWeight;
+import org.onosproject.net.topology.PathService;
+import org.onosproject.net.topology.TopologyService;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiConnection;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.topo.DeviceHighlight;
+import org.onosproject.ui.topo.Highlights;
+import org.onosproject.ui.topo.HostHighlight;
+import org.onosproject.ui.topo.NodeBadge;
+import org.onosproject.ui.topo.TopoJson;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.Set;
+
+/**
+ * ONOS UI PCE WEB Topology-Overlay message handler.
+ */
+public class PceWebTopovMessageHandler extends UiMessageHandler {
+
+    private static final String PCEWEB_CLEAR = "pceTopovClear";
+    private static final String PCEWEB_SET_SRC = "pceTopovSetSrc";
+    private static final String PCEWEB_SET_DST = "pceTopovSetDst";
+    private static final String PCEWEB_SET_PATH = "pceTopovSetMode";
+
+    private static final String ID = "id";
+    private static final String MODE = "mode";
+    private static final String TYPE = "type";
+    private static final String SWITCH = "switch";
+    private static final String ENDSTATION = "endstation";
+    public static final String DST = "Dst";
+    public static final String SRC = "Src";
+    // Delay for showHighlights event processing on GUI client side to
+    // account for addLink animation.
+    public static final int DELAY_MS = 1100;
+
+    private static final String CLASS = "class";
+    private static final String UNKNOWN = "unknown";
+    private static final String DEVICE = "device";
+
+    private Set<Link> allPathLinks;
+    private boolean listenersRemoved;
+    private LinkWeight linkData;
+    private int highlightDelay;
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    private PathService pathService;
+
+    private ElementId src, dst;
+    private String srcType, dstType;
+    private List<Path> paths;
+    private int pathIndex;
+
+    protected TopologyService topologyService;
+    protected DeviceService deviceService;
+
+
+    @Override
+    public void init(UiConnection connection, ServiceDirectory directory) {
+
+        super.init(connection, directory);
+        //TODO: Need add listeners.
+        //topologyService = directory.get(TopologyService.class);
+        //addListeners();
+    }
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new ClearHandler(),
+                new SetSrcHandler(),
+                new SetDstHandler(),
+                new SetPathHandler());
+    }
+
+    // Handler classes
+    /**
+     * Handles the 'clear' event received from the client.
+     */
+    private final class ClearHandler extends RequestHandler {
+
+        public ClearHandler() {
+            super(PCEWEB_CLEAR);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            src = null;
+            dst = null;
+            sendMessage(TopoJson.highlightsMessage(new Highlights()));
+        }
+    }
+
+    /**
+     * Handles the 'set source' event received from the client.
+     */
+    private final class SetSrcHandler extends RequestHandler {
+
+        public SetSrcHandler() {
+            super(PCEWEB_SET_SRC);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            log.info("PCE WEB Set source process method invoked");
+            String id = string(payload, ID);
+            src = elementId(id);
+            srcType = string(payload, TYPE);
+            if (src.equals(dst)) {
+                dst = null;
+            }
+            sendMessage(TopoJson.highlightsMessage(addBadge(new Highlights(),
+                    srcType, src.toString(), SRC)));
+
+        }
+    }
+
+    /**
+     * Handles the 'set destination' event received from the client.
+     */
+    private final class SetDstHandler extends RequestHandler {
+
+        public SetDstHandler() {
+            super(PCEWEB_SET_DST);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String id = string(payload, ID);
+            dst = elementId(id);
+            dstType = string(payload, TYPE);
+            if (src.equals(dst)) {
+                src = null;
+            }
+
+            sendMessage(TopoJson.highlightsMessage(addBadge(new Highlights(),
+                    dstType, dst.toString(), DST)));
+
+        }
+    }
+
+    /**
+     * Handles the 'patchcalculation' event received from the client.
+     */
+    private final class SetPathHandler extends RequestHandler {
+
+        public SetPathHandler() {
+            super(PCEWEB_SET_PATH);
+        }
+
+        @Override
+        public void process(long sid, ObjectNode payload) {
+            String mode = string(payload, MODE);
+
+            // TODO: Read user input[constraints] and call the path calculation based on
+            //given constrainsts.
+            findAndSendPaths();
+        }
+    }
+
+    // === ------------
+    /**
+     * provides the element id.
+     */
+    private ElementId elementId(String id) {
+        try {
+            return DeviceId.deviceId(id);
+        } catch (IllegalArgumentException e) {
+            return HostId.hostId(id);
+        }
+    }
+    //TODO: Need to pass constraints to this method
+    private void findAndSendPaths() {
+        log.info("src={}; dst={};", src, dst);
+        if (src != null && dst != null) {
+            //TBD: Need to call pathcalulation API here
+            hilightAndSendPaths();
+
+        }
+
+    }
+
+    //TODO: The below code is not used. Once get path from PCE app then below code will be use.
+    // the below code will get path and it will highlight the selected path.
+    //Currently primary path in use, there is no use of secondary path.
+    //secondary path need to remove based on path received by PCE app.
+    private ImmutableSet.Builder<Link> buildPaths(
+            ImmutableSet.Builder<Link> pathBuilder) {
+        paths.forEach(path -> path.links().forEach(pathBuilder::add));
+        return pathBuilder;
+    }
+
+    private ImmutableSet.Builder<Link> buildDisjointPaths(
+            ImmutableSet.Builder<Link> pathBuilder) {
+        paths.forEach(path -> {
+            DisjointPath dp = (DisjointPath) path;
+            pathBuilder.addAll(dp.primary().links());
+            pathBuilder.addAll(dp.backup().links());
+        });
+        return pathBuilder;
+    }
+
+    private void hilightAndSendPaths() {
+        PceWebLinkMap linkMap = new PceWebLinkMap();
+        allPathLinks.forEach(linkMap::add);
+
+        Set<Link> selectedPathLinks;
+
+        selectedPathLinks = paths.isEmpty() ? ImmutableSet.of()
+                    : ImmutableSet.copyOf(paths.get(pathIndex).links());
+
+        Highlights highlights = new Highlights();
+        if (highlightDelay > 0) {
+            highlights.delay(highlightDelay);
+        }
+        for (PceWebLink plink : linkMap.biLinks()) {
+            plink.computeHilight(selectedPathLinks, allPathLinks);
+            highlights.add(plink.highlight(null));
+        }
+        if (src != null) {
+            highlights = addBadge(highlights, srcType, src.toString(), SRC);
+        }
+        if (dst != null) {
+            highlights = addBadge(highlights, dstType, dst.toString(), DST);
+        }
+        sendMessage(TopoJson.highlightsMessage(highlights));
+    }
+
+    private Highlights addBadge(Highlights highlights, String type,
+            String elemId, String src) {
+        if (SWITCH.equals(type)) {
+            highlights = addDeviceBadge(highlights, elemId, src);
+        } else if (ENDSTATION.equals(type)) {
+            highlights = addHostBadge(highlights, elemId, src);
+        }
+        return highlights;
+    }
+
+    private Highlights addDeviceBadge(Highlights h, String elemId, String type) {
+        DeviceHighlight dh = new DeviceHighlight(elemId);
+        dh.setBadge(createBadge(type));
+        h.add(dh);
+        return h;
+    }
+
+    private Highlights addHostBadge(Highlights h, String elemId, String type) {
+        HostHighlight hh = new HostHighlight(elemId);
+        hh.setBadge(createBadge(type));
+        h.add(hh);
+        return h;
+    }
+
+    private NodeBadge createBadge(String type) {
+        return NodeBadge.text(type);
+    }
+
+    //TODO: Listeners need to add.
+    //If topology changes then path need to be re calculate.
+
+}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
new file mode 100644
index 0000000..087f4bc
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/PceWebTopovOverlay.java
@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+
+package org.onosproject.pceweb;
+
+
+import org.onosproject.net.AnnotationKeys;
+import org.onosproject.net.Annotations;
+import org.onosproject.net.Device;
+import org.onosproject.net.DeviceId;
+import org.onosproject.ui.UiTopoOverlay;
+import org.onosproject.ui.topo.ButtonId;
+import org.onosproject.ui.topo.PropertyPanel;
+import org.onosproject.net.HostId;
+import org.onosproject.net.device.DeviceService;
+import org.onosproject.ui.topo.TopoConstants.CoreButtons;
+
+import static org.onosproject.ui.topo.TopoConstants.Properties.*;
+import org.onosproject.cli.AbstractShellCommand;
+
+/**
+ * PCE WEB topology overlay.
+ */
+public class PceWebTopovOverlay extends UiTopoOverlay {
+
+  // NOTE: this must match the ID defined in pcewebTopovOverlay.js
+    private static final String OVERLAY_ID = "PCE-web-overlay";
+    private static final String MY_TITLE = "Device details";
+
+    public static final String AS_NUMBER = "asNumber";
+    public static final String DOMAIN_IDENTIFIER = "domainIdentifier";
+    public static final String ROUTING_UNIVERSE = "routingUniverse";
+
+    private static final ButtonId SRC_BUTTON = new ButtonId("src");
+    private static final ButtonId DST_BUTTON = new ButtonId("dst");
+    /**
+     * Initialize the overlay ID.
+     */
+    public PceWebTopovOverlay() {
+        super(OVERLAY_ID);
+    }
+
+    @Override
+    public void deactivate() {
+        super.deactivate();
+        log.debug("Deactivated");
+    }
+
+    @Override
+    public void modifyDeviceDetails(PropertyPanel pp, DeviceId deviceId) {
+
+         pp.title(MY_TITLE);
+         log.info("Modify device details called.");
+
+         DeviceService deviceService = AbstractShellCommand.get(DeviceService.class);
+
+         pp.removeAllProps();
+
+         pp.addButton(SRC_BUTTON).addButton(DST_BUTTON);
+
+         pp.removeButtons(CoreButtons.SHOW_PORT_VIEW)
+                .removeButtons(CoreButtons.SHOW_GROUP_VIEW)
+                .removeButtons(CoreButtons.SHOW_METER_VIEW);
+
+         if (deviceService != null) {
+
+            Device device = deviceService.getDevice(deviceId);
+            Annotations annot = device.annotations();
+
+            String routerId = annot.value(AnnotationKeys.ROUTER_ID);
+            String type = annot.value(AnnotationKeys.TYPE);
+            String asNumber = annot.value(AS_NUMBER);
+            String domain = annot.value(DOMAIN_IDENTIFIER);
+            String routingUnverse = annot.value(ROUTING_UNIVERSE);
+
+            if (type != null) {
+                pp.addProp("Type", type);
+            }
+            /* TBD: Router ID need to print
+            if (routerId != null) {
+                pp.addProp("Router-ID", routerId);
+            } */
+            if (routingUnverse != null) {
+                pp.addProp("Routing Universe", routingUnverse);
+            }
+            if (asNumber != null) {
+                pp.addProp("AS Number", asNumber);
+            }
+            if (domain != null) {
+                pp.addProp("Domain ID", domain);
+            }
+        }
+    }
+
+    @Override
+    public void modifyHostDetails(PropertyPanel pp, HostId hostId) {
+        pp.addButton(SRC_BUTTON).addButton(DST_BUTTON);
+    }
+}
diff --git a/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/package-info.java b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/package-info.java
new file mode 100644
index 0000000..04d101c
--- /dev/null
+++ b/apps/pce/pceweb/src/main/java/org/onosproject/pceweb/package-info.java
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+/**
+ * PCE visualization GUI topology view overlay.
+ */
+package org.onosproject.pceweb;
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
new file mode 100644
index 0000000..dcd4bcb
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.css
@@ -0,0 +1 @@
+/* css for sample app topology overlay  */
\ No newline at end of file
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.html b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.html
new file mode 100644
index 0000000..7d02ca9
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopov.html
@@ -0,0 +1,4 @@
+<!-- partial HTML -->
+<div id="ov-pceweb-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
new file mode 100644
index 0000000..096f872
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovDemo.js
@@ -0,0 +1,234 @@
+/*
+ * 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.
+ */
+
+/*PCE topology overlay web application implementation.*/
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss, tps, ns, tds, ds;
+
+   // constants
+    var srcMessage = 'pceTopovSetSrc',
+        dstMessage = 'pceTopovSetDst',
+        clearMessage = 'pceTopovClear',
+        setModemsg =  'pceTopovSetMode',
+        L3dev = 'requestIpDevDetails';
+    // internal state
+    var currentMode = null;
+
+    // === ---------------------------
+    // === Helper functions
+
+    // === ---------------------------
+    // === Main API functions
+
+    function setSrc(node) {
+        wss.sendEvent(srcMessage, {
+            id: node.id,
+            type: node.type
+        });
+        flash.flash('Source node: ' + node.id);
+    }
+
+    function setDst(node) {
+        wss.sendEvent(dstMessage, {
+            id: node.id,
+            type: node.type
+        });
+        flash.flash('Destination node: ' + node.id);
+    }
+
+    function clear() {
+        wss.sendEvent(clearMessage);
+        flash.flash('Cleared source and destination');
+    }
+
+    function dOk() {
+        var bandWidth = d3.select('#band-width-box').property("checked");
+        var bandValue = null;
+        var bandType = null;
+
+        if (bandWidth) {
+
+            bandValue = d3.select('#band-width-value').property("value");
+
+            if (d3.select("#band-kpbs-val").property("checked")) {
+                bandType = 'kbps';
+            } else if (d3.select('#band-mpbs-val').property("checked")) {
+                bandType = 'mbps';
+            }
+        }
+
+        var costType = d3.select('#pce-cost-type').property("checked");
+        var costTypeVal = null;
+
+        if (costType) {
+
+            if (d3.select("#pce-cost-type-igp").property("checked")) {
+                costTypeVal = 'igp';
+            } else if (d3.select('#pce-cost-type-te').property("checked")) {
+               costTypeVal = 'te';
+            }
+       }
+
+       var lspType = d3.select('#pce-lsp-type').property("checked");
+       var lspTypeVal = null;
+
+       if (lspType) {
+
+           if (d3.select("#pce-lsp-type-cr").property("checked")) {
+               lspTypeVal = 'cr';
+           } else if (d3.select('#pce-lsp-type-srbe').property("checked")) {
+               lspTypeVal = 'srbe';
+           } else if (d3.select('#pce-lsp-type-srte').property("checked")) {
+               lspTypeVal = 'srte';
+           }
+       }
+
+         //TBD: Read the user inputs and need to send the event for calculating the path based on constrainsts.
+         // TBD: Need to read IGP cost type and LSP type.
+         //wss.sendEvent(setModemsg);
+         //flash.flash('creat path message');
+
+       $log.debug('Dialog OK button clicked');
+    }
+
+    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');
+
+        //Add the bandwidth related inputs.
+        p.append('input').attr({
+            id: 'band-width-box',
+            type: 'checkbox',
+            name: 'band-width-name'
+        });
+        p.append('span').text('Band Width');
+        p.append('br');
+        p.append('input').attr({
+            id: 'band-width-value',
+            type: 'number',
+            name: 'band-width-value-name'
+        });
+        p.append('input').attr({
+            id: 'band-kpbs-val',
+            type: 'radio',
+            name: 'pce-band-type'
+        });
+        p.append('span').text('kpbs');
+        p.append('input').attr({
+            id: 'band-mpbs-val',
+            type: 'radio',
+            name: 'pce-band-type'
+        });
+        p.append('span').text('mpbs');
+        p.append('br');
+
+        //Add the cost type related inputs.
+        p.append('input').attr({
+            id: 'pce-cost-type',
+            type: 'checkbox',
+            name: 'pce-cost-type-name'
+        });
+        p.append('span').text('Cost Type');
+        p.append('br');
+        p.append('input').attr({
+            id: 'pce-cost-type-igp',
+            type: 'radio',
+            name: 'pce-cost-type-valname'
+        });
+        p.append('span').text('IGP');
+        p.append('input').attr({
+            id: 'pce-cost-type-te',
+            type: 'radio',
+            name: 'pce-cost-type-valname'
+        });
+        p.append('span').text('TE');
+        p.append('br');
+
+        //Add the LSP type related inputs.
+        p.append('input').attr({
+            id: 'pce-lsp-type',
+            type: 'checkbox',
+            name: 'pce-lsp-type-name'
+        });
+        p.append('span').text('Lsp Type');
+        p.append('br');
+        p.append('input').attr({
+            id: 'pce-lsp-type-cr',
+            type: 'radio',
+            name: 'pce-lsp-type-valname'
+        });
+        p.append('span').text('CR');
+        p.append('input').attr({
+            id: 'pce-lsp-type-srbe',
+            type: 'radio',
+            name: 'pce-lsp-type-valname'
+        });
+        p.append('span').text('SR BE');
+        p.append('input').attr({
+            id: 'pce-lsp-type-srte',
+            type: 'radio',
+            name: 'pce-lsp-type-valname'
+        });
+        p.append('span').text('SR TE');
+
+        return content;
+    }
+
+    function setMode() {
+        tds.openDialog()
+        .setTitle('constraints user')
+        .addContent(createUserText())
+        .addOk(dOk, 'OK')
+        .addCancel(dClose, 'Close')
+        .bindKeys();
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+
+    angular.module('ovPcewebTopov', [])
+        .factory('PcewebTopovDemoService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
+        'TopoPanelService', 'NavService', 'TopoDialogService', 'DialogService',
+
+        function (_$log_, _fs_, _flash_, _wss_, _tps_, _ns_,_tds_, _ds_) {
+            $log = _$log_;
+            fs = _fs_;
+            flash = _flash_;
+            wss = _wss_;
+            tps = _tps_;
+            ns = _ns_;
+            tds = _tds_;
+            ds = _ds_;
+
+            return {
+                setSrc: setSrc,
+                setDst: setDst,
+                clear: clear,
+                setMode: setMode
+
+            };
+        }]);
+}());
diff --git a/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
new file mode 100644
index 0000000..63a4d2d
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/app/view/pcewebTopov/pcewebTopovOverlay.js
@@ -0,0 +1,168 @@
+/*
+ * 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.
+ */
+
+// PCE web topology overlay - client side
+//
+// This is the glue that binds our business logic (in pcewebTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, pps;
+
+    // internal state should be kept in the service module (not here)
+    var selection;
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in AppUiTopovOverlay
+        overlayId: 'PCE-web-overlay',
+        glyphId: 'topo',
+        tooltip: 'PCE web Topo Overlay',
+
+
+        activate: function () {
+            $log.debug("PCE web topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            pps.clear();
+            $log.debug("PCE web topology overlay DEACTIVATED");
+        },
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'src' is installed as 'PCE-web-overlay-src'
+        // They can be referenced (from this overlay) as '*src'
+        // That is, the '*' prefix stands in for 'PCE-web-overlay-'
+        glyphs: {
+            src: {
+                vb: '0 0 110 110',
+                d: 'M28.7,59.3 M14.9,53 M8.7,39 M32.4,92.5H25l-0.2-3.6' +
+                'c-0.5-9-5.4-23.9-12.9-33.5c-5.2-6.6-7-12.8-7-16.3c0-13.3,10.7-24,23.8-24c13.1,0,23.8,10.8,23.8,24c0,3.5-1.8,9.7-7,16.3' +
+                'C38,65,33.1,80,32.6,88.9L32.4,92.5z M27.9,89.5h1.7l0-0.7c0.5-9.4,5.7-25.2,13.5-35.2c4.7-6,6.4-11.4,6.4-14.5' +
+                'c0-11.6-9.3-21-20.8-21C17.3,18,7.9,27.5,7.9,39c0,3,1.7,8.4,6.4,14.5c7.9,10.1,13.1,25.8,13.5,35.2L27.9,89.5z M28.7,83.2' +
+                'M28.6,29.8c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5C37.1,33.6,33.3,29.8,28.6,29.8z M89.6,47 M89.6,29.5' +
+                'c-0.1,3.1-0.1,12.8,0,17c0.1,4.2,14.1-5.5,13.9-8.5C103.4,35.1,89.6,25.6,89.6,29.5z M51,38.1L89.5,38 M89.5,39.5l0-3L51,36.5l0,3' +
+                'L89.5,39.5z'
+            },
+            dst: {
+                vb: '0 0 110 110',
+                d: 'M80.3,59.8 M85.8,92.5h-7.2L78.4,89c-0.4-8.8-5.2-23.6-12.3-33' +
+                'c-4.9-6.5-6.7-12.5-6.7-16c0-13,10.2-23.7,22.7-23.7c12.5,0,22.7,10.6,22.7,23.7c0,3.5-1.8,9.5-6.7,16C91.2,65.4,86.4,80.1,86,89' +
+                'L85.8,92.5z M81.4,89.5H83l0-0.7c0.5-9.3,5.4-24.8,12.9-34.7c4.5-5.9,6.1-11.2,6.1-14.2c0-11.4-8.9-20.7-19.8-20.7' +
+                'c-10.9,0-19.8,9.3-19.8,20.7c0,3,1.6,8.3,6.1,14.2C76,64,80.9,79.5,81.4,88.8L81.4,89.5z M82.1,30.8c-4.5,0-8.1,3.7-8.1,8.4' +
+                's3.6,8.4,8.1,8.4c4.5,0,8.1-3.7,8.1-8.4S86.6,30.8,82.1,30.8z M47.2,47.5 M45.2,30.8c-0.1,3.1-0.1,12.6,0,16.7' +
+                'c0.1,4.1,13.4-5.4,13.3-8.4C58.4,36.2,45.2,26.9,45.2,30.8z M45.2,39.1L6.7,39.2 M45.2,40.6l0-3L6.7,37.7l0,3L45.2,40.6z'
+            },
+            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'
+            },
+        },
+
+       // detail panel button definitions
+        buttons: {
+            src: {
+                gid: '*src',
+                tt: 'Set source node',
+                cb: function (data) {
+                    $log.debug('Set src action invoked with data:', data);
+                    pps.setSrc(selection);
+                }
+            },
+            dst: {
+                gid: '*dst',
+                tt: 'Set destination node',
+                cb: function (data) {
+                    $log.debug('Set dst action invoked with data:', data);
+                    pps.setDst(selection);
+                }
+            }
+        },
+        // Key bindings for PCE web overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        keyBindings: {
+            openBracket: {
+                cb: function () {
+                    pps.setSrc(selection);
+                },
+                tt: 'Set source node',
+                gid: '*src'
+            },
+            closeBracket: {
+                cb: function () {
+                    pps.setDst(selection);
+                },
+                tt: 'Set destination node',
+                gid: '*dst'
+            },
+            1: {
+                cb: function () {
+                    pps.setMode("shortest");
+                },
+                tt: 'Select constraints for LSP',
+                gid: '*jp'
+            },
+            0: {
+                cb: function () {
+                    pps.clear();
+                },
+                tt: 'Clear source and destination',
+                gid: 'xMark'
+            },
+
+            _keyOrder: [
+                'openBracket', 'closeBracket', '1', '0'
+            ]
+        },
+        hooks: {
+            // hook for handling escape key
+            // Must return true to consume ESC, false otherwise.
+           escape: function () {
+                selectionCallback();
+                pps.setSrc();
+                pps.setDst();
+                return true;
+            },
+
+            // hooks for when the selection changes...
+            empty: function () {
+                selectionCallback();
+            },
+            single: function (data) {
+                selectionCallback(data);
+            }
+        }
+    };
+
+    function selectionCallback(d) {
+        $log.debug('Selection callback', d);
+        selection = d;
+    }
+
+    // invoke code to register with the overlay service
+    angular.module('ovPcewebTopov')
+        .run(['$log', 'TopoOverlayService', 'PcewebTopovDemoService',
+
+        function (_$log_, _tov_, _pps_) {
+            $log = _$log_;
+            tov = _tov_;
+            pps = _pps_;
+            tov.register(overlay);
+        }]);
+
+}());
diff --git a/apps/pce/pceweb/src/main/resources/pcewebTopov/css.html b/apps/pce/pceweb/src/main/resources/pcewebTopov/css.html
new file mode 100644
index 0000000..ea1b11d
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/pcewebTopov/css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="app/view/pcewebTopov/pcewebTopov.css">
\ No newline at end of file
diff --git a/apps/pce/pceweb/src/main/resources/pcewebTopov/js.html b/apps/pce/pceweb/src/main/resources/pcewebTopov/js.html
new file mode 100644
index 0000000..300dd7e
--- /dev/null
+++ b/apps/pce/pceweb/src/main/resources/pcewebTopov/js.html
@@ -0,0 +1,2 @@
+<script src="app/view/pcewebTopov/pcewebTopovDemo.js"></script>
+<script src="app/view/pcewebTopov/pcewebTopovOverlay.js"></script>