Merge "rename ui project from client-franfurt to designer-client"

48 files changed, 2644 insertions, 0 deletions

diff --git a/cds-ui/designer-client/src/app/app-routing.module.ts b/cds-ui/designer-client/src/app/app-routing.module.ts
new file mode 100644
index 000000000..c6e42cb0b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app-routing.module.ts
@@ -0,0 +1,41 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+const routes: Routes = [
+    {path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+    // { path: '', component: MainAppComponent },
+    {
+        path: '',
+        redirectTo: 'packages',
+        pathMatch: 'full'
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {
+}
+
diff --git a/cds-ui/designer-client/src/app/app.component.css b/cds-ui/designer-client/src/app/app.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app.component.css
diff --git a/cds-ui/designer-client/src/app/app.component.html b/cds-ui/designer-client/src/app/app.component.html
new file mode 100644
index 000000000..693dba7c3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app.component.html
@@ -0,0 +1,7 @@
+<router-outlet></router-outlet>
+<!-- <app-header></app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <router-outlet></router-outlet>
+    </div>
+</div> -->
diff --git a/cds-ui/designer-client/src/app/app.component.spec.ts b/cds-ui/designer-client/src/app/app.component.spec.ts
new file mode 100644
index 000000000..037b400b6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app.component.spec.ts
@@ -0,0 +1,56 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'designer-client'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('designer-client');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('designer-client app is running!');
+  });
+});
diff --git a/cds-ui/designer-client/src/app/app.component.ts b/cds-ui/designer-client/src/app/app.component.ts
new file mode 100644
index 000000000..03d91759b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app.component.ts
@@ -0,0 +1,32 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+
+export class AppComponent {
+  title = 'designer-client';
+}
diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts
new file mode 100644
index 000000000..20b9b4d7b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/app.module.ts
@@ -0,0 +1,57 @@
+
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {AngularFontAwesomeModule} from 'angular-font-awesome';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatTabsModule} from '@angular/material/tabs';
+import {ApiService} from './common/core/services/api.service';
+import {HttpClientModule} from '@angular/common/http';
+import {PackagesModule} from './modules/feature-modules/packages/packages.module';
+import { SidebarModule } from 'ng-sidebar';
+import {SharedModulesModule} from './modules/shared-modules/shared-modules.module';
+
+@NgModule({
+    declarations: [
+        AppComponent,
+    ],
+    imports: [
+        BrowserModule,
+        NgbModule,
+        AngularFontAwesomeModule,
+        AppRoutingModule,
+        NoopAnimationsModule,
+        MatTabsModule,
+        HttpClientModule,
+        PackagesModule,
+        SharedModulesModule,
+    ],
+
+    providers: [ApiService],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}
diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts
new file mode 100644
index 000000000..cfe8061f3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts
@@ -0,0 +1,117 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 Orange
+
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+export const GlobalContants = {
+    endpoints: {},
+    cbawizard: {
+        stepsRequired:
+            {
+                stepCount: 4,
+                steps: [{
+                    name: 'CBA Metadata',
+                    componentURL: '/controllerBlueprint/selectTemplate',
+                    label: 'CBA Metadata',
+                    link: '/blueprint/selectTemplate',
+                    index: 0,
+                    component: 'SelectTemplateComponent'
+                },
+                    {
+                        name: 'Controller Blueprint Designer',
+                        componentURL: '/controllerBlueprint/modifyTemplate',
+                        label: 'Controller Blueprint Designer',
+                        link: '/blueprint/modifyTemplate',
+                        index: 1,
+                        component: 'ModifyTemplateComponent'
+                    },
+                    {
+                        name: 'Test',
+                        componentURL: '/controllerBlueprint/testTemplate',
+                        label: 'Test',
+                        link: '/blueprint/testTemplate',
+                        index: 2,
+                        component: 'TestTemplateComponent'
+                    },
+                    {
+                        name: 'Deploy',
+                        componentURL: '/controllerBlueprint/deployTemplate',
+                        label: 'Deploy',
+                        link: '/blueprint/deployTemplate',
+                        index: 3,
+                        component: 'DeployTemplateComponent'
+                    }]
+            }
+    },
+    datadictionary: {
+        stepsRequired:
+            {
+                stepCount: 3,
+                steps: [{
+                    name: 'Resource Creation', componentURL: '/dataDictionary/selectTemplate',
+                    label: 'Resource Creation',
+                    component: 'ResourceCreationComponent'
+
+                },
+                    {
+                        name: 'Edit/Validate', componentURL: '/dataDictionary/modifyTemplate',
+                        label: 'Edit/Validate',
+                        component: 'ResourceEditComponent'
+                    },
+                    {
+                        name: 'Save', componentURL: '/dataDictionary/saveTemplate',
+                        label: 'Save Resource',
+                        component: 'SaveResourceComponent'
+                    }]
+            }
+
+    }
+};
+
+export const BlueprintURLs = {
+    getAllBlueprints: '/controllerblueprint/all',
+    getPagedBlueprints: '/controllerblueprint/paged',
+    searchByTag: '/controllerblueprint/searchByTags/',
+    save: '/controllerblueprint/create-blueprint',
+    publish: '/controllerblueprint/publish',
+    enrich: '/controllerblueprint/enrich-blueprint',
+    download: '/controllerblueprint/download-blueprint/',
+    deploy: '/controllerblueprint/deploy-blueprint',
+    getMetaDate: '/controllerblueprint/meta-data/',
+    countOfAllBluePrints: '/controllerblueprint/list/count',
+    getMetaDatePageable: '/controllerblueprint/metadata/paged'
+};
+
+export const ResourceDictionaryURLs = {
+    saveResourceDictionary: '/resourcedictionary/save',
+    searchResourceDictionaryByTags: '/resourcedictionary/search',
+    searchResourceDictionaryByName: '',
+    getSources: '/resourcedictionary/source-mapping',
+    getModelType: '/resourcedictionary/model-type',
+    getDataType: '/resourcedictionary/model-type/by-definition/data_type'
+};
+
+export const ControllerCatalogURLs = {
+    searchControllerCatalogByTags: '/controllercatalog/search',
+    saveControllerCatalog: '/controllercatalog/save',
+    getDefinition: '/controllercatalog/model-type/by-definition',
+    getDerivedFrom: '/controllercatalog/model-type/by-derivedfrom'
+};
diff --git a/cds-ui/designer-client/src/app/common/core/services/api.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.service.ts
new file mode 100644
index 000000000..de8aab886
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/services/api.service.ts
@@ -0,0 +1,51 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 Orange
+
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams} from '@angular/common/http';
+import {Observable, of} from 'rxjs';
+
+@Injectable()
+export class ApiService {
+
+    constructor(private httpClient: HttpClient) {
+    }
+
+    get(url: string, params?: {}): Observable<any> {
+        console.log('params', params);
+        let httpParams = new HttpParams();
+        for (const key in params) {
+            if (params.hasOwnProperty(key)) {
+                httpParams = httpParams.append(key, params[key]);
+            }
+        }
+        const options = {params: httpParams};
+        return this.httpClient.get(url, options);
+    }
+
+    post(url: string, body: any | null, options?: any): Observable<any> {
+
+        return this.httpClient.post(url, body, options);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts
new file mode 100644
index 000000000..2f3778c1a
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts
@@ -0,0 +1,51 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+
+Modifications Copyright (C) 2019 Orange
+
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class ApiService<T> {
+
+    constructor(private httpClient: HttpClient) {
+    }
+
+    get(url: string, params?: {}): Observable<T[]> {
+        console.log('params', params);
+        let httpParams = new HttpParams();
+        for (const key in params) {
+            if (params.hasOwnProperty(key)) {
+                httpParams = httpParams.append(key, params[key]);
+            }
+        }
+        const options = {params: httpParams};
+        return this.httpClient.get<T[]>(url, options);
+    }
+
+    post(url: string, body: any | null, options?: any): Observable<any> {
+
+        return this.httpClient.post(url, body, options);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/common/core/stores/Store.ts b/cds-ui/designer-client/src/app/common/core/stores/Store.ts
new file mode 100644
index 000000000..1d5b0afc1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/stores/Store.ts
@@ -0,0 +1,22 @@
+import {Observable, BehaviorSubject} from 'rxjs';
+import { Injectable } from '@angular/core';
+
+export class Store<T> {
+    state$: Observable<T>;
+    private subject: BehaviorSubject<T>;
+
+    protected constructor(initialState: T) {
+        this.subject = new BehaviorSubject(initialState);
+        this.state$ = this.subject.asObservable();
+    }
+
+    get state(): T {
+        return this.subject.getValue();
+    }
+
+    protected setState(nextState: T): void {
+        console.log('setting state', this.subject);
+        this.subject.next(nextState);
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/common/model/page.ts b/cds-ui/designer-client/src/app/common/model/page.ts
new file mode 100644
index 000000000..7c3a0c4f3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/model/page.ts
@@ -0,0 +1,21 @@
+export class Page<T> {
+    content: T[];
+    pageable: {
+        sort: {
+            unsorted: boolean,
+            sorted: boolean,
+            empty: boolean
+        };
+
+        offset: number,
+        pageSize: number,
+        pageNumber: number,
+        paged: boolean,
+        unpaged: boolean,
+    };
+    totalPages: number;
+    totalElements: number;
+    last: boolean;
+    first: boolean;
+    empty: boolean;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/blueprint.page.mock.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/blueprint.page.mock.ts
new file mode 100644
index 000000000..9e0ce71d2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/blueprint.page.mock.ts
@@ -0,0 +1,50 @@
+import { BluePrintPage } from './model/BluePrint.model';
+export function getBluePrintPageMock(): BluePrintPage {
+    return {
+        content: [
+            {
+                id: 'bc0dabea-3112-4202-a4b9-6a525bcc19a9',
+                artifactUUId: null,
+                artifactType: 'SDNC_MODEL',
+                artifactVersion: '1.0.0',
+                artifactDescription: 'Controller Blueprint for vLB_CDS123:1.0.0',
+                internalVersion: null,
+                createdDate: '2019-10-30T13:55:16.000Z',
+                artifactName: 'vLB_CDS123',
+                published: 'N',
+                updatedBy: 'Abdelmuhaimen Seaudi',
+                tags: 'test, vDNS-CDS, SCALE-OUT, MARCO'
+            },
+            {
+                id: 'a741913f-2b1b-4eb8-94b3-8c6b08928f0a',
+                artifactUUId: null,
+                artifactType: 'SDNC_MODEL',
+                artifactVersion: '1.0.0',
+                artifactDescription: 'Controller Blueprint for vLB_CDS12312312:1.0.0',
+                internalVersion: null,
+                createdDate: '2019-10-30T14:58:04.000Z',
+                artifactName: 'vLB_CDS12312312',
+                published: 'N',
+                updatedBy: 'Abdelmuhaimen Seaudi',
+                tags: 'test, vDNS-CDS, SCALE-OUT, MARCO'
+            }
+        ],
+        pageable: {
+            sort: {
+                sorted: true,
+                unsorted: false,
+                empty: false
+            },
+            offset: 0,
+            pageSize: 2,
+            pageNumber: 0,
+            paged: true,
+            unpaged: false
+        },
+        last: false,
+        totalElements: 4,
+        totalPages: 2,
+        first: true,
+        empty: false
+    };
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
new file mode 100644
index 000000000..067d30d7f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -0,0 +1,547 @@
+
+body{
+  background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important;
+  background-size: 6px 6px !important;  
+}
+
+
+/*Header*/
+header{
+  height: 60px;
+  background-color: #1B3E6F;
+  box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+}
+.logo{
+  float: left;
+  width: 50px;
+  height: 60px;
+  background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
+}
+
+/**Bread Crumb**/
+.breadcrumb{
+  padding: 9px 20px;
+  background: transparent;
+  line-height: 40px;
+}
+.breadcrumb a,
+.breadcrumb a:hover{
+  color: #fff;
+}
+.breadcrumb .breadcrumb-item{
+  font-size: 12px;
+  font-weight: bold;
+}
+.breadcrumb .breadcrumb-item:first-child{
+  font-size: 16px;
+}
+.breadcrumb-item + .breadcrumb-item::before{
+  color: #fff;
+}
+.breadcrumb .breadcrumb-item.active p{
+  display: inline;
+  padding: 4px 10px;
+  background: #F4F9FE;
+  border-radius: 10px;
+  color: #C3CDDB;
+  font-size: 10px;
+}
+.sidebar-container{
+  height: calc(100vh - 60px) !important;
+}
+/**Topology Actions**/
+.topology-actions{
+  margin: 0;
+  height: 60px;
+}
+.topology-actions > li{
+  height: 59px;
+  display: inline-block;
+  padding: 0 20px;
+}
+.topology-actions > li:first-child{
+  border-right: solid 1px #16396A;
+}
+.topology-actions .btn-group{
+  margin-top: 11px;
+}
+.btn-topology-action,
+.btn-topology-action:hover{
+  margin: 0 6px;
+  padding: 6px 10px;
+  color: #fff;
+  border-radius: 50%;
+  border: solid .5px #fff;
+}
+.btn-topology-action:last-child{
+  margin-right: 0;
+}
+.btn-topology-action .fa{
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.topology-actions .dropdown-text,
+.dropdown-toggle:hover ~ .dropdown-text, 
+.dropdown-toggle:focus ~ .dropdown-text{
+  top: 7px;
+  text-indent: 15px;
+  background: #1273EB;
+  border-radius: 15px;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+  font-weight: bold;
+  font-size: 13px;
+}
+.topology-actions .dropdown-text::after{
+  right: 15px;
+  top: 13px;
+  border-width: 6px 6px 0 6px;
+  border-color: #fff transparent transparent transparent;
+}
+.topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
+  top: 13px;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #fff transparent
+}
+.topology-actions .dropdown-content:hover, 
+.topology-actions .dropdown-toggle:focus ~ .dropdown-content{
+  padding: 12px 0;
+  text-indent: 0;
+  background: #fff;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
+}
+.topology-actions .dropdown-content a{
+  padding: 0 20px;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.topology-actions .dropdown-content a:hover{
+  background: #F4F9FE;
+  text-decoration: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Rotated Text*/
+button.rotate{
+  position: absolute;
+  margin-top: 1px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.rotate{
+  vertical-align: bottom;
+  /* text-align: center; */
+}
+.rotate span{
+  display: inline-table !important;
+  -ms-writing-mode: tb-rl;
+  -webkit-writing-mode: vertical-rl;
+  writing-mode: vertical-rl !important;
+  transform: rotate(180deg);
+  white-space: nowrap;
+  background: #1B3E6F; 
+  padding: 15px 12px;
+  font-weight: bold;
+  font-size: 12px;
+  color:#fff;
+  /* border-bottom-left-radius: 2px; */
+  border-top-left-radius: 2px;
+}
+.rotate i{
+  margin-right: 3px;
+  margin-top: 9px;
+  font-size: 15px;
+}
+.rotate span:first-child{
+  margin-bottom: 0;
+}
+.rotate a:hover{
+  text-decoration: none;
+}
+
+/*ACTIONS & COMPONENTS MENU*/
+.input-search-controller{
+  height: 50px;
+  padding-left: 30px;
+  background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
+  border-radius: 0;
+  border: 0;
+  border-bottom: solid 1px #D7E7F9;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.input-search-controller::placeholder{
+  color: #D0D7E4;
+  font-size: 11px;
+}
+.input-search-controller:focus{
+  
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  border-color: #DEE8F3;
+}
+.actions-scroll{
+  max-height: 160px;
+  overflow-y: auto;
+  margin-top: 12px;
+  margin-bottom: 20px;
+}
+.componentsList p{
+  margin-bottom: 0;
+  padding-left: 30px;
+  background-position: left center;
+  background-repeat: no-repeat;
+}
+p.compType-1{
+  background-image: url(/assets/img/icon-comType1-sm.svg);
+}
+p.compType-2{
+  background-image: url(/assets/img/icon-comType2-sm.svg);
+}
+p.compType-3{
+  background-image: url(/assets/img/icon-comType3-sm.svg);
+}
+p.compType-4{
+  background-image: url(/assets/img/icon-comType4-sm.svg);
+}
+/*Actions Wrapper*/
+.actions-wrapper{
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.actions-container{
+  width: 92%;
+  margin: 0 auto;
+  background: red;
+}
+
+.controllerSidebar{
+  width: 320px;
+  background: #F4F9FE;
+  border: solid 1px #C1CDDD;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
+}
+.controllerSidebar h1{
+  margin-bottom: 15px;
+  padding: 12px 0 12px 12px;
+  background: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #C3CDDB;
+}
+.controllerSidebar b{
+  font-size: 12px;
+  color: #C3CDDB;
+}
+.actionBtns .btn{
+  margin: 0 15px 12px;
+  padding: 9px 20px;
+  border-radius: 2px !important;
+  font-size: 12px;
+  font-weight: bold;
+}
+.actionBtns .btn:first-child{
+  background: #1B3E6F;
+  border: solid 1px #1B3E6F;
+  color: #fff;
+}
+.actionBtns .btn:last-child{
+  padding-left: 34px;
+  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
+  border: solid 1px #D0DFF1;
+  color: #1B3E6F;
+}
+.actionsList,
+.componentsList{
+  padding: 0 12px 20px;
+}
+.componentsList{
+  padding-bottom: 0;
+}
+.actionsList .custom-checkbox,
+.componentsList .list-group-item{
+  margin-bottom: 10px;
+  padding-left: 40px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+  border-radius: 2px;
+}
+.actionsList .custom-control-label{
+  width: 100%;
+  padding: 6px;
+  vertical-align: unset;
+  color: #1B3E6F;
+  font-size: 14px;
+  line-height: 20px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.actionsList .custom-control-label::before,
+.actionsList .custom-control-label::after{
+  top: 1.25rem;
+}
+.actionsList .custom-control-label p{
+  color: #C7D0DD;
+  font-size: 12px;
+}
+.custom-control-input:checked ~ .custom-control-label{
+  background-color: #1B3E6F !important;
+  color: #fff;
+}
+.inserActionBtns .btn{
+  border-radius: 15px !important;
+  padding: 6px 20px;
+  font-size: 12px;
+  font-weight: bold;
+  border: 0;
+
+}
+.inserActionBtns .btn:first-child{
+  background: #1273EB;
+  border: solid 1px #1273EB;
+  color: #fff;
+}
+.inserActionBtns .btn:last-child{
+  background: #fff;
+  border: solid 1px #D9E6F2;
+  color: #C3CDDB;
+}
+/*Components List*/
+.componentsList .list-group-item{
+  padding-left: 36px;
+  border: 0;
+  font-size: 14px;
+  background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
+}
+ 
+/*CANVAS*/
+.editBar{
+  width: 350px;
+  margin: 0 auto 0;
+  padding: 6px 10px;
+  background:#F4F9FE;
+  border: solid 1px #E8EFF8;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+  margin-left: 20em;
+}
+.editBar .btn-group{
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+}
+.editBar .btn{
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: left center;
+  border: 0;
+  color: #1B3E6F;
+  font-size: 10px;
+}
+.editBar .btn.active{
+  background-color: #1B3E6F !important;
+  color: #fff;
+}
+.viewBtns .btn{
+  background-position: 10px center;
+  padding-left: 30px;
+}
+.viewBtns .topologySource{
+  background-image: url(src/assets/img/icon-topologyView-active.svg);
+}
+.viewBtns .topologyView{
+  background-image: url(src/assets/img/icon-topologySource.svg);
+}
+.card.actionContainer{
+  margin: 20px 20px 40px 60px;
+  background: transparent;
+  border: 0;
+}
+.actionContainer .card-header{
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.actionContainer .card-header span{
+  padding: 12px 20px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  font-size: 12px;
+  line-height: 38px;
+  font-weight: bold;
+  color: #1B3E6F;
+  background: #C3CDDB;
+}
+.actionContainer .card-body{
+  min-height: 170px;
+  padding: 15px 20px !important;
+  border: solid 1px #C3CDDB;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
+}
+.actionContainer a{
+  display: inline-block;
+  width: 230px;
+  height: 130px;
+  margin: 20px;
+  padding: 24px;
+  background: #1B3E6F;
+  color: #fff !important;
+  text-align: center;
+  border-radius: 2px;
+  border: solid 1px #1B3E6F;
+}
+.actionContainer a:hover{
+  cursor: pointer;
+  border: dashed 1px #E9FCC6;
+}.componentContainer img{
+  height: 38px;
+}
+.componentContainer h2{
+  margin-top: 9px;
+  font-size: 14px;
+  font-weight: bold;
+}
+.componentContainer p{
+  font-size: 12px;
+}
+
+/*ATTRIBUTES SIDE BAR*/
+.attributesSideBar{
+  width: 396px;
+  padding: 0;
+}
+.attributesSideBar .attributesContainer{
+  background: #fff;
+  border: solid 1px #C1CDDD;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+}
+.closeBar{
+  float: right;
+  width: 90%;
+  height: 40px;
+  background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
+  border: 0;
+  outline: 0;
+}
+.closeBar:focus{
+  outline: none;
+}
+.attributesContainer h1{
+  margin-bottom: 10px;
+  padding: 12px 0 12px 15px;
+  background: #DEE8F3;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #1B3E6F;
+}
+.actionName{
+  margin-bottom: 21px;
+}
+.attributesContainer label{
+  color: #1B3E6F;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: bold;
+}
+.attributesContainer .form-group{
+  margin-bottom: 9px;
+}
+.attributesContainer .form-control{
+  border-color: #F0F5FC;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+  color: #103D73;
+  font-size: 13px;
+}
+.attributesContainer .form-control:focus{
+  border-color: #66bfff;
+  box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
+}
+.attributesContainer .form-control::placeholder{
+  color: #CFD7E5;
+}
+.scrolll{
+  max-height: 88.75vh;
+  overflow-y: auto;
+}
+.accordion > .card{
+  margin-bottom: 0 !important;
+  border: 0;
+}
+.accordion > .card .card-header{
+  margin: 0;
+  padding: 0;
+  background-color: #F4F9FE;
+  border: 0;
+  border-radius: 0;
+}
+.accordion > .card .card-body{
+  padding-bottom: 10px !important; 
+}
+.accordion .btn-link{
+  padding: 0;
+  color: #C3CDDB;
+  font-weight: bold;
+  font-size: 13px;
+  text-transform: uppercase;
+  line-height: 38px;
+}
+.accordion .btn-link:hover{
+  color: #103D73;
+  text-decoration: unset;
+}
+.accordion .card-header .btn-link[aria-expanded="true"]:after,
+.accordion .card-header .btn-link[aria-expanded="false"]:after{
+  margin-right: 9px;
+  font-family: 'FontAwesome';
+  float: left;
+  font-weight: normal;
+  font-size: 12px;
+}
+.accordion .card-header .btn-link[aria-expanded="true"]:after{
+  content: "\f078";    
+}
+.accordion .card-header .btn-link[aria-expanded="false"]:after{    
+  content: "\f054";    
+}
+.btn-addAttribute{
+  width: 20px;
+  height: 20px;
+  background-image: url(/assets/img/icon-add.svg);
+  background-position: center center;
+  background-repeat: no-repeat; 
+  vertical-align: sub;
+}
+.btn-addAttribute:hover{
+  background-image: url(/assets/img/icon-add-hover.svg);
+}
+.btn-deleteAttribute{
+  padding: 5px 10px;
+  background: #FFE6E7;
+  border: solid .5px #FFC9CB;
+  border-radius: 2px;
+  color: #FF6469;
+  font-size: 10px;
+
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
new file mode 100644
index 000000000..991e126c0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -0,0 +1,337 @@
+<!--Header-->
+<header>
+  <div class="row m-0">
+    <div class="col pl-0">
+      <p class="logo mb-0"></p>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb mb-0">
+          <li class="breadcrumb-item">
+            <a href="#">CBA Packages</a>
+          </li>
+          <li class="breadcrumb-item">
+            <a href="#">Package Name</a>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">
+            <p class="mb-0">Topology View</p>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    <div class="col pr-0 text-right">
+      <ul class="topology-actions">
+        <li>
+          <div class="btn-group" role="group" aria-label="Basic example">
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Preview">
+              <i class="fa fa-eye"></i>
+            </a>
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Download">
+              <i class="fa fa-download"></i>
+            </a>
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Share">
+              <i class="fa fa-share-square"></i>
+            </a>
+          </div>
+        </li>
+        <li>
+          <div class="dropdown">
+            <input class="dropdown-toggle" type="text">
+            <div class="dropdown-text">Save</div>
+            <ul class="dropdown-content">
+              <li>
+                <a href="">Save</a>
+              </li>
+              <li>
+                <a href="">Save &amp; Deploy</a>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+
+
+    </div>
+  </div>
+</header>
+<ng-sidebar-container class="sidebar-container">
+  <!-- Controller SideBar -->
+  <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'"
+    #sidebarLeft>
+    <div class="row">
+      <div class="col-12 p-0">
+        <form>
+          <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions">
+        </form>
+      </div>
+      <h1 class="col-12">Actions</h1>
+      <div class="col-12 text-center p-0">
+        <div class="btn-group actionBtns" role="group">
+          <button type="button" class="btn">Insert Custom</button>
+          <button type="button" class="btn">Import Action</button>
+        </div>
+      </div>
+      <div class="col-12 actionsList">
+        <b>Select from other packages:</b>
+        <div class="actions-scroll">
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck1">
+            <label class="custom-control-label" for="customCheck1">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck2">
+            <label class="custom-control-label" for="customCheck2">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck3">
+            <label class="custom-control-label" for="customCheck3">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck4">
+            <label class="custom-control-label" for="customCheck4">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+        </div>
+        <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+          <button type="button" class="btn btn-secondary mr-3">Insert</button>
+          <button type="button" class="btn btn-secondary">Cancel</button>
+        </div>
+      </div>
+      <h1 class="col-12">Functions</h1>
+      <div class="col-12 componentsList">
+        <b>Drag and drop function to Action’s box</b>
+        <ul class="list-group actions-scroll">
+          <li class="list-group-item">
+            <p class="compType-1">component-resource-resolution</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-2">component-netconf-executor</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-3">component-remote-ansible-executor</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-4">dg-generic</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-1">component-resource-resolution</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ng-sidebar>
+  <!-- Page content -->
+  <div ng-sidebar-content id="paper">
+    <button class="rotate" (click)="_toggleSidebar1()">
+      <span>
+        Controller
+        <i class="fa fa-angle-double-left"></i>
+      </span>
+    </button>
+    <!-- Canvas -->
+    <div class="editBar text-center">
+      <div class="btn-group mr-2" role="group" aria-label="First group">
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
+          <img src="/assets/img/icon-undoActive.svg">
+        </button>
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
+          <img src="/assets/img/icon-redo.svg">
+        </button>
+      </div>
+      <div class="btn-group mr-2" role="group" aria-label="Second group">
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
+          <img src="/assets/img/icon-zoomOut.svg">
+        </button>
+        <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
+          <img src="/assets/img/icon-zoomIn.svg">
+        </button>
+      </div>
+      <div class="btn-group viewBtns" role="group" aria-label="Third group">
+        <button type="button" class="btn btn-secondary topologySource active">View</button>
+        <button type="button" class="btn btn-secondary topologyView">Source</button>
+      </div>
+    </div>
+    <div class="card actionContainer">
+      <div class="card-header">
+        <span>Action 1</span>
+      </div>
+      <div class="card-body">
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType1.svg" title="">
+          <h2>config-assign</h2>
+          <p>component-resource-resolution</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType2.svg" title="">
+          <h2>execute</h2>
+          <p>component-netconf-executor</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType3.svg" title="">
+          <h2>function 1</h2>
+          <p>dg-generic</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType2.svg" title="">
+          <h2>execute</h2>
+          <p>component-netconf-executor</p>
+        </a>
+      </div>
+    </div>
+    <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+  </div>
+  <!-- Attribute SideBar -->
+  <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'"
+    #sidebarRight>
+    <div class="container-fluid0">
+      <div class="row m-0">
+        <div class="col-2 pr-0">
+          <button (click)="sidebarRight.close()" class="closeBar"></button>
+        </div>
+        <div class="col-10 attributesContainer p-0">
+          <h1>Action Attributes</h1>
+          <div class="scrolll">
+            <div class="row m-0">
+              <div class="col-12">
+                <div class="form-group actionName">
+                  <label for="exampleInputEmail1">Action Name</label>
+                  <input type="text" class="form-control" placeholder="Action 1">
+                </div>
+              </div>
+            </div>
+            <div class="accordion" id="accordionExample">
+              <div class="card">
+                <div class="card-header row" id="headingOne">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                      Steps
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header row" id="headingTwo">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                      Inputs
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header row" id="headingThree">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                      Outputs
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-sidebar>
+
+</ng-sidebar-container>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts
new file mode 100644
index 000000000..3b767cb81
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DesignerComponent } from './designer.component';
+
+describe('DesignerComponent', () => {
+  let component: DesignerComponent;
+  let fixture: ComponentFixture<DesignerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DesignerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
new file mode 100644
index 000000000..547c1e574
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -0,0 +1,128 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import * as $ from 'jquery';
+import * as _ from 'lodash';
+import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js';
+
+@Component({
+  selector: 'app-designer',
+  templateUrl: './designer.component.html',
+  styleUrls: ['./designer.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DesignerComponent implements OnInit {
+
+  private controllerSideBar: boolean;
+  private attributesSideBar: boolean;
+  public graph: any;
+  public paper: any;
+
+  constructor() {
+    this.controllerSideBar = true;
+    this.attributesSideBar = false;
+  }
+  private _toggleSidebar1() {
+    this.controllerSideBar = !this.controllerSideBar;
+  }
+  private _toggleSidebar2() {
+    this.attributesSideBar = !this.attributesSideBar;
+  }
+
+
+  ngOnInit() {
+    this.attachEditorBarToCanvas();
+  }
+
+  attachEditorBarToCanvas() {
+    this.graph = new joint.dia.Graph,
+      this.paper = new joint.dia.Paper({
+        el: $('#paper'),
+        model: this.graph,
+        height: 720,
+        width: 1200,
+        gridSize: 2,
+        drawGrid: true,
+        cellViewNamespace: joint.shapes
+      });
+
+    this.paper.setGrid({
+      name: 'dot',
+      args:
+        { color: 'black', thickness: 2, scaleFactor: 8 }
+
+    }).drawGrid();
+
+
+    joint.shapes["html"] = {};
+    joint.shapes["html"].Element = joint.shapes.basic.Rect.extend({
+        defaults: joint.util.deepSupplement({
+            type: 'html.Element'
+        }, joint.shapes.basic.Rect.prototype.defaults)
+    });
+
+    joint.shapes["html"].ElementView = joint.dia.ElementView.extend({
+
+      template: [
+        '<div>',
+      '<div id="editbar" class="editBar text-center">',
+      '<div class="btn-group mr-2" role="group" aria-label="First group">',
+        '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">',
+          '<img src="/assets/img/icon-undoActive.svg">',
+        '</button>',
+        '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">',
+          '<img src="/assets/img/icon-redo.svg">',
+        '</button>',
+      '</div>',
+      '<div class="btn-group mr-2" role="group" aria-label="Second group">',
+        '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">',
+          '<img src="/assets/img/icon-zoomOut.svg">',
+        '</button>',
+        '<button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>',
+        '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">',
+          '<img src="/assets/img/icon-zoomIn.svg">',
+        '</button>',
+      '</div>',
+      '<div class="btn-group viewBtns" role="group" aria-label="Third group">',
+        '<button type="button" class="btn btn-secondary topologySource active">View</button>',
+        '<button type="button" class="btn btn-secondary topologyView">Source</button>',
+      '</div>',
+    '</div>',
+    '</div>'
+      ].join(''),
+
+      initialize: function() {
+          _.bindAll(this, 'updateBox');
+          joint.dia.ElementView.prototype.initialize.apply(this, arguments);
+
+          this.$box = $(_.template(this.template)());
+          // Prevent paper from handling pointerdown.
+          this.$box.find('input,select').on('mousedown click', function(evt) {
+              evt.stopPropagation();
+          });
+          this.model.on('change', this.updateBox, this);
+
+          this.updateBox();
+      },
+      render: function() {
+          joint.dia.ElementView.prototype.render.apply(this, arguments);
+          this.paper.$el.prepend(this.$box);
+          this.updateBox();
+          return this;
+      },
+      updateBox: function() {
+          // Set the position and dimension of the box so that it covers the JointJS element.
+          var bbox = this.model.getBBox();
+          this.$box.css({
+              width: bbox.width,
+              height: bbox.height,
+              left: bbox.x,
+              top: bbox.y,
+              transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
+          }); 
+      }
+  });
+
+  var el1 = new joint.shapes["html"].Element({});
+  this.graph.addCells([el1]);
+  }
+  
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
new file mode 100644
index 000000000..46dab88f8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
@@ -0,0 +1,58 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { Page } from 'src/app/common/model/page';
+
+export class BlueprintModel {
+
+
+    constructor(id: string, artifactUUId: null, artifactType: string,
+                artifactVersion: string, artifactDescription: string,
+                internalVersion: null, createdDate: string, artifactName: string,
+                published: string, updatedBy: string, tags: string) {
+        this.id = id;
+        this.artifactUUId = artifactUUId;
+        this.artifactType = artifactType;
+        this.artifactVersion = artifactVersion;
+        this.artifactDescription = artifactDescription;
+        this.internalVersion = internalVersion;
+        this.createdDate = createdDate;
+        this.artifactName = artifactName;
+        this.published = published;
+        this.updatedBy = updatedBy;
+        this.tags = tags;
+    }
+
+    id: string;
+    artifactUUId?: null;
+    artifactType: string;
+    artifactVersion: string;
+    artifactDescription: string;
+    internalVersion?: null;
+    createdDate: string;
+    artifactName: string;
+    published: string;
+    updatedBy: string;
+    tags: string;
+}
+
+export class BluePrintPage extends Page<BlueprintModel> {
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
new file mode 100644
index 000000000..068e93160
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
@@ -0,0 +1,33 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {BluePrintPage} from './BluePrint.model';
+
+export class PackagesDashboardState {
+
+    page: BluePrintPage;
+    command: string;
+    currentPage = 0;
+    totalPackages: number;
+    tags: string[];
+    sortBy = 'DATE';
+    totalPackagesWithoutSearchorFilters: number;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
new file mode 100644
index 000000000..6ce3a53a1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -0,0 +1,18 @@
+<div class="dropdown packagesFilter w-100">
+    <input class="dropdown-toggle" type="text">
+    <div class="dropdown-text">ALL PACKAGES TAGS</div>
+    <ul class="dropdown-content w-100">
+        <li>
+            <div class="form-group">
+                <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
+            </div>
+        </li>
+        <li *ngFor="let tag of viewedTags">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}>
+                <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+            </div>
+        </li>
+    </ul>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
new file mode 100644
index 000000000..8285d8962
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TagsFilteringComponent } from './filter-by-tags.component';
+
+describe('SearchByTagsComponent', () => {
+  let component: TagsFilteringComponent;
+  let fixture: ComponentFixture<TagsFilteringComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TagsFilteringComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagsFilteringComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
new file mode 100644
index 000000000..b4007215a
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -0,0 +1,100 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model';
+
+@Component({
+    selector: 'app-filter-by-tags',
+    templateUrl: './filter-by-tags.component.html',
+    styleUrls: ['./filter-by-tags.component.css']
+})
+
+export class TagsFilteringComponent implements OnInit {
+
+    page: BluePrintPage;
+    tags: string[] = [];
+    viewedTags: string[] = [];
+    searchTag = '';
+    viewedPackages: BlueprintModel[] = [];
+    private checkBoxTages = '';
+
+
+    constructor(private packagesStore: PackagesStore,
+    ) {
+        this.packagesStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.page) {
+                this.viewedPackages = state.page.content;
+                this.viewedPackages.forEach(element => {
+                    element.tags.split(',').forEach(tag => {
+                        this.tags.push(tag.trim());
+                    });
+                    this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
+                    this.assignTags();
+
+                });
+            }
+        });
+    }
+
+    ngOnInit() {
+
+    }
+
+    reloadChanges(event: any) {
+        this.searchTag = event.target.value;
+        this.filterItem(this.searchTag);
+    }
+
+    private assignTags() {
+        this.viewedTags = this.tags;
+    }
+
+    private filterItem(value) {
+        if (!value) {
+            this.assignTags();
+        }
+        this.viewedTags = this.tags.filter(
+            item => item.toLowerCase().indexOf(value.toLowerCase()) > -1
+        );
+    }
+
+    reloadPackages(event: any) {
+
+        if (!event.target.checked) {
+            this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
+                .replace(event.target.id, '');
+        } else {
+            this.checkBoxTages += event.target.id.trim() + ',';
+        }
+        console.log(this.checkBoxTages);
+        if (!this.checkBoxTages.includes(',')) {
+            return;
+        }
+        this.viewedPackages = [];
+        // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
+        //   this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+    }
+
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
new file mode 100644
index 000000000..18428d4b4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -0,0 +1,104 @@
+<div class="row packages-card">
+    <div class="col-lg-3 col-md-6">
+        <!--Add Package Card-->
+        <div class="card addPaackage-card">
+            <div class="card-body text-center">
+                <img src="/assets/img/icon-addPackage.svg">
+            </div>
+            <div class="card-footer row">
+                <div class="col">
+                    <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages">
+
+        <!--Card 1-->
+        <div>
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-9 pr-0">
+                            <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)">
+                                <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
+                                {{bluePrint.artifactName}}
+                            </h5>
+
+                        </div>
+                        <div class="col-3">
+
+                            <div class="dropdown">
+                                <input class="dropdown-toggle" type="text">
+                                <div class="dropdown-text">
+                                    <img src="/assets/img/icon-menuDots.svg" title="Actions">
+                                </div>
+                                <ul class="dropdown-content">
+                                    <li class="action-clone">
+                                        <a href="#">Clone</a>
+                                    </li>
+                                    <li class="action-archive">
+                                        <a href="#">Archive</a>
+                                    </li>
+                                    <li class="action-delete">
+                                        <a href="#">Delete</a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
+                         </p>
+                         <p>By {{bluePrint.updatedBy}}</p>
+                            <ul class="package-contributers">
+                                <li>
+                                    <button type="button" class="border-fade" data-toggle="tooltip"
+                                            data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user1.jpeg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user2.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                            title="User name">
+                                        <img src="/assets/img/img-user3.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <a href="">5 contributors</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <div class="row">
+                            <div class="col">
+                                <button type="button" class="btn btn-card-topology">Topology View
+                                </button>
+                            </div>
+                            <div class="col">
+                                <button type="button" class="btn btn-card-config">Configuration</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
new file mode 100644
index 000000000..f45f25996
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageListComponent } from './package-list.component';
+import { PackagesStore } from '../../packages.store';
+import { getBluePrintPageMock } from '../../blueprint.page.mock';
+import { of } from 'rxjs';
+
+describe('PackageListComponent', () => {
+  let component: PackageListComponent;
+  let fixture: ComponentFixture<PackageListComponent>;
+  let store: Partial<PackagesStore>;
+
+  beforeEach(async(() => {
+
+    store = { state$: of(getBluePrintPageMock()) };
+
+    TestBed.configureTestingModule({
+      declarations: [ PackageListComponent ],
+      providers: [{ provide: PackagesStore, useValue: store }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackageListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+
+  // TODO create another test with store in mind
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
new file mode 100644
index 000000000..c7ec0af20
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {BlueprintModel} from '../../model/BluePrint.model';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+    selector: 'app-packages-list',
+    templateUrl: './package-list.component.html',
+    styleUrls: ['./package-list.component.css']
+})
+export class PackageListComponent implements OnInit {
+
+    viewedPackages: BlueprintModel[] = [];
+
+
+    constructor(private packagesStore: PackagesStore) {
+        console.log('PackageListComponent');
+        this.packagesStore.state$.subscribe(state => {
+            console.log(state);
+            if (state.page) {
+                this.viewedPackages = state.page.content;
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.packagesStore.getAll();
+    }
+
+    testDispatch(bluePrint: BlueprintModel) {
+        console.log(bluePrint.id);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
new file mode 100644
index 000000000..b5245f757
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -0,0 +1,7 @@
+<!--Package Paginator-->
+<div class="col package-paginator pr-0">
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)"
+
+    ></ngb-pagination>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts
new file mode 100644
index 000000000..ce7f99f62
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagePaginationComponent } from './package-pagination.component';
+
+describe('PackagePaginationComponent', () => {
+  let component: PackagePaginationComponent;
+  let fixture: ComponentFixture<PackagePaginationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PackagePaginationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackagePaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
new file mode 100644
index 000000000..49f91316b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -0,0 +1,41 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'app-package-pagination',
+    templateUrl: './package-pagination.component.html',
+    styleUrls: ['./package-pagination.component.css'],
+})
+export class PackagePaginationComponent implements OnInit {
+    pageNumber: number;
+    totalCount: number;
+    pageSize: number;
+    previousPage: number;
+
+    constructor(private packagesStore: PackagesStore) {
+        this.pageSize = packagesStore.pageSize;
+
+        this.packagesStore.state$
+            .subscribe(state => {
+                this.pageNumber = state.currentPage;
+                this.totalCount = state.totalPackages;
+            });
+    }
+
+    ngOnInit() {
+    }
+
+    public getPageFromService(page) {
+        console.log('getPageFromService', page);
+        if (isNaN(page)) {
+            page = 1;
+            console.log('page change to first...', page);
+        }
+        if (this.previousPage !== page) {
+            this.packagesStore.getPage(page - 1, this.packagesStore.pageSize);
+            this.previousPage = page;
+        }
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts
new file mode 100644
index 000000000..fe156b6cb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PackagesDashboardComponent } from './packages-dashboard.component';
+
+describe('PackagesDashboardComponent', () => {
+  let component: PackagesDashboardComponent;
+  let fixture: ComponentFixture<PackagesDashboardComponent>;
+
+  beforeEach(async(() => {
+
+
+    TestBed.configureTestingModule({
+      declarations: [PackagesDashboardComponent ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PackagesDashboardComponent);
+    component = fixture.componentInstance;
+  }));
+
+  fit('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
new file mode 100644
index 000000000..ac510893b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -0,0 +1,61 @@
+<app-header>
+</app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+
+        <div class="container-fluid body-container">
+            <nav class="row">
+                <!--Nav Tabs-->
+                <div class="col pr-0">
+                    <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+                           role="tab" aria-controls="nav-home"
+                           aria-selected="true">All</a>
+                        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
+                           role="tab" aria-controls="nav-profile"
+                           aria-selected="false">Deployed</a>
+                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
+                           role="tab" aria-controls="nav-contact"
+                           aria-selected="false">Under Construction</a>
+                        <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
+                           role="tab" aria-controls="nav-contact1"
+                           aria-selected="false">Archived</a>
+                    </div>
+                </div>
+                <!--Nav Search & Filter-->
+                <div class="col search-filter-col">
+                    <div class="row">
+                        <div class="col-7">
+                            <app-packages-search></app-packages-search>
+                        </div>
+                        <div class="col-5 pl-2">
+                            <app-filter-by-tags class="w-100"></app-filter-by-tags>
+                        </div>
+                        
+                    </div>
+                </div>
+            </nav>
+            <div class="row mt-4">
+                <div class="col">
+                    <div class="tab-content" id="nav-tabContent">
+                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+                            <div class="row">
+                                <div class="col sort-packages">
+                                    
+                                </div>
+                                <app-package-pagination></app-package-pagination>
+            
+                            </div>
+                            <app-packages-list></app-packages-list>
+            
+                        </div>
+                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+                        <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
new file mode 100644
index 000000000..4e33a9df1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -0,0 +1,37 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../packages.store';
+
+@Component({
+    selector: 'app-packages-dashboard',
+    templateUrl: './packages-dashboard.component.html',
+    styleUrls: ['./packages-dashboard.component.css']
+})
+export class PackagesDashboardComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+
+        console.log('PackagesDashboardComponent');
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
new file mode 100644
index 000000000..e7c605fd1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -0,0 +1,4 @@
+<div class="searchBox">
+    <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+    <button class="searchButton" href="#"></button>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
new file mode 100644
index 000000000..7e50c55cc
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagesSearchComponent } from './search-by-packages.component';
+
+describe('PackagesSearchComponent', () => {
+  let component: PackagesSearchComponent;
+  let fixture: ComponentFixture<PackagesSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PackagesSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackagesSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
new file mode 100644
index 000000000..91304e5c2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+    selector: 'app-packages-search',
+    templateUrl: './search-by-packages.component.html',
+    styleUrls: ['./search-by-packages.component.css']
+})
+export class PackagesSearchComponent implements OnInit {
+
+    private searchQuery = '';
+
+    constructor(private packagesStore: PackagesStore) {
+    }
+
+    ngOnInit() {
+    }
+
+
+    searchPackages(event: any) {
+        this.searchQuery = event.target.value;
+        this.searchQuery = this.searchQuery.trim();
+        this.packagesStore.search(this.searchQuery);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts
new file mode 100644
index 000000000..e8a98099c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts
@@ -0,0 +1,66 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../common/core/services/api.typed.service';
+import {BlueprintURLs} from '../../../common/constants/app-constants';
+import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackagesListService {
+    packages: BlueprintModel[] = [];
+    private numberOfPackages: number;
+
+    constructor(private api: ApiService<BluePrintPage>) {
+    }
+
+    getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> {
+        return this.api.get(BlueprintURLs.getPagedBlueprints, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: sortBy
+        });
+    }
+
+    searchByTags(keyword: string): Observable<any> {
+        return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
+    }
+
+    getCountOfAllPackages(observable: Observable<number>) {
+        observable.subscribe(data => {
+            this.numberOfPackages = data;
+            console.log(data);
+        });
+    }
+
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) {
+
+        return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: sortBy
+        });
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
new file mode 100644
index 000000000..f24ae8b00
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -0,0 +1,36 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ApiService} from '../../../common/core/services/api.typed.service';
+import {PackagesRoutingModule} from './packages.routing.module';
+import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
+import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
+import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
+import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
+import { DesignerComponent } from './designer/designer.component';
+import { SidebarModule } from 'ng-sidebar';
+import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
+import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
+import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+
+
+
+@NgModule({
+    declarations: [PackagesDashboardComponent,
+        TagsFilteringComponent,
+        PackageListComponent,
+        DesignerComponent,
+        PackagePaginationComponent,
+        PackagesSearchComponent,
+    ],
+    imports: [
+        CommonModule,
+        PackagesRoutingModule,
+        NgbPaginationModule,
+        SharedModulesModule,
+        SidebarModule.forRoot(),
+    ],
+    providers: [ApiService],
+    bootstrap: []
+})
+export class PackagesModule {
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
new file mode 100644
index 000000000..83044dde5
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
+import {DesignerComponent} from './designer/designer.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PackagesDashboardComponent
+    },
+    {path: 'designer', component: DesignerComponent},
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class PackagesRoutingModule {
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
new file mode 100644
index 000000000..b091ed90e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { PackagesStore } from './packages.store';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { PackagesListService } from './packages-list.service';
+import { of } from 'rxjs';
+import { BluePrintPage } from './model/BluePrint.model';
+import { getBluePrintPageMock } from './blueprint.page.mock';
+
+describe('PackagesStore', () => {
+    let store: PackagesStore;
+
+    const MOCK_BLUEPRINTS_PAGE: BluePrintPage = getBluePrintPageMock();
+
+    let httpMock: HttpTestingController;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientTestingModule
+            ],
+            providers: [
+                PackagesStore,
+                PackagesListService
+            ]
+        });
+        httpMock = TestBed.get(HttpTestingController);
+
+    });
+
+    it('should correctly get page of packages', () => {
+        const packagesServiceSpy = jasmine.createSpyObj('PackagesListService', ['getPagedPackages']);
+
+        // set the value to return when the `getPagedPackages` spy is called.
+        packagesServiceSpy.getPagedPackages.and.returnValue(of([MOCK_BLUEPRINTS_PAGE]));
+        store = new PackagesStore(packagesServiceSpy);
+
+        store.getPagedPackages(0, 2);
+        store.state$.subscribe(page => {
+            expect(store.state).toEqual(MOCK_BLUEPRINTS_PAGE);
+        });
+
+    });
+});
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
new file mode 100644
index 000000000..d770bf737
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -0,0 +1,104 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+import {BluePrintPage} from './model/BluePrint.model';
+import {Store} from '../../../common/core/stores/Store';
+import {PackagesListService} from './packages-list.service';
+import {PackagesDashboardState} from './model/packages-dashboard.state';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackagesStore extends Store<PackagesDashboardState> {
+    // TDOD fixed for now as there is no requirement to change it from UI
+    public pageSize = 5;
+
+    constructor(private packagesServiceList: PackagesListService) {
+        super(new PackagesDashboardState());
+    }
+
+    public getAll() {
+        console.log('getting all packages...');
+        this.getPagedPackages(0, this.pageSize);
+    }
+
+    public search(command: string) {
+        if (command) {
+            this.searchPagedPackages(command, 0, this.pageSize);
+        } else {
+            this.getPagedPackages(0, this.pageSize);
+        }
+    }
+
+    public getPage(pageNumber: number, pageSize: number) {
+        if (this.isCommandExist()) {
+            this.searchPagedPackages(this.state.command, pageNumber, pageSize);
+        } else {
+            this.getPagedPackages(pageNumber, pageSize);
+        }
+    }
+
+    public sortPagedPackages(sortBy: string) {
+        if (this.isCommandExist()) {
+            this.searchPagedPackages(this.state.command, this.state.currentPage, this.pageSize, sortBy);
+        } else {
+            this.getPagedPackages(this.state.currentPage, this.pageSize, sortBy);
+        }
+
+    }
+
+    private getPagedPackages(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+
+        this.packagesServiceList.getPagedPackages(pageNumber, pageSize, sortBy)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState({
+                    ...this.state,
+                    page: pages[0],
+                    command: '',
+                    totalPackages: pages[0].totalElements,
+                    currentPage: pageNumber,
+                    // this param is set only in get all as it represents the total number of pacakges in the server
+                    totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+                    sortBy
+                });
+            });
+    }
+
+    private searchPagedPackages(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+        this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize, sortBy)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState({
+                    ...this.state,
+                    page: pages[0],
+                    command: keyWord,
+                    totalPackages: pages[0].totalElements,
+                    currentPage: pageNumber,
+                    sortBy
+                });
+            });
+    }
+
+    private isCommandExist() {
+        return this.state.command;
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.css b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.css
new file mode 100644
index 000000000..240f9dfae
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.css
@@ -0,0 +1,12 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
new file mode 100644
index 000000000..541b38d1a
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
@@ -0,0 +1,72 @@
+<div class="primary-nav">
+  <img class="logo-icon open-panel nav-toggle" src="../assets/img/logo-icon.svg" title="CDS">
+  <nav role="navigation" class="menu">
+    <img class="logotype" src="../assets/img/logo-text.svg">
+    <div class="overflow-container">
+      <ul class="menu-dropdown">
+        <li class="active">
+          <a href="packages/list">Packages</a>
+          <span class="icon">
+            <!-- <i class="fa fa-dashboard"></i> -->
+            <img src="../assets/img/icon-nav-packages.svg">
+          </span>
+        </li>
+        <li class="menu-hasdropdown">
+          <a href="#">Data Dictionary</a>
+          <span class="icon">
+            <img src="../assets/img/icon-nav-dictionary.svg">
+          </span>
+          <label title="toggle menu" for="settings">
+            <span class="downarrow">
+              <i class="fa fa-caret-down"></i>
+            </span>
+          </label>
+          <input type="checkbox" class="sub-menu-checkbox" id="settings" />
+          <ul class="sub-menu-dropdown">
+            <li>
+              <a href="">Link</a>
+            </li>
+            <li>
+              <a href="">Link</a>
+            </li>
+            <li>
+              <a href="">Link</a>
+            </li>
+          </ul>
+        </li>
+        <!-- <li>
+            <a href="#">Favourites</a>
+            <span class="icon">
+              <i class="fa fa-heart"></i>
+            </span>
+          </li>
+          <li>
+            <a href="#">Messages</a>
+            <span class="icon">
+              <i class="fa fa-envelope"></i>
+            </span>
+          </li> -->
+      </ul>
+    </div>
+    <ul class="menu-dropdown userProfile">
+      <li>
+        <div class="dropdown">
+          <input class="dropdown-toggle" type="text">
+          <div class="dropdown-text">User name</div>
+          <ul class="dropdown-content">
+            <li>
+              <a href="#">Settings</a>
+            </li>
+            <li>
+              <a href="#">Projects</a>
+            </li>
+            <li>
+              <a href="#">Log out</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+
+  </nav>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.spec.ts b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.spec.ts
new file mode 100644
index 000000000..2d0479d7d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
new file mode 100644
index 000000000..3ee4d0f65
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
new file mode 100644
index 000000000..6b6d39689
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header/header.component';
+
+
+
+@NgModule({
+  declarations: [HeaderComponent],
+  imports: [
+    CommonModule
+  ], exports : [HeaderComponent]
+})
+export class SharedModulesModule { }