[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

55 files changed, 2950 insertions, 860 deletions

diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 884308885a..bd85f547c9 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -2,7 +2,6 @@
 @import "components/buttons";
 @import "components/forms";
 @import "components/validationForm";
-@import "components/slidePanel";
 @import "components/dualListBox";
 @import "components/listEditorView";
 @import "components/toggleInput";
@@ -16,6 +15,11 @@
 @import "components/dropzone";
 @import "components/submitErrorResponse";
 @import "components/expandableInput";
+@import "components/grid";
+@import "components/icon";
+@import "components/svgIcon";
+@import "components/activityLog";
+@import "components/selectActionTable";
 
 %noselect {
   -webkit-touch-callout: none;
@@ -53,7 +57,7 @@
   }
   .search-icon {
     position: relative;
-    left: -20px;
+    left: -23px;
     align-self: center;
     width: 0;
     color: $dark-gray;
@@ -71,3 +75,29 @@
   margin-left: 50%;
   color: $yellow;
 }
+
+.chevron::before {
+  border-style: solid;
+  border-width: 0.15em 0.15em 0 0;
+  content: '';
+  display: inline-block;
+  height: 0.8em;
+  left: 0.15em;
+  position: relative;
+  top: 0.15em;
+  vertical-align: top;
+  width: 0.8em;
+}
+.chevron.right:before {
+  left: 0;
+  transform: rotate(45deg);
+}
+.chevron.down:before {
+  transform: rotate(135deg);
+}
+.chevron.left:before {
+  transform: rotate(-135deg);
+}
+.chevron.top:before {
+  transform: rotate(-45deg);
+}
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index fd35bf2e0b..578895dfe0 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -1,3 +1,4 @@
+@import "modules/licenseModelOverview";
 @import "modules/licenseAgreement";
 @import "modules/featureGroup";
 @import "modules/entitlementPools";
@@ -7,16 +8,15 @@
 @import "modules/_softwareProductAttachmentPage";
 @import "modules/_softwareProductProcessesPage";
 @import "modules/_vspComponentQuestionnaire";
-@import "modules/_softwareProductNetworksPage";
 @import "modules/_softwareProductComponentNetwork";
 @import "modules/_softwareProductComponentGeneral";
 @import "modules/_softwareproductComponentLoadBalancing";
+@import "modules/_softwareProductComponentProcessesPage";
+@import "modules/softwareProductComponentCompute";
 @import "modules/vspComponentMonitoring";
 @import "modules/licenseModel";
 @import "modules/onboardingCatalog";
 @import "modules/workflows";
 @import "modules/uploadScreen";
-
-
-
-
+@import "modules/vspHeatSetup";
+@import "modules/softwareProductDependencies";
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
index 545b23ee7f..8085274cac 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
@@ -88,10 +88,11 @@ input[type=radio]:checked:before {
 
 input[type=checkbox]:checked:before {
   font-family: $icon-font-family;
-  content: "\f00c";
+  content: "\2714";
   font-size: $icon-font-size;
   color: $blue;
   text-align: center;
+	line-height: 13px;
 }
 
 .radio,
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
index 6bc6e46b2f..6a825b811e 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
@@ -7,7 +7,12 @@
   }
 
   .modal-body{
-    padding: 15px;
+    padding: 0;
+    .validation-form-content {
+      padding: 50px;
+        overflow-y: auto;
+        max-height: 490px;
+    }
   }
 
   .modal-footer {
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
index 59f0e3db7c..1af39d5b39 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
@@ -125,3 +125,8 @@ $nav-tabs-active-link-hover-border-color: transparent;
 //
 //##
 $popover-bg: $background-gray;
+
+//== Tooltips
+//
+//##
+$tooltip-bg: $dark-gray;
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index aa3ffdeb2b..e901db000e 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -44,6 +44,10 @@ input {
   padding: 7px 10px;
 }
 
+.disabled {
+  opacity: 0.7 !important;
+}
+
 fieldset {
   border: none;
 }
@@ -64,3 +68,7 @@ fieldset {
 .box-hover {
   border: 1px solid $light-blue;
 }
+
+
+
+
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index 6d63a79f55..dc2a33ccc7 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -15,8 +15,15 @@
 .content-area {
   padding: 30px 60px 70px 60px;
   overflow-y: auto;
+	overflow-x: hidden;
   height: 100%;
   &.no-padding-content-area {
     padding: 0;
   }
 }
+
+.onborading-modal {
+  .modal-title {
+    text-transform: uppercase;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 46edfb03de..1543f0adcd 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,28 +1,20 @@
 /* Fonts */
-@font-face {
-  font-family: Omnes-Light;
-  src: url('../fonts/omnes-att-light.otf');
-}
 
-@font-face {
-  font-family: Omnes-Regular;
-  src: url('../fonts/omnes-att-regular.otf');
+@mixin base-font-regular() {
+  font-family: omnes-regular, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Medium;
-  src: url('../fonts/omnes-att-medium.otf');
+@mixin base-font-light() {
+  font-family: omnes-light, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Bold;
-  src: url('../fonts/omnes-att-bold.otf');
+@mixin base-font-medium() {
+  font-family: omnes-medium, Arial, sans-serif;
 }
 
-$base-font-regular: omnes-regular, "Omnes-Regular";
-$base-font-light: omnes-light, "Omnes-Light";
-$base-font-medium: omnes-medium, "Omnes-Medium";
-$base-font-bold: omnes-bold, "Omnes-Bold";
+@mixin base-font-bold() {
+  font-family: omnes-bold, Arial, sans-serif;
+}
 
 $heading-font-1: 36px;
 $heading-font-2: 24px;
@@ -34,82 +26,106 @@ $body-font-1: 14px;
 $body-font-2: 13px;
 $body-font-3: 12px;
 
-$icon-font-size: 10px;
-$icon-font-family: FontAwesome;
+$icon-font-size: 11px;
+$icon-font-family: Arial;
 $radio-font-family: Arial;
 
 .heading-1 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-1;
 }
 
 .heading-2 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-2;
 }
 
 .heading-3-light {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-4 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-4;
 }
 
 .heading-4-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-4;
 }
 
 .heading-5 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-5;
 }
 
 .heading-5-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-5;
 }
 
 .body-1 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-1;
 }
 
 .body-1-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.body-1-light {
+  @include base-font-light;
   font-size: $body-font-1;
 }
 
 .body-2 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-2;
 }
 
 .body-2-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-2;
 }
 
 .body-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-3;
 }
 
 .body-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-3;
 }
 
+.body-3-light {
+  @include base-font-light;
+  font-size: $body-font-3;
+}
+
+.circle-icon-text {
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.warning-text {
+  color: $orange;
+}
+.error-text {
+  color: $red;
+}
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 70f3416e4b..dce623e15d 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -15,27 +15,27 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin prefix($property, $value, $prefixeslist: 'all') {
   @if $prefixeslist == all {
-	-webkit-#{$property}: $value;
-	-moz-#{$property}: $value;
-	-ms-#{$property}: $value;
-	-o-#{$property}: $value;
-	#{$property}: $value;
+    -webkit-#{$property}: $value;
+    -moz-#{$property}: $value;
+    -ms-#{$property}: $value;
+    -o-#{$property}: $value;
+    #{$property}: $value;
   } @else {
-	@each $prefix in $prefixeslist {
-	  @if $prefix == webkit {
-		-webkit-#{$property}: $value;
-	  } @else if $prefix == moz {
-		-moz-#{$property}: $value;
-	  } @else if $prefix == ms {
-		-ms-#{$property}: $value;
-	  } @else if $prefix == o {
-		-o-#{$property}: $value;
-	  } @else if $prefix == spec {
-		#{$property}: $value;
-	  } @else {
-		@warn "No such prefix: #{$prefix}";
-	  }
-	}
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        -webkit-#{$property}: $value;
+      } @else if $prefix == moz {
+        -moz-#{$property}: $value;
+      } @else if $prefix == ms {
+        -ms-#{$property}: $value;
+      } @else if $prefix == o {
+        -o-#{$property}: $value;
+      } @else if $prefix == spec {
+        #{$property}: $value;
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
   }
 }
 
@@ -43,25 +43,25 @@ $browserPrefixes: webkit moz o ms;
 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
 
   @if $prefixeslist == all {
-	#{property} : -webkit-#{$valuesuffix}($from, $to);
-	#{property} : -moz-#{$valuesuffix}($from, $to);
-	#{property} : -o-#{$valuesuffix}($from, $to);
-	#{property} : -ms-#{$valuesuffix}($from, $to);
+    #{property} : -webkit-#{$valuesuffix}($from, $to);
+    #{property} : -moz-#{$valuesuffix}($from, $to);
+    #{property} : -o-#{$valuesuffix}($from, $to);
+    #{property} : -ms-#{$valuesuffix}($from, $to);
 
   } @else {
-	@each $prefix in $prefixeslist {
-	  @if $prefix == webkit {
-		#{property} : -webkit-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == moz {
-		#{property} : -moz-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == ms {
-		#{property} : -ms-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == o {
-		#{property} : -o-#{$valuesuffix}($from, $to);
-	  } @else {
-		@warn "No such prefix: #{$prefix}";
-	  }
-	}
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        #{property} : -webkit-#{$valuesuffix}($from, $to);
+      } @else if $prefix == moz {
+        #{property} : -moz-#{$valuesuffix}($from, $to);
+      } @else if $prefix == ms {
+        #{property} : -ms-#{$valuesuffix}($from, $to);
+      } @else if $prefix == o {
+        #{property} : -o-#{$valuesuffix}($from, $to);
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
   }
 }
 
@@ -81,11 +81,11 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin border-radius($value, $positions: all) {
   @if ($positions == all) {
-	@include prefix(border-radius, $value, $border-radius-prefix);
+    @include prefix(border-radius, $value, $border-radius-prefix);
   } @else {
-	@each $position in $positions {
-	  @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
-	}
+    @each $position in $positions {
+      @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+    }
   }
 
 }
@@ -102,12 +102,39 @@ $browserPrefixes: webkit moz o ms;
 }
 
 /* Ellipsis */
-@mixin ellipsis() {
+@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
+  width: $width;
   white-space: nowrap;
-  display: inline-block;
+  display: $display;
+  max-width: $max-width;
+}
+
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
+  overflow: hidden;
+  position: relative;
+  line-height: $lineHeight;
+  max-height: $lineHeight * $lineCount;
+  text-align: justify;
+  word-break: break-all;
+  // margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    content: '...';
+    position: absolute;
+    right: 3px;
+    bottom: 0;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: $bgColor;
+  }
 }
 
 @mixin gradient($from, $to) {
@@ -124,52 +151,13 @@ $browserPrefixes: webkit moz o ms;
   margin-top: -$height/2;
 }
 
-@mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
-
-  $ellipsiswidth: 3em !default;
-
-  .ellipsis {
-	overflow: hidden;
-	height: $height;
-	line-height: $lineheight;
-  }
-
-  .ellipsis:before {
-	content: "";
-	float: left;
-	width: 5px;
-	height: $height;
-  }
-
-  .ellipsis > *:first-child {
-	float: right;
-	width: 100%;
-	margin-left: -5px;
-  }
-
-  .ellipsis:after {
-	content: "\02026";
-
-	float: right;
-	position: relative;
-	top: -25px;
-	left: 100%;
-	width: $ellipsiswidth;
-	margin-left: -$ellipsiswidth;
-	padding-right: 5px;
-
-	text-align: right;
-  }
-
-}
-
 @mixin text-vertical-align($align: middle) {
   display: table;
   width: 100%;
 
   & > * {
-	vertical-align: $align;
-	display: table-cell;
+    vertical-align: $align;
+    display: table-cell;
   }
 }
 
@@ -181,7 +169,7 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin center-content($width) {
   & > * {
-	@include center-element($width);
+    @include center-element($width);
   }
 }
 
@@ -202,9 +190,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-translate($x, $y) {
-	transform: translate($x, $y); /* IE10 and Mozilla */
-	-ms-transform: translate($x, $y); /* IE 9 */
-	-webkit-transform: translate($x, $y); /* Safari and Chrome */
+  transform: translate($x, $y); /* IE10 and Mozilla */
+  -ms-transform: translate($x, $y); /* IE 9 */
+  -webkit-transform: translate($x, $y); /* Safari and Chrome */
 }
 
 /* transform-scale */
@@ -222,7 +210,22 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin scrollable() {
   ::-webkit-scrollbar {
-	width: 8px;
+    width: 8px;
+  }
+}
+
+@mixin create-circle($size, $bgcolor, $content) {
+  border-radius: 50%;
+  width: $size;
+  height: $size;
+  background: $bgcolor;
+  border: 3px solid $bgcolor;
+  &:after {
+    content: $content;
+    position: relative;
+    left: 9px;
+    top: 9px;
+    @extend .circle-icon-text;
   }
 }
 
