diff --git a/views/ngXosViews/diagnostic/src/css/dev.css b/views/ngXosViews/diagnostic/src/css/dev.css
new file mode 100644
index 0000000..7ff2305
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/css/dev.css
@@ -0,0 +1,15 @@
+
+html, body {
+  margin: 0;
+  padding: 0;
+  max-height: 100%;
+  height: 100%;
+}
+
+#xosServiceTopology{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
new file mode 100644
index 0000000..54beba3
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -0,0 +1,155 @@
+/* CONTAINER */
+diagnostic .half-height {
+    position: relative;
+    height: 50%;
+}
+
+service-topology {
+    height: 100%;
+    width: 100%;
+    display: block;
+}
+
+/* LEGEND */
+
+.legend {
+    fill: #fff;
+    stroke: #ccc;
+    stroke-width: 1px;
+    position: relative;
+}
+
+.legend text {
+    stroke: #000;
+}
+
+.node {
+    cursor: pointer;
+}
+
+.node circle,
+.node rect{
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 1px;
+}
+
+.node.subscriber circle,
+.node.internet circle {
+    stroke: #05ffcb;
+}
+
+.node.slice rect {
+    stroke: #b01dff;
+}
+
+.node.instance rect {
+    stroke: #ccc;
+}
+
+.node.instance rect.active {
+    stroke: #ff8b00;
+}
+
+.node rect.slice-detail{
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 3px;
+}
+
+.node text {
+    font: 12px sans-serif;
+}
+
+.link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 2px;
+}
+
+.link.slice {
+    stroke: rgba(157, 4, 183, 0.29);
+}
+.link.instance{
+    stroke: #ccc;
+}
+
+.link.instance.active{
+    stroke: rgba(255, 138, 0, 0.65);
+}
+
+.service-details{
+    width: 200px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+/* when showing the thing */
+
+.animate.ng-hide-remove {
+    animation:0.5s bounceInRight ease;
+}
+
+/* when hiding the picture */
+.animate.ng-hide-add {
+    animation:0.5s bounceOutRight ease;
+}
+
+/* ANIMATIONS */
+
+@keyframes bounceInRight {
+    from, 60%, 75%, 90%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+
+@keyframes bounceInLeft {
+    from, 60%, 75%, 90%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
\ No newline at end of file