diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 13af598..5579762 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -21,6 +21,7 @@
 @import "components/commitModal";
 @import "components/userNotifications";
 @import "components/overlay";
+@import "components/accordion";
 
 %noselect {
   -webkit-touch-callout: none;
diff --git a/openecomp-ui/resources/scss/components/_accordion.scss b/openecomp-ui/resources/scss/components/_accordion.scss
new file mode 100644
index 0000000..c96bc71
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_accordion.scss
@@ -0,0 +1,28 @@
+.accordion {
+    display: flex;
+    flex-direction: column;
+    .accordion-header {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        margin-bottom: 10px;
+        .svg-icon-wrapper {
+            margin-right: 20px;
+            transition: transform .4s;
+            &.down {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .accordion-body {
+        padding-left: 10px;                
+        opacity: 0;
+        overflow-y: hidden;
+        max-height: 0;
+        transition: max-height .3s cubic-bezier(0, 1.18, 1, 1), opacity 0.33s linear;
+        &.open {                       
+            opacity: 1;
+            max-height: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 1201d4a..39f7636 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -4,8 +4,13 @@
 	background-color: $background-gray;
 	overflow: hidden;
 	height: 100%;
-	@import "onboardingCatalog/onboardHeader";
-	@import "onboardingCatalog/catalogHeader";
+	display: flex;
+	@import "onboardingCatalog/catalogFilter.scss";
+	.catalog-parts {
+		width: 100%;
+		@import "onboardingCatalog/onboardHeader";
+		@import "onboardingCatalog/catalogHeader";
+	}	
 	@import "onboardingCatalog/vendorPageHeader";
 	@import "onboardingCatalog/catalogList";
 	@import "onboardingCatalog/vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
new file mode 100644
index 0000000..84657b1
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -0,0 +1,11 @@
+.catalog-filter {
+    width: 242px;
+    overflow-y: auto;    
+    height: 100%;
+    box-shadow: 1px 0px 4px 0px rgba(24, 24, 25, 0.17);
+    background-color: $white;
+    padding: 12px 18px;    
+    .form-group {
+        margin-bottom: 10px;
+    }
+}
\ No newline at end of file