@@ -297,3 +300,9 @@ $browserPrefixes: webkit moz o ms;
     }
   }
 }
+
+
+/**/
+@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
+  @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+}
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 92c20cdfdf..2162b0b1b0 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -19,6 +19,7 @@ $white: #ffffff;
 
 // Secondary Colors
 $red: #cf2a2a;
+$crimson: #a94442;
 
 $background-alice-blue: #e5f5fb;
 $background-gray: #f2f2f2;
@@ -29,10 +30,15 @@ $functional-yellow: #ffb81c;
 $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
+$highlight-gray: #eceff3;
 
 $content-background-color: $white;
 
 $scroll-bar-color: $text-black;//$light-gray;
+$vc-status-text-color: #42b72a;
+
+// sizes
+$circle-icon-size: 40px;
 
 //responsive @media params
 $tablet-max-width: 1024px;
@@ -41,7 +47,59 @@ $desktop-min-width: 1824px;
 
 /* Textures */
 $images-folder-name: "../images";
-$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
-$interface-icon: $images-folder-name + "/interface.svg";
-$sdc-logo: $images-folder-name + "/logo.svg";
-$warning-icon: $images-folder-name + "/warning.svg";
+
+/* Icons */
+$icons-folder: "../images/icons";
+$artifacts-icon: $images-folder-name + "/artifacts_icon.png";
+$check-icon: $images-folder-name + "/v_icon.png";
+$base-module-icon: $images-folder-name + "/base_icon.png";
+$module-icon: $images-folder-name + "/module_icon.png";
+$pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
+$vc-check-in-icon: $icons-folder + "/checked_in.png";
+$vc-checkout-icon: $icons-folder + "/checked_out.png";
+$vc-revert-icon: $icons-folder + "/reverticon.png";
+$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png";
+$vc-save-icon: $icons-folder + "/saveicon.png";
+$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png";
+$vc-submit-icon: $icons-folder + "/submiticonactive.png";
+$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
+$trash-icon: $images-folder-name + "/trash_icon.png";
+$download-icon: $images-folder-name + "/download_icon.png";
+$upload-icon: $images-folder-name + "/upload_icon.png";
+
+
+/* catalog icons */
+$back-icon: $icons-folder + "/back_icon.png";
+/* validation icons */
+$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
+$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
+$chevron_down: $icons-folder + "/down_chevron.png";
+$error-icon-lg: $icons-folder + "/error_icon_big.png";
+$error-icon-sm: $icons-folder + "/error_icon_small.png";
+$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png";
+$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png";
+$network-selected-icon: $icons-folder + "/network_blue_icon.png";
+$network-icon: $icons-folder + "/network_icon.png";
+$others-selected-icon: $icons-folder + "/others_blue_icon.png";
+$others-icon: $icons-folder + "/others_icon.png";
+$volume-selected-icon: $icons-folder + "/volume_blue_icon.png";
+$volume-icon: $icons-folder + "/volume_icon.png";
+$warning-icon-lg: $icons-folder + "/warning_icon_big.png";
+$warning-icon-sm: $icons-folder + "/warning_icon_small.png";
+$zip-icon: $icons-folder + "/ZIP_icon.png";
+$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png";
+$heat-icon: $icons-folder + "/nested_heat_icon.png";
+$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
+$env-icon: $icons-folder + "/env_icon.png";
+$env-selected-icon: $icons-folder + "/env_icon_blue.png";
+
+/* vlm summary icons */
+
+$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
+$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
+$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png";
+$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
+$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
+$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
+$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
+
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
new file mode 100644
index 0000000000..1e31e06814
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -0,0 +1,104 @@
+$message-info-icon-size: 16px;
+
+@mixin status-icon-class {
+  @extend .body-1-light;
+  width: $message-info-icon-size;
+  height: $message-info-icon-size;
+  margin-left: 8px;
+  color: $white;
+  border-radius: $message-info-icon-size / 2;
+  display: inline-block;
+  text-align: center;
+}
+
+.activity-log-view {
+
+  .list-editor-view .list-editor-view-header {
+	border: none;
+	.list-editor-view-title {
+	  @extend .heading-1;
+	  color: $blue;
+	}
+  }
+  .list-editor-view-list {
+	border: 1px solid $light-gray;
+	border-bottom: none;
+  }
+  .activity-list-item {
+	display: flex;
+	height: 36px;
+	@extend .body-1;
+	&.header {
+	  @extend .body-1-medium;
+	  background-color: $tlv-light-gray;
+	  color: $text-black;
+	}
+  }
+
+  .activity-status {
+	.svg-icon-wrapper {
+	  float: right;
+	}
+	.check-circle {
+	  fill: $green;
+	  width: 16px;
+	  height: 16px;
+	}
+	.status-icon.false:after {
+	  @include status-icon-class;
+	  float: right;
+	  background-color: $red;
+	  content: "!";
+	}
+  }
+
+  .message-further-info-icon {
+	@include status-icon-class;
+	background-color: $gray;
+  }
+
+  .table-cell {
+	border-right: 1px solid $light-gray;
+	border-bottom: 1px solid $light-gray;
+	&:last-child {
+	  border-right: none;
+	}
+	flex-basis: 20%;
+	display: flex;
+	padding: 0 20px;
+	justify-content: center;
+	flex-direction: column;
+	&.activity-comment {
+	  min-width: 0;
+	  span {
+		@include ellipsis(100%);
+	  }
+	}
+  }
+
+  .date-header {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	.header-sort-arrow {
+	  width: 0;
+	  height: 0;
+	  border-left: 5px solid transparent;
+	  border-right: 5px solid transparent;
+	  margin-left: 9px;
+	  &.up {
+		border-bottom: 5px solid $black;
+	  }
+	  &.down {
+		border-top: 5px solid $black;
+	  }
+
+	}
+  }
+
+  .date-cell {
+	display: flex;
+	justify-content: space-between;
+  }
+
+}
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index b39ea495ab..fbf2c3e728 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -1,18 +1,3 @@
-
-$plus-circle-icon-size: 18px;
-.plus-icon-button {
-  background: url($plus-circle-icon) no-repeat;
-  background-size: $plus-circle-icon-size;
-  width: $plus-circle-icon-size;
-  height: $plus-circle-icon-size;
-  cursor: pointer;
-  &.small {
-    background-size: $plus-circle-icon-size - 6;
-    width: $plus-circle-icon-size - 6;
-    height: $plus-circle-icon-size - 6;
-  }
-}
-
 .primary-btn{
   border: 1px solid;
   border-color: $blue;
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 543c1c8b92..4a1a940c34 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,6 +1,10 @@
 .dual-list-box {
   display: flex;
   margin: 25px 0 10px 0;
+	.svg-icon.search {
+		height: 14px;
+		width: 14px;
+	}
 
   .dual-search-multi-select-section {
     $multi-select-box-width: 398px;
@@ -32,6 +36,10 @@
   .dual-list-options-bar {
     margin: 62px 54px 27px 54px;
     padding-top: 23px;
+		.svg-icon {
+			width: 14px;
+			height: 14px;
+		}
     .dual-list-option {
       text-align: center;
       line-height: 10px;
@@ -40,7 +48,7 @@
       height: 15px;
       cursor: pointer;
       margin-top: 20px;
-      color: $blue;
+      fill: $blue;
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52f410a61b..52b72d7c91 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,61 +1,55 @@
-$transitionLength: 0.5s;
-
-@mixin expand-transition($tl){
-	transition: width $tl, background-color $tl, cursor $tl;
-}
-
-@mixin color-transition($tl){
-	transition: color $tl;
-}
-
-.expandable-input-wrapper {
-  display: flex;
-	&:hover{
-		.form-control {
-			border-color: $gray;
-		}
-	}
-  .expandable-input-control {
-    flex: 1 1;
-    margin: 0;
-    .form-control {
-			border-radius: 20px;
-    }
-		align-self: center;
-  }
-	.expandable-active {
-		@include expand-transition($transitionLength);
-		width: 215px;
-		cursor: text;
-	}
-	.expandable-not-active {
-		@include expand-transition($transitionLength);
-		width: 28px;
-		cursor: pointer;
-		background-color: transparent;
-		color: transparent;
+.expandable-input-top {
+	display: flex;
+	height: 22px;
+	.svg-icon-wrapper {
+		height: 17px;
+		width: 17px;
 	}
-
-  .expandable-icon {
-		@include color-transition($transitionLength);
-    position: relative;
-    left: -20px;
-    align-self: center;
-    width: 0;
-		cursor: pointer;
-		color: $dark-gray;
-  }
-
-	.expandable-close-button{
-		@extend .expandable-icon;
-		color: $gray;
-		opacity: 0.5;
-		&:hover {
-			opacity: 1;
+	.expandable-input-wrapper {
+		display: flex;
+		.svg-icon.search {
+			height: 17px;
+			width: 17px;
+		}
+		&.closed {
+			.svg-icon.search {
+				transition: fill 0.5s ease-in;
+				fill: $blue;
+				cursor: pointer;
+				&:hover {
+					transition: fill 0.5s ease-in;
+					fill: $dark-blue;
+				}
+			}
+		}
+		&.opened {
+			.svg-icon-wrapper {
+				margin-left: 3px;
+			}
+			.svg-icon.search {
+				fill: $dark-blue;
+			}
+			.svg-icon.close {
+				margin-left: 7px;
+				height: 10px;
+				width: 10px;
+				opacity: 0.6;
+				fill: $dark-gray;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+		.expandable-input-control {
+			.form-control {
+				border: none;
+				background-color: transparent;
+				border-radius: 0;
+				border-bottom: 1px solid $gray;
+				height: 22px;
+				padding: 0 5px;
+			}
+			margin: 0;
 		}
-	}
-	.expandable-icon-active {
-		@include color-transition($transitionLength);
-		color: $blue;
 	}
 }
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 3c50fe694a..23c58ea4ac 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -5,10 +5,37 @@
     padding: 0 0 30px 0;
   }
 }
+
+.validation-form-content {
+	fieldset[disabled] {
+		.form-group {
+			opacity: 0.7;
+			cursor: auto;
+			pointer-events: none;
+			.dropdown-multi-select {
+				.form-group {
+					opacity: 1;
+				}
+				.Select-control {
+					background-color: $tlv-light-gray;
+				}
+			}
+		}
+	}
+}
+
 .dropdown-multi-select {
   .Select {
     display: block;
     width: 100%;
+		.Select-menu-outer {
+			.Select-option {
+				&:hover {
+					background-color: $blue;
+					color: $white;
+				}
+			}
+		}
     .Select-control {
       height: 28px;
       border-radius: 2px;
@@ -26,20 +53,24 @@
     &.Select--multi {
       .Select-value {
         color: $text-black;
-        background-color: transparent;
-        border-color: $light-gray;
-        margin-top: 2px;
-        margin-left: 2px;
-        border-radius: 1px;
+        background-color: $background-gray;
+				border: none;
+				margin: 3px 0 3px 10px;
+        border-radius: 10px;
+				padding-left: 8px;
+				padding-right: 6px;
       }
       .Select-value-icon {
-        border-right-color: $light-gray;
+        border: none;
+				float: right;
+				&:hover {
+					background-color: inherit;
+					color: inherit;
+				}
       }
       .Select-arrow-zone {
-        padding-top: 4px;
+				padding-top: 4px;
       }
     }
   }
 }
-
-
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
new file mode 100644
index 0000000000..d4d1fa7ccd
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -0,0 +1,64 @@
+$gridItemSpace: 15%;
+
+.grid-section {
+		padding-bottom: 30px;
+		.grid-items {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+
+		%grid-col-base {
+			flex-shrink: 0;
+			display: flex;
+		}
+
+		.grid-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.grid-item-stretch {
+			@extend .grid-item;
+			& *:last-child {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+
+		.grid-col-1 {
+			@extend %grid-col-base;
+			flex-basis: 25%;
+      &:after {
+        flex-basis: $gridItemSpace;
+        content: ' ';
+      }
+		}
+
+		.grid-col-2 {
+			@extend %grid-col-base;
+			flex-basis: 50%;
+      &:after {
+        flex-basis: $gridItemSpace / 2;
+        content: ' ';
+      }
+		}
+		.grid-col-3 {
+			@extend %grid-col-base;
+			flex-basis: 75%;
+      &:after {
+        flex-basis: $gridItemSpace / 3;
+        content: ' ';
+      }
+		}
+		.grid-col-4 {
+			@extend %grid-col-base;
+			flex-basis: 100%;
+      &:after {
+        flex-basis: $gridItemSpace / 4;
+        content: ' ';
+      }
+		}
+}
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
new file mode 100644
index 0000000000..c80055d055
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_icon.scss
@@ -0,0 +1,164 @@
+$image-icon-normal-size: 20px;
+
+.icon-component {
+  display: inline-flex;
+  align-items: center;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
+  .icon-label {
+    color: $blue;
+  }
+  &.disabled {
+    .icon-label {
+      color: $tlv-light-gray;
+			opacity: 0.7;
+    }
+  }
+  .icon {
+    width: $image-icon-normal-size;
+    height: $image-icon-normal-size;
+    margin: 0 6px;
+    background-repeat: no-repeat;
+
+    &.trash {
+      background-image: url($trash-icon);
+    }
+
+    &.artifacts {
+      background-image: url($artifacts-icon);
+    }
+
+    &.base {
+      background-image: url($base-module-icon);
+    }
+
+    &.module {
+      background-image: url($module-icon);
+    }
+
+    &.pencil {
+      background-image: url($pencil-icon);
+    }
+
+    &.check {
+      background-image: url($check-icon);
+      width: 30px;
+      height: 30px;
+    }
+
+    &.download {
+      background-image: url($download-icon);
+      width: 16px;
+      height: 14px;
+    }
+
+    &.upload {
+      background-image: url($upload-icon);
+      width: 16px;
+      height: 14px;
+    }
+    &.validation-artifacts {
+      width: 13px;
+      height: 17px;
+      position: relative;
+      top: 3px;
+      background-image: url($artifacts-regular-icon);
+      &.selected {
+        background-image: url($artifacts-selected-icon);
+      }
+    }
+    &.network {
+      background-image: url($network-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($network-selected-icon);
+      }
+    }
+    &.validation-other {
+      background-image: url($others-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($others-selected-icon);
+      }
+    }
+    &.volume {
+      width: 15px;
+      height: 16px;
+      background-image: url($volume-icon);
+      &.selected {
+        background-image: url($volume-selected-icon);
+      }
+    }
+    &.zip {
+      background-image: url($zip-icon);
+      height: 23px;
+      width: 29px;
+      &.selected {
+        background-image: url($zip-selected-icon);
+      }
+    }
+    &.heat {
+      background-image: url($heat-icon);
+      height: 14px;
+      width: 16px;
+      &.selected {
+        background-image: url($heat-selected-icon);
+      }
+    }
+    &.env {
+      background-image: url($env-icon);
+      height: 15px;
+      width: 16px;
+      &.selected {
+        background-image: url($env-selected-icon);
+      }
+    }
+    &.error {
+      width: 14px;
+      min-width: 14px;
+      height: 14px;
+      background-image: url($error-icon-sm);
+    }
+    &.warning {
+      height: 13px;
+      width: 15px;
+      min-width: 15px;
+      background-image: url($warning-icon-sm);
+    }
+    &.error-lg {
+      width: 17px;
+      min-width: 17px;
+      height: 17px;
+      background-image: url($error-icon-lg);
+    }
+    &.warning-lg {
+      width: 19px;
+      min-width: 19px;
+      height: 17px;
+      background-image: url($warning-icon-lg);
+    }
+    &.chevron-up {
+      background-image: url($chevron_down);
+      transform: rotate(180deg);
+      height: 7px;
+      width: 11px;
+    }
+    &.chevron-down {
+      background-image: url($chevron_down);
+      height: 7px;
+      width: 11px;
+    }
+    &.go-to-overview {
+      background-image: url($go-to-overview-icon);
+      height: 15px;
+      width: 18px;
+      &.disabled {
+        background-image: url($go-to-overview-disabled-icon);
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index 107751b07b..face03d64d 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,3 +1,12 @@
+.disabled {
+	.Select-control {
+		background-color: $tlv-light-gray;
+		.Select-placeholder {
+			color: $dark-gray;
+		}
+	}
+}
+
 .input-options {
   display: flex;
   border: 1px solid $light-gray;
@@ -14,6 +23,7 @@
     padding-top:0px;
     padding-bottom: 0px;
     height:28px;
+
   }
 
   .input-options-other{
@@ -34,6 +44,42 @@
 }
 
 .input-options.has-error {
-   border-color: #A94442;
+   border-color: $crimson;
 }
 
+.bootstrap-input-options {
+  display: flex;
+  flex-direction: column;
+  .input-options-select {
+	border: 1px solid $light-gray;
+	border-radius: 2px;
+	height: 30px;
+	float: left;
+	transition-property: width;
+	transition-duration: 300ms;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	width: 100%;
+	&:hover {
+	  border-color: $gray;
+	}
+  }
+  .input-options-other {
+	float: left;
+	height: 30px;
+	border: none;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	height: 28px;
+  }
+  .input-options-separator {
+	width: 1px;
+	height: 24px;
+	margin-top: 2px;
+	margin-bottom: 2px;
+	border: 1px solid $light-gray;
+  }
+  &.has-error {
+	border-color: $crimson;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 704faaf098..18d5426eb7 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -2,49 +2,42 @@
   @extend .flex-column;
   background-color: $content-background-color;
 
-  .list-editor-view-title {
-    @extend .section-title;
-  }
-
-  .list-editor-view-title-inline {
-    @extend .list-editor-view-title;
-    position: relative;
-    top: 9px;
-    &:first-child {
-      padding: 0;
-    }
-  }
-
-  .list-editor-view-add-section {
-    display: inline-block;
-    padding: 0 10px 0 10px;
+  .expandble-search-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
   }
 
-  .list-editor-view-actions {
+  .list-editor-view-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     border-bottom: 1px solid $light-gray;
-    padding-bottom: 18px;
+    padding-bottom: 5px;
+    .list-editor-view-title {
+      @extend .heading-3-medium;
+    }
     .list-editor-view-add-controller {
-      @extend .body-1-medium;
+      @extend .heading-4-medium;
       color: $blue;
       display: table;
       cursor: pointer;
       position: relative;
-      top: 9px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+      margin-left: auto;
+      .list-editor-view-add-title {
+        display: flex;
+      }
       span {
         display: table-cell;
         vertical-align: middle;
+        margin-top:4px;
         &:nth-child(2) {
           padding-left: 10px;
         }
       }
     }
-
-    .search-wrapper {
-      width: 265px;
-    }
   }
 
   .list-editor-view-list-scroller {
@@ -56,21 +49,17 @@
   .list-editor-view-list {
     @extend .flex-column;
 
-
     .list-editor-item-view {
       margin: 8px 0;
       border: 1px solid $light-gray;
       background-color: $white;
-      cursor: pointer;
       display: flex;
-      height: 100px;
       min-height: 100px;
       overflow: hidden;
       .list-editor-item-view-content {
         padding: 10px 28px;
         display: flex;
-        flex-basis: 95%;
-        width: 95%;
+        flex: 1 1 auto;
         .list-editor-item-view-field {
           flex: 1 1;
           color: $black;
@@ -91,6 +80,12 @@
           .text {
             @extend .body-1;
           }
+          .textEllipses {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            padding-right: 5px;
+          }
         }
       }
       .list-editor-item-view-controller {
@@ -99,59 +94,79 @@
         align-self: center;
         justify-content: center;
         flex-direction: column;
-        .fa {
-          transition: color .3s;
-          font-size: 22px;
-          color: $white;
-          &:first-child{
+        .svg-icon-wrapper {
+          &:first-child {
             margin-bottom: 10px;
           }
         }
+        .svg-icon {
+          transition: fill .3s;
+          height: 18px;
+          width: 18px;
+          fill: $white;
+        }
       }
-      &:hover {
+      &.selectable:hover{
         @extend .box-hover;
+        cursor: pointer;
         .list-editor-item-view-controller {
-          .fa {
-            color: $gray;
+          .svg-icon {
+            fill: $dark-gray;
+            &:hover {
+              fill: $black;
+            }
           }
         }
       }
     }
-  }
+    &.two-columns {
 
-  &.thinner-list {
-    background-color: $white;
-    padding: 0;
-    margin-top: 35px;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-    .list-editor-view-list {
-      border-top: 0;
-      padding-top: 0;
-      margin-top: 23px;
       .list-editor-item-view {
-        &:hover {
-          border-color: $light-gray;
-        }
-        margin: 5px 0 0 0;
-        height: 30px;
-        border-top: 0;
-        border-left: 0;
-        border-right: 0;
         .list-editor-item-view-content {
-          padding: 4px;
-          .name {
-            @extend .body-2-medium;
-            flex-basis: 36%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 10px 18px 10px 0;
+          .list-editor-item-view-field {
+            flex: 0.3 1;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            height: 100%;
+            border-right : 1px solid $light-gray;
+            margin-left: 18px;
+            &:last-child{
+              border: none;
+              flex: 1;
+            }
+            .details{
+              display: flex;
+              flex-direction: row;
+              .title {
+                padding: 0;
+                margin-right: 5px;
+              }
+            }
+
+            .description {
+              @extend .body-1;
+              @include multiline-ellipsis(1.3em, 3);
+            }
           }
         }
-        .list-editor-item-view-controller {
-          .fa-trash-o {
-            font-size: 20px;
-          }
+
+        &:nth-child(odd){
+          flex: 0 0 48.5%;
+          margin-right: 50px;
+        }
+        &:nth-child(even) {
+          flex: 1;
+          margin-right: 0;
         }
       }
     }
   }
 }
-
-
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 404f43ca68..36c14a2785 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -3,7 +3,7 @@
   height: 100%;
   background-color: $white;
   border-right: 1px solid $light-gray;
-  box-shadow: 1px -1px 3px 0px $tlv-light-gray;
+  @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
   border-bottom: 0;
 
   .navigation-side-content {
@@ -16,11 +16,11 @@
       flex-direction: column;
       background-color: $tlv-gray;
       .group-name {
-        @extend .heading-5-medium;
+        @extend .heading-4-medium;
         @include ellipsis;
         min-height: 56px;
         display: block;
-        padding: 18px 12px 16px 40px;
+        padding: 18px 12px 13px 40px;
         background-color: $white;
         border-bottom: 1px solid $tlv-light-gray;
       }
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
new file mode 100644
index 0000000000..fa17733374
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -0,0 +1,152 @@
+.select-action-table-view {
+	.svg-icon-wrapper {
+		flex-direction: row;
+		
+		&::before {
+			content:"";			
+		}
+		.svg-icon {
+			margin-left: 5px;
+			margin-right: 5px;
+			width:16px;
+			height:16px;
+		}	
+	}
+	.dummy-icon {
+		background-color: $white;
+		fill: $white;
+		.locked {
+			fill: $white;
+		}
+	}
+
+	.select-action-table-controllers {
+		display: flex;
+		.svg-icon-wrapper {
+			&:hover {
+				cursor: pointer;
+			}
+			&:first-child {
+				margin-left: auto;
+			}
+		}
+	}
+	.select-action-table {
+		display: flex;
+		flex-direction: column;
+		border-color: $light-gray;
+
+		.select-action-table-headers {
+			display: flex;
+			background-color: $tlv-light-gray;
+			border-color: inherit;						
+			.select-action-table-header {
+				@extend .body-1-medium;
+				flex: 1;
+				border-top: 1px solid;
+				border-right: 1px solid;				
+				border-color: inherit;
+				padding: 8px 0 7px 20px;
+				&:first-child {
+					border-left: 1px solid;
+					border-color: inherit;
+				}
+			}		
+		}
+		.select-action-table-row-wrapper {
+			display: flex;
+			flex-direction: row;			
+    		margin-bottom: 14px;
+			.svg-icon.trash-o {
+				
+				fill: $dark-gray;								
+			}
+			.svg-icon.error-circle {
+				fill: $red;				
+			}
+			.svg-icon.check-circle {
+				fill: $green;				
+			}			
+			.select-action-table-row {
+				display: flex;
+				flex: 1;
+				border: 1px solid;
+				border-color: $light-gray;
+				&.has-error {
+					border-color: $red;
+				}
+				.select-action-table-cell {
+					flex: 1;
+					border-right: 1px solid;
+					border-color: $light-gray;
+					@extend .body-1;
+					.dropdown-multi-select {
+						.form-group {
+							.Select{
+								&.is-open {
+									border: 1px solid $blue;
+								}
+							}
+						}
+					}
+					.form-group {
+						margin: 0;						
+						.Select-control {
+							height:36px;
+							border: none;
+							.is-open {
+								border-left-color: $blue;
+								border-right-color: $blue;
+							}
+							.Select-value, .Select-placeholder, .Select-input {
+								padding-left: 20px;
+								padding-right: 50px;
+								padding-top: 4px;
+								
+							}
+							.Select-placeholder {
+								color: $dark-gray;
+							}
+							.Select-arrow-zone {
+								padding-right: 15px;
+							}
+						}											
+					}
+					&:last-child {
+						border-right: none;
+					}											
+				}
+				.Select-menu-outer {
+						border-left: 1px solid $blue;
+						border-right: 1px solid $blue;
+						border-bottom: 1px solid $blue;
+						overflow: auto;
+						.Select-menu {																	
+							display: inline-block;
+							.Select-option {								
+								width: 100%;
+								display: inline-block;
+								border-bottom: 1px solid $light-gray;																					
+								&:hover {
+									background-color: $blue;
+									color: $white;
+									&.is-focused {
+										background-color: $blue;
+									}
+									&.is-focused {
+										background-color: $blue;
+									}
+								}
+								&.is-selected {
+									background-color: transparent;
+								}
+								&.is-focused {
+									background-color: transparent;
+								}								
+							}
+						}	
+					}
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss
deleted file mode 100644
index 61c9a189f0..0000000000
--- a/openecomp-ui/resources/scss/components/_slidePanel.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.slide-panel {
-  transition: left .5s,right .5s;
-
-  .slide-panel-header {
-    padding: 10px;
-    height: 45px;
-    display: table;
-    width: 100%;
-    .slide-panel-header-title, .collapse-double-icon {
-      display: table-cell;
-      vertical-align: middle;
-    }
-    .slide-panel-header-title {
-      @extend .body-2;
-      text-align: center;
-      width: 100%;
-      color: $text-black;
-    }
-    .collapse-double-icon {
-      color: $text-black;
-      cursor: pointer;
-    }
-  }
-
-  .slide-panel-content {
-    opacity: 1;
-    transition: opacity .5s, visibility .5s;
-
-    &.closed {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index fdac5ebe45..e34be01af2 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -20,4 +20,41 @@
       }
     }
   }
+  .error-block {
+    margin: 10px 0;
+    .error-block-header {
+      background-color: $tlv-gray;
+      padding: 5px;
+      cursor: pointer;
+      .chevron-down {
+        width:10px;
+        height:10px;
+        margin-right: 10px;
+        &.right {
+          transform: rotate(270deg);
+        }
+      }
+
+    }
+    .error-code-list-item {
+      .icon-label {
+        @extend .body-1;
+        color: $dark-gray;
+      }
+      .icon-component {
+        align-items: baseline;
+      }
+    }
+    .list-group-item {
+      .error-item-text {
+        margin-top:-2px;
+        //position: fixed;
+      }
+    }
+    .component-name-header {
+      margin-left: 45px;
+      margin-top: 10px;
+      @extend .heading-5-medium;
+    }
+  }
 }
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
new file mode 100644
index 0000000000..fc02f81fd4
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_svgIcon.scss
@@ -0,0 +1,51 @@
+@mixin overrideBootstrapClose(){
+	opacity: 1;
+	float: none;
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.svg-icon-wrapper {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	&.bottom {
+		flex-direction: column;
+		.svg-icon-label {
+			margin-bottom: 5px;
+		}
+	}
+	&.right {
+		float: none;
+		.svg-icon-label {
+			margin-left: 5px;
+		}
+	}
+	&.top {
+		flex-direction: column-reverse;;
+		.svg-icon-label {
+			margin-top: 5px;
+		}
+	}
+	&.left {
+		flex-direction: row-reverse;;
+		.svg-icon-label {
+			margin-right: 5px;
+		}
+	}
+	// bootstrap override
+	&.close {
+		@include overrideBootstrapClose();
+	}
+	.close {
+	@include overrideBootstrapClose();
+	}
+	.svg-icon {
+		width: 20px;
+		height: 20px;
+	}
+	.svg-icon-label {
+		@extend .body-1;
+	}
+}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 93444c2e88..9404f2841a 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -5,6 +5,7 @@ form {
       flex: 1;
     }
     .nav-tabs {
+      position: relative;
       .invalid-tab:not(.active) {
         a {
           color: $red;
@@ -73,14 +74,17 @@ form {
           flex: 0.2;
           content: ' ';
         }
-        &.add-line-break {
-          .control-label {
-            &:after {
-              content: "\00a0";
-              display: block;
+        @media (min-width: 1349px) {
+          &.add-line-break {
+            .control-label {
+              &:after {
+                content: "\00a0";
+                display: block;
+              }
             }
           }
         }
+
       }
     }
   }
@@ -91,6 +95,16 @@ form {
     button:first-child {
       margin-right: 15px;
     }
+		.svg-icon {
+			height: 14px;
+			width: 14px;
+		}
+		.svg-icon.check {
+			fill: $white;
+		}
+		.svg-icon.close {
+			fill: $blue;
+		}
   }
 }
 
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3511470bfb..3c30cdcc37 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,109 +1,125 @@
 .version-controller-bar {
-  .navbar-inverse {
-    @extend .body-1-medium;
+  display: flex;
+  min-height: 57px;
+  border-bottom: 1px solid $tlv-light-gray;
+  background-color: transparent;
+  .vc-container {
+    display: flex;
+    flex: 1;
+    align-self: center;
     background-color: transparent;
-    border-bottom: $tlv-light-gray thin solid;
-    padding-top: 14px;
-    padding-bottom: 12px;
-    margin-bottom: 0;
-    .container {
-      width: 100%;
-      padding: 0 52px;
+    justify-content: space-between;
+    padding-left: 16px;
+    padding-right: 40px;
+    .version-status-container {
+      display: flex;
       height: 30px;
-      .navbar-collapse {
-        padding-left: 0;
-        .items-in-left {
-          display: flex;
-          height: 30px;
-          .version-section {
-            .form-group {
-              margin-right: 5px;
-              .input-options {
-                border: none;
-                .input-options-select {
-                  padding-top: 4px;
-                }
-              }
+      .version-selector {
+        border: none;
+        margin-top: 7px;
+        padding-right: 10px;
+        margin-right: 15px;
+        margin-left: 10px;
+        @extend .body-1;        
+      }
+      .version-section {
+        .form-group {
+          margin-right: 20px;
+          .input-options {
+            border: none;
+            .input-options-select {
+              padding-top: 4px;
             }
           }
-          .vc-status {
-            display: flex;
-            padding-left: 14px;
-            border-left: $light-gray thin solid;
-            .status-text {
-              align-self: center;
-              display: flex;
-              padding-left: 3px;
-              .status-text-dash {
-                padding: 0 9px;
-              }
+        }
+      }
+      .vc-status {
+        display: flex;
+        padding-left: 20px;
+        border-left: $light-gray thin solid;
+        .status-text {
+          align-self: center;
+          margin-top: 2px;
+          @extend .heading-5;
+          color: $dark-gray;
+        }
+      }
+    }
+    .save-submit-cancel-container {
+      display: flex;
+      height: 30px;
+      .action-buttons {
+        display: flex;
+        padding: 0 13px;
+        .version-control-buttons {
+          display: flex;
+        }
+        .action-buttons-svg {
+          padding-top: 5px;
+          margin-right: 20px;
+          padding-bottom: 5px;
+
+          .version-controller-lock-closed {
+            fill: $dark-gray;
+            width: 21px;
+            height: 23px;
+            margin-top: -3px;
+            &.disabled {
+              fill: $light-gray;
             }
-            .onboarding-status-icon {
-              width: 25px;
-              height: 19px;
-              background-image: url('../images/ecomp/ASDC_Sprite.png');
-              background-position: -306px 674px;
-              align-self: center;
+            &:hover {
+              fill: $black;
             }
-            .checkout-status-icon {
-              display: flex;
-              & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon {
-                width: 25px;
-                height: 19px;
-                align-self: center;
-                margin-left: 5px;
-              }
+          }
+          .version-controller-lock-open {
+            fill: $dark-gray;
+            width: 24px;
+            height: 28px;
+            margin-top: -6px;
+            &:hover {
+              fill: $black;
             }
           }
-        }
-        .items-in-right {
-          display: flex;
-          height: 30px;
-          .action-buttons {
-            display: flex;
-            border-right: $gray thin solid;
-            padding: 0 13px;
-            .version-control-buttons {
-              display: flex;
+          .version-controller-submit {
+            fill: $blue;
+            &.disabled {
+              fill: $light-gray;
             }
-            .vc-nav-item-button {
-              border: 1px solid $light-gray;
-              border-radius: 5px;
-              cursor: pointer;
-              margin-right:10px;
-              padding: 6px 20px;
-              &:hover, &:focus {
-                background-color: lightgrey;
-              }
-              &.button-submit{
-                background-color: transparent;
-                color: $green;
-                border-color: $green;
-              }
-              &.button-checkin-checkout {
-                background-color: $white;
-                @extend .body-1;
-              }
+            &:hover {
+              fill: $dark-blue;
             }
-            .revert-btn, .save-btn {
-              height: 24px;
-              width: 24px;
-              align-self: center;
-              cursor: pointer;
-              margin-right: 10px;
+          }
+
+          .version-controller-revert {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
             }
           }
-          .vc-nav-item-close {
-            display: flex;
-            padding-left: 18px;
-            padding-top: 3px;
-            align-self: center;
-            @extend .body-1;
-            color: $gray;
-            cursor: pointer;
+          .version-controller-save {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
+            }
           }
         }
       }
+      .vc-nav-item-close {
+        display: flex;
+        padding-left: 18px;
+        padding-top: 3px;
+        align-self: center;
+        @extend .body-1;
+        color: $gray;
+        cursor: pointer;
+        border-left: $gray thin solid;
+      }
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index df7cea4cd8..0e0a72a387 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -35,29 +35,13 @@
     .tab-content {
       padding: 50px;
     }
-    .entitlement-pools-form-row {
-
-      display: flex;
-      justify-content: space-between;
-      & > * {
-        flex: 0 1 47%;
-      }
-      .validation-input-wrapper {
-        .form-group {
-          textarea {
-            height: 184px;
-          }
-          .entitlement-pools-form-row-threshold-value {
-            margin-top: 23px;
-            margin-left: 10px;
-            width: 189px;
-          }
-          .dropdown-multi-select .Select {
-            z-index: 1080;
-          }
-        }
-      }
-    }
+		.threshold-section {
+			display: flex;
+			justify-content: space-between;
+			.validation-input-wrapper {
+				flex: 0 0 46%;
+			}
+		}
   }
   .validation-buttons {
     padding: 20px 50px;
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index f66a01c290..71e7cee575 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -28,21 +28,6 @@
     padding: 0;
   }
   .feature-group-form {
-    .button-tab {
-      @extend .body-1-medium;
-      color: $dark-gray;
-      padding: 6px;
-      border: 0;
-      background-color: $white;
-      box-shadow: none;
-      &:first-child {
-        margin-right: 28px;
-      }
-      &.active, &:hover {
-        color: $text-black;
-        border-bottom: 2px solid $blue;
-      }
-    }
     .no-items-msg {
       margin-top: 55px;
       color: $dark-gray;
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index a7afd01cc5..7a7b87677e 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -37,21 +37,6 @@
     padding: 0;
   }
   .license-agreement-form {
-      .button-tab{
-        @extend .body-1-medium;
-        color: $dark-gray;
-        padding: 6px;
-        border: 0;
-        background-color: $white;
-        box-shadow: none;
-        &:first-child {
-          margin-right: 28px;
-        }
-        &.active, &:hover {
-          color: $text-black;
-          border-bottom: 2px solid $blue;
-        }
-      }
     .no-items-msg {
       margin-top: 55px;
       color: $dark-gray;
@@ -70,21 +55,6 @@
         }
       }
     }
-    .license-agreement-form-row {
-      display: flex;
-      justify-content: space-between;
-      .license-agreement-form-col {
-        flex: 0 1 45%;
-      }
-      .validation-input-wrapper {
-        flex: 0 1 45%;
-        .form-group {
-          textarea {
-            height: 100px;
-          }
-        }
-      }
-    }
     .validation-buttons {
       padding: 20px 50px;
     }
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 19b4792949..5ea84e98c4 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -30,22 +30,6 @@
         width: 400px;
         color: $black;
       }
-      .license-key-groups-form-row {
-        display: flex;
-        justify-content: space-between;
-        .options-input-form-row {
-          width: 370px;
-        }
-        .validation-input-wrapper {
-          flex: 0 1 45%;
-          .form-group {
-            textarea {
-              height: 100px;
-            }
-
-          }
-        }
-      }
     }
     .validation-buttons {
       padding: 20px 50px;
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
new file mode 100644
index 0000000000..4ec7c8d3af
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -0,0 +1,491 @@
+.license-model-overview {
+  .overview-top-section {
+    .overview-title{
+      @extend .heading-1;
+      @extend .text-uppercase !optional;
+      margin-bottom: 20px;
+      color: $blue;
+    }
+    .license-model-overview-top {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+      padding-bottom: 10px;
+      min-height: 155px;
+      .separator {
+        width: 1px;
+        border-right: 1px solid $tlv-light-gray;
+        margin-left: 20px;
+      }
+      .vendor-data-view {
+        @extend .flex-column;
+        background-color: $tlv-gray;
+        padding: 20px 30px;
+        border: 1px solid $tlv-light-gray;
+        @include border-shadow();
+        .vendor-title {
+          margin-top:5px;
+        }
+        .vendor-name {
+          @extend .heading-3-medium;
+          text-transform: none;
+          padding-bottom: 15px;
+          border-bottom: 1px solid $tlv-light-gray;
+        }
+        .vendor-description {
+          @extend .flex;
+          @extend .body-1;
+          justify-content: space-between;
+          margin-top: 10px;
+          overflow: hidden;
+          border: 1px solid transparent;
+          position: relative;
+          left: -6px;
+          width: 101%;
+
+          &:hover {
+            border: 1px solid $tlv-light-gray;
+            background-position: 99% 12%;
+            background-size: 15px;
+            padding-right: 20px;
+            background-image: url($pencil-icon);
+            background-repeat: no-repeat;
+            cursor: pointer;
+          }
+          &.read-only {
+            border: none;
+          }
+					.description-data {
+						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+					}
+        }
+
+        .vendor-description-readonly {
+          @extend .flex;
+          @extend .body-1;
+          justify-content: space-between;
+          margin-top: 10px;
+          overflow: hidden;
+          border: none;
+          height: 49px;
+          margin-bottom: 15px;
+          padding: 6px;
+          position: relative;
+          left:-6px;
+        }
+
+        .vendor-description-edit {
+          @extend .flex;
+          flex-direction: column;
+          border: none;
+          margin-top: 10px;
+          position: relative;
+          left: -6px;
+          width: 101%;
+          textarea {
+            padding-left: 6px;
+          }
+          .buttons-row {
+            @extend .flex;
+            justify-content: flex-end;
+            flex-direction: row;
+            margin-top: -25px;
+            .buttons-wrapper {
+              @extend .flex;
+              @extend .body-3;
+              border: 1px solid $light-gray;
+              width: 95px;
+              height: 19px;
+              background-color: $tlv-light-gray;
+              border-radius: 2px;
+              position: relative;
+              flex: 0 1 auto;
+              text-align: center;
+              .description-button {
+                cursor: pointer;
+                flex: 1;
+                &:hover {
+                  background-color: $white;
+                }
+              }
+              .description-save {
+                cursor: pointer;
+                flex: 1;
+                color:$blue;
+                &:hover {
+                  background-color: $white;
+                }
+              }
+            }
+          }
+          .description-edit-textarea {
+            height:67px;
+            border: 1px solid $tlv-light-gray;
+            resize: none;
+            position: relative;
+            left: -12px;
+          }
+        }
+      }
+      .summary-count-list {
+        @extend .flex-column;
+        flex: 0.6;
+        margin-left: 20px;
+        justify-content: space-between;
+        border: 1px solid $tlv-light-gray;
+        @include border-shadow();
+        background-color: $tlv-gray;
+        .summary-count-item {
+          @extend .flex;
+          @extend .heading-4-medium;
+          padding-top: 5px;
+          padding-left: 45px;
+          padding-right: 45px;
+          border-bottom: 1px solid $tlv-light-gray;
+          &:last-child { border-bottom: none; }
+          .item-count {
+            flex-grow: 2;
+            margin-left: 5px;
+          }
+          .add-button {
+            cursor: pointer;
+            font-size: larger;
+            background-image: url($vlm-summary-plus);
+            background-size: 20px;
+            background-repeat: no-repeat;
+            width:20px;
+            height:20px;
+            margin-top: 3px;
+            margin-left: auto;
+            &:hover {
+              cursor: pointer;
+              background-image: url($vlm-summary-plus-blue);
+            }
+          }
+
+          .summary-name-and-count {
+            &:hover {
+              cursor: pointer;
+              color: $blue;
+            }
+          }
+
+
+        }
+      }
+      .plus-icon {
+        font-size: $icon-font-size;
+        border-radius: 50%;
+        border: 1px solid $black;
+        color: $black;
+        height: 16px;
+        width: 16px;
+        padding: 2px 2px 2px 3px;
+      }
+    }
+  }
+  .vlm-list-tab-panel
+  {
+    @extend .flex;
+    .section-title {
+      flex: 1;
+    }
+    .overview-buttons-section {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      .button-vlm-list-view {
+        height: 32px;
+        width: 34px;
+        margin-left:10px;
+        cursor: pointer;
+      }
+      .vlm-list-icon {
+        background-size: 32px;
+        background-repeat: no-repeat;
+        background-image: url($vlm-summary-used);
+        &.selected {
+          background-image: url($vlm-summary-used-blue);
+        }
+      }
+      .entities-list-icon {
+        background-size: 32px;
+        background-repeat: no-repeat;
+        background-image: url($vlm-summary-orphans);
+        &.selected {
+          background-image: url($vlm-summary-orphans-blue);
+        }
+      }
+
+    }
+  }
+
+  .overview-list-section {
+    @extend .flex-column;
+    margin-top: 35px;
+    .section-title {
+      @extend .heading-2;
+      padding-top: 20px;
+      margin-bottom: 15px;
+      padding-bottom: 0px;
+    }
+    &.overview-list-orphans {
+      .chevron::before
+      {
+        display: none;
+      }
+      .vlm-list-view {
+        .vlm-list {
+          .vlm-list-item {
+            @include border-shadow();
+            .list-item-icon-col {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              margin-left: 5px;
+            }
+            &.vlm-list-item-la {
+              margin-left: 0;
+              .list-item-icon-col {
+                padding-left: 22px;
+
+              }
+              .la-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  background-color: gray;
+                }
+              }
+            }
+            &.vlm-list-item-fg {
+              cursor: default;
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-arrow-col {
+                margin-left: 0px;
+              }
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .fg-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+            }
+            &.vlm-list-item-ep {
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .ep-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  display: flex;
+                  color: $white;
+                  min-width: 34px;
+                }
+              }
+            }
+            &.vlm-list-item-lkg {
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .lkg-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  display: flex;
+                  color: $white;
+                  min-width: 34px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .vlm-list-view {
+      flex: 1;
+      .vlm-list {
+        @extend .flex;
+        flex-direction: column;
+        .vlm-list-item {
+          @include border-shadow();
+          min-height: 90px;
+          height: 90px;
+          background-color: $tlv-gray;
+          @extend .flex;
+          border: 1px solid $tlv-light-gray;
+          margin-bottom: 0px;
+          cursor: pointer;
+          .list-item-icon-col {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+          }
+          .list-item-section {
+            padding: 10px;
+            .children-count {
+              @extend .body-1;
+              line-height: 20px;
+              color: $gray;
+              padding-left: 5px;
+              .count-value {
+                padding: 0 5px;
+              }
+            }
+            .additional-data {
+              padding-left: 50px;
+              .additional-data-name {
+                @extend .body-1-medium;
+              }
+            }
+            .additional-data-col-border {
+              border-left: 1px solid $tlv-light-gray;
+              min-height: 100%;
+              height: 100%;
+            }
+          }
+          .list-item-additional-data-col {
+            @extend .body-1;
+            @extend .flex;
+            align-items: center;
+            flex: 0.8;
+          }
+          .arrow-icon {
+            align-self: center;
+          }
+          .vlm-item-info {
+            flex: 1;
+          }
+          .vlm-list-item-title {
+            @extend .flex;
+            .item-name {
+              @extend .heading-5-medium;
+              flex: 0 1 auto;
+              margin-bottom: 4px;
+            }
+          }
+          .vlm-list-item-description {
+            @extend .body-1;
+            overflow: hidden;
+            max-height: 38px;
+          }
+          &.vlm-list-item-la {
+            margin-top: 10px;
+            border-left: 10px solid $dark-blue;
+            .la-icon {
+              @include create-circle($circle-icon-size,$dark-blue,'LA');
+              color: $white;
+            }
+            .list-item-section {
+
+              &:first-child {
+                display: flex;
+                color: $dark-blue;
+                min-width: 34px;
+              }
+            }
+            .list-item-arrow-col {
+              flex: 0.01;
+              margin-left: 14px;
+            }
+            .list-item-icon-col {
+              padding-left: 14px;
+              padding-right: 30px;
+              align-items: center;
+            }
+
+          }
+          &.vlm-list-item-fg {
+            border-left: 10px solid $blue;
+            margin-left: 20px;
+            margin-top: 10px;
+            .fg-icon {
+              @include create-circle($circle-icon-size,$blue,'FG');
+              color: $white;
+            }
+            .list-item-section {
+              &:first-child {
+                display: flex;
+                color: $blue;
+                min-width: 34px;
+
+              }
+            }
+            .list-item-arrow-col {
+              flex: 0.01;
+              margin-left: 26px;
+            }
+            .list-item-icon-col {
+              padding-left: 22px;
+              padding-right: 30px;
+              align-items: center;
+            }
+          }
+          &.vlm-list-item-ep {
+            margin-left: 40px;
+            margin-top: 10px;
+            border-left: 10px solid $light-blue;
+            cursor: default;
+            .ep-icon {
+              @include create-circle($circle-icon-size,$light-blue,'EP');
+              color: $white;
+            }
+            .list-item-icon-col {
+              padding-left: 72px;
+              padding-right: 30px;
+              align-items: center;
+            }
+            .list-item-section {
+              &:first-child {
+                display: none;
+              }
+            }
+            .list-item-additional-data-col {
+              margin-right: 20px;
+            }
+          }
+          &.vlm-list-item-lkg {
+            margin-top: 10px;
+            margin-left: 40px;
+            border-left: 10px solid $light-blue;
+            cursor: default;
+            .lkg-icon {
+              @include create-circle($circle-icon-size,$light-blue,'KG');
+              color: $white;
+            }
+            .list-item-icon-col {
+              padding-left: 72px;
+              padding-right: 30px;
+              align-items: center;
+            }
+            .list-item-section {
+              &:first-child {
+                display: none;
+              }
+
+            }
+            .list-item-additional-data-col {
+              margin-right: 20px;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+}
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 6020866d4a..6c56d11049 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,164 +1,24 @@
 $transitionLength: 0.6s;
 
 .catalog-view {
-  background-color: $background-gray;
-  height: 100%;
-  overflow: hidden;
-  height: 100%;
-  .catalog-header {
-    padding-top: 20px;
-    margin: 0 48px 0 20px;
-    border-bottom: 1px solid $light-gray;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .catalog-header-title {
-      @extend .heading-2;
-      margin: 0 0 10px 0;
-    }
-    .expandable-input-wrapper {
-      margin: 0 0 10px 0;
-    }
-  }
-  .catalog-list {
-    max-height: 100%;
-    overflow: auto;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 40px 10px 0 10px;
-    &:after {
-      content: ' ';
-      display:block;
-      width: 100%;
-      height: 85px;
-    }
-    .tile {
-      background-color: $white;
-      margin: 10px;
-      width: 214px;
-      height: 210px;
-      display: flex;
-      flex-direction: column;
-
-    }
-    .create-catalog-item {
-      border: 2px dashed $light-gray;
-      background-color: transparent;
-      &:hover {
-        .plus-section {
-          display: none;
-        }
-        .primary-btn {
-          display: inherit;
-        }
-      }
-      justify-content: center;
-      .plus-section {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        .plus-icon-button {
-          align-self: center;
-          background-size: 23px;
-          width: 23px;
-          height: 23px;
-          margin-bottom: 4px;
-        }
-      }
-      .primary-btn {
-        display: none;
-        width: 176px;
-        &.new-license-model {
-          margin-bottom: 18px;
-        }
-        &:hover {
-          background-color: $background-alice-blue;
-        }
-      }
-    }
-    .catalog-tile {
-      cursor: pointer;
-      border: 1px solid $tlv-light-gray;
-      &:hover {
-        @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04));
-      }
-      &:active {
-        border: 1px solid $light-blue;
-      }
-      .catalog-tile-type {
-        padding-top: 7px;
-        border-radius: 50%;
-        width: 40px;
-        height: 40px;
-        background: white;
-        border: 4px solid #F2F2F2;
-        position: relative;
-        top: -12px;
-        left: -7px;
-        &:before {
-          @extend .body-1;
-          color: $light-blue;
-        }
-        &.license-model-type {
-          padding-left: 13px;
-          &:before {
-            content: "L"
-          }
-        }
-        &.software-product-type {
-          padding-left: 8px;
-          &:before {
-            content: "SP"
-          }
-        }
-      }
-      .catalog-tile-icon {
-        text-align: center;
-        flex-basis: 60%;
-        justify-content: center;
-        background-size: 60px 60px;
-        background-repeat: no-repeat;
-        background-position: center;
-        display: flex;
-        .icon {
-          align-self: center;
-          height: 65px;
-          width: 65px;
-          background-repeat: no-repeat;
-          margin-bottom: 27px;
-          &.license-model-type-icon {
-            background-image: url('../images/onboarding/vendor-license-model.svg');
-          }
-          &.software-product-type-icon {
-            background-image: url('../images/onboarding/vendor-software-product.svg');
-          }
-        }
-      }
-      .catalog-tile-content {
-        border-top: 1px solid $background-gray;
-        flex-basis: 30%;
-        padding: 8px;
-        display: flex;
-        justify-content: space-between;
-        .catalog-tile-item-details {
-          overflow: hidden;
-        }
-        .catalog-tile-item-name {
-          @extend .body-1-medium;
-          @include ellipsis();
-          width: 150px;
-          color: $dark-gray
-        }
-        .catalog-tile-item-version {
-          @extend .body-1;
-          color: $gray;
-        }
-        .catalog-tile-check-in-status {
-          width: 25px;
-          height: 19px;
-          align-self: center;
-        }
-      }
-    }
-  }
+	background-color: $background-gray;
+	overflow: hidden;
+	height: 100%;
+	@import "onboardingCatalog/onboardHeader";
+	@import "onboardingCatalog/catalogHeader";
+	@import "onboardingCatalog/vendorPageHeader";
+	@import "onboardingCatalog/catalogList";
+	.catalog-wrapper {
+		height: 100%;
+		overflow: auto;
+		.tab-separator {
+		  content: '';
+		  height: 25px;
+		  border-right: 1px solid $dark-gray;
+		}
+		.catalog-list {
+			overflow: hidden;
+			height: auto;
+		}
+	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 657bb544a7..37068975a2 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,153 +1,237 @@
-.software-product-attachments {
+
+.vsp-attachments-view {
+  position: relative;
+	#attachments-tabs {
+		.nav-tabs {
+			background-color: $tlv-gray;
+			box-shadow: none;
+			border-bottom: 1px solid $light-gray;
+			& > li {
+				& > a {
+					font-size: 24px;
+					font-weight: lighter;
+					padding-left: 0;
+					padding-right: 0;
+					margin-right: 40px;
+				};
+				&.active > a {color: $blue;};
+			}
+		}
+	}
+  .attachments-view-controllers {
+    position: absolute;
+    right: 40px;
+    top: 15px;
+		display: flex;
+		.icon-label {
+			color: $dark-gray;
+		}
+
+		.go-to-overview-icon {
+			.icon-label {
+				color: $blue;
+			}
+			&.disabled {
+				.icon-label {
+					color: $gray;
+				}
+			}
+		}
+
+    .icon-component {
+      margin-right: 30px;
+
+    }
+
+    input[type="file"] {
+      visibility: hidden;
+      width: 1px;
+      padding: 0;
+      margin-left: -1px;
+    }
+  }
+}
+
+.vsp-attachments-heat-validation {
   @extend .body-1;
-  width: 100%;
-  height: 100%;
   display: flex;
-
-  .software-product-attachments-tree {
+  .svg-icon.exclamation-triangle-line {
+    fill: $orange;
+    width: 15px;
+    height: 15px;
+    &.large {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .validation-tree-section {
     display: flex;
-    border-right: 1px solid $light-gray;
-    margin: 0px;
-    padding: 5px 3px 10px 3px;
+    width: 400px;
+    justify-content: space-between;
+  }
+  .vsp-attachments-heat-validation-tree {
+    @extend .flex-column;
+    margin: 0;
     overflow: auto;
     height: 100%;
-
+    .attachments-tree-header {
+      display: flex;
+      justify-content: space-between;
+      height: 55px;
+      align-items: center;
+      &.header-selected {
+        background: $tlv-gray;
+      }
+      .header-icon {
+        top: -3px;
+        position: relative;
+        margin-left: 20px;
+      }
+      .tree-header-title-text {
+        @extend .heading-4-medium;
+        padding-left: 32px;
+        cursor: pointer;
+        &.tree-header-title-selected{
+          color: $blue;
+        }
+      }
+      .tree-header-title {
+        display: flex;
+      }
+    }
+    .counters {
+      display: flex;
+      justify-content: space-between;
+      z-index: 1;
+      padding-right: 20px;
+      .counter {
+        display: flex;
+        &:first-child {
+          margin-right: 20px;
+        }
+        &:only-child {
+          margin-right: 0;
+        }
+        .svg-icon-wrapper {
+          margin-right: 5px;
+        }
+        .counter-icon {
+          margin-right: 5px;
+        }
+        .error-text, .warning-text {
+          @extend .body-3;
+          &.large {
+            @extend .heading-4-medium;
+          }
+        }
+      }
+    }
     .tree-wrapper {
       flex: 1 1;
       position: relative;
       padding-bottom: 10px;
 
+      @-moz-document url-prefix() {
+        .tree-block-inside {
+          top: 0;
+          position: relative;
+        }
+      }
       .tree-block-inside {
-        padding-left: 17px;
-        padding-top: 8px;
-        padding-bottom: 1px;
+        padding-left: 20px;
         .tree-node-row {
           cursor: default;
           white-space: nowrap;
-          &.tree-node-selected::before {
+          display: flex;
+          justify-content: space-between;
+          height: 40px;
+          align-items: center;
+          .svg-icon.chevron-down, .svg-icon.chevron-up {
+            height: 10px;
+            width: 10px;
+          }
+
+          &:after {
+            border-top: 1px solid $tlv-gray;
+            height: 40px;
             position: absolute;
             left: 0;
             right: 0;
-            height: 20px;
-            display: inline-block;
             content: ' ';
-            background-color: $light-gray;
           }
-
-          &.tree-node-clicked::before {
+          @-moz-document url-prefix() {
+            &:after {
+              top: 0;
+            }
+          }
+          &.tree-node-selected::before {
             position: absolute;
-            left: 4px;
-            right: 4px;
+            left: 0;
+            right: 0;
             height: 20px;
             display: inline-block;
             content: ' ';
-            font-weight: bold;
-            background-color: $white;
+            background-color: $tlv-gray;
+            color: $blue;
           }
 
+          &.tree-node-clicked {
+            color: $blue;
+            &:after {
+              background: $tlv-gray;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              right: 0;
+              content: ' ';
+            }
+          }
+          .tree-node-name {
+            cursor: pointer;
+          }
+          .name-section {
+            z-index: 1;
+            flex: 1;
+            @include ellipsis(auto);
+          }
           .tree-node-expander {
             position: relative;
             display: inline-block;
             cursor: pointer;
-            .fa {
-              position: absolute;
-              left: -7px;
-              top: -11px;
-              @include transition(transform 0.3s);
-            }
-            &.tree-node-expander-collapsed .fa {
-              @include transform-rotate(-90);
-            }
           }
-
           .tree-node-icon {
             margin: 0 7px;
-            color: $text-black;
-            opacity: .5;
-            .tree-node-validation-error::after {
-              content: "!";
-              font-weight: bold;
-              position: absolute;
-              color: $red;
-              font-size: large;
-              left: -7px;
-              bottom: -5px;
-            }
-          }
-
-          .error-status {
-            color: $red;
-            &.error-status-selected {
-              font-weight: bold;
-            }
-            &.error-status-hovered {
-              font-weight: bold;
-              background-color: $blue;
-            }
-          }
-
-          .tree-element-text {
-            @extend %noselect;
-            position: relative;
-            padding-right: 5px;
-            &.error-status-selected {
-              font-weight: bold;
-            }
           }
         }
-
       }
     }
   }
-  .software-product-attachments-separator {
-    border: 1px solid $tlv-light-gray;
+  .vsp-attachments-heat-validation-separator {
+    border-left: 1px solid $tlv-light-gray;
     height: 100%;
     width: 5px;
     cursor: e-resize;
   }
 
-  .software-product-attachments-error-list {
-    text-align: center;
-    margin-top: 12px;
-    display: flex;
-    align-content: flex-start;
-    flex-direction: column;
-    padding-left: 70px;
-    padding-right: 50px;
+  .message-board-section {
+    @extend .flex-column;
+    padding-left: 25px;
+    padding-top: 10px;
+    padding-right: 60px;
     overflow: auto;
     margin-bottom: 70px;
     .error-item {
-      &.selected {
-        background-color: $light-gray;
-      }
-      &.clicked {
-        color: $blue;
-      }
-      &.shifted {
-        margin-top: 20px;
-      }
-      text-align: left;
-      .error-item-file-name {
-        font-weight: bold;
-      }
+      display: flex;
+      margin: 10px 0;
       .error-item-file-type {
+        margin-left: 15px;
+      }
+      .error-file-name {
+        @extend .body-1-medium;
         margin-right: 5px;
-        &.strong {
-          font-weight: bold;
-        }
-        &.ERROR {
-          color: $red;
-        }
-        &.WARNING {
-          color: $yellow;
-        }
       }
     }
 
-    .error-item:hover {
-      cursor: default;
-      background-color: $tlv-hover;
-    }
   }
 
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
new file mode 100644
index 0000000000..164e3bc261
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
@@ -0,0 +1,3 @@
+.section-title.software-product-compute-number-of-vms{
+  text-transform: initial;
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index 4ff2d2c14a..67d76f5454 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -3,6 +3,9 @@
     .one-line-textarea {
       height: 30px;
     }
+    .multi-line-textarea > textarea {
+      height: 113px;
+    }
   }
   .additional-validation-form {
     margin-top: 50px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index 6097f3ef52..e14ab02fcd 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -1,10 +1,5 @@
 .vsp-components-network {
   .network-data {
-    .network-data-title {
-      @extend .body-2-medium;
-      padding-bottom: 20px;
-      padding-left: 15px;
-    }
     .single-col {
       .validation-input-wrapper {
         label {
@@ -27,7 +22,14 @@
       padding-right: 50px;
       padding-top: 20px;
       height: 500px;
-      overflow-y: auto;
+      .grid-section {
+        padding-bottom: 15px;
+        .section-title {
+          @extend .heading-5;
+          padding-bottom: 10px;
+          padding-left: 0px;
+        }
+      }
       .part-title {
         @extend .heading-5;
         padding-bottom: 10px;
@@ -36,11 +38,44 @@
       .part-title-small {
         @extend .heading-3;
         padding-bottom: 10px;
-        padding-left: 14px;
+        padding-left: 0px;
       }
       .network-radio label {
         font-size: 15px;
       }
+
+      .packets-bytes-gen {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        .top-row {
+          display: flex;
+          .part-title-small {
+            padding-left: 0px;
+            &.packets {
+              flex: 0 0 52%;
+            }
+            &.bytes {
+              flex: 0 0 48%;
+            }
+          }
+        }
+        .bottom-row {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: row;
+          flex: 1;
+          .inputs-wrapper {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            flex: 1;
+            .validation-input-wrapper {
+              flex: 0 0 22%;
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
new file mode 100644
index 0000000000..a6613190fd
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -0,0 +1,8 @@
+.edit-process-modal {
+  .vsp-process-dropzone-view .grid-section {
+    padding-bottom: 30px !important;
+  }
+  .component-process-description > textarea {
+    height: 113px;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
new file mode 100644
index 0000000000..01a50dd741
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -0,0 +1,25 @@
+.software-product-dependencies {
+    .software-product-dependencies-title {
+        @extend .heading-1;
+        @extend .text-uppercase !optional;
+        margin-bottom: 20px;
+        color: $blue;
+    }
+    .select-action-table-controllers {
+        justify-content: flex-end;
+        cursor: pointer;
+        color: $blue;
+        padding-right: 33px;
+        margin-bottom: 3px;
+        &:hover {
+            color: $dark-blue;
+        }
+    }
+    .select-action-table-view {        
+        min-width: 770px;
+    }
+    .select-action-table-header {
+        @extend .body-1-medium;
+        color: $text-black;
+    }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index e40bb38ea9..e75b110425 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -10,18 +10,40 @@
     @extend .body-1-medium;
   }
 }
+
+
 .software-product-view {
   display: flex;
   height:100%;
 
   .description {
     @extend .body-1;
-    overflow: hidden;
+    // overflow: hidden;
     padding-right: 20px;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+    // text-overflow: ellipsis;
+    // display: -webkit-box;
+    // -webkit-line-clamp: 2;
+    // -webkit-box-orient: vertical;
+
+    .missing-license {
+      display: flex;
+      align-items: baseline;
+      .svg-icon.exclamation-triangle-full {
+        fill: $orange;
+      }
+      .warning-text {
+        position: relative;
+        top: -2px;
+      }
+      .svg-icon-wrapper {
+        margin-right: 7px;
+        margin-left: 3px;
+        .svg-icon {
+          height: 17px;
+          width: 17px;
+        }
+      }
+    }
   }
   .name {
     @extend .body-1-medium;
@@ -29,11 +51,6 @@
   .software-product-landing-view-right-side {
     @extend .flex;
     overflow-y: hidden;
-    .processes-page-title {
-      padding-top: 38px;
-      padding-left: 53px;
-      padding-bottom: 20px;
-    }
     .list-editor-view {
       .list-editor-view-title {
         margin-bottom: 0;
@@ -53,22 +70,36 @@
     .software-product-landing-view-top {
       .details-container {
         @extend .flex-column;
+
         .single-detail-section {
+
           @extend  .flex-column;
           &.title-section {
             flex: 0.8;
             @extend .heading-5-medium;
           }
+          &.title-text {
+            margin-bottom: 24px;
+          }
+          .description {
+              @include multiline-ellipsis();
+          }
+        }
+        .title {
+          @extend .body-3;
+          color: $gray;
+          &.extra-large {
+            min-width: 130px;
+          }
+        }
+        .details-section {
+          display: flex;
         }
         .multiple-details-section {
-          @extend .flex;
+          @extend .flex-column;
           justify-content: space-between;
           .detail-col {
-            .title {
-              &.extra-large {
-                min-width: 130px;
-              }
-            }
+            padding-bottom: 10px;
           }
         }
       }
@@ -107,8 +138,8 @@
         .software-product-landing-view-top-block {
           cursor: pointer;
           border: 1px solid $light-gray;
-          padding: 28px 28px;
-          height: 250px;
+          padding: 20px 18px 0 18px;
+          height: 215px;
           display: flex;
           justify-content: space-between;
           background-color: $white;
@@ -141,6 +172,7 @@
             flex-direction: column;
             justify-content: center;
             border: 2px dashed $light-gray;
+            margin-bottom: 20px;
             @extend .body-1;
             align-items: center;
             .upload-btn {
@@ -171,21 +203,10 @@
       margin: 43px 0;
       padding: 0 52px;
     }
-    .section-title {
-      padding: 50px 0 30px 0;
-      &.general {
-        padding-top: 0;
-      }
-    }
     .validation-form-content {
       .vsp-general-tab-inline-section {
         display: flex;
-        &.coupling-items {
-          justify-content: flex-start;
-          .validation-input-wrapper:not(:last-child) {
-            margin-right: 40px;
-          }
-        }
+
         .vsp-general-tab-sub-section:not(:last-of-type) {
           margin-right: 40px;
         }
@@ -205,16 +226,6 @@
           width: 440px;
         }
       }
-
-      .vsp-general-tab-section {
-        &.licenses {
-          >.vsp-general-tab-inline-section {
-            .validation-input-wrapper:first-child {
-              margin-right: 40px;
-            }
-          }
-        }
-      }
     }
     .validation-buttons {
       position: fixed;
@@ -223,7 +234,9 @@
       width: 66%;
     }
     .validation-input-wrapper {
-      flex: none;
+      select.form-control {
+        width: 100%;
+      }
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
deleted file mode 100644
index 780f348374..0000000000
--- a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.vsp-networks {
-  .wrapper {
-    display: flex;
-    height: 100%;
-    .left-side{
-      height:100%
-    }
-    .right-side {
-      width:100%;
-      .network-data {
-        padding-left: 60px;
-        padding-right: 60px;
-        padding-top: 18px;
-        .network-data-title {
-          @extend .body-2-medium;
-          padding-bottom: 20px;
-          padding-left: 15px;
-        }
-      }
-
-    }
-  }
-}
-
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 167dad92e2..4956616687 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -51,12 +51,15 @@
             opacity: 0.5;
           }
         }
+        .grid-section {
+          .section-title {
+            padding-bottom: 0px;
+          }
+        }
       }
       .validation-input-wrapper {
-        .form-group {
-          .vsp-process-description {
-            height: 200px;
-          }
+        .form-group.vsp-process-description > textarea {
+            height: 113px;
         }
       }
     }
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 731ab89571..04cb3c2051 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,4 +1,13 @@
 .vsp-components-load-balancing {
+	.svg-icon-wrapper {
+		position: relative;
+    top: -3px;
+		.svg-icon.chevron-up, .svg-icon.chevron-down {
+			width: 10px;
+			height: 10px;
+		}
+	}
+
   .halb-data {
     .load-balancing-page-title {
       @extend .section-title;
@@ -14,22 +23,15 @@
     }
     .title {
       @extend .body-1-medium;
-      cursor: pointer;
       margin-bottom: 8px;
-      .fa {
+			cursor: pointer;
+      .svg-icon {
         @include transition(transform 0.3s);
         margin-right: 5px;
-        font-size: $icon-font-size;
         position: relative;
-        top: -1px;
+        top: 4px;
       }
     }
-    .row {
-      padding-left: 24px;
-    }
-    .col-md-9 {
-      padding-left: 8px;
-    }
     .add-padding {
       padding-bottom: 20px;
     }
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index aad628aac8..d194c678b9 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -11,18 +11,13 @@
   }
   .component-questionnaire-validation-form {
 
-
-    .section-sub-title {
-      @extend .heading-5;
-      padding-bottom: 10px;
-    }
     .section-field {
       textarea {
         height: 80px;
       }
     }
 
-    .rows-section {
+    .rows-section, .grid-items {
       .row-flex-components {
         display: flex;
       }
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
new file mode 100644
index 0000000000..59e983686b
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -0,0 +1,316 @@
+@mixin modules-and-artifacts-list-items {
+	background-color: $tlv-gray;
+	margin-bottom: 12px;
+	border: 1px solid $light-gray;
+	border-left-width: 18px;
+	border-left-color: $blue;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+  padding: 10px 20px 0 20px;
+}
+
+.heat-setup-view {
+	margin-top: 20px;
+	display: flex;
+	justify-content: space-between;
+  padding: 0 60px 0 36px;
+
+	.heat-setup-view-modules-and-artifacts {
+		margin-right: 20px;
+		flex: 1;
+		.heat-setup-module-icon {
+		  margin: 0 6px 0 0;
+		  position: relative;
+		  top: -2px;
+		}
+		.modules-list-wrapper {
+			padding-bottom: 20px;
+			margin-bottom: 20px;
+			border-bottom: 1px solid $tlv-light-gray;
+			ul {
+				.undefined-dragging {
+					opacity: 0.5;
+				}
+				.modules-list-item-selectors {
+					display: flex;
+					justify-content: space-between;
+					flex-wrap: wrap;
+
+					.Select-value-label {
+						@include ellipsis(85%);
+					}
+
+					.validation-input-wrapper {
+						flex-basis: 48%;
+					}
+
+					.control-label {
+						margin-bottom: 4px;
+					}
+
+					.form-group {
+						margin-bottom: 12px;
+					}
+				}
+			}
+
+			.modules-list-controllers {
+				text-align: right;
+				.btn-link {
+					&[disabled] {
+						color: $gray;
+					}
+					@extend .body-1;
+					color: $blue;
+					&:last-child {
+						padding-right: 0;
+					}
+					&:hover {
+						color: $dark-blue;
+						text-decoration: none;
+					}
+				}
+			}
+
+			.modules-list-item-controllers {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 7px;
+
+				.btn {
+					min-width: 0;
+				}
+
+				.svg-icon.trash-o {
+					fill: $dark-gray;
+					height: 18px;
+					width: 18px;
+					&:hover {
+						fill: $black;
+					}
+				}
+				.module-title-by-type {
+					@extend .heading-5-medium;
+					margin-right: 3px;
+				}
+				.modules-list-item-filename {
+					display: flex;
+					align-items: center;
+
+					.svg-icon.pencil {
+						height: 15px;
+						width: 15px;
+						margin-left: 3px;
+						opacity: 0;
+					}
+
+					.filename-text {
+						@extend .heading-5-medium;
+
+					}
+
+					.text-and-icon {
+						padding: 5px;
+						border: 1px solid transparent;
+						display: flex;
+						align-items: center;
+						height: 35px;
+						&.in-edit {
+							padding: 0;
+							.name-edit {
+								padding: 4px;
+								@extend .heading-5-medium;
+								height: 100%;
+								border: 1px solid $light-gray;
+								width: 400px;
+							}
+						}
+					}
+
+					input[disabled] {
+						border: none;
+					}
+					&:hover {
+						.text-and-icon {
+							border-color: $light-gray;
+							background-color: $white;
+
+							&.in-edit {
+								border-color: transparent;
+							}
+						}
+						.svg-icon.pencil {
+							margin-left: 10px;
+							opacity: 1;
+							stroke: $dark-gray;
+							&:hover {
+								stroke: $black;
+							}
+						}
+					}
+				}
+			}
+
+			.modules-list-item {
+				@include modules-and-artifacts-list-items;
+				position: relative;
+				.Select-option {
+					@extend .body-1;
+					&.is-selected {
+						@extend .body-1-medium;
+						background-color: $white;
+					}
+					&.is-focused {
+						background-color: $blue;
+						color: $white;
+					}
+				}
+				.add-or-delete-volumes {
+					.svg-icon-wrapper {
+						margin-right: 8px;
+						.svg-icon {
+							height: 10px;
+							width: 10px;
+							fill: $blue;
+						}
+					}
+					cursor: pointer;
+					color: $blue;
+					margin-bottom: 11px;
+					&:hover {
+						color: $dark-blue;
+						.svg-icon {
+							fill: $dark-blue;
+						}
+					}
+				}
+				&:before {
+					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
+					color: $white;
+					position: absolute;
+					left: -27px;
+					top: 56%;
+					font-size: 27px;
+					width: 75px;
+					@include transform-rotate(90);
+					height: 0;
+					letter-spacing: 1px;
+				}
+			}
+		}
+
+		.artifact-files {
+			@include modules-and-artifacts-list-items;
+			margin-top: 20px;
+
+			&.nested {
+				.nested-list {
+					display: flex;
+					flex-wrap: wrap;
+					margin-bottom: 18px;
+				}
+
+				.nested-list-item {
+					border-radius: 15px;
+					background-color: $tlv-light-gray;
+					padding: 4px 15px;
+					margin: 2px 10px 2px 0;
+				}
+			}
+
+			.artifact-files-header {
+				@extend .heading-5-medium;
+				display: flex;
+				margin-bottom: 10px;
+				justify-content: space-between;
+				.image-icon.artifacts {
+					margin-right: 10px;
+				}
+
+				span {
+					display: flex;
+				}
+
+				.add-all-unassigned {
+					@extend .body-1;
+					margin-bottom: 0;
+					color: $blue;
+					cursor: pointer;
+					&:hover {
+						color: $dark-blue;
+					}
+				}
+			}
+		}
+	}
+
+	.unassigned-files {
+		margin-top: 30px;
+		border: 1px solid $light-gray;
+		width: 25%;
+		background-color: $white;
+		height: 250px;
+		width: 250px;
+
+		// Will work in chrome from chrome 56
+		position: sticky;
+		top: 10px;
+
+		.unassigned-files-title {
+			@extend .heading-5-medium;
+			background-color: $tlv-gray;
+			padding: 11px 0 9px 15px;
+		}
+
+		.unassigned-files-list {
+			height: 207px;
+    	overflow-y: auto;
+    	padding-bottom: 5px;
+
+			.go-to-validation-button-wrapper {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				margin-top: 70px;
+				.all-files-assigned {
+					@extend .heading-4;
+					margin-bottom: 10px;
+				}
+				.link {
+					color: $blue;
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					margin-bottom: 10px;
+					.svg-icon.angle-right {
+						height: 10px;
+						width: 10px;
+						margin-left: 7px;
+						fill: $blue;
+					}
+					&:hover {
+						color: $dark-blue;
+						.svg-icon.angle-right {
+							fill: $dark-blue;
+						}
+					}
+				}
+			}
+
+			.unassigned-files-list-item {
+				@include ellipsis();
+				border-bottom: 1px solid $tlv-light-gray;
+				padding: 0 5px 5px 15px;
+				&:first-child {
+					padding-top: 5px;
+				}
+				&:last-child {
+					border-bottom: none;
+					padding-bottom: 0;
+				}
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
new file mode 100644
index 0000000000..d29a95d3d6
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -0,0 +1,33 @@
+.catalog-header {
+  margin: 34px 0 29px 50px;
+  display: flex;
+  flex-direction: row;
+  .expandable-input-top {
+	margin-right: 60px;
+  }
+  &.workspace-header {
+	@extend .heading-1;
+	color: $blue;
+  }
+  .catalog-header-tabs {
+	display: flex;
+	flex-direction: row;
+	.tab-separator {
+	  position: relative;
+	  top: 13px;
+	}
+	.catalog-header-tab {
+	  @extend .heading-1;
+	  cursor: pointer;
+	  padding: 0 15px 0 15px;
+	  display: flex;
+	  align-items: center;
+	  &.active {
+		color: $blue;
+	  }
+	  &:first-child {
+		padding-left: 0;
+	  }
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
new file mode 100644
index 0000000000..071268c50d
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -0,0 +1,31 @@
+.catalog-list {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px 0 42px;
+  .catalog-title {
+	@extend .heading-1;
+	color: $blue;
+	margin:0 0 12px 18px;
+  }
+
+  .catalog-items {
+	display: flex;
+	flex-wrap: wrap;
+	@import "tile";
+	@import "createItemTile";
+	@import "catalogTile";
+	@import "vendorTile";
+	@import "vlmTile";
+	&:after {
+	  content: " ";
+	  height: 250px;
+	  display: block;
+	  width: 100%;
+	}
+  }
+
+  // Bottom spacing - cross browser solution
+
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
new file mode 100644
index 0000000000..5ce8e12ec3
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -0,0 +1,139 @@
+.catalog-tile {
+		&:hover {
+		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+		border: 1px solid $light-gray;
+	}
+  .catalog-tile-top {
+	position: relative;
+	flex: 1;
+	display: flex;
+	padding-top: 29px;
+	padding-left: 10px;
+	align-items: flex-start;
+	flex-direction: column;
+		.catalog-tile-content {
+			margin-top: auto;
+			width: 180px;
+		}
+
+
+	.catalog-tile-type {
+		display: block;
+    margin-top: -25px;
+		font-size: $heading-font-5;
+		&.license-model-type {
+			color: $purple;
+		}
+		&.software-product-type {
+			color: $blue;
+		}
+	}
+	.catalog-tile-entity-details {
+		margin-top:23px;
+		.catalog-tile-version-info{
+			display: flex;
+			justify-content: space-between;
+
+			.catalog-tile-item-version {
+				@extend .body-2;
+				line-height: 6px;
+			}
+		}
+		.catalog-tile-vendor-name {
+			@extend .body-3-medium;
+			color: $gray;
+			line-height: 12px;
+			@include ellipsis(auto,inline-block,178px);
+		}
+
+  }
+		.catalog-tile-item-name {
+			@extend .heading-5-medium;
+			color: $black;
+			@include ellipsis(auto,inline-block,175px);
+		}
+	}
+  .catalog-tile-icon {
+
+	width: 58px;
+	height: 58px;
+	text-align: center;
+	justify-content: center;
+	display: flex;
+
+	.icon {
+	  align-self: center;
+	  height: 58px;
+	  width: 58px;
+		margin-left: 122px;
+	  background-repeat: no-repeat;
+	  .svg-icon {
+		&.vendor {
+		  fill: $dark-gray;
+		  margin-top: 22px;
+		  width: 53px;
+		  height: 47px;
+		  &:hover {
+			fill: $dark-gray;
+		  }
+		}
+		&.vsp {
+		  fill: $light-blue;
+		  margin-top: 18px;
+		  margin-left: 3px;
+		  width: 60px;
+		  height: 40px;
+		}
+		&.vlm {
+		  fill: $purple;
+		  margin-top: 18px;
+		  width: 45px;
+		  height: 53px;
+		}
+
+	  }
+	}
+  }
+  .catalog-tile-content {
+	border-top: 1px solid $background-gray;
+	padding-top: 5px;
+	display: flex;
+	justify-content: space-between;
+	margin-top:2px;
+	padding-bottom: 3px;
+	@extend .body-2-medium;
+	.svg-icon.plus {
+	  height: 9px;
+	  width: 9px;
+	  fill: $blue;
+	}
+	.catalog-tile-item-details {
+	  overflow: hidden;
+	}
+
+	.catalog-tile-add-new-vsp {
+	  color: $blue;
+	  margin-left:40px;
+	}
+	.catalog-tile-locking-user-name {
+	  @extend .body-2;
+	  @include ellipsis(auto,inline-block,180px);
+	}
+		.catalog-tile-check-in-status {
+			.svg-icon-wrapper {
+				.svg-icon {
+					&.locked {
+					margin-left: 7px;
+					width: 11px;
+					fill: $gray;
+					}
+					&.unlocked {
+					margin-left: 7px;
+					width: 11px;
+					fill: $gray;
+					}
+				}
+			}
+		}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
new file mode 100644
index 0000000000..b9f83fc452
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -0,0 +1,71 @@
+.create-catalog-item-wrapper {
+  width: 204px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  margin: 9px;
+
+  .tile.create-catalog-item {
+	margin: 9px 0 9px 0;
+	display: flex;
+	background-color: $white;
+	&:first-child{margin-top: 0;}
+	&:last-child{margin-bottom: 0;}
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	&.disabled {
+	  color: $gray;
+	  .create-item-plus-icon {
+		fill: $gray;
+	  }
+	}
+	&:hover {
+		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+		
+		border: 1px solid $light-gray;
+	}
+	&:only-child {
+	  text-align: center;
+	  flex-direction: column;
+	  justify-content: center;
+	  .create-item-plus-icon {
+		margin: 0 0 15px 0;
+	  }
+	  .create-item-text {
+		@extend .heading-4-medium;
+	  }
+	}
+	.create-item-plus-icon{
+	  width: 19px;
+	  height: 19px;
+	  margin: -5px 12px 0 0;
+			.svg-icon.plus {
+			height: 19px;
+			width: 19px;		
+		}
+	}
+	&.vlm-type {
+	  .create-item-text {
+		color: $purple;
+	  }
+	 
+	  .create-item-plus-icon {
+		fill: $purple;
+	  }
+	}
+	&.vsp-type {
+	  .create-item-text {
+		color: $blue;
+	  }
+	 
+	  .create-item-plus-icon {
+		fill: $blue;
+	  }
+	}
+	.create-item-text {
+	  width: 140px;
+	  @extend .heading-5-medium;
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
new file mode 100644
index 0000000000..da4c017d39
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -0,0 +1,31 @@
+.onboard-header {
+  padding-top: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: $tlv-light-gray;
+  margin-bottom: 2px;
+  @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+  .expandable-input-top {
+	margin-right: 60px;
+	margin-left: auto;
+  }
+  .onboard-header-tabs {
+	display: flex;
+	flex-direction: row;
+	margin-left: 60px;
+	.onboard-header-tab {
+	  @extend .body-1-medium;
+	  margin-right: 40px;
+	  cursor: pointer;
+	  display: flex;
+	  padding-bottom: 5px;
+	  align-items: flex-end;
+	  &.active {
+		color: $blue;
+		padding-bottom: 2px;
+		border-bottom: 3px solid $blue;
+	  }
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
new file mode 100644
index 0000000000..217098fb97
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -0,0 +1,14 @@
+.tile {
+  background-color: $white;
+  margin: 9px;
+  width: 204px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  border: 1px solid $tlv-light-gray;
+  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+  &:active {
+	border: 1px solid $light-blue;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
new file mode 100644
index 0000000000..f1af28a0a0
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -0,0 +1,21 @@
+.vendor-page-header {
+  display: flex;
+  align-items: center;
+  margin-top: 34px;
+  margin-left: 9px;
+  margin-bottom: 29px;
+  .vendor-name {
+	@extend .heading-1;
+	color: $blue;
+	margin-left: 20px;
+	text-transform: uppercase;
+  }
+  .svg-icon-wrapper {
+	padding: 5px 18px 5px 0;
+	.svg-icon.back {
+	  height: 25px;
+	  width: 25px;
+	  fill: $blue;
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
new file mode 100644
index 0000000000..79a64f84ee
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -0,0 +1,88 @@
+@mixin flipOverlayDirection($itemsInRow) {
+  &:nth-child(#{$itemsInRow}n){
+		.vsp-overlay-wrapper {
+			right: 74%;			
+			left: inherit;
+			.vsp-overlay-arrow {
+				border-right-color: transparent;
+				border-left-color: $tlv-light-gray;
+				border-right-width: 2px;
+				border-left-width: 6px;
+				left: 100%;
+				&:after {
+					border-left-color: $white;
+					border-right-color: transparent;
+					left: -11px;
+				}
+			}
+		}
+  }
+}
+
+
+.catalog-tile.vendor-type {
+  position: relative;
+  .catalog-tile-top {
+		.catalog-tile-item-name {
+			margin-top:21px;
+		}
+		.catalog-tile-vsp-count {
+			@extend .body-3-medium;
+			margin-top: 8px;
+			margin-left: 54px;
+			margin-bottom: 9px;
+			color: $dark-gray;
+			border: 1px solid $dark-gray;
+			padding: 0 15px 0 15px;
+			border-radius: 15px;
+			
+			&.clickable {
+				&:hover {
+					background-color: #eceff3;
+					color: $dark-gray ;
+				}	
+			}			
+			&.active {
+				background-color: $white;
+				color: $dark-gray ;				
+			}
+		}
+  }
+
+  .catalog-tile-content {
+		flex-basis: auto;
+		max-height: 31px;
+		height: 31px;
+		text-align: center;
+		color: $blue;
+		display: block;
+		background-color: $white;
+		margin-bottom: 7px;
+		padding-bottom: 0px;
+		.create-new-vsp-button {
+			margin-top: 1px;
+		}
+		&:hover {
+			color: $dark-blue;
+			.svg-icon.plus {
+			fill: $dark-blue;
+			}
+		}
+		&.disabled {
+			cursor: default;
+		}
+  }
+  @media (min-width: 1900px){
+	@include flipOverlayDirection($itemsInRow: 8);
+  }
+  @media (min-width: 1586px) and (max-width: 1899px){
+	@include flipOverlayDirection($itemsInRow: 7);
+  }
+  @media (min-width: 1368px) and (max-width: 1585px){
+	@include flipOverlayDirection($itemsInRow: 6);
+  }
+  @media (max-width: 1367px){
+	@include flipOverlayDirection($itemsInRow: 5);
+  }
+  @import "vspOverlay";
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
new file mode 100644
index 0000000000..721a4f3f22
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
@@ -0,0 +1,8 @@
+.catalog-tile.license-model-type {
+  .catalog-tile-top {
+    &:hover {
+      //background-color: $purple;
+      //color: $white;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
new file mode 100644
index 0000000000..8816ca5df9
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -0,0 +1,74 @@
+.vsp-overlay-wrapper{
+  display:flex;
+  align-items: center;
+  position:absolute;
+  left: 68%;
+  top: 14%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 100;
+  .vsp-overlay-list {
+	padding: 0 20px;
+  }
+  .vsp-overlay-arrow {
+	border-style: solid;
+	position: relative;
+	bottom: -18px;
+	border-width: 6px;
+	border-left-width: 2px;
+	border-color: transparent;
+	border-right-color: $light-gray;
+	&:after {
+	  position: absolute;
+	  border-style: solid;
+	  bottom: -10px;
+	  left: -9px;
+	  border-width: 10px;
+	  border-color: transparent;
+	  border-right-color: $white;
+	  content:' ';
+	}
+  }
+  .vsp-overlay {
+	pointer-events: all;
+	width: 205px;
+	cursor: default;
+	background-color: $white;
+	@include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+	border-radius: 6px;
+	padding: 0 0 10px 0;
+	display: flex;
+	flex-direction: column;
+	margin: 10px 0 10px 0;
+	.vsp-overlay-title {
+	  @extend .heading-5-medium;
+	  margin-bottom: 15px;
+	  padding: 10px 20px 10px 20px;
+	  background: $highlight-gray;
+		color: $text-black;
+	  text-transform: uppercase;
+	  border-radius: 6px 6px 0 0;
+	}
+	.vsp-overlay-detail{
+	  @extend .body-2;
+	  &:hover {
+		color: $blue;
+	  }
+	  text-transform: uppercase;
+	  @include ellipsis(auto, block);
+	  border-bottom: 1px solid $tlv-light-gray;
+	  cursor: pointer;
+	  padding: 5px 0 5px 0;
+	  &:last-child {
+		border-bottom: none;
+	  }
+	}
+	.vsp-overlay-see-more{
+	  color: $blue;
+	  cursor: pointer;
+	  margin-top: 12px;
+	  align-self:center;
+	}
+
+  }
+}
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index f146b3910b..6b892ac0a4 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -1,10 +1,68 @@
 .dox-ui {
-	@import "bootstrap";
+  @import "bootstrap";
+  @import "~react-select/dist/react-select.min.css";
 
-	@import "../css/font-awesome.min.css";
-	@import "~react-select/dist/react-select.min.css";
+  @import "common";
+  @import "components";
+  @import "modules";
+}
+
+/* Out of namespace context for tooltips */
+div[data-reactroot].tooltip {
+  @import "common/variables";
+  @import "common/typography";
+
+  &.in {
+	opacity: 1;
+  }
+  &.validation-error-message {
+	&.bottom {
+	  .tooltip-arrow {
+		border-bottom-color: $red !important;
+	  }
+	}
+  }
+  &.bottom {
+	.tooltip-arrow {
+	  border-bottom-color: $dark-gray !important;
+	}
+  }
+  &.top {
+	.tooltip-arrow {
+	  border-top-color: $dark-gray !important;
+	}
+  }
+  .tooltip-inner {
+	max-width: 100%;
+	background-color: $dark-gray;
+  }
+
+  // activity log tooltip
+  &.activity-log-message-tooltip {
+	@include base-font-regular;
+	font-size: $body-font-2;
+	.message-block {
+	  text-align: left;
+	  padding: 3px 12px;
+	}
+  }
+  //dependency table error tooltip
+  &.select-action-table-error-tooltip{
+    @include base-font-regular;
+    margin-right: 5px;
+    font-size: $body-font-2;
+    .message-block {
+      text-align: left;
+      padding: 3px 12px;
+    }
+    .tooltip-arrow {
+           border-bottom-color: $red !important;
+	  }
 
-	@import "common";
-	@import "components";
-	@import "modules";
+    .tooltip-inner {
+      background-color: $red;
+      padding: 6px 8px;
+      font-size: $body-font-2;
+    }
+  }
 }