diff --git a/src/app/service-graph/components/graph-legend/graph-legend.component.scss b/src/app/service-graph/components/graph-legend/graph-legend.component.scss
new file mode 100644
index 0000000..56c9804
--- /dev/null
+++ b/src/app/service-graph/components/graph-legend/graph-legend.component.scss
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+
+@import './../../../style/vars.scss';
+@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+
+xos-service-graph-legend {
+  svg {
+    height: 95%;
+    width: 100%;
+
+    text {
+      fill: #fff;
+    }
+
+    .service path {
+      fill: $color-accent;
+    }
+
+    .serviceinstance path {
+      fill: $serviceinstances-fg;
+    }
+
+    .instance path {
+      fill: $instances-fg;
+    }
+
+    .network path {
+      fill: $networks-fg;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/service-graph/components/graph-legend/graph-legend.component.ts b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
new file mode 100644
index 0000000..d05b8e7
--- /dev/null
+++ b/src/app/service-graph/components/graph-legend/graph-legend.component.ts
@@ -0,0 +1,131 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+import './graph-legend.component.scss';
+
+import * as d3 from 'd3';
+import {IXosServiceGraphIcons} from '../../services/d3-helpers/graph-icons.service';
+
+interface ILegendElement {
+  label: string;
+  icon: string;
+}
+
+class XosServiceGraphLegendCtrl {
+
+  static $inject = [
+    '$log',
+    '$timeout',
+    'XosServiceGraphIcons'
+  ];
+
+  private svg;
+
+  private duration: number = 500;
+
+  private legendElements: ILegendElement[] = [
+    {
+      label: 'Services',
+      icon: 'service'
+    },
+    {
+      label: 'ServiceInstances',
+      icon: 'serviceinstance'
+    },
+    {
+      label: 'Instances',
+      icon: 'instance'
+    },
+    {
+      label: 'Networks',
+      icon: 'network'
+    }
+  ];
+
+  constructor(
+    private $log: ng.ILogService,
+    private $timeout: ng.ITimeoutService,
+    private XosServiceGraphIcons: IXosServiceGraphIcons
+  ) {
+    this.$log.debug('[XosServiceGraphLegend] Setup');
+    $timeout(() => {
+      // NOTE we need to wait for the component to be rendered before drawing
+      this.setupSvg();
+      this.render();
+    }, 500);
+  }
+
+  private setupSvg() {
+    this.svg = d3.select('xos-service-graph-legend svg');
+  }
+
+  private render() {
+    const step = 50;
+
+    const elements = this.svg.selectAll('g')
+      .data(this.legendElements);
+
+    const entering = elements.enter()
+      .append('g')
+      .attr({
+        class: d => `${d.icon}`,
+        transform: (d: ILegendElement, i: number) => `translate(50, ${step * (i + 1)})`
+      });
+
+    entering
+      .append('path')
+      .attr({
+        d: d => this.XosServiceGraphIcons.get(d.icon).path,
+        transform: d => this.XosServiceGraphIcons.get(d.icon).transform,
+        class: 'icon',
+        opacity: 0
+      })
+      .transition()
+      .duration(this.duration)
+      .delay((d, i) => i * (this.duration / 2))
+      .attr({
+        opacity: 1
+      });
+
+    entering
+      .append('text')
+      .text(d => d.label.toUpperCase())
+      .attr({
+        'text-anchor': 'left',
+        'alignment-baseline': 'bottom',
+        'font-size': 15,
+        x: 50,
+        y: 20,
+        opacity: 0
+      })
+      .transition()
+      .duration(this.duration)
+      .delay((d, i) => i * (this.duration / 2))
+      .attr({
+        opacity: 1
+      });
+  }
+}
+
+export const XosServiceGraphLegend: angular.IComponentOptions = {
+  template: `
+  <h1>Legend</h1>
+  <svg></svg>
+  `,
+  controllerAs: 'vm',
+  controller: XosServiceGraphLegendCtrl,
+};
diff --git a/src/app/service-graph/index.ts b/src/app/service-graph/index.ts
index 770862d..0bed24b 100644
--- a/src/app/service-graph/index.ts
+++ b/src/app/service-graph/index.ts
@@ -22,6 +22,7 @@
 import {XosNodePositioner} from './services/node-positioner.service';
 import {XosGraphConfig} from './services/graph.config';
 import {XosNodeRenderer} from './services/renderer/node.renderer';
+import {XosServiceGraphLegend} from './components/graph-legend/graph-legend.component';
 
 export const xosServiceGraph = 'xosServiceGraph';
 
@@ -35,6 +36,7 @@
   .service('XosGraphConfig', XosGraphConfig)
   .service('XosNodeRenderer', XosNodeRenderer)
   .component('xosServiceGraph', XosServiceGraph)
+  .component('xosServiceGraphLegend', XosServiceGraphLegend)
   .run((
     $log: ng.ILogService,
     XosServiceGraphExtender: IXosServiceGraphExtender
diff --git a/src/app/service-graph/services/graph.config.ts b/src/app/service-graph/services/graph.config.ts
index e6ddfbd..cc316a2 100644
--- a/src/app/service-graph/services/graph.config.ts
+++ b/src/app/service-graph/services/graph.config.ts
@@ -17,6 +17,7 @@
 import * as $ from 'jquery';
 import {IXosKeyboardShortcutService} from '../../core/services/keyboard-shortcut';
 import {IXosGraphStore} from './graph.store';
+import {IXosSidePanelService} from '../../core/side-panel/side-panel.service';
 
 export interface IXosGraphConfig {
   setupKeyboardShortcuts(): void;
@@ -30,6 +31,7 @@
     '$cookies',
     '$rootScope',
     '$timeout',
+    'XosSidePanel',
     'XosKeyboardShortcut',
     'XosGraphStore'
   ];
@@ -66,6 +68,7 @@
     private $cookies: ng.cookies.ICookiesService,
     private $rootScope: ng.IRootScopeService,
     private $timeout: ng.ITimeoutService,
+    private XosSidePanel: IXosSidePanelService,
     private XosKeyboardShortcut: IXosKeyboardShortcutService,
     private XosGraphStore: IXosGraphStore
   ) {
@@ -78,6 +81,16 @@
 
     // Setup keyboard shortcuts
     this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'h',
+      modifiers: ['shift'],
+      cb: () => {
+        this.XosSidePanel.toggleComponent('xosServiceGraphLegend');
+      },
+      label: 'h',
+      description: 'Toggle Graph Legend'
+    });
+
+    this.XosKeyboardShortcut.registerKeyBinding({
       key: 'f',
       modifiers: ['shift'],
       cb: () => {