diff --git a/src/app/service-graph/components/coarse/coarse.component.ts b/src/app/service-graph/components/coarse/coarse.component.ts
index c595cf1..566698c 100644
--- a/src/app/service-graph/components/coarse/coarse.component.ts
+++ b/src/app/service-graph/components/coarse/coarse.component.ts
@@ -4,37 +4,72 @@
 import {IXosServiceGraphStore} from '../../services/graph.store';
 import {IXosServiceGraph, IXosServiceGraphNode, IXosServiceGraphLink} from '../../interfaces';
 import {XosServiceGraphConfig as config} from '../../graph.config';
+import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper';
+import {Subscription} from 'rxjs';
 
 class XosCoarseTenancyGraphCtrl {
 
-  static $inject = ['$log', 'XosServiceGraphStore'];
+  static $inject = [
+    '$log',
+    'XosServiceGraphStore',
+    'XosDebouncer'
+  ];
 
   public graph: IXosServiceGraph;
 
+  private CoarseGraphSubscription: Subscription;
   private svg;
   private forceLayout;
   private linkGroup;
   private nodeGroup;
 
+  // debounce functions
+  private renderGraph;
+
   constructor (
     private $log: ng.ILogService,
-    private XosServiceGraphStore: IXosServiceGraphStore
+    private XosServiceGraphStore: IXosServiceGraphStore,
+    private XosDebouncer: IXosDebouncer
   ) {
 
-    this.XosServiceGraphStore.getCoarse()
-      .subscribe((res: IXosServiceGraph) => {
-        // id there are no data, do nothing
-        if (!res.nodes || res.nodes.length === 0 || !res.links || res.links.length === 0) {
-          return;
-        }
-        this.graph = res;
-        this.setupForceLayout(res);
-        this.renderNodes(res.nodes);
-        this.renderLinks(res.links);
-        this.forceLayout.start();
-      });
+  }
+
+  $onInit() {
+    this.renderGraph = this.XosDebouncer.debounce(this._renderGraph, 500, this);
+
+    this.CoarseGraphSubscription = this.XosServiceGraphStore.getCoarse()
+      .subscribe(
+        (res: IXosServiceGraph) => {
+          // id there are no data, do nothing
+          if (!res.nodes || res.nodes.length === 0 || !res.links || res.links.length === 0) {
+            return;
+          }
+          this.$log.debug(`[XosCoarseTenancyGraph] Coarse Event and render`, res);
+          this.graph = res;
+          this.renderGraph();
+        },
+        err => {
+          this.$log.error(`[XosCoarseTenancyGraph] Coarse Event error`, err);
+        });
 
     this.handleSvg();
+    this.setupForceLayout();
+
+    $(window).on('resize', () => {
+      this.setupForceLayout();
+      this.renderGraph();
+    });
+  }
+
+  $onDestroy() {
+    this.CoarseGraphSubscription.unsubscribe();
+    this.XosServiceGraphStore.dispose();
+  }
+
+  private _renderGraph() {
+    this.addNodeLinksToForceLayout(this.graph);
+    this.renderNodes(this.graph.nodes);
+    this.renderLinks(this.graph.links);
   }
 
   private getSvgDimensions(): {width: number, heigth: number} {
@@ -74,7 +109,7 @@
       });
   }
 
-  private setupForceLayout(data: IXosServiceGraph) {
+  private setupForceLayout() {
 
     const tick = () => {
       this.nodeGroup.selectAll('g.node')
@@ -84,23 +119,28 @@
 
       this.linkGroup.selectAll('line')
         .attr({
-          x1: l => l.source.x,
-          y1: l => l.source.y,
-          x2: l => l.target.x,
-          y2: l => l.target.y,
+          x1: l => l.source.x || 0,
+          y1: l => l.source.y || 0,
+          x2: l => l.target.x || 0,
+          y2: l => l.target.y || 0,
         });
     };
     const svgDim = this.getSvgDimensions();
     this.forceLayout = d3.layout.force()
       .size([svgDim.width, svgDim.heigth])
-      .nodes(data.nodes)
-      .links(data.links)
       .linkDistance(config.force.linkDistance)
       .charge(config.force.charge)
       .gravity(config.force.gravity)
       .on('tick', tick);
   }
 
+  private addNodeLinksToForceLayout(data: IXosServiceGraph) {
+    this.forceLayout
+      .nodes(data.nodes)
+      .links(data.links)
+      .start();
+  }
+
   private getSiblingTextBBox(contex: any /* D3 this */) {
     return d3.select(contex.parentNode).select('text').node().getBBox();
   }
@@ -108,17 +148,23 @@
   private renderNodes(nodes: IXosServiceGraphNode[]) {
     const self = this;
     const node = this.nodeGroup
-      .selectAll('rect')
-      .data(nodes);
+      .selectAll('g.node')
+      .data(nodes, n => n.id);
 
+    const svgDim = this.getSvgDimensions();
     const entering = node.enter()
       .append('g')
       .attr({
         class: 'node',
+        transform: `translate(${svgDim.width / 2}, ${svgDim.heigth / 2})`
       })
       .call(this.forceLayout.drag)
-      .on('mousedown', () => { d3.event.stopPropagation(); })
-      .on('mouseup', (d) => { d.fixed = true; });
+      .on('mousedown', () => {
+        d3.event.stopPropagation();
+      })
+      .on('mouseup', (d) => {
+        d.fixed = true;
+      });
 
     entering.append('rect')
       .attr({
@@ -131,6 +177,7 @@
         'text-anchor': 'middle'
       })
       .text(n => n.label);
+      // .text(n => `${n.id} - ${n.label}`);
 
     const existing = node.selectAll('rect');
 
@@ -150,17 +197,21 @@
 
   private renderLinks(links: IXosServiceGraphLink[]) {
     const link = this.linkGroup
-      .selectAll('rect')
-      .data(links);
+      .selectAll('line')
+      .data(links, l => l.id);
 
-    const entering = link.enter()
-      .append('g')
-      .attr({
-        class: 'link',
-      });
+    const entering = link.enter();
+      // NOTE do we need to have groups?
+      // .append('g')
+      // .attr({
+      //   class: 'link',
+      // });
 
     entering.append('line')
-      .attr('marker-start', 'url(#arrow)');
+      .attr({
+        class: 'link',
+        'marker-start': 'url(#arrow)'
+      });
   }
 }