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