diff --git a/views/ngXosViews/mcord-slicing/src/sass/main.scss b/views/ngXosViews/mcord-slicing/src/sass/main.scss
new file mode 100644
index 0000000..7224300
--- /dev/null
+++ b/views/ngXosViews/mcord-slicing/src/sass/main.scss
@@ -0,0 +1,88 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
+#xosMcord-slicing,
+#xosMcord-slicing > [ui-view],
+slicing-topo {
+  width: 100%;
+  height: 100%;
+}
+
+slicing-topo {
+  display: block;
+}
+
+#xosMcord-slicing {
+  .node {
+    stroke: $brand-primary;
+    fill: white;
+  }
+
+  .node,
+  .node + text {
+    cursor: pointer;
+  }
+
+  text {
+    pointer-events: none;
+    -webkit-user-select: none;  /* Chrome all / Safari all */
+    -moz-user-select: none;     /* Firefox all */
+    -ms-user-select: none;      /* IE 10+ */
+    user-select: none;
+  }
+
+  .node.control {
+    stroke-dasharray: 5;
+    stroke: $brand-danger;
+  }
+
+  .node.button {
+    //stroke-dasharray: 5;
+    stroke: $brand-info;
+    fill: lighten($brand-info, 30)
+  }
+
+  .node.selected{
+    stroke-width: 5px;
+    stroke-dasharray: 5;
+  }
+
+  .link {
+    stroke: darken($brand-primary, 10);
+    stroke-width: 2px;
+    cursor: pointer;
+  }
+
+  .link.control {
+    stroke-dasharray: 5;
+    stroke: $brand-danger;
+  }
+
+  .link.selected {
+    stroke-width: 5px;
+    stroke-dasharray: 5;
+  }
+
+  // drag line
+  .dragline {
+    stroke-dasharray: 5;
+    stroke: darken($brand-primary, 10);
+    stroke-width: 2px;
+  }
+
+  .dragline.hidden {
+    stroke-width: 0;
+  }
+
+  // form styling
+  div.element-form {
+    position: absolute;
+    border: 1px solid $brand-info;
+    padding: 10px;
+    background: #fff;
+  }
+
+  .form-line {
+    stroke: darken($brand-info, 10);
+    stroke-width: 1px;
+  }
+}
\ No newline at end of file