diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 7d3db3d..567318f 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -6,10 +6,14 @@
 }
 
 line {
-  stroke: red;
+  stroke: blue;
   stroke-width: 1;
 }
 
+line.big{
+  stroke-width: 2;
+}
+
 circle,
 rect {
   fill: #fff;
@@ -17,30 +21,42 @@
 }
 
 .fabric {
-  stroke: green;
+  stroke: #000;
+  fill: #1F77B4;
+}
+
+.fabric-container {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 1;
 }
 
 .bbu {
-  stroke: blue;
+  stroke: black;
+  fill: #FF7F0E;
 }
 
 .bbu text {
-  font-size: 9px;
+  font-size: 10px;
+  stroke: #000;
 }
 
 .rru {
-  stroke: blue;
-  fill: blue;
+  stroke: #000;
+  fill: #FFBB78;
 }
 
 .rru-shadow {
-  fill: lightblue;
+  fill: #FFBB78;
+  opacity: .4
 }
 
 .MME, .SGW, .PGW {
-  stroke: purple;
+  fill: purple;
+  stroke: #000;
 }
 
 .MME text, .SGW text, .PGW text {
   font-size: 10px;
+  stroke: #000;
 }
\ No newline at end of file
diff --git a/views/ngXosViews/mcordTopology/src/js/bbu.js b/views/ngXosViews/mcordTopology/src/js/bbu.js
index 07ad474..cdea2c6 100644
--- a/views/ngXosViews/mcordTopology/src/js/bbu.js
+++ b/views/ngXosViews/mcordTopology/src/js/bbu.js
@@ -5,6 +5,28 @@
 
   const duration = 500;
 
+  this.drawFabricBox = (svg, hStep, vStep) => {
+    let fabric = svg.append('g')
+    .attr({
+      transform: `translate(${hStep - 25}, ${vStep - 25})`
+    });
+
+    fabric.append('rect')
+      .attr({
+        width: hStep + 50,
+        height: vStep + 50,
+        class: 'fabric-container'
+      });
+
+    fabric.append('text')
+    .text('Fabric')
+    .attr({
+      'text-anchor': 'middle',
+      x: ((hStep + 50) / 2),
+      y: -10
+    });
+  };
+
   this.drawBbus = (nodes) => {
 
     nodes.append('circle')
@@ -23,8 +45,9 @@
 
     nodes.append('text')
     .attr({
-      'text-anchor': 'middle',
-      y: 4,
+      'text-anchor': 'start',
+      y: 17,
+      x: 17,
       opacity: 0
     })
     .text(d => `BBU ${d.name.substr(d.name.length - 1, 1)}`)
@@ -72,16 +95,16 @@
         class: d => d.type,
         width: 0,
         height: 0,
-        x: -10,
-        y: -10,
+        x: -15,
+        y: -15,
         opacity: 0
       })
       .transition()
       .duration(duration)
       // .delay((d, i) => i * (duration / 2))
       .attr({
-        width: 20,
-        height: 20,
+        width: 30,
+        height: 30,
         opacity: 1
       });
   };
@@ -103,8 +126,9 @@
 
     nodes.append('text')
     .attr({
-      'text-anchor': 'middle',
-      y: 4,
+      'text-anchor': 'start',
+      y: 17,
+      x: 17,
       opacity: 0
     })
     .text(d => d.type)
@@ -115,7 +139,7 @@
     });
 
   };
-  
+
   this.removeElements = (nodes) => {
     nodes
     .transition()
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index 82836a6..613f758 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -48,8 +48,6 @@
 
         nodes = TopologyElements.nodes;
         links = TopologyElements.links;
-        console.log('-----------------------------');
-        console.log(`Fabric Links: ${links.length}`);
 
         XosApi.Instance_List_GET()
         .then((instances) => {
@@ -72,20 +70,22 @@
         .style('height', `${el.clientHeight}px`);
 
 
-      let hStep = el.clientWidth / 3;
-      let vStep = el.clientHeight / 5;
 
       // replace human readable ids with d3 ids
+      // NOTE now ids are not manatined on update...
       const buildLinks = (links, nodes) => {
-        console.log(`links: ${links.length}`);
-        return links.map((l, i) => {
+        return links.map((l) => {
+
+
           let source = lodash.findIndex(nodes, {id: l.source});
           let target = lodash.findIndex(nodes, {id: l.target});
+          // console.log(`link-${source}-${target}`, source, target);
           return {
             source: source,
             target: target,
             value: 1,
-            id: `link-${i++}`
+            id: `link-${source}-${target}`,
+            type: l.source.indexOf('fabric') >= 0 ? 'big':'small'
           };
 
         });
@@ -149,7 +149,6 @@
 
         nodes = nodes.concat(bbuNodes);
 
-        console.log(`bbuLinks: ${bbuLinks.length}`);
 
         links = links.concat(bbuLinks);
       };
@@ -178,19 +177,27 @@
           };
         });
 
-        console.log(`otherLinks: ${otherLinks.length}`);
 
         nodes = nodes.concat(otherNodes);
         links = links.concat(otherLinks);
       }
 
-      // NOTE links get duplicated
+      let hStep, vStep;
+
+      hStep = el.clientWidth / 3;
+      vStep = el.clientHeight / 5;
+
       const draw = (svg, nodes, links) => {
 
+        hStep = el.clientWidth / 3;
+        vStep = el.clientHeight / 5;
+
         links = buildLinks(links, nodes);
 
         nodes = positionFabricNodes(nodes);
 
+        NodeDrawer.drawFabricBox(svg, hStep, vStep);
+
         // start force layout
         force
           .nodes(nodes)
@@ -208,9 +215,10 @@
         
         link.enter().append('line')
           .attr({
-            class: 'link',
+            // class: 'link',
             id: d => d.id,
-            opacity: 0
+            opacity: 0,
+            class: d => `link ${d.type}`
           })
           .transition()
           .duration(1000)