diff --git a/src/app/service-graph/components/graph/graph.component.html b/src/app/service-graph/components/graph/graph.component.html
index 6510a9f..ad3d0da 100644
--- a/src/app/service-graph/components/graph/graph.component.html
+++ b/src/app/service-graph/components/graph/graph.component.html
@@ -22,4 +22,26 @@
   </div>
   <a ng-click="vm.closeFullscreen()" class="close-btn"><i class="fa fa-times"></i></a>
   <svg></svg>
+  <div class="row">
+    <div class="col-md-3">
+      <a ng-click="vm.toggleModel('services')" ng-class="{active: vm.currentState >= 0}" class="btn btn-block btn-accent">
+        <span>Services</span>
+      </a>
+    </div>
+    <div class="col-md-3">
+      <a ng-click="vm.toggleModel('serviceinstances')" ng-class="{active: vm.currentState >= 1}" class="btn btn-block btn-accent">
+        <span>Service Instances</span>
+      </a>
+    </div>
+    <div class="col-md-3">
+      <a ng-click="vm.toggleModel('instances')" ng-class="{active: vm.currentState >= 2}" class="btn btn-block btn-accent">
+        <span>Instances</span>
+      </a>
+    </div>
+    <div class="col-md-3">
+      <a ng-click="vm.toggleModel('networks')" ng-class="{active: vm.currentState >= 3}" class="btn btn-block btn-accent">
+        <span>Networks</span>
+      </a>
+    </div>
+  </div>
 </div>
diff --git a/src/app/service-graph/components/graph/graph.component.ts b/src/app/service-graph/components/graph/graph.component.ts
index ed36654..b0cabb9 100644
--- a/src/app/service-graph/components/graph/graph.component.ts
+++ b/src/app/service-graph/components/graph/graph.component.ts
@@ -28,6 +28,7 @@
 import {IXosNodeRenderer} from '../../services/renderer/node.renderer';
 import {IXosSgLink, IXosSgNode} from '../../interfaces';
 import {IXosGraphConfig} from '../../services/graph.config';
+import {GraphStates, IXosGraphStateMachine} from '../../services/graph-state-machine';
 
 class XosServiceGraphCtrl {
   static $inject = [
@@ -38,14 +39,18 @@
     'XosServiceGraphIcons',
     'XosNodePositioner',
     'XosNodeRenderer',
-    'XosGraphConfig'
+    'XosGraphConfig',
+    'XosGraphStateMachine'
   ];
 
+  // graph status
+  public currentState: number;
   public loader: boolean = true;
 
   private GraphSubscription: Subscription;
   private graph: any; // this is the Graph instance
 
+
   // graph element
   private svg;
   private linkGroup;
@@ -60,10 +65,13 @@
     private XosServiceGraphIcons: IXosServiceGraphIcons,
     private XosNodePositioner: IXosNodePositioner,
     private XosNodeRenderer: IXosNodeRenderer,
-    private XosGraphConfig: IXosGraphConfig
+    private XosGraphConfig: IXosGraphConfig,
+    public XosGraphStateMachine: IXosGraphStateMachine
   ) {
     this.$log.info('[XosServiceGraph] Component setup');
 
+    this.currentState = this.XosGraphStateMachine.getCurrentState();
+
     this.XosGraphConfig.setupKeyboardShortcuts();
 
     this.setupSvg();
@@ -74,6 +82,7 @@
         graph => {
           this.graph = graph;
           if (this.graph.nodes().length > 0) {
+            this.$log.info('[XosServiceGraph] Rendering graph: ', this.graph.nodes(), this.graph.edges());
             this.renderGraph(this.graph);
           }
         },
@@ -87,6 +96,13 @@
       this.renderGraph(this.graph);
     });
 
+    this.$scope.$on('xos.sg.stateChange', (event, state: number) => {
+      this.$log.info(`[XosServiceGraph] Received event: xos.sg.stateChange. New state is ${state}`);
+      this.$scope.$applyAsync(() => {
+        this.currentState = state;
+      });
+    });
+
     $(window).resize(() => {
       this.renderGraph(this.graph);
     });
@@ -100,17 +116,34 @@
     this.XosGraphConfig.toggleFullscreen();
   }
 
+  public toggleModel(modelName: string): void {
+    switch (modelName) {
+      case 'services':
+        this.XosGraphStateMachine.go(GraphStates.Services);
+        break;
+      case 'serviceinstances':
+        this.XosGraphStateMachine.go(GraphStates.ServiceInstances);
+        break;
+      case 'instances':
+        this.XosGraphStateMachine.go(GraphStates.Instances);
+        break;
+      case 'networks':
+        this.XosGraphStateMachine.go(GraphStates.Networks);
+        break;
+    }
+  }
+
   private setupSvg() {
     this.svg = d3.select('xos-service-graph svg');
 
     this.linkGroup = this.svg.append('g')
       .attr({
-        class: 'link-group'
+        'class': 'link-group'
       });
 
     this.nodeGroup = this.svg.append('g')
       .attr({
-        class: 'node-group'
+        'class': 'node-group'
       });
   }
 
@@ -147,6 +180,7 @@
   }
 
   private renderGraph(graph: any) {
+
     let nodes: IXosSgNode[] = this.XosGraphStore.nodesFromGraph(graph);
     let links = this.XosGraphStore.linksFromGraph(graph);
     const svgDim = this.getSvgDimensions();
@@ -190,7 +224,7 @@
     entering.append('line')
       .attr({
         id: n => n.id,
-        class: n => n.type
+        'class': n => n.type
       });
 
     link.exit().remove();