diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index 4bb0b99..6dad523 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -4,7 +4,7 @@
     display: block;
 }
 
-service-canvas select.subscriber-select{
+service-canvas .subscriber-select{
     z-index: 1000;
     position: absolute;
     width: 200px;
@@ -17,6 +17,19 @@
     top: 0;
 }
 
+/* LEGEND */
+
+.legend {
+    fill: #fff;
+    stroke: #ccc;
+    stroke-width: 1px;
+    position: relative;
+}
+
+.legend text {
+    stroke: #000;
+}
+
 .node {
     cursor: pointer;
 }
@@ -29,7 +42,7 @@
 
 .node.subscriber circle,
 .node.internet circle {
-    stroke: #ffdb07;
+    stroke: #05ffcb;
 }
 
 .node.slice circle {
@@ -37,7 +50,7 @@
 }
 
 .node.instance circle {
-    stroke: #ea25ff;
+    stroke: #ff8b00;
 }
 
 .node rect.slice-detail{
@@ -56,10 +69,12 @@
     stroke-width: 2px;
 }
 
-.link.slice,
-.link.instance {
+.link.slice {
     stroke: rgba(157, 4, 183, 0.29);
 }
+.link.instance{
+    stroke: rgba(255, 138, 0, 0.65);
+}
 
 .service-details{
     width: 200px;
diff --git a/gui/ngXosViews/serviceTopology/src/js/d3.js b/gui/ngXosViews/serviceTopology/src/js/d3.js
index f12ce5b..c8649aa 100644
--- a/gui/ngXosViews/serviceTopology/src/js/d3.js
+++ b/gui/ngXosViews/serviceTopology/src/js/d3.js
@@ -7,6 +7,100 @@
     })
   .service('TreeLayout', function($window, lodash, ServiceRelation, serviceTopologyConfig, Slice, Instances){
 
+    const drawLegend = (svg) => {
+      const legendContainer = svg.append('g')
+        .attr({
+          class: 'legend'
+        });
+
+      legendContainer.append('rect')
+      .attr({
+        transform: d => `translate(10, 80)`,
+        width: 100,
+        height: 130
+      });
+
+      // service
+      const service = legendContainer.append('g')
+      .attr({
+        class: 'node service'
+      });
+
+      service.append('circle')
+      .attr({
+        r: serviceTopologyConfig.circle.radius,
+        transform: d => `translate(30, 100)`
+      });
+
+      service.append('text')
+      .attr({
+        transform: d => `translate(45, 100)`,
+        dy: '.35em'
+      })
+      .text('Service')
+        .style('fill-opacity', 1);
+
+      // endpoints
+      const endpoints = legendContainer.append('g')
+        .attr({
+          class: 'node internet'
+        });
+
+      endpoints.append('circle')
+        .attr({
+          r: serviceTopologyConfig.circle.radius,
+          transform: d => `translate(30, 130)`
+        });
+
+      endpoints.append('text')
+        .attr({
+          transform: d => `translate(45, 130)`,
+          dy: '.35em'
+        })
+        .text('Enpoints')
+        .style('fill-opacity', 1);
+
+      // slice
+      const slice = legendContainer.append('g')
+        .attr({
+          class: 'node slice'
+        });
+
+      slice.append('circle')
+        .attr({
+          r: serviceTopologyConfig.circle.radius,
+          transform: d => `translate(30, 160)`
+        });
+
+      slice.append('text')
+        .attr({
+          transform: d => `translate(45, 160)`,
+          dy: '.35em'
+        })
+        .text('Slices')
+        .style('fill-opacity', 1);
+
+      // instance
+      const instance = legendContainer.append('g')
+        .attr({
+          class: 'node instance'
+        });
+
+      instance.append('circle')
+        .attr({
+          r: serviceTopologyConfig.circle.radius,
+          transform: d => `translate(30, 190)`
+        });
+
+      instance.append('text')
+        .attr({
+          transform: d => `translate(45, 190)`,
+          dy: '.35em'
+        })
+        .text('Instances')
+        .style('fill-opacity', 1);
+    };
+
     var _svg, _layout, _source;
 
     var i = 0;
@@ -165,6 +259,7 @@
     };
 
     this.updateTree = updateTree;
+    this.drawLegend = drawLegend;
   });
 
 }());
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 600e301..8fce43d 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -11,7 +11,7 @@
       templateUrl: 'templates/topology_canvas.tpl.html',
       controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation, Slice, Instances, Subscribers, TreeLayout){
 
-        // TODO draw legend
+        // NOTE $window is not the right reference, we should refer to container size
 
         this.instances = [];
         this.slices = [];
@@ -26,7 +26,8 @@
           .append('svg')
           .style('width', `${$window.innerWidth}px`)
           .style('height', `${$window.innerHeight}px`)
-          .append('g')
+
+        const treeContainer = svg.append('g')
           .attr('transform', 'translate(' + serviceTopologyConfig.widthMargin+ ',' + serviceTopologyConfig.heightMargin + ')');
 
         //const resizeCanvas = () => {
@@ -52,9 +53,11 @@
           root.x0 = $window.innerHeight / 2;
           root.y0 = 0;
 
-          TreeLayout.updateTree(svg, treeLayout, root);
+          TreeLayout.updateTree(treeContainer, treeLayout, root);
         };
 
+        TreeLayout.drawLegend(svg);
+
         var _this = this;
 
         Subscribers.query().$promise
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 4c992b1..aef5014 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,30 +1,6 @@
-<select class="form-control subscriber-select" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
-    <option value="">Select a subscriber...</option>
-</select>
-<!--<div class="service-details">-->
-    <!--<div class="service-slices animate" ng-hide="vm.slices.length == 0">-->
-        <!--<div class="panel panel-info">-->
-            <!--<div class="panel-heading">-->
-                <!--Slices for service:-->
-                <!--<h3 class="panel-title">{{vm.selectedService.name}}</h3>-->
-            <!--</div>-->
-            <!--<ul class="list-group">-->
-                <!--<li class="list-group-item" ng-repeat="slice in vm.slices" ng-click="vm.getInstances(slice)" ng-class="{active: slice.id === vm.selectedSlice.id}">-->
-                    <!--{{slice.humanReadableName}}-->
-                <!--</li>-->
-            <!--</ul>-->
-        <!--</div>-->
-    <!--</div>-->
-    <!--<div class="service-instances animate" ng-hide="vm.instances.length == 0">-->
-        <!--<div class="panel panel-warning">-->
-            <!--<div class="panel-heading">-->
-                <!--Instances:-->
-            <!--</div>-->
-            <!--<ul class="list-group">-->
-                <!--<li class="list-group-item" ng-repeat="instance in vm.instances">-->
-                    <!--{{instance.humanReadableName}}-->
-                <!--</li>-->
-            <!--</ul>-->
-        <!--</div>-->
-    <!--</div>-->
-<!--</div>-->
\ No newline at end of file
+<div class="subscriber-select">
+    Select a subscriber:
+    <select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber" ng-change="vm.getServiceChain(vm.selectedSubscriber)">
+        <option value="">Select a subscriber...</option>
+    </select>
+</div>
\ No newline at end of file