Merge "add pacakges dashboard component to new cds ui"

79 files changed, 2774 insertions, 619 deletions

diff --git a/cds-ui/client-frankfurt/src/app/app-routing.module.ts b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
index e55393b03..c6e42cb0b 100644
--- a/cds-ui/client-frankfurt/src/app/app-routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
@@ -24,6 +24,7 @@ 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',
diff --git a/cds-ui/client-frankfurt/src/app/app.component.html b/cds-ui/client-frankfurt/src/app/app.component.html
index 0680b43f9..693dba7c3 100644
--- a/cds-ui/client-frankfurt/src/app/app.component.html
+++ b/cds-ui/client-frankfurt/src/app/app.component.html
@@ -1 +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/client-frankfurt/src/app/app.module.ts b/cds-ui/client-frankfurt/src/app/app.module.ts
index c52da5cb9..20b9b4d7b 100644
--- a/cds-ui/client-frankfurt/src/app/app.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app.module.ts
@@ -30,6 +30,9 @@ 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: [
@@ -43,6 +46,8 @@ import {HttpClientModule} from '@angular/common/http';
         NoopAnimationsModule,
         MatTabsModule,
         HttpClientModule,
+        PackagesModule,
+        SharedModulesModule,
     ],
 
     providers: [ApiService],
diff --git a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
index 11d0598d9..cfe8061f3 100644
--- a/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
+++ b/cds-ui/client-frankfurt/src/app/common/constants/app-constants.ts
@@ -88,13 +88,16 @@ export const GlobalContants = {
 
 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/'
+    getMetaDate: '/controllerblueprint/meta-data/',
+    countOfAllBluePrints: '/controllerblueprint/list/count',
+    getMetaDatePageable: '/controllerblueprint/metadata/paged'
 };
 
 export const ResourceDictionaryURLs = {
diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
index b26558b01..de8aab886 100644
--- a/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
+++ b/cds-ui/client-frankfurt/src/app/common/core/services/api.service.ts
@@ -1,4 +1,3 @@
-
 /*
 ============LICENSE_START==========================================
 ===================================================================
@@ -22,103 +21,10 @@ 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',
-    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/'
-};
-
-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'
-};
-
-
 
 import {Injectable} from '@angular/core';
-import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse} from '@angular/common/http';
-import {Observable} from 'rxjs';
+import {HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse, HttpParams} from '@angular/common/http';
+import {Observable, of} from 'rxjs';
 
 @Injectable()
 export class ApiService {
@@ -126,8 +32,16 @@ export class ApiService {
     constructor(private httpClient: HttpClient) {
     }
 
-    get(url: string, params?: any): Observable<any> {
-        return  this.httpClient.get(url, params);
+    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> {
diff --git a/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts b/cds-ui/client-frankfurt/src/app/common/core/services/api.typed.service.ts
new file mode 100644
index 000000000..2f3778c1a
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/common/core/stores/Store.ts b/cds-ui/client-frankfurt/src/app/common/core/stores/Store.ts
new file mode 100644
index 000000000..1d5b0afc1
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/common/model/page.ts b/cds-ui/client-frankfurt/src/app/common/model/page.ts
new file mode 100644
index 000000000..7c3a0c4f3
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/blueprint.page.mock.ts
new file mode 100644
index 000000000..9e0ce71d2
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/BluePrint.model.ts
new file mode 100644
index 000000000..46dab88f8
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
new file mode 100644
index 000000000..f67b3ca6a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -0,0 +1,92 @@
+<div class="row packages-card"><div class="col-lg-3 col-md-6 p-0">
+    <!--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 text-right pr-0">
+                <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                </a>
+            </div>
+            <div class="col pr-0">
+                <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 p-0" *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">{{bluePrint.artifactName}}</h5>
+                        <p>Last modified {{bluePrint.createdDate}} 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 class="col-3">
+                        <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
+                        <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="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 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>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
new file mode 100644
index 000000000..4ef0faf45
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -0,0 +1,28 @@
+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[] = [];
+  numberOfPackages: number;
+
+
+  constructor(private packagesStore: PackagesStore) {
+    console.log('PackageListComponent');
+    this.packagesStore.state$.subscribe(page => {
+      console.log(page);
+      this.viewedPackages = page.content;
+    });
+  }
+
+  ngOnInit() {
+    // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize);
+  }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
new file mode 100644
index 000000000..cdc0aaa1f
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -0,0 +1,4 @@
+<div class="col package-paginator pr-0">
+    <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [(pageSize)]="pageSize" class="float-right"
+        (pageChange)="getPageFromService($event)"></ngb-pagination>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
new file mode 100644
index 000000000..49a88c6c2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { PackagesStore } from '../../packages.store';
+
+@Component({
+  selector: 'app-package-pagination',
+  templateUrl: './package-pagination.component.html',
+  styleUrls: ['./package-pagination.component.css'],
+})
+export class PackagePaginationComponent implements OnInit {
+  pageNumber = 0;
+  totalCount = 4;
+  pageSize: number;
+
+  constructor(private packagesStore: PackagesStore) {
+    this.pageSize = packagesStore.pageSize;
+   }
+
+  ngOnInit() {
+  }
+
+  public getPageFromService(page) {
+    console.log('getPageFromService', page);
+    if (isNaN(page)) {
+      page = 1;
+      console.log('page change to first...', page);
+    }
+    this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize);
+  }
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dahsboard.component.spec.ts b/cds-ui/client-frankfurt/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/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
new file mode 100644
index 000000000..09a343546
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -0,0 +1,67 @@
+<app-header>
+</app-header>
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <!-- <router-outlet></router-outlet> -->
+        <!--Page Title-->
+        <header class="page-title">
+            <div class="row">
+                <h2 class="col m-0">CBA Packages
+                    <span>(20 packages)</span>
+                </h2>
+                <div class="col">
+                </div>
+            </div>
+        </header>
+
+        <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>
+                <app-search-by-tags class="w-50"></app-search-by-tags>
+            </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">
+                                <!--Package Sort-->
+                                <div class="col sort-packages">
+                                    Sort by:
+                                    <div class="dropdown">
+                                        <input class="dropdown-toggle" type="text">
+                                        <div class="dropdown-text">Recent</div>
+                                        <ul class="dropdown-content">
+                                            <li>
+                                                <a href="#">Name</a>
+                                            </li>
+                                            <li>
+                                                <a href="#">Recent</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <!--Package Paginator-->
+                                <app-package-pagination></app-package-pagination>
+                            </div>
+                            <app-packages-list></app-packages-list>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </div>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
new file mode 100644
index 000000000..0820d9356
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -0,0 +1,36 @@
+/*
+============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';
+
+@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/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
new file mode 100644
index 000000000..ea6c742a0
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
@@ -0,0 +1,46 @@
+<!--Nav Search & Filter-->
+<div class="col search-filter-col">
+    <div class="row">
+        <div class="col-7">
+            <div class="searchBox">
+                <input class="searchInput" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+                <button class="searchButton" href="#"></button>
+            </div>
+        </div>
+        <div class="col-5 pl-2">
+            <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>
+                        <!--<div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck2">
+                            <label class="custom-control-label" for="customCheck2">Check this custom
+                                checkbox</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck3">
+                            <label class="custom-control-label" for="customCheck3">Check this custom
+                                checkbox</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" id="customCheck4">
+                            <label class="custom-control-label" for="customCheck4">Check this custom
+                                checkbox</label>
+                        </div>-->
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts
new file mode 100644
index 000000000..aaacfb9e8
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+============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 { SearchByTagsComponent } from './search-by-tags.component';
+
+describe('SearchByTagsComponent', () => {
+  let component: SearchByTagsComponent;
+  let fixture: ComponentFixture<SearchByTagsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchByTagsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchByTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts
new file mode 100644
index 000000000..b5cc52fc0
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts
@@ -0,0 +1,94 @@
+/*
+============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-search-by-tags',
+    templateUrl: './search-by-tags.component.html',
+    styleUrls: ['./search-by-tags.component.css']
+})
+
+export class SearchByTagsComponent implements OnInit {
+
+    page: BluePrintPage;
+    tags: string[] = [];
+    viewedTags: string[] = [];
+    searchTag = '';
+    viewedPackages: BlueprintModel[] = [];
+    private checkBoxTages = '';
+    private searchPackage = '';
+
+    constructor(private packagesStore: PackagesStore,
+    ) {
+    }
+
+    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.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+    }
+
+    searchPackages(event: any) {
+        this.searchPackage = event.target.value;
+        this.searchPackage = this.searchPackage.trim();
+        if (this.searchPackage) {
+            this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2);
+
+        } else {
+            this.packagesStore.getPagedPackages(0, 2);
+        }
+    }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
new file mode 100644
index 000000000..116441bc2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
@@ -0,0 +1,12 @@
+import {TestBed} from '@angular/core/testing';
+
+import {SearchByTagsService} from './search-by-tags.service';
+
+describe('SearchByTagsService', () => {
+    beforeEach(() => TestBed.configureTestingModule({}));
+
+    it('should be created', () => {
+        const service: SearchByTagsService = TestBed.get(SearchByTagsService);
+        expect(service).toBeTruthy();
+    });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
new file mode 100644
index 000000000..deaa4d957
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
@@ -0,0 +1,74 @@
+/*
+============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[] = [];
+    originalPackage: BlueprintModel[] = [];
+    private bluePrintModel: BlueprintModel;
+    private numberOfPackages: number;
+
+    constructor(private api: ApiService<BluePrintPage>) {
+    }
+
+    getPagedPackages(pageNumber: number, pageSize: number): Observable<BluePrintPage[]> {
+        return this.api.get(BlueprintURLs.getPagedBlueprints, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: 'DATE'
+        });
+    }
+
+    searchByTags(keyword: string): Observable<any> {
+        return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
+    }
+
+
+    // getPackageNumber(): number {
+    //     this.getCountOfAllPackages(this.api.get(BlueprintURLs.countOfAllBluePrints));
+    //     return this.numberOfPackages;
+
+    // }
+
+    getCountOfAllPackages(observable: Observable<number>) {
+        observable.subscribe(data => {
+            this.numberOfPackages = data;
+            console.log(data);
+        });
+    }
+
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+        return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, {
+            offset: pageNumber,
+            limit: pageSize,
+            sort: 'DATE'
+        });
+    }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
index 63b84ebb8..0bcd0fa99 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
@@ -1,20 +1,32 @@
 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 {SearchByTagsComponent} from './packages-dashboard/search-by-tags/search-by-tags.component';
+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';
 
 
 @NgModule({
-    declarations: [DesignerComponent],
+    declarations: [PackagesDashboardComponent,
+        SearchByTagsComponent,
+        PackageListComponent,
+        DesignerComponent,
+        PackagePaginationComponent
+    ],
     imports: [
         CommonModule,
         PackagesRoutingModule,
         NgbPaginationModule,
+        SharedModulesModule,
         SidebarModule.forRoot(),
     ],
-    providers: [],
+    providers: [ApiService],
     bootstrap: []
 })
 export class PackagesModule {
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
index dc4856806..ad9f36979 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -1,9 +1,14 @@
 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 },
 ];
 
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.spec.ts
new file mode 100644
index 000000000..b091ed90e
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
new file mode 100644
index 000000000..799946dbc
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.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 {Injectable} from '@angular/core';
+import {BluePrintPage} from './model/BluePrint.model';
+import {Store} from '../../../common/core/stores/Store';
+import {PackagesListService} from './packages-list.service';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackagesStore extends Store<BluePrintPage> {
+    private bluePrintModels: BluePrintPage;
+
+    // TDOD fixed for now as there is no requirement to change it from UI
+    public pageSize = 2;
+
+    constructor(private packagesServiceList: PackagesListService) {
+        super(new BluePrintPage());
+    }
+
+    getPagedPackages(pageNumber: number, pageSize: number) {
+        this.packagesServiceList.getPagedPackages(pageNumber, pageSize)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState(pages[0]);
+            });
+    }
+
+    getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+        this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize)
+            .subscribe((pages: BluePrintPage[]) => {
+                this.setState(pages[0]);
+            });
+
+    }
+
+
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css
new file mode 100644
index 000000000..240f9dfae
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.css
@@ -0,0 +1,12 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.html
new file mode 100644
index 000000000..541b38d1a
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.spec.ts
new file mode 100644
index 000000000..2d0479d7d
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/header/header.component.ts
new file mode 100644
index 000000000..3ee4d0f65
--- /dev/null
+++ b/cds-ui/client-frankfurt/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/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/client-frankfurt/src/app/modules/shared-modules/shared-modules.module.ts
new file mode 100644
index 000000000..6b6d39689
--- /dev/null
+++ b/cds-ui/client-frankfurt/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 { }
diff --git a/cds-ui/client-frankfurt/src/assets/css/designer.css b/cds-ui/client-frankfurt/src/assets/css/designer.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/css/designer.css
diff --git a/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css b/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css
index b2f0939c8..b2f0939c8 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css
+++ b/cds-ui/client-frankfurt/src/assets/css/orangeHelvetica.css
diff --git a/cds-ui/client-frankfurt/src/assets/css/style1.css b/cds-ui/client-frankfurt/src/assets/css/style1.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/css/style1.css
diff --git a/cds-ui/client-frankfurt/src/assets/css/style2.css b/cds-ui/client-frankfurt/src/assets/css/style2.css
new file mode 100644
index 000000000..df65e6753
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/css/style2.css
@@ -0,0 +1,3 @@
+body {
+    background: black
+}
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot
index 818d20ed3..818d20ed3 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.eot
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg
index 28057ceff..28057ceff 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.svg
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf
index 007f6d19a..007f6d19a 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.ttf
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff
index 79d02e3c5..79d02e3c5 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2
index 8ad6b5531..8ad6b5531 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue55_W1G.woff2
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot
index f5a075df8..f5a075df8 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.eot
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg
index bb5811c01..bb5811c01 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.svg
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf
index 01ebe37bc..01ebe37bc 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.ttf
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff
index 96ba6a6fc..96ba6a6fc 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2
index 81b0c4d35..81b0c4d35 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2
+++ b/cds-ui/client-frankfurt/src/assets/fonts/HelvNeue75_W1G.woff2
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot
index 6561ccce7..6561ccce7 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot
+++ b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.eot
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg
index 72d0d46c7..72d0d46c7 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg
+++ b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.svg
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf
index a2dbfc839..a2dbfc839 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf
+++ b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.ttf
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff
index 629ec7e60..629ec7e60 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff
+++ b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff
diff --git a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2 b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2
index 82cd64dfd..82cd64dfd 100644..100755
--- a/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2
+++ b/cds-ui/client-frankfurt/src/assets/fonts/icon-orange.woff2
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg b/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg
new file mode 100644
index 000000000..66a8e1b88
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-add-hover.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>icon-add-hover</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-add-hover">
+            <circle id="Oval" fill="#103D73" cx="10" cy="10" r="10"></circle>
+            <path d="M13.75,9.375 L10.625,9.375 L10.625,6.25 C10.625,5.905 10.345,5.625 10,5.625 C9.655,5.625 9.375,5.905 9.375,6.25 L9.375,9.375 L6.25,9.375 C5.905,9.375 5.625,9.655 5.625,10 C5.625,10.345 5.905,10.625 6.25,10.625 L9.375,10.625 L9.375,13.75 C9.375,14.095 9.655,14.375 10,14.375 C10.345,14.375 10.625,14.095 10.625,13.75 L10.625,10.625 L13.75,10.625 C14.095,10.625 14.375,10.345 14.375,10 C14.375,9.655 14.095,9.375 13.75,9.375 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-add.svg b/cds-ui/client-frankfurt/src/assets/img/icon-add.svg
new file mode 100644
index 000000000..13020ba0f
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-add.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-1400.000000, -199.000000)" fill="#103D73" fill-rule="nonzero">
+            <g id="action-attributes" transform="translate(1044.000000, 60.000000)">
+                <g id="actions" transform="translate(36.000000, 0.000000)">
+                    <g id="STEPS" transform="translate(0.000000, 131.000000)">
+                        <g id="title">
+                            <path d="M330,8 C324.476863,8 320,12.4768627 320,18 C320,23.5231373 324.476863,28 330,28 C335.523137,28 340,23.5224837 340,18 C340,12.4775163 335.523137,8 330,8 Z M330,26.75 C325.167484,26.75 321.25,22.8325163 321.25,18 C321.25,13.1674837 325.167484,9.25 330,9.25 C334.832516,9.25 338.75,13.1674837 338.75,18 C338.75,22.8325163 334.832516,26.75 330,26.75 Z M333.75,17.375 L330.625,17.375 L330.625,14.25 C330.625,13.905 330.345,13.625 330,13.625 C329.655,13.625 329.375,13.905 329.375,14.25 L329.375,17.375 L326.25,17.375 C325.905,17.375 325.625,17.655 325.625,18 C325.625,18.345 325.905,18.625 326.25,18.625 L329.375,18.625 L329.375,21.75 C329.375,22.095 329.655,22.375 330,22.375 C330.345,22.375 330.625,22.095 330.625,21.75 L330.625,18.625 L333.75,18.625 C334.095,18.625 334.375,18.345 334.375,18 C334.375,17.655 334.095,17.375 333.75,17.375 Z" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-close.svg b/cds-ui/client-frankfurt/src/assets/img/icon-close.svg
new file mode 100644
index 000000000..bdd51b26f
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-close.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-1057.000000, -73.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="action-attributes" transform="translate(1044.000000, 60.000000)">
+                <g id="close">
+                    <path d="M18.8808333,17.996875 L22.8108333,14.066875 C23.055,13.8229167 23.055,13.4270833 22.8108333,13.183125 C22.5666667,12.9389583 22.17125,12.9389583 21.9270833,13.183125 L17.9970833,17.113125 L14.066875,13.183125 C13.8227083,12.9389583 13.4272917,12.9389583 13.183125,13.183125 C12.9389583,13.4270833 12.9389583,13.8229167 13.183125,14.066875 L17.1133333,17.996875 L13.183125,21.926875 C12.9389583,22.1708333 12.9389583,22.5666667 13.183125,22.810625 C13.3052083,22.9325 13.4652083,22.9935417 13.625,22.9935417 C13.7847917,22.9935417 13.9447917,22.9325 14.066875,22.8104167 L17.9970833,18.8804167 L21.9270833,22.8104167 C22.0491667,22.9325 22.2091667,22.9935417 22.3689583,22.9935417 C22.52875,22.9935417 22.68875,22.9325 22.8108333,22.8104167 C23.055,22.5664583 23.055,22.170625 22.8108333,21.9266667 L18.8808333,17.996875 Z" id="Path"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg
new file mode 100644
index 000000000..d0dd6aed9
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType1-sm.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>browser</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-55.000000, -632.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="functions" transform="translate(0.000000, 479.000000)">
+                    <g id="list" transform="translate(8.000000, 51.000000)">
+                        <g id="1" transform="translate(12.000000, 32.000000)">
+                            <g id="txt" transform="translate(35.000000, 10.000000)">
+                                <g id="browser">
+                                    <path d="M21.0000051,0.39034364 C20.9994786,0.29701568 20.9615913,0.207858845 20.8946802,0.142685701 C20.8275953,0.0776863856 20.7373957,0.0424059852 20.6440678,0.044547851 L0.355932203,0.044547851 C0.262604288,0.0422321924 0.172230877,0.0776863856 0.105319805,0.142685701 C0.0384086886,0.207685061 0.000347590042,0.29701568 -5.13814986e-06,0.39034364 L-5.13814986e-06,17.159999 C-0.00104277013,17.3591681 0.156763131,17.5232306 0.355932203,17.5298348 L5.23487982,17.5298348 L5.40554656,17.912879 C5.46654862,18.0503509 5.60784396,18.1341201 5.75782903,18.1216069 L6.47264799,18.0673828 C6.73994471,18.3993313 7.04999502,18.6944353 7.39480435,18.9448739 L7.37377516,19.657781 C7.36943029,19.8086351 7.46067267,19.9459332 7.60144661,20.0001573 L9.11989375,20.5863678 C9.2601463,20.6404181 9.41934258,20.6006191 9.51753676,20.4866095 L9.98104809,19.9494091 C10.4045865,19.9888606 10.8310795,19.9779115 11.2520111,19.916388 L11.7481959,20.4339496 C11.8516039,20.5417025 12.0109739,20.573507 12.1477506,20.5137215 L13.639607,19.8609475 C13.7777741,19.8004667 13.8629337,19.6593452 13.8518108,19.5088387 L13.7993247,18.7940198 C14.1316208,18.526723 14.4270723,18.2164989 14.6776847,17.8715158 L15.3911133,17.892545 C15.5409246,17.9005396 15.6790916,17.8115566 15.7336632,17.6718253 L15.7911894,17.5298348 L20.6440678,17.5298348 C20.8432369,17.5230568 21.0010428,17.3591681 21.0000051,17.159999 L21.0000051,4.16360731 C21.0000051,4.16239078 21.0000051,4.16134799 21.0000051,4.16013141 C21.0000051,4.15891483 21.0000051,4.15787209 21.0000051,4.15665551 L21.0000051,0.39034364 Z M20.2881356,0.756529716 L20.2881356,3.82644497 L0.711864407,3.82644497 L0.711864407,0.756529716 L20.2881356,0.756529716 Z M14.5063228,17.1542638 C14.3836235,17.1502665 14.2675285,17.2102257 14.1997484,17.312591 C13.9348848,17.7102341 13.6029363,18.0588668 13.2186755,18.3428479 C13.1204814,18.4153204 13.0664311,18.5333273 13.0752946,18.6549838 L13.1234359,19.3094958 L12.0900506,19.7615367 L11.6362718,19.2882928 C11.5535454,19.2019167 11.4329317,19.1629866 11.3152725,19.1845372 C10.841681,19.2712609 10.3574881,19.2837742 9.88007315,19.2215556 C9.76137118,19.2060878 9.64284296,19.2514483 9.564809,19.3419955 L9.14248708,19.8314023 L8.09293898,19.4266337 L8.11223019,18.7724692 C8.11587988,18.6499437 8.05592061,18.5340225 7.95390296,18.4658948 C7.55625995,18.2010312 7.20762712,17.8690827 6.92364608,17.4848219 C6.85099974,17.3868015 6.73316673,17.3327513 6.61151017,17.3416148 L5.95682436,17.3895822 L5.81605037,17.0678877 C5.80683925,17.0333024 5.79241425,17.0001076 5.77312299,16.9696934 L5.50478348,16.356197 L5.97802733,15.9024182 C6.06440349,15.8196918 6.10333358,15.6990781 6.08178295,15.5815926 C5.99505927,15.1080012 5.98254603,14.6238083 6.04476462,14.1463933 C6.06005858,14.0276913 6.01487188,13.9091631 5.92432468,13.8309554 L5.4349179,13.4086335 L5.8396865,12.3590853 L6.49385096,12.3783766 C6.61655026,12.3823739 6.73264534,12.3224146 6.80042537,12.2200493 C7.06528899,11.8222325 7.3972375,11.4735997 7.7814983,11.1897924 C7.87969248,11.1171461 7.93374269,10.9993131 7.92487918,10.8774828 L7.87673793,10.2229708 L8.91012315,9.77092987 L9.36407574,10.2441737 C9.44680217,10.3305498 9.56741589,10.3694799 9.68490137,10.3479293 C10.1586666,10.2612056 10.6428595,10.2486924 11.1202744,10.310911 C11.2389764,10.326205 11.3575047,10.2810183 11.4357124,10.1904711 L11.8580343,9.7010643 L12.9075824,10.1058329 L12.8882912,10.7598236 C12.8846415,10.8825228 12.944427,10.9984441 13.0466184,11.0665718 C13.4442614,11.3312616 13.7928943,11.6633839 14.0767015,12.0476447 C14.1493479,12.145665 14.2671809,12.1997153 14.3888374,12.1908517 L15.0433495,12.1427105 L15.4955641,13.1760958 L15.0221465,13.6298745 C14.9359441,13.712601 14.897014,13.8332147 14.9183908,13.9507002 C15.0051145,14.4242916 15.0176278,14.9084845 14.9555829,15.3858994 C14.9401152,15.5046014 14.9853019,15.6231297 15.0760229,15.7013374 L15.5654297,16.1236593 L15.1603135,17.1732074 L14.5063228,17.1542638 Z M16.0659593,16.8179704 L16.3195263,16.1533782 C16.3735765,16.0120829 16.3339513,15.8520177 16.2199417,15.7522593 L15.6827413,15.2870101 C15.7223666,14.8632978 15.7114175,14.4362834 15.6498941,14.0151781 L16.1674556,13.5184719 C16.2750347,13.4150639 16.3068392,13.2555201 16.2470538,13.1187434 L15.5944534,11.6268869 C15.5339728,11.4885461 15.3928512,11.4033865 15.2423448,11.4145094 L14.527352,11.4669955 C14.2602291,11.1346994 13.9503525,10.8392479 13.6055432,10.5884617 L13.6265725,9.8750331 C13.6309173,9.72417903 13.5396749,9.58688094 13.398901,9.53248311 L11.8804539,8.94644629 C11.7402013,8.89239608 11.581005,8.93219513 11.4828109,9.04603083 L11.0191257,9.58357886 C10.5955873,9.5439536 10.1689205,9.55490265 9.74798893,9.61642611 L9.25180414,9.09869073 C9.14856992,8.99093782 8.98902606,8.95913336 8.85224942,9.01891885 L7.36039295,9.67151912 C7.2222259,9.73199979 7.13706632,9.87329513 7.1481892,10.0238016 L7.20067532,10.7386206 C6.86837924,11.0059173 6.57310149,11.3161414 6.32231526,11.6609507 L5.60888671,11.6400953 C5.45785885,11.6352291 5.32038697,11.7264715 5.26633675,11.867593 L4.68047373,13.3860401 C4.62642346,13.5262927 4.66622251,13.6854889 4.78005826,13.7836832 L5.31743247,14.2473682 C5.2778072,14.6707329 5.2887563,15.0973997 5.35027972,15.5181574 L4.83289195,16.014516 C4.72496525,16.120531 4.69333454,16.2819865 4.75312002,16.4210226 L4.92343914,16.8179704 L0.711864407,16.8179704 L0.711864407,4.53830938 L20.2881356,4.53830938 L20.2881356,16.8179704 L16.0659593,16.8179704 Z" id="Shape"></path>
+                                    <path d="M4.59635694,3.39804025 C5.19264767,3.39804025 5.67788336,2.8969892 5.67788336,2.28105964 C5.67788336,1.66513009 5.19282145,1.16425286 4.59635694,1.16425286 C3.99989242,1.16425286 3.51483051,1.66513009 3.51483051,2.28105964 C3.51483051,2.8969892 4.00006621,3.39804025 4.59635694,3.39804025 Z M4.59635694,1.87594344 C4.80021849,1.87594344 4.96601896,2.05773305 4.96601896,2.28088586 C4.96601896,2.50403867 4.80021849,2.68600206 4.59635694,2.68600206 C4.39266917,2.68600206 4.22669492,2.50438623 4.22669492,2.28105964 C4.22669492,2.05773305 4.39266917,1.87594344 4.59635694,1.87594344 Z" id="Shape"></path>
+                                    <path d="M6.95406017,3.39804025 C7.55017712,3.39804025 8.03541282,2.8969892 8.03541282,2.28105964 C8.03541282,1.66513009 7.55052468,1.16425286 6.95406017,1.16425286 C6.35759566,1.16425286 5.87288136,1.66513009 5.87288136,2.28105964 C5.87288136,2.8969892 6.35776949,3.39804025 6.95406017,3.39804025 Z M6.95406017,1.87594344 C7.15774794,1.87594344 7.32354841,2.05773305 7.32354841,2.28088586 C7.32354841,2.50403867 7.15774794,2.68600206 6.95406017,2.68600206 C6.75019862,2.68600206 6.58474576,2.50438623 6.58474576,2.28105964 C6.58474576,2.05773305 6.75037241,1.87594344 6.95406017,1.87594344 Z" id="Shape"></path>
+                                    <path d="M2.23865366,3.39804025 C2.83494439,3.39804025 3.32018008,2.8969892 3.32018008,2.28105964 C3.32018008,1.66513009 2.83511817,1.16425286 2.23865366,1.16425286 C1.64218914,1.16425286 1.15730106,1.66530392 1.15730106,2.28105964 C1.15730106,2.89681541 1.64236293,3.39804025 2.23865366,3.39804025 Z M2.23865366,1.87594344 C2.44234142,1.87594344 2.60831568,2.05773305 2.60831568,2.28088586 C2.60831568,2.50403867 2.44234142,2.68600206 2.23865366,2.68600206 C2.03496589,2.68600206 1.86916546,2.50421245 1.86916546,2.28088586 C1.86916546,2.05738548 2.03496589,1.87594344 2.23865366,1.87594344 Z" id="Shape"></path>
+                                    <path d="M10.5,11.3416893 C8.6087626,11.3416893 7.0755429,12.874909 7.0755429,14.7663202 C7.0755429,16.6575576 8.6087626,18.1907773 10.5,18.1907773 C12.3912374,18.1907773 13.9244571,16.6575576 13.9244571,14.7663202 C13.9223716,12.875778 12.3903684,11.3439486 10.5,11.3416893 Z M10.5,17.4789129 C9.00188692,17.4789129 7.78740731,16.2644333 7.78740731,14.7663202 C7.78740731,13.2680333 9.00188692,12.0535537 10.5,12.0535537 C11.9981131,12.0535537 13.2125927,13.2680333 13.2125927,14.7663202 C13.2110285,16.2637381 11.9974179,17.4771749 10.5,17.4789129 Z" id="Shape"></path>
+                                    <path d="M10.5,13.0556558 C9.55525026,13.0556558 8.7893356,13.8215704 8.7893356,14.7663202 C8.7893356,15.7108961 9.55525026,16.4768108 10.5,16.4768108 C11.4447497,16.4768108 12.2104906,15.7110699 12.2104906,14.7663202 C12.2094478,13.8220918 11.4442283,13.0568724 10.5,13.0556558 L10.5,13.0556558 Z M10.5,15.7649464 C9.94837458,15.7649464 9.5012,15.3177718 9.5012,14.7663202 C9.5012,14.2146948 9.94837458,13.7675202 10.5,13.7675202 C11.0516254,13.7675202 11.4986262,14.2146948 11.4986262,14.7663202 C11.4981048,15.317598 11.0512778,15.7642512 10.5,15.7649464 L10.5,15.7649464 Z" id="Shape"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg
new file mode 100644
index 000000000..aab6e1ed1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType1.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>browser</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-535.000000, -232.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="workflow-container" transform="translate(401.000000, 137.000000)">
+                <g id="component" transform="translate(30.000000, 70.000000)">
+                    <g id="config-assign">
+                        <g id="Group-4" transform="translate(37.000000, 25.000000)">
+                            <g id="browser" transform="translate(67.000000, 0.000000)">
+                                <path d="M36.0000088,0.669160525 C35.9991062,0.509169737 35.9341565,0.356329449 35.8194518,0.244604059 C35.7044492,0.133176661 35.5498212,0.0726959746 35.3898305,0.0763677445 L0.610169492,0.0763677445 C0.45017878,0.0723980441 0.295252932,0.133176661 0.180548237,0.244604059 C0.0658434661,0.356031534 0.000595868644,0.509169737 -8.80825691e-06,0.669160525 L-8.80825691e-06,29.4171411 C-0.00178760593,29.7585739 0.268736797,30.0398239 0.610169492,30.0511454 L8.97407969,30.0511454 L9.26665124,30.7077926 C9.3712262,30.9434587 9.61344679,31.0870631 9.87056405,31.0656118 L11.095968,30.9726563 C11.5541909,31.5417108 12.0857058,32.0476033 12.6768074,32.4769267 L12.6407574,33.6990532 C12.6333091,33.9576602 12.7897246,34.1930284 13.0310513,34.2859839 L15.6341036,35.2909163 C15.8745365,35.3835739 16.1474444,35.315347 16.3157773,35.1199021 L17.1103682,34.198987 C17.8364341,34.2666182 18.5675649,34.2478483 19.2891618,34.1423795 L20.1397643,35.0296279 C20.3170352,35.2143472 20.590241,35.2688691 20.8247153,35.1663797 L23.3821835,34.0473385 C23.6190413,33.9436573 23.7650292,33.7017347 23.7459614,33.4437235 L23.6559852,32.2183197 C24.2256356,31.7600966 24.7321239,31.2282839 25.1617453,30.6368843 L26.3847656,30.6729343 C26.641585,30.6866393 26.8784428,30.534097 26.9719941,30.2945577 L27.0706104,30.0511454 L35.3898305,30.0511454 C35.7312632,30.0395259 36.0017876,29.7585739 36.0000088,29.4171411 L36.0000088,7.13761253 C36.0000088,7.13552705 36.0000088,7.13373941 36.0000088,7.13165385 C36.0000088,7.12956829 36.0000088,7.12778072 36.0000088,7.12569516 L36.0000088,0.669160525 Z M34.779661,1.29690808 L34.779661,6.55961995 L1.22033898,6.55961995 L1.22033898,1.29690808 L34.779661,1.29690808 Z M24.867982,29.4073093 C24.6576403,29.4004568 24.4586203,29.5032441 24.3424258,29.6787275 C23.8883739,30.3604012 23.3193194,30.9580574 22.6605866,31.4448822 C22.4922537,31.5691208 22.3995962,31.7714182 22.4147907,31.9799722 L22.4973186,33.1019928 L20.7258011,33.87692 L19.9478946,33.0656449 C19.8060779,32.9175715 19.5993114,32.8508343 19.3976099,32.887778 C18.5857389,33.0364473 17.7556939,33.0578986 16.9372683,32.9512381 C16.7337792,32.924722 16.5305879,33.0024828 16.3968154,33.1577066 L15.672835,33.9966896 L13.8736097,33.3028006 L13.9066803,32.1813758 C13.9129369,31.9713321 13.8101496,31.7726099 13.6352622,31.6558197 C12.9535885,31.2017678 12.3559322,30.6327132 11.8691076,29.9739804 C11.744571,29.8059454 11.5425715,29.7132879 11.3340174,29.7284826 L10.2116989,29.8107124 L9.97037207,29.259236 C9.95458157,29.199947 9.929853,29.1430416 9.89678227,29.090903 L9.43677168,28.0391949 L10.2480469,27.2612884 C10.3961203,27.1194716 10.4628576,26.9127053 10.4259136,26.7113017 C10.2772445,25.8994306 10.2557932,25.0693856 10.3624536,24.25096 C10.3886719,24.0474708 10.3112089,23.8442797 10.1559852,23.7102093 L9.31700212,22.9862288 L10.0108911,21.1870034 L11.1323159,21.2200742 C11.3426576,21.2269267 11.5416777,21.1241393 11.6578721,20.948656 C12.111924,20.2666843 12.6809786,19.669028 13.3397114,19.1825013 C13.5080442,19.0579648 13.6007018,18.8559653 13.5855072,18.6471133 L13.5029793,17.5250927 L15.2744968,16.7501655 L16.0527013,17.5614407 C16.194518,17.709514 16.4012844,17.7762513 16.6026881,17.7393074 C17.414857,17.5906382 18.2449021,17.5691869 19.0633276,17.6758475 C19.2668167,17.7020657 19.470008,17.6246028 19.6040784,17.469379 L20.3280588,16.6303959 L22.1272841,17.324285 L22.0942135,18.4454118 C22.0879568,18.6557534 22.1904462,18.8544756 22.3656316,18.9712659 C23.0473053,19.4250199 23.6449616,19.9943724 24.1314883,20.6531051 C24.2560249,20.8211401 24.4580244,20.9137977 24.6665784,20.898603 L25.7885991,20.8160752 L26.5638242,22.5875927 L25.7522511,23.3654992 C25.6044756,23.5073159 25.5377383,23.7140824 25.5743843,23.915486 C25.7230535,24.727357 25.7445047,25.5574021 25.6381422,26.3758276 C25.6116261,26.5793167 25.689089,26.782508 25.8446107,26.9165784 L26.6835937,27.6405588 L25.9891089,29.4397841 L24.867982,29.4073093 Z M27.5416446,28.8308064 L27.9763308,27.6915055 C28.0689883,27.449285 28.0010593,27.1748875 27.8056144,27.0038731 L26.8846994,26.206303 C26.9526284,25.4799391 26.9338585,24.7479144 26.8283898,24.0260196 L27.7156382,23.1745233 C27.9000596,22.9972524 27.9545816,22.7237487 27.8520922,22.4892744 L26.7333488,19.9318061 C26.6296676,19.6946504 26.3877449,19.5486626 26.1297339,19.5677304 L24.904032,19.6577066 C24.446107,19.0880561 23.9148901,18.5815678 23.3237884,18.1516486 L23.3598385,16.9286282 C23.3672868,16.6700212 23.2108713,16.434653 22.9695445,16.3413996 L20.3664923,15.3367651 C20.1260593,15.2441076 19.8531515,15.3123345 19.6848186,15.5074814 L18.8899298,16.4289923 C18.1638639,16.3610633 17.4324351,16.3798331 16.7108382,16.4853019 L15.8602357,15.5977555 C15.6832627,15.4130363 15.409759,15.3585143 15.1752847,15.4610037 L12.6178165,16.5797471 C12.3809587,16.6834282 12.2349708,16.9256488 12.2540386,17.18366 L12.3440148,18.4090638 C11.7743644,18.8672868 11.268174,19.3990996 10.8382547,19.9902013 L9.61523436,19.9544492 C9.35632945,19.946107 9.12066338,20.1025225 9.02800586,20.3444452 L8.02366925,22.9474974 C7.93101165,23.1879303 7.99923859,23.4608382 8.19438559,23.6291711 L9.11559852,24.4240598 C9.04766949,25.1498279 9.06643937,25.8812566 9.17190808,26.6025556 L8.28495763,27.453456 C8.09994043,27.635196 8.04571635,27.9119769 8.14820575,28.1503244 L8.44018139,28.8308064 L1.22033898,28.8308064 L1.22033898,7.77995893 L34.779661,7.77995893 L34.779661,28.8308064 L27.5416446,28.8308064 Z" id="Shape"></path>
+                                <path d="M7.87946903,5.82521186 C8.90168171,5.82521186 9.73351434,4.96626719 9.73351434,3.91038796 C9.73351434,2.85450872 8.90197963,1.99586204 7.87946903,1.99586204 C6.85695844,1.99586204 6.02542373,2.85450872 6.02542373,3.91038796 C6.02542373,4.96626719 6.85725636,5.82521186 7.87946903,5.82521186 Z M7.87946903,3.21590303 C8.22894597,3.21590303 8.51317536,3.52754237 8.51317536,3.91009004 C8.51317536,4.29263771 8.22894597,4.60457497 7.87946903,4.60457497 C7.53029001,4.60457497 7.24576271,4.29323354 7.24576271,3.91038796 C7.24576271,3.52754237 7.53029001,3.21590303 7.87946903,3.21590303 Z" id="Shape"></path>
+                                <path d="M11.921246,5.82521186 C12.9431608,5.82521186 13.7749934,4.96626719 13.7749934,3.91038796 C13.7749934,2.85450872 12.9437566,1.99586204 11.921246,1.99586204 C10.8987354,1.99586204 10.0677966,2.85450872 10.0677966,3.91038796 C10.0677966,4.96626719 10.8990334,5.82521186 11.921246,5.82521186 Z M11.921246,3.21590303 C12.270425,3.21590303 12.5546544,3.52754237 12.5546544,3.91009004 C12.5546544,4.29263771 12.270425,4.60457497 11.921246,4.60457497 C11.5717691,4.60457497 11.2881356,4.29323354 11.2881356,3.91038796 C11.2881356,3.52754237 11.572067,3.21590303 11.921246,3.21590303 Z" id="Shape"></path>
+                                <path d="M3.83769198,5.82521186 C4.85990466,5.82521186 5.69173729,4.96626719 5.69173729,3.91038796 C5.69173729,2.85450872 4.86020258,1.99586204 3.83769198,1.99586204 C2.81518139,1.99586204 1.98394467,2.85480671 1.98394467,3.91038796 C1.98394467,4.96596928 2.81547931,5.82521186 3.83769198,5.82521186 Z M3.83769198,3.21590303 C4.18687101,3.21590303 4.47139831,3.52754237 4.47139831,3.91009004 C4.47139831,4.29263771 4.18687101,4.60457497 3.83769198,4.60457497 C3.48851296,4.60457497 3.20428365,4.29293563 3.20428365,3.91009004 C3.20428365,3.52694654 3.48851296,3.21590303 3.83769198,3.21590303 Z" id="Shape"></path>
+                                <path d="M18,19.4428959 C14.7578787,19.4428959 12.1295021,22.0712725 12.1295021,25.3136917 C12.1295021,28.5558131 14.7578787,31.1841896 18,31.1841896 C21.2421213,31.1841896 23.8704979,28.5558131 23.8704979,25.3136917 C23.8669227,22.0727622 21.2406316,19.4467691 18,19.4428959 Z M18,29.9638506 C15.4318061,29.9638506 13.3498411,27.8818856 13.3498411,25.3136917 C13.3498411,22.7452 15.4318061,20.6632349 18,20.6632349 C20.5681939,20.6632349 22.6501589,22.7452 22.6501589,25.3136917 C22.6474775,27.8806939 20.5670021,29.9608713 18,29.9638506 Z" id="Shape"></path>
+                                <path d="M18,22.3811242 C16.380429,22.3811242 15.0674324,23.6941208 15.0674324,25.3136917 C15.0674324,26.9329648 16.380429,28.2459614 18,28.2459614 C19.619571,28.2459614 20.9322696,26.9332627 20.9322696,25.3136917 C20.930482,23.6950146 19.6186772,22.3832097 18,22.3811242 L18,22.3811242 Z M18,27.0256224 C17.0543564,27.0256224 16.2877714,26.2590373 16.2877714,25.3136917 C16.2877714,24.3680482 17.0543564,23.6014632 18,23.6014632 C18.9456436,23.6014632 19.7119306,24.3680482 19.7119306,25.3136917 C19.7110368,26.2587394 18.9450477,27.0244306 18,27.0256224 L18,27.0256224 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg
new file mode 100644
index 000000000..b28bd927a
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType2-sm.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="21px" viewBox="0 0 19 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>database0</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-55.000000, -682.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="functions" transform="translate(0.000000, 479.000000)">
+                    <g id="list" transform="translate(8.000000, 51.000000)">
+                        <g id="2" transform="translate(12.000000, 82.000000)">
+                            <g id="txt" transform="translate(35.000000, 10.000000)">
+                                <g id="database0">
+                                    <path d="M18.831139,3.18252756 C18.3980759,1.57817465 15.1747851,0 9.53636343,0 C3.8979418,0 0.674276991,1.57817465 0.241587873,3.18252756 C0.21017397,3.23750189 0.186987518,3.29771187 0.186987518,3.36577533 L0.186987518,3.55276285 L0.186987518,7.85347576 L0.186987518,8.04046328 L0.186987518,8.2274508 L0.186987518,12.3411762 L0.186987518,12.5281637 L0.186987518,12.7151512 L0.186987518,17.2028517 C0.186987518,17.2634356 0.203068445,17.3206538 0.230742597,17.3715144 C0.672407115,19.2021222 4.62382735,20.568627 9.53636343,20.568627 C14.4376803,20.568627 18.3827429,19.2077318 18.8389925,17.3838556 C18.8689105,17.3303772 18.8857393,17.2686713 18.8857393,17.2028517 L18.8857393,12.7151512 L18.8857393,12.5281637 L18.8857393,12.3411762 L18.8857393,8.2274508 L18.8857393,8.04046328 L18.8857393,7.85347576 L18.8857393,3.55276285 L18.8857393,3.36577533 C18.8857393,3.29771187 18.8625529,3.23750189 18.831139,3.18252756 Z M18.1082452,12.7095416 C18.0977739,12.7547926 18.0831889,12.7996696 18.0648641,12.8452945 C18.0499051,12.8823181 18.0315804,12.9193416 18.0113857,12.9563651 C17.9863294,13.0023641 17.9582812,13.048363 17.9249975,13.0943619 C17.9003151,13.1291416 17.872267,13.1635473 17.8430969,13.197953 C17.8015857,13.2469437 17.7574567,13.2959345 17.707344,13.3445512 C17.677052,13.3740953 17.6437682,13.4032653 17.6101105,13.4328093 C17.5487786,13.4862878 17.4848289,13.5393922 17.4133996,13.5921227 C17.3827337,13.6149352 17.3498239,13.6369997 17.317288,13.6594382 C17.2327697,13.7177783 17.1445116,13.7757444 17.047652,13.8325886 C17.0222217,13.8479216 16.9949216,13.8625066 16.9683693,13.8774656 C16.8569248,13.9402935 16.7406185,14.0027473 16.6149629,14.0633312 C16.598882,14.0711847 16.5820531,14.0786642 16.5655982,14.0861437 C16.4253576,14.1523373 16.2787594,14.217409 16.1220638,14.2802368 C16.1175761,14.2821066 16.1130884,14.2836025 16.1086007,14.2854724 C15.2593034,14.6246678 14.1729059,14.9100107 12.9070004,15.0969982 C12.9006429,15.0977462 12.8942853,15.0984941 12.8879277,15.0996161 C12.6418521,15.1358916 12.389419,15.1680535 12.1302543,15.1964756 C12.0879951,15.2009633 12.0434921,15.2039551 12.0008589,15.2084428 C11.774604,15.2320032 11.5457313,15.2536938 11.310127,15.2708966 C11.2024222,15.2787501 11.0894818,15.2824899 10.9799071,15.2892214 C10.8026429,15.2996927 10.6272486,15.3112859 10.4454967,15.3176435 C10.1485606,15.3269929 9.84564078,15.3329765 9.53636343,15.3329765 C9.22708607,15.3329765 8.92416629,15.3269929 8.62685614,15.3165216 C8.44510427,15.310164 8.26970998,15.2981968 8.09244581,15.2880995 C7.98287113,15.2817419 7.86993067,15.2776282 7.76222585,15.2697747 C7.52662158,15.2525719 7.29774886,15.2308813 7.07149396,15.2073209 C7.02886081,15.2028332 6.98435778,15.1998414 6.9420986,15.1953537 C6.6829339,15.1669316 6.43050075,15.1343957 6.18442518,15.0984941 C6.1780676,15.0977462 6.17171003,15.0969982 6.16535245,15.0958763 C4.89944695,14.9088888 3.81304947,14.6235458 2.96375216,14.2843505 C2.95926446,14.2828546 2.95477676,14.2809847 2.95028906,14.2791148 C2.79359352,14.216287 2.64662133,14.1512154 2.50675467,14.0850218 C2.49067374,14.0771683 2.47347089,14.0696888 2.45738996,14.0622093 C2.33173435,14.0016254 2.21542812,13.9395455 2.10398355,13.8763437 C2.0778053,13.8613847 2.05013115,13.8467997 2.02470085,13.8314667 C1.92784131,13.7746225 1.8395832,13.7166564 1.75506485,13.6583163 C1.72290299,13.6358778 1.68961921,13.6138132 1.65895326,13.5910008 C1.58752403,13.5382703 1.5235743,13.4851658 1.46224239,13.4316874 C1.42895861,13.4025174 1.39530086,13.3733473 1.36500888,13.3434293 C1.31489623,13.2948125 1.27076717,13.2461958 1.22925594,13.1968311 C1.20008589,13.1624254 1.17203776,13.1280197 1.14735541,13.09324 C1.11444561,13.0472411 1.08639748,13.0012421 1.06096718,12.9552432 C1.04077253,12.9182197 1.02282172,12.8811962 1.00748875,12.8441726 C0.989163971,12.7989216 0.974578945,12.7536707 0.964107644,12.7084197 C0.950270567,12.6489577 0.934937591,12.5883737 0.934937591,12.5281637 C0.934937591,12.4859045 0.939799266,12.4436454 0.946530817,12.4017602 C0.955880193,12.3452899 0.950644542,12.2888197 0.934937591,12.2353413 L0.934937591,9.45895059 C0.945408892,9.46867395 0.958498018,9.47802332 0.969343294,9.48774667 C1.05086985,9.55954988 1.13389231,9.63097911 1.22738607,9.69979052 C2.63615003,10.7652454 5.45330398,11.5932261 9.53636343,11.5932261 C13.60222,11.5932261 16.4122684,10.7719769 17.827016,9.71287964 C17.9399565,9.63060514 18.0416777,9.5457128 18.1374153,9.45932457 L18.1377893,9.45895059 L18.1377893,12.2353413 C18.1220823,12.2888197 18.1168467,12.3452899 18.126196,12.4017602 C18.1333016,12.4436454 18.1377893,12.4859045 18.1377893,12.5281637 C18.1377893,12.5883737 18.1224563,12.6489577 18.1082452,12.7095416 Z M18.1377893,4.97125016 L18.1377893,7.74764083 C18.1220823,7.80111926 18.1168467,7.85758949 18.126196,7.91405972 C18.1333016,7.95594492 18.1377893,7.9982041 18.1377893,8.04046328 C18.1377893,8.10067326 18.1224563,8.16125722 18.1082452,8.22184117 C18.0977739,8.26709215 18.0831889,8.31196916 18.0648641,8.35759411 C18.0499051,8.39461764 18.0315804,8.43164117 18.0113857,8.4686647 C17.9863294,8.51466363 17.9582812,8.56066256 17.9249975,8.60666149 C17.9003151,8.64144117 17.872267,8.67584687 17.8430969,8.71025257 C17.8015857,8.7592433 17.7574567,8.80823403 17.707344,8.85685079 C17.677052,8.88639481 17.6437682,8.91556487 17.6101105,8.94510889 C17.5487786,8.99858732 17.4848289,9.05169178 17.4133996,9.10442226 C17.3827337,9.12723474 17.3498239,9.14929926 17.317288,9.17173777 C17.2327697,9.23007787 17.1445116,9.288044 17.047652,9.34488821 C17.0222217,9.36022119 16.9949216,9.37480621 16.9683693,9.38976521 C16.8569248,9.45259302 16.7406185,9.51504685 16.6149629,9.57563081 C16.598882,9.58348428 16.5820531,9.59096378 16.5655982,9.59844328 C16.4253576,9.66463686 16.2787594,9.72970852 16.1220638,9.79253633 C16.1175761,9.7944062 16.1130884,9.7959021 16.1086007,9.79777198 C15.2593034,10.1369673 14.1729059,10.4223103 12.9070004,10.6092978 C12.9006429,10.6100458 12.8942853,10.6107937 12.8879277,10.6119156 C12.6418521,10.6481912 12.389419,10.6803531 12.1302543,10.7087752 C12.0879951,10.7132629 12.0434921,10.7162547 12.0008589,10.7207424 C11.774604,10.7443028 11.5457313,10.7659933 11.310127,10.7831962 C11.2024222,10.7910497 11.0894818,10.7947894 10.9799071,10.801521 C10.8026429,10.8119923 10.6272486,10.8235855 10.4454967,10.8299431 C10.1485606,10.8392925 9.84564078,10.8452761 9.53636343,10.8452761 C9.22708607,10.8452761 8.92416629,10.8392925 8.62685614,10.8288212 C8.44510427,10.8224636 8.26970998,10.8104964 8.09244581,10.8003991 C7.98287113,10.7940415 7.86993067,10.7899277 7.76222585,10.7820743 C7.52662158,10.7648714 7.29774886,10.7431809 7.07149396,10.7196204 C7.02886081,10.7151327 6.98435778,10.7121409 6.9420986,10.7076532 C6.6829339,10.6792311 6.43050075,10.6466953 6.18442518,10.6107937 C6.1780676,10.6100458 6.17171003,10.6092978 6.16535245,10.6081759 C4.89944695,10.4211884 3.81304947,10.1358454 2.96375216,9.79665005 C2.95926446,9.79515415 2.95477676,9.79328428 2.95028906,9.7914144 C2.79359352,9.7285866 2.64662133,9.66351494 2.50675467,9.59732136 C2.49067374,9.58946788 2.47347089,9.58198838 2.45738996,9.57450888 C2.33173435,9.51392493 2.21542812,9.45184507 2.10398355,9.38864329 C2.0778053,9.37368429 2.05013115,9.35909926 2.02470085,9.34376628 C1.92784131,9.28692208 1.8395832,9.22895595 1.75506485,9.17061584 C1.72290299,9.14817734 1.68961921,9.12611281 1.65895326,9.10330034 C1.58752403,9.05056986 1.5235743,8.9974654 1.46224239,8.94398697 C1.42895861,8.91481692 1.39530086,8.88564686 1.36500888,8.85572886 C1.31489623,8.80711211 1.27076717,8.75849535 1.22925594,8.70913065 C1.20008589,8.67472494 1.17203776,8.64031924 1.14735541,8.60553956 C1.11444561,8.55954063 1.08639748,8.5135417 1.06096718,8.46754277 C1.04077253,8.43051924 1.02282172,8.39349572 1.00748875,8.35647219 C0.989163971,8.31122121 0.974578945,8.26597023 0.964107644,8.22071925 C0.950270567,8.16125722 0.934937591,8.10067326 0.934937591,8.04046328 C0.934937591,7.9982041 0.939799266,7.95594492 0.946530817,7.91405972 C0.955880193,7.85758949 0.950644542,7.80111926 0.934937591,7.74764083 L0.934937591,4.97125016 C0.979814595,5.01201344 1.03104918,5.05202877 1.07966593,5.09241807 C1.10659213,5.11485657 1.13164846,5.13729507 1.16007056,5.15973358 C1.27226307,5.24799169 1.39343099,5.33512787 1.52469622,5.4200202 C1.5519964,5.43759703 1.58266235,5.45479988 1.61108446,5.47237671 C1.72103312,5.54081414 1.83733935,5.60775567 1.95962919,5.67357528 C2.00488017,5.69788365 2.05013115,5.72181806 2.09687803,5.74575246 C2.23337892,5.81531182 2.37661136,5.8830013 2.5273233,5.94844693 C2.55200565,5.9592922 2.57444415,5.97051146 2.59950048,5.98098276 C2.77489477,6.05540379 2.96113434,6.12645905 3.15485341,6.19527045 C3.20833184,6.21434318 3.26442809,6.23229398 3.31940242,6.25099273 C3.47348014,6.30297526 3.6327935,6.35271394 3.79771649,6.40095672 C3.85717853,6.41815957 3.91551863,6.43611038 3.97647656,6.45256528 C4.19525196,6.51314923 4.42113288,6.57074139 4.65823305,6.62384584 C4.69076888,6.63132534 4.72592253,6.63730895 4.75883234,6.64441447 C4.96788438,6.69003943 5.1847899,6.7322986 5.40767903,6.77193996 C5.48322198,6.78540306 5.55988687,6.79811821 5.63692572,6.81083336 C5.84896957,6.84561304 6.06737099,6.87740092 6.29138204,6.90657097 C6.34897419,6.91405047 6.40394852,6.9226519 6.46228863,6.92975742 C6.74052606,6.96341518 7.02848683,6.99221125 7.32430109,7.01689361 C7.39722622,7.02287721 7.47314315,7.02736491 7.54719021,7.03260056 C7.78391641,7.04980341 8.02587826,7.06401446 8.27344973,7.07523371 C8.36357771,7.07934744 8.45333172,7.08346116 8.54532958,7.08682694 C8.86769606,7.09767222 9.19604614,7.10552569 9.53636343,7.10552569 C9.87668071,7.10552569 10.2050308,7.09767222 10.5273973,7.08682694 C10.6190212,7.08346116 10.7087752,7.07934744 10.7992771,7.07523371 C11.0468486,7.06401446 11.2888104,7.04980341 11.5255366,7.03260056 C11.5995837,7.02699093 11.6751267,7.02287721 11.7484258,7.01689361 C12.04424,6.99258523 12.3322008,6.96341518 12.6104382,6.92975742 C12.6687783,6.9226519 12.7237527,6.91405047 12.7813448,6.90657097 C13.0053559,6.87740092 13.2233833,6.84561304 13.4358011,6.81083336 C13.51284,6.79811821 13.5895049,6.78540306 13.6650478,6.77193996 C13.887937,6.7322986 14.1048425,6.69003943 14.3138945,6.64441447 C14.3468043,6.63730895 14.381958,6.63095137 14.4144938,6.62384584 C14.651594,6.57074139 14.8774749,6.51277526 15.0962503,6.45256528 C15.1572082,6.4357364 15.2155483,6.41815957 15.2750104,6.40095672 C15.4399334,6.35271394 15.5992467,6.30297526 15.7533244,6.25099273 C15.8082988,6.23229398 15.864395,6.21434318 15.9178734,6.19527045 C16.1115925,6.12645905 16.2982061,6.05540379 16.4732264,5.98098276 C16.4982827,5.97051146 16.5207212,5.9592922 16.5454036,5.94844693 C16.6961155,5.88262732 16.8393479,5.81531182 16.9758488,5.74575246 C17.0225957,5.72181806 17.0682207,5.69788365 17.1130977,5.67357528 C17.2353875,5.60812965 17.3516937,5.54118811 17.4616424,5.47237671 C17.4900645,5.45479988 17.5207305,5.43759703 17.5480306,5.4200202 C17.6792959,5.33512787 17.8004638,5.24836566 17.9126563,5.15973358 C17.9407044,5.13729507 17.9657607,5.11485657 17.9930609,5.09241807 C18.0416777,5.05202877 18.0929123,5.01201344 18.1377893,4.97125016 Z M9.53636343,0.747950073 C14.605595,0.747950073 18.1377893,2.22589942 18.1377893,3.55276285 C18.1377893,4.87962627 14.605595,6.35757562 9.53636343,6.35757562 C4.46713181,6.35757562 0.934937591,4.87962627 0.934937591,3.55276285 C0.934937591,2.22589942 4.46713181,0.747950073 9.53636343,0.747950073 Z M18.1377893,17.0917811 C18.1325536,17.108236 18.1288139,17.1250649 18.1258221,17.1422677 C17.9137782,18.4358474 14.411502,19.8206769 9.53636343,19.8206769 C4.66122485,19.8206769 1.15894864,18.4358474 0.946904792,17.1422677 C0.943912992,17.1254388 0.939799266,17.1089839 0.934937591,17.093277 L0.934937591,13.946651 C0.945408892,13.9563744 0.958498018,13.9657238 0.969343294,13.9754471 C1.05086985,14.0472503 1.13389231,14.1186795 1.22738607,14.187491 C2.63615003,15.2529458 5.45330398,16.0809266 9.53636343,16.0809266 C13.60222,16.0809266 16.4122684,15.2596774 17.827016,14.2005801 C17.9399565,14.1183056 18.0416777,14.0334132 18.1374153,13.947025 L18.1377893,13.946651 L18.1377893,17.0917811 Z" id="Shape"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg
new file mode 100644
index 000000000..e1f75962e
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType2.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="39px" viewBox="0 0 36 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>database0</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-839.000000, -232.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="workflow-container" transform="translate(401.000000, 137.000000)">
+                <g id="component" transform="translate(30.000000, 70.000000)">
+                    <g id="execute" transform="translate(304.000000, 0.000000)">
+                        <g id="Group-4" transform="translate(43.000000, 25.000000)">
+                            <g id="database0" transform="translate(61.000000, 0.000000)">
+                                <path d="M35.544,6.00705882 C34.7265882,2.97882353 28.6425882,0 18,0 C7.35741176,0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,6.11082353 0.352941176,6.22447059 0.352941176,6.35294118 L0.352941176,6.70588235 L0.352941176,14.8235294 L0.352941176,15.1764706 L0.352941176,15.5294118 L0.352941176,23.2941176 L0.352941176,23.6470588 L0.352941176,24 L0.352941176,32.4705882 C0.352941176,32.5849412 0.383294118,32.6929412 0.435529412,32.7889412 C1.26917647,36.2442353 8.72752941,38.8235294 18,38.8235294 C27.2512941,38.8235294 34.6976471,36.2548235 35.5588235,32.8122353 C35.6152941,32.7112941 35.6470588,32.5948235 35.6470588,32.4705882 L35.6470588,24 L35.6470588,23.6470588 L35.6470588,23.2941176 L35.6470588,15.5294118 L35.6470588,15.1764706 L35.6470588,14.8235294 L35.6470588,6.70588235 L35.6470588,6.35294118 C35.6470588,6.22447059 35.6032941,6.11082353 35.544,6.00705882 Z M34.1795294,23.9894118 C34.1597647,24.0748235 34.1322353,24.1595294 34.0976471,24.2456471 C34.0694118,24.3155294 34.0348235,24.3854118 33.9967059,24.4552941 C33.9494118,24.5421176 33.8964706,24.6289412 33.8336471,24.7157647 C33.7870588,24.7814118 33.7341176,24.8463529 33.6790588,24.9112941 C33.6007059,25.0037647 33.5174118,25.0962353 33.4228235,25.188 C33.3656471,25.2437647 33.3028235,25.2988235 33.2392941,25.3545882 C33.1235294,25.4555294 33.0028235,25.5557647 32.868,25.6552941 C32.8101176,25.6983529 32.748,25.74 32.6865882,25.7823529 C32.5270588,25.8924706 32.3604706,26.0018824 32.1776471,26.1091765 C32.1296471,26.1381176 32.0781176,26.1656471 32.028,26.1938824 C31.8176471,26.3124706 31.5981176,26.4303529 31.3609412,26.5447059 C31.3305882,26.5595294 31.2988235,26.5736471 31.2677647,26.5877647 C31.0030588,26.7127059 30.7263529,26.8355294 30.4305882,26.9541176 C30.4221176,26.9576471 30.4136471,26.9604706 30.4051765,26.964 C28.8021176,27.6042353 26.7515294,28.1428235 24.3621176,28.4957647 C24.3501176,28.4971765 24.3381176,28.4985882 24.3261176,28.5007059 C23.8616471,28.5691765 23.3851765,28.6298824 22.896,28.6835294 C22.8162353,28.692 22.7322353,28.6976471 22.6517647,28.7061176 C22.2247059,28.7505882 21.7927059,28.7915294 21.348,28.824 C21.1447059,28.8388235 20.9315294,28.8458824 20.7247059,28.8585882 C20.3901176,28.8783529 20.0590588,28.9002353 19.716,28.9122353 C19.1555294,28.9298824 18.5837647,28.9411765 18,28.9411765 C17.4162353,28.9411765 16.8444706,28.9298824 16.2832941,28.9101176 C15.9402353,28.8981176 15.6091765,28.8755294 15.2745882,28.8564706 C15.0677647,28.8444706 14.8545882,28.8367059 14.6512941,28.8218824 C14.2065882,28.7894118 13.7745882,28.7484706 13.3475294,28.704 C13.2670588,28.6955294 13.1830588,28.6898824 13.1032941,28.6814118 C12.6141176,28.6277647 12.1376471,28.5663529 11.6731765,28.4985882 C11.6611765,28.4971765 11.6491765,28.4957647 11.6371765,28.4936471 C9.24776471,28.1407059 7.19717647,27.6021176 5.59411765,26.9618824 C5.58564706,26.9590588 5.57717647,26.9555294 5.56870588,26.952 C5.27294118,26.8334118 4.99552941,26.7105882 4.73152941,26.5856471 C4.70117647,26.5708235 4.66870588,26.5567059 4.63835294,26.5425882 C4.40117647,26.4282353 4.18164706,26.3110588 3.97129412,26.1917647 C3.92188235,26.1635294 3.86964706,26.136 3.82164706,26.1070588 C3.63882353,25.9997647 3.47223529,25.8903529 3.31270588,25.7802353 C3.252,25.7378824 3.18917647,25.6962353 3.13129412,25.6531765 C2.99647059,25.5536471 2.87576471,25.4534118 2.76,25.3524706 C2.69717647,25.2974118 2.63364706,25.2423529 2.57647059,25.1858824 C2.48188235,25.0941176 2.39858824,25.0023529 2.32023529,24.9091765 C2.26517647,24.8442353 2.21223529,24.7792941 2.16564706,24.7136471 C2.10352941,24.6268235 2.05058824,24.54 2.00258824,24.4531765 C1.96447059,24.3832941 1.93058824,24.3134118 1.90164706,24.2435294 C1.86705882,24.1581176 1.83952941,24.0727059 1.81976471,23.9872941 C1.79364706,23.8750588 1.76470588,23.7607059 1.76470588,23.6470588 C1.76470588,23.5672941 1.77388235,23.4875294 1.78658824,23.4084706 C1.80423529,23.3018824 1.79435294,23.1952941 1.76470588,23.0943529 L1.76470588,17.8538824 C1.78447059,17.8722353 1.80917647,17.8898824 1.82964706,17.9082353 C1.98352941,18.0437647 2.14023529,18.1785882 2.31670588,18.3084706 C4.97576471,20.3195294 10.2931765,21.8823529 18,21.8823529 C25.6743529,21.8823529 30.9783529,20.3322353 33.6487059,18.3331765 C33.8618824,18.1778824 34.0538824,18.0176471 34.2345882,17.8545882 L34.2352941,17.8538824 L34.2352941,23.0943529 C34.2056471,23.1952941 34.1957647,23.3018824 34.2134118,23.4084706 C34.2268235,23.4875294 34.2352941,23.5672941 34.2352941,23.6470588 C34.2352941,23.7607059 34.2063529,23.8750588 34.1795294,23.9894118 Z M34.2352941,9.38329412 L34.2352941,14.6237647 C34.2056471,14.7247059 34.1957647,14.8312941 34.2134118,14.9378824 C34.2268235,15.0169412 34.2352941,15.0967059 34.2352941,15.1764706 C34.2352941,15.2901176 34.2063529,15.4044706 34.1795294,15.5188235 C34.1597647,15.6042353 34.1322353,15.6889412 34.0976471,15.7750588 C34.0694118,15.8449412 34.0348235,15.9148235 33.9967059,15.9847059 C33.9494118,16.0715294 33.8964706,16.1583529 33.8336471,16.2451765 C33.7870588,16.3108235 33.7341176,16.3757647 33.6790588,16.4407059 C33.6007059,16.5331765 33.5174118,16.6256471 33.4228235,16.7174118 C33.3656471,16.7731765 33.3028235,16.8282353 33.2392941,16.884 C33.1235294,16.9849412 33.0028235,17.0851765 32.868,17.1847059 C32.8101176,17.2277647 32.748,17.2694118 32.6865882,17.3117647 C32.5270588,17.4218824 32.3604706,17.5312941 32.1776471,17.6385882 C32.1296471,17.6675294 32.0781176,17.6950588 32.028,17.7232941 C31.8176471,17.8418824 31.5981176,17.9597647 31.3609412,18.0741176 C31.3305882,18.0889412 31.2988235,18.1030588 31.2677647,18.1171765 C31.0030588,18.2421176 30.7263529,18.3649412 30.4305882,18.4835294 C30.4221176,18.4870588 30.4136471,18.4898824 30.4051765,18.4934118 C28.8021176,19.1336471 26.7515294,19.6722353 24.3621176,20.0251765 C24.3501176,20.0265882 24.3381176,20.028 24.3261176,20.0301176 C23.8616471,20.0985882 23.3851765,20.1592941 22.896,20.2129412 C22.8162353,20.2214118 22.7322353,20.2270588 22.6517647,20.2355294 C22.2247059,20.28 21.7927059,20.3209412 21.348,20.3534118 C21.1447059,20.3682353 20.9315294,20.3752941 20.7247059,20.388 C20.3901176,20.4077647 20.0590588,20.4296471 19.716,20.4416471 C19.1555294,20.4592941 18.5837647,20.4705882 18,20.4705882 C17.4162353,20.4705882 16.8444706,20.4592941 16.2832941,20.4395294 C15.9402353,20.4275294 15.6091765,20.4049412 15.2745882,20.3858824 C15.0677647,20.3738824 14.8545882,20.3661176 14.6512941,20.3512941 C14.2065882,20.3188235 13.7745882,20.2778824 13.3475294,20.2334118 C13.2670588,20.2249412 13.1830588,20.2192941 13.1032941,20.2108235 C12.6141176,20.1571765 12.1376471,20.0957647 11.6731765,20.028 C11.6611765,20.0265882 11.6491765,20.0251765 11.6371765,20.0230588 C9.24776471,19.6701176 7.19717647,19.1315294 5.59411765,18.4912941 C5.58564706,18.4884706 5.57717647,18.4849412 5.56870588,18.4814118 C5.27294118,18.3628235 4.99552941,18.24 4.73152941,18.1150588 C4.70117647,18.1002353 4.66870588,18.0861176 4.63835294,18.072 C4.40117647,17.9576471 4.18164706,17.8404706 3.97129412,17.7211765 C3.92188235,17.6929412 3.86964706,17.6654118 3.82164706,17.6364706 C3.63882353,17.5291765 3.47223529,17.4197647 3.31270588,17.3096471 C3.252,17.2672941 3.18917647,17.2256471 3.13129412,17.1825882 C2.99647059,17.0830588 2.87576471,16.9828235 2.76,16.8818824 C2.69717647,16.8268235 2.63364706,16.7717647 2.57647059,16.7152941 C2.48188235,16.6235294 2.39858824,16.5317647 2.32023529,16.4385882 C2.26517647,16.3736471 2.21223529,16.3087059 2.16564706,16.2430588 C2.10352941,16.1562353 2.05058824,16.0694118 2.00258824,15.9825882 C1.96447059,15.9127059 1.93058824,15.8428235 1.90164706,15.7729412 C1.86705882,15.6875294 1.83952941,15.6021176 1.81976471,15.5167059 C1.79364706,15.4044706 1.76470588,15.2901176 1.76470588,15.1764706 C1.76470588,15.0967059 1.77388235,15.0169412 1.78658824,14.9378824 C1.80423529,14.8312941 1.79435294,14.7247059 1.76470588,14.6237647 L1.76470588,9.38329412 C1.84941176,9.46023529 1.94611765,9.53576471 2.03788235,9.612 C2.08870588,9.65435294 2.136,9.69670588 2.18964706,9.73905882 C2.40141176,9.90564706 2.63011765,10.0701176 2.87788235,10.2303529 C2.92941176,10.2635294 2.98729412,10.296 3.04094118,10.3291765 C3.24847059,10.4583529 3.468,10.5847059 3.69882353,10.7089412 C3.78423529,10.7548235 3.86964706,10.8 3.95788235,10.8451765 C4.21552941,10.9764706 4.48588235,11.1042353 4.77035294,11.2277647 C4.81694118,11.2482353 4.85929412,11.2694118 4.90658824,11.2891765 C5.23764706,11.4296471 5.58917647,11.5637647 5.95482353,11.6936471 C6.05576471,11.7296471 6.16164706,11.7635294 6.26541176,11.7988235 C6.55623529,11.8969412 6.85694118,11.9908235 7.16823529,12.0818824 C7.28047059,12.1143529 7.39058824,12.1482353 7.50564706,12.1792941 C7.91858824,12.2936471 8.34494118,12.4023529 8.79247059,12.5025882 C8.85388235,12.5167059 8.92023529,12.528 8.98235294,12.5414118 C9.37694118,12.6275294 9.78635294,12.7072941 10.2070588,12.7821176 C10.3496471,12.8075294 10.4943529,12.8315294 10.6397647,12.8555294 C11.04,12.9211765 11.4522353,12.9811765 11.8750588,13.0362353 C11.9837647,13.0503529 12.0875294,13.0665882 12.1976471,13.08 C12.7228235,13.1435294 13.2663529,13.1978824 13.8247059,13.2444706 C13.9623529,13.2557647 14.1056471,13.2642353 14.2454118,13.2741176 C14.6922353,13.3065882 15.1489412,13.3334118 15.6162353,13.3545882 C15.7863529,13.3623529 15.9557647,13.3701176 16.1294118,13.3764706 C16.7378824,13.3969412 17.3576471,13.4117647 18,13.4117647 C18.6423529,13.4117647 19.2621176,13.3969412 19.8705882,13.3764706 C20.0435294,13.3701176 20.2129412,13.3623529 20.3837647,13.3545882 C20.8510588,13.3334118 21.3077647,13.3065882 21.7545882,13.2741176 C21.8943529,13.2635294 22.0369412,13.2557647 22.1752941,13.2444706 C22.7336471,13.1985882 23.2771765,13.1435294 23.8023529,13.08 C23.9124706,13.0665882 24.0162353,13.0503529 24.1249412,13.0362353 C24.5477647,12.9811765 24.9592941,12.9211765 25.3602353,12.8555294 C25.5056471,12.8315294 25.6503529,12.8075294 25.7929412,12.7821176 C26.2136471,12.7072941 26.6230588,12.6275294 27.0176471,12.5414118 C27.0797647,12.528 27.1461176,12.516 27.2075294,12.5025882 C27.6550588,12.4023529 28.0814118,12.2929412 28.4943529,12.1792941 C28.6094118,12.1475294 28.7195294,12.1143529 28.8317647,12.0818824 C29.1430588,11.9908235 29.4437647,11.8969412 29.7345882,11.7988235 C29.8383529,11.7635294 29.9442353,11.7296471 30.0451765,11.6936471 C30.4108235,11.5637647 30.7630588,11.4296471 31.0934118,11.2891765 C31.1407059,11.2694118 31.1830588,11.2482353 31.2296471,11.2277647 C31.5141176,11.1035294 31.7844706,10.9764706 32.0421176,10.8451765 C32.1303529,10.8 32.2164706,10.7548235 32.3011765,10.7089412 C32.532,10.5854118 32.7515294,10.4590588 32.9590588,10.3291765 C33.0127059,10.296 33.0705882,10.2635294 33.1221176,10.2303529 C33.3698824,10.0701176 33.5985882,9.90635294 33.8103529,9.73905882 C33.8632941,9.69670588 33.9105882,9.65435294 33.9621176,9.612 C34.0538824,9.53576471 34.1505882,9.46023529 34.2352941,9.38329412 Z M18,1.41176471 C27.5682353,1.41176471 34.2352941,4.20141176 34.2352941,6.70588235 C34.2352941,9.21035294 27.5682353,12 18,12 C8.43176471,12 1.76470588,9.21035294 1.76470588,6.70588235 C1.76470588,4.20141176 8.43176471,1.41176471 18,1.41176471 Z M34.2352941,32.2609412 C34.2254118,32.292 34.2183529,32.3237647 34.2127059,32.3562353 C33.8124706,34.7978824 27.2018824,37.4117647 18,37.4117647 C8.79811765,37.4117647 2.18752941,34.7978824 1.78729412,32.3562353 C1.78164706,32.3244706 1.77388235,32.2934118 1.76470588,32.2637647 L1.76470588,26.3244706 C1.78447059,26.3428235 1.80917647,26.3604706 1.82964706,26.3788235 C1.98352941,26.5143529 2.14023529,26.6491765 2.31670588,26.7790588 C4.97576471,28.7901176 10.2931765,30.3529412 18,30.3529412 C25.6743529,30.3529412 30.9783529,28.8028235 33.6487059,26.8037647 C33.8618824,26.6484706 34.0538824,26.4882353 34.2345882,26.3251765 L34.2352941,26.3244706 L34.2352941,32.2609412 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg
new file mode 100644
index 000000000..f823d8c19
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType3-sm.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>server</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-55.000000, -800.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="functions" transform="translate(0.000000, 479.000000)">
+                    <g id="list" transform="translate(8.000000, 51.000000)">
+                        <g id="4" transform="translate(12.000000, 200.000000)">
+                            <g id="txt" transform="translate(35.000000, 10.000000)">
+                                <g id="server">
+                                    <path d="M3.5,2.023 C2.673,2.023 2,2.696 2,3.523 C2,4.35 2.673,5.023 3.5,5.023 C4.327,5.023 5,4.35 5,3.523 C5,2.696 4.327,2.023 3.5,2.023 Z M3.5,4.35633333 C3.04066667,4.35633333 2.66666667,3.98266667 2.66666667,3.523 C2.66666667,3.06333333 3.04066667,2.68966667 3.5,2.68966667 C3.95933333,2.68966667 4.33333333,3.06333333 4.33333333,3.523 C4.33333333,3.98266667 3.95933333,4.35633333 3.5,4.35633333 Z" id="Shape"></path>
+                                    <circle id="Oval" cx="16.6666667" cy="3.023" r="1"></circle>
+                                    <circle id="Oval" cx="15.3333333" cy="3.023" r="1"></circle>
+                                    <circle id="Oval" cx="17.3333333" cy="4.023" r="1"></circle>
+                                    <circle id="Oval" cx="16" cy="4.023" r="1"></circle>
+                                    <circle id="Oval" cx="14" cy="3.023" r="1"></circle>
+                                    <circle id="Oval" cx="14.6666667" cy="4.023" r="1"></circle>
+                                    <circle id="Oval" cx="12.6666667" cy="3.023" r="1"></circle>
+                                    <circle id="Oval" cx="13.3333333" cy="4.023" r="1"></circle>
+                                    <circle id="Oval" cx="11.3333333" cy="3.023" r="1"></circle>
+                                    <circle id="Oval" cx="12" cy="4.023" r="1"></circle>
+                                    <path d="M20,5.48666667 L20,1.559 C20,0.712 19.311,0.023 18.464,0.023 L1.536,0.023 C0.689,0.023 0,0.712 0,1.559 L0,5.48666667 C0,5.97633333 0.234333333,6.408 0.592333333,6.68933333 C0.234333333,6.971 0,7.40266667 0,7.89233333 L0,11.82 C0,12.667 0.689,13.356 1.536,13.356 L10,13.356 L18.464,13.356 C19.311,13.356 20,12.667 20,11.82 L20,7.89233333 C20,7.40266667 19.7656667,6.971 19.4076667,6.68966667 C19.7656667,6.408 20,5.97633333 20,5.48666667 Z M19.3333333,7.89233333 L19.3333333,11.82 C19.3333333,12.2993333 18.9433333,12.6893335 18.464,12.6893335 L1.536,12.6893335 C1.05666667,12.6896667 0.666666667,12.2996667 0.666666667,11.82 L0.666666667,7.89233333 C0.666666667,7.413 1.05666667,7.023 1.536,7.023 L18.4636667,7.023 C18.9433333,7.023 19.3333333,7.413 19.3333333,7.89233333 Z M1.536,6.35633333 C1.05666667,6.35633333 0.666666667,5.96633333 0.666666667,5.48666667 L0.666666667,1.559 C0.666666667,1.07966667 1.05666667,0.689666667 1.536,0.689666667 L18.4636667,0.689666667 C18.9433333,0.689666667 19.3333333,1.07966667 19.3333333,1.559 L19.3333333,5.48666667 C19.3333333,5.966 18.9433333,6.356 18.464,6.356 L1.536,6.356 L1.536,6.35633333 Z" id="Shape"></path>
+                                    <path d="M3.5,11.3563333 C4.327,11.3563333 5,10.6833333 5,9.85633333 C5,9.02933333 4.327,8.35633333 3.5,8.35633333 C2.673,8.35633333 2,9.029 2,9.85633333 C2,10.6836667 2.673,11.3563333 3.5,11.3563333 Z M3.5,9.023 C3.95933333,9.023 4.33333333,9.39666667 4.33333333,9.85633333 C4.33333333,10.316 3.95933333,10.6896667 3.5,10.6896667 C3.04066667,10.6896667 2.66666667,10.316 2.66666667,9.85633333 C2.66666667,9.39666667 3.04066667,9.023 3.5,9.023 Z" id="Shape"></path>
+                                    <path d="M10.491,16.8183333 C10.5673333,16.8613333 10.6373333,16.9143333 10.6996667,16.9753333 C10.7646667,17.039 10.849,17.0706667 10.933,17.0706667 C11.0193333,17.0706667 11.1056667,17.037 11.171,16.9706667 C11.3,16.839 11.2976667,16.6283333 11.1663333,16.4993333 C11.0626667,16.3976667 10.9463333,16.3103333 10.82,16.2383333 C10.659,16.148 10.4563333,16.2033333 10.3656667,16.364 C10.275,16.524 10.331,16.7273333 10.491,16.8183333 Z" id="Path"></path>
+                                    <path d="M10.5013333,18.5553333 C10.4263333,18.5993333 10.3456667,18.6326667 10.2616667,18.6553333 C10.084,18.7033333 9.97866667,18.886 10.0263333,19.064 C10.0666667,19.2126667 10.201,19.3106667 10.348,19.3106667 C10.3766667,19.3106667 10.4056667,19.307 10.435,19.2993333 C10.5756667,19.2613333 10.711,19.205 10.8366667,19.1316667 C10.9956667,19.039 11.0496667,18.8346667 10.957,18.6756667 C10.8643333,18.5163333 10.6603333,18.463 10.5013333,18.5553333 Z" id="Path"></path>
+                                    <path d="M11.3333333,17.3483333 C11.1493333,17.3483333 11,17.5053333 11,17.6893333 C11,17.7773333 10.9886667,17.864 10.9663333,17.9476667 C10.9186667,18.1253333 11.0246667,18.308 11.2023333,18.3556667 C11.231,18.3633333 11.26,18.367 11.2883333,18.367 C11.4356667,18.367 11.5703333,18.2686667 11.6103333,18.1196667 C11.6476667,17.9803333 11.6666667,17.8353333 11.6666667,17.6896667 L11.6666667,17.674 C11.6666667,17.4896667 11.5173333,17.3483333 11.3333333,17.3483333 Z" id="Path"></path>
+                                    <path d="M9.50333333,18.5573333 C9.42766667,18.514 9.358,18.461 9.29633333,18.3996667 C9.16566667,18.2696667 8.955,18.271 8.825,18.401 C8.695,18.5316667 8.69566667,18.7426667 8.82633333,18.8723333 C8.92966667,18.975 9.046,19.0636667 9.17233333,19.136 C9.22466667,19.166 9.28133333,19.18 9.33766667,19.18 C9.45333333,19.18 9.56566667,19.1196667 9.62733333,19.0123333 C9.71833333,18.8526667 9.663,18.649 9.50333333,18.5573333 Z" id="Path"></path>
+                                    <path d="M9.55566667,16.0833333 C9.41566667,16.1216667 9.281,16.179 9.15566667,16.2526667 C8.997,16.346 8.944,16.5503333 9.03733333,16.709 C9.09966667,16.8143333 9.211,16.8733333 9.325,16.8733333 C9.38233333,16.8733333 9.44066667,16.8586667 9.49366667,16.8273333 C9.569,16.783 9.64933333,16.749 9.73333333,16.7256667 C9.91066667,16.677 10.015,16.4933333 9.966,16.316 C9.91666667,16.1386667 9.73333333,16.035 9.55566667,16.0833333 Z" id="Path"></path>
+                                    <path d="M9,17.6896667 C9,17.6036667 9.011,17.5186667 9.03233333,17.4366667 C9.07866667,17.2586667 8.972,17.0766667 8.79366667,17.03 C8.61533333,16.984 8.43333333,17.0903333 8.387,17.2686667 C8.35133333,17.4053333 8.33333333,17.547 8.33333333,17.6966667 L8.66666667,17.6973333 L8.33333333,17.6973333 C8.33333333,17.8816667 8.48233333,18.0266672 8.66666667,18.0266672 C8.851,18.027 9,17.874 9,17.6896667 Z" id="Path"></path>
+                                    <circle id="Oval" cx="16.6666667" cy="9.35633333" r="1"></circle>
+                                    <circle id="Oval" cx="15.3333333" cy="9.35633333" r="1"></circle>
+                                    <circle id="Oval" cx="17.3333333" cy="10.3563333" r="1"></circle>
+                                    <circle id="Oval" cx="16" cy="10.3563333" r="1"></circle>
+                                    <circle id="Oval" cx="14" cy="9.35633333" r="1"></circle>
+                                    <circle id="Oval" cx="14.6666667" cy="10.3563333" r="1"></circle>
+                                    <circle id="Oval" cx="12.6666667" cy="9.35633333" r="1"></circle>
+                                    <circle id="Oval" cx="13.3333333" cy="10.3563333" r="1"></circle>
+                                    <circle id="Oval" cx="11.3333333" cy="9.35633333" r="1"></circle>
+                                    <circle id="Oval" cx="12" cy="10.3563333" r="1"></circle>
+                                    <path d="M7.33333333,17.3563333 L7,17.3563333 C6.816,17.3563333 6.66666667,17.5053333 6.66666667,17.6896667 C6.66666667,17.874 6.816,18.023 7,18.023 L7.33333333,18.023 C7.51733333,18.023 7.66666667,17.874 7.66666667,17.6896667 C7.66666667,17.5053333 7.51733333,17.3563333 7.33333333,17.3563333 Z" id="Path"></path>
+                                    <path d="M4.66666667,17.3563333 L4.33333333,17.3563333 C4.14933333,17.3563333 4,17.5053333 4,17.6896667 C4,17.874 4.14933333,18.023 4.33333333,18.023 L4.66666667,18.023 C4.85066667,18.023 5,17.874 5,17.6896667 C5,17.5053333 4.85066667,17.3563333 4.66666667,17.3563333 Z" id="Path"></path>
+                                    <path d="M6,17.3563333 L5.66666667,17.3563333 C5.48266667,17.3563333 5.33333333,17.5053333 5.33333333,17.6896667 C5.33333333,17.874 5.48266667,18.023 5.66666667,18.023 L6,18.023 C6.184,18.023 6.33333333,17.874 6.33333333,17.6896667 C6.33333333,17.5053333 6.184,17.3563333 6,17.3563333 Z" id="Path"></path>
+                                    <path d="M0.666666667,17.3563333 L0.333333333,17.3563333 C0.149333333,17.3563333 0,17.5053333 0,17.6896667 C0,17.874 0.149333333,18.023 0.333333333,18.023 L0.666666667,18.023 C0.850666667,18.023 1,17.874 1,17.6896667 C1,17.5053333 0.850666667,17.3563333 0.666666667,17.3563333 Z" id="Path"></path>
+                                    <path d="M2,17.3563333 L1.66666667,17.3563333 C1.48266667,17.3563333 1.33333333,17.5053333 1.33333333,17.6896667 C1.33333333,17.874 1.48266667,18.023 1.66666667,18.023 L2,18.023 C2.184,18.023 2.33333333,17.874 2.33333333,17.6896667 C2.33333333,17.5053333 2.184,17.3563333 2,17.3563333 Z" id="Path"></path>
+                                    <path d="M3.33333333,17.3563333 L3,17.3563333 C2.816,17.3563333 2.66666667,17.5053333 2.66666667,17.6896667 C2.66666667,17.874 2.816,18.023 3,18.023 L3.33333333,18.023 C3.51733333,18.023 3.66666667,17.874 3.66666667,17.6896667 C3.66666667,17.5053333 3.51733333,17.3563333 3.33333333,17.3563333 Z" id="Path"></path>
+                                    <path d="M13,17.3563333 L12.6666667,17.3563333 C12.4826667,17.3563333 12.3333333,17.5053333 12.3333333,17.6896667 C12.3333333,17.874 12.4826667,18.023 12.6666667,18.023 L13,18.023 C13.184,18.023 13.3333333,17.874 13.3333333,17.6896667 C13.3333333,17.5053333 13.184,17.3563333 13,17.3563333 Z" id="Path"></path>
+                                    <path d="M15.6666667,17.3563333 L15.3333333,17.3563333 C15.1493333,17.3563333 15,17.5053333 15,17.6896667 C15,17.874 15.1493333,18.023 15.3333333,18.023 L15.6666667,18.023 C15.8506667,18.023 16,17.874 16,17.6896667 C16,17.5053333 15.8506667,17.3563333 15.6666667,17.3563333 Z" id="Path"></path>
+                                    <path d="M14.3333333,17.3563333 L14,17.3563333 C13.816,17.3563333 13.6666667,17.5053333 13.6666667,17.6896667 C13.6666667,17.874 13.816,18.023 14,18.023 L14.3333333,18.023 C14.5173333,18.023 14.6666667,17.874 14.6666667,17.6896667 C14.6666667,17.5053333 14.5173333,17.3563333 14.3333333,17.3563333 Z" id="Path"></path>
+                                    <path d="M19.6666667,17.3563333 L19.3333333,17.3563333 C19.1493333,17.3563333 19,17.5053333 19,17.6896667 C19,17.874 19.1493333,18.023 19.3333333,18.023 L19.6666667,18.023 C19.8506667,18.023 20,17.874 20,17.6896667 C20,17.5053333 19.8506667,17.3563333 19.6666667,17.3563333 Z" id="Path"></path>
+                                    <path d="M17,17.3563333 L16.6666667,17.3563333 C16.4826667,17.3563333 16.3333333,17.5053333 16.3333333,17.6896667 C16.3333333,17.874 16.4826667,18.023 16.6666667,18.023 L17,18.023 C17.184,18.023 17.3333333,17.874 17.3333333,17.6896667 C17.3333333,17.5053333 17.184,17.3563333 17,17.3563333 Z" id="Path"></path>
+                                    <path d="M18.3333333,17.3563333 L18,17.3563333 C17.816,17.3563333 17.6666667,17.5053333 17.6666667,17.6896667 C17.6666667,17.874 17.816,18.023 18,18.023 L18.3333333,18.023 C18.5173333,18.023 18.6666667,17.874 18.6666667,17.6896667 C18.6666667,17.5053333 18.5173333,17.3563333 18.3333333,17.3563333 Z" id="Path"></path>
+                                    <path d="M10.3333333,15.3563333 L10.3333333,15.023 C10.3333333,14.8386667 10.184,14.6896667 10,14.6896667 C9.816,14.6896667 9.66666667,14.8386667 9.66666667,15.023 L9.66666667,15.3563333 C9.66666667,15.5406667 9.816,15.6896667 10,15.6896667 C10.184,15.6896667 10.3333333,15.5406667 10.3333333,15.3563333 Z" id="Path"></path>
+                                    <path d="M9.66666667,13.6896667 L9.66666667,14.023 C9.66666667,14.2073333 9.816,14.3563333 10,14.3563333 C10.184,14.3563333 10.3333333,14.2073333 10.3333333,14.023 L10.3333333,13.6896667 C10.3333333,13.5053333 10.184,13.3563333 10,13.3563333 C9.816,13.3563333 9.66666667,13.5053333 9.66666667,13.6896667 Z" id="Path"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg
new file mode 100644
index 000000000..1d43c82da
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType3.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>server</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-685.000000, -402.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="workflow-container" transform="translate(401.000000, 137.000000)">
+                <g id="component" transform="translate(30.000000, 70.000000)">
+                    <g id="dg-generic" transform="translate(150.000000, 170.000000)">
+                        <g id="Group-4" transform="translate(87.000000, 25.000000)">
+                            <g id="server" transform="translate(17.000000, 0.000000)">
+                                <path d="M6.3,3.6414 C4.8114,3.6414 3.6,4.8528 3.6,6.3414 C3.6,7.83 4.8114,9.0414 6.3,9.0414 C7.7886,9.0414 9,7.83 9,6.3414 C9,4.8528 7.7886,3.6414 6.3,3.6414 Z M6.3,7.8414 C5.4732,7.8414 4.8,7.1688 4.8,6.3414 C4.8,5.514 5.4732,4.8414 6.3,4.8414 C7.1268,4.8414 7.8,5.514 7.8,6.3414 C7.8,7.1688 7.1268,7.8414 6.3,7.8414 Z" id="Shape"></path>
+                                <circle id="Oval" cx="30" cy="5.4414" r="1"></circle>
+                                <circle id="Oval" cx="27.6" cy="5.4414" r="1"></circle>
+                                <circle id="Oval" cx="31.2" cy="7.2414" r="1"></circle>
+                                <circle id="Oval" cx="28.8" cy="7.2414" r="1"></circle>
+                                <circle id="Oval" cx="25.2" cy="5.4414" r="1"></circle>
+                                <circle id="Oval" cx="26.4" cy="7.2414" r="1"></circle>
+                                <circle id="Oval" cx="22.8" cy="5.4414" r="1"></circle>
+                                <circle id="Oval" cx="24" cy="7.2414" r="1"></circle>
+                                <circle id="Oval" cx="20.4" cy="5.4414" r="1"></circle>
+                                <circle id="Oval" cx="21.6" cy="7.2414" r="1"></circle>
+                                <path d="M36,9.876 L36,2.8062 C36,1.2816 34.7598,0.0414 33.2352,0.0414 L2.7648,0.0414 C1.2402,0.0414 0,1.2816 0,2.8062 L0,9.876 C0,10.7574 0.4218,11.5344 1.0662,12.0408 C0.4218,12.5478 0,13.3248 0,14.2062 L0,21.276 C0,22.8006 1.2402,24.0408 2.7648,24.0408 L18,24.0408 L33.2352,24.0408 C34.7598,24.0408 36,22.8006 36,21.276 L36,14.2062 C36,13.3248 35.5782,12.5478 34.9338,12.0414 C35.5782,11.5344 36,10.7574 36,9.876 Z M34.8,14.2062 L34.8,21.276 C34.8,22.1388 34.098,22.8408004 33.2352,22.8408004 L2.7648,22.8408004 C1.902,22.8414 1.2,22.1394 1.2,21.276 L1.2,14.2062 C1.2,13.3434 1.902,12.6414 2.7648,12.6414 L33.2346,12.6414 C34.098,12.6414 34.8,13.3434 34.8,14.2062 Z M2.7648,11.4414 C1.902,11.4414 1.2,10.7394 1.2,9.876 L1.2,2.8062 C1.2,1.9434 1.902,1.2414 2.7648,1.2414 L33.2346,1.2414 C34.098,1.2414 34.8,1.9434 34.8,2.8062 L34.8,9.876 C34.8,10.7388 34.098,11.4408 33.2352,11.4408 L2.7648,11.4408 L2.7648,11.4414 Z" id="Shape"></path>
+                                <path d="M6.3,20.4414 C7.7886,20.4414 9,19.23 9,17.7414 C9,16.2528 7.7886,15.0414 6.3,15.0414 C4.8114,15.0414 3.6,16.2522 3.6,17.7414 C3.6,19.2306 4.8114,20.4414 6.3,20.4414 Z M6.3,16.2414 C7.1268,16.2414 7.8,16.914 7.8,17.7414 C7.8,18.5688 7.1268,19.2414 6.3,19.2414 C5.4732,19.2414 4.8,18.5688 4.8,17.7414 C4.8,16.914 5.4732,16.2414 6.3,16.2414 Z" id="Shape"></path>
+                                <path d="M18.8838,30.273 C19.0212,30.3504 19.1472,30.4458 19.2594,30.5556 C19.3764,30.6702 19.5282,30.7272 19.6794,30.7272 C19.8348,30.7272 19.9902,30.6666 20.1078,30.5472 C20.34,30.3102 20.3358,29.931 20.0994,29.6988 C19.9128,29.5158 19.7034,29.3586 19.476,29.229 C19.1862,29.0664 18.8214,29.166 18.6582,29.4552 C18.495,29.7432 18.5958,30.1092 18.8838,30.273 Z" id="Path"></path>
+                                <path d="M18.9024,33.3996 C18.7674,33.4788 18.6222,33.5388 18.471,33.5796 C18.1512,33.666 17.9616,33.9948 18.0474,34.3152 C18.12,34.5828 18.3618,34.7592 18.6264,34.7592 C18.678,34.7592 18.7302,34.7526 18.783,34.7388 C19.0362,34.6704 19.2798,34.569 19.506,34.437 C19.7922,34.2702 19.8894,33.9024 19.7226,33.6162 C19.5558,33.3294 19.1886,33.2334 18.9024,33.3996 Z" id="Path"></path>
+                                <path d="M20.4,31.227 C20.0688,31.227 19.8,31.5096 19.8,31.8408 C19.8,31.9992 19.7796,32.1552 19.7394,32.3058 C19.6536,32.6256 19.8444,32.9544 20.1642,33.0402 C20.2158,33.054 20.268,33.0606 20.319,33.0606 C20.5842,33.0606 20.8266,32.8836 20.8986,32.6154 C20.9658,32.3646 21,32.1036 21,31.8414 L21,31.8132 C21,31.4814 20.7312,31.227 20.4,31.227 Z" id="Path"></path>
+                                <path d="M17.106,33.4032 C16.9698,33.3252 16.8444,33.2298 16.7334,33.1194 C16.4982,32.8854 16.119,32.8878 15.885,33.1218 C15.651,33.357 15.6522,33.7368 15.8874,33.9702 C16.0734,34.155 16.2828,34.3146 16.5102,34.4448 C16.6044,34.4988 16.7064,34.524 16.8078,34.524 C17.016,34.524 17.2182,34.4154 17.3292,34.2222 C17.493,33.9348 17.3934,33.5682 17.106,33.4032 Z" id="Path"></path>
+                                <path d="M17.2002,28.95 C16.9482,29.019 16.7058,29.1222 16.4802,29.2548 C16.1946,29.4228 16.0992,29.7906 16.2672,30.0762 C16.3794,30.2658 16.5798,30.372 16.785,30.372 C16.8882,30.372 16.9932,30.3456 17.0886,30.2892 C17.2242,30.2094 17.3688,30.1482 17.52,30.1062 C17.8392,30.0186 18.027,29.688 17.9388,29.3688 C17.85,29.0496 17.52,28.863 17.2002,28.95 Z" id="Path"></path>
+                                <path d="M16.2,31.8414 C16.2,31.6866 16.2198,31.5336 16.2582,31.386 C16.3416,31.0656 16.1496,30.738 15.8286,30.654 C15.5076,30.5712 15.18,30.7626 15.0966,31.0836 C15.0324,31.3296 15,31.5846 15,31.854 L15.6,31.8552 L15,31.8552 C15,32.187 15.2682,32.448001 15.6,32.448001 C15.9318,32.4486 16.2,32.1732 16.2,31.8414 Z" id="Path"></path>
+                                <circle id="Oval" cx="30" cy="16.8414" r="1"></circle>
+                                <circle id="Oval" cx="27.6" cy="16.8414" r="1"></circle>
+                                <circle id="Oval" cx="31.2" cy="18.6414" r="1"></circle>
+                                <circle id="Oval" cx="28.8" cy="18.6414" r="1"></circle>
+                                <circle id="Oval" cx="25.2" cy="16.8414" r="1"></circle>
+                                <circle id="Oval" cx="26.4" cy="18.6414" r="1"></circle>
+                                <circle id="Oval" cx="22.8" cy="16.8414" r="1"></circle>
+                                <circle id="Oval" cx="24" cy="18.6414" r="1"></circle>
+                                <circle id="Oval" cx="20.4" cy="16.8414" r="1"></circle>
+                                <circle id="Oval" cx="21.6" cy="18.6414" r="1"></circle>
+                                <path d="M13.2,31.2414 L12.6,31.2414 C12.2688,31.2414 12,31.5096 12,31.8414 C12,32.1732 12.2688,32.4414 12.6,32.4414 L13.2,32.4414 C13.5312,32.4414 13.8,32.1732 13.8,31.8414 C13.8,31.5096 13.5312,31.2414 13.2,31.2414 Z" id="Path"></path>
+                                <path d="M8.4,31.2414 L7.8,31.2414 C7.4688,31.2414 7.2,31.5096 7.2,31.8414 C7.2,32.1732 7.4688,32.4414 7.8,32.4414 L8.4,32.4414 C8.7312,32.4414 9,32.1732 9,31.8414 C9,31.5096 8.7312,31.2414 8.4,31.2414 Z" id="Path"></path>
+                                <path d="M10.8,31.2414 L10.2,31.2414 C9.8688,31.2414 9.6,31.5096 9.6,31.8414 C9.6,32.1732 9.8688,32.4414 10.2,32.4414 L10.8,32.4414 C11.1312,32.4414 11.4,32.1732 11.4,31.8414 C11.4,31.5096 11.1312,31.2414 10.8,31.2414 Z" id="Path"></path>
+                                <path d="M1.2,31.2414 L0.6,31.2414 C0.2688,31.2414 0,31.5096 0,31.8414 C0,32.1732 0.2688,32.4414 0.6,32.4414 L1.2,32.4414 C1.5312,32.4414 1.8,32.1732 1.8,31.8414 C1.8,31.5096 1.5312,31.2414 1.2,31.2414 Z" id="Path"></path>
+                                <path d="M3.6,31.2414 L3,31.2414 C2.6688,31.2414 2.4,31.5096 2.4,31.8414 C2.4,32.1732 2.6688,32.4414 3,32.4414 L3.6,32.4414 C3.9312,32.4414 4.2,32.1732 4.2,31.8414 C4.2,31.5096 3.9312,31.2414 3.6,31.2414 Z" id="Path"></path>
+                                <path d="M6,31.2414 L5.4,31.2414 C5.0688,31.2414 4.8,31.5096 4.8,31.8414 C4.8,32.1732 5.0688,32.4414 5.4,32.4414 L6,32.4414 C6.3312,32.4414 6.6,32.1732 6.6,31.8414 C6.6,31.5096 6.3312,31.2414 6,31.2414 Z" id="Path"></path>
+                                <path d="M23.4,31.2414 L22.8,31.2414 C22.4688,31.2414 22.2,31.5096 22.2,31.8414 C22.2,32.1732 22.4688,32.4414 22.8,32.4414 L23.4,32.4414 C23.7312,32.4414 24,32.1732 24,31.8414 C24,31.5096 23.7312,31.2414 23.4,31.2414 Z" id="Path"></path>
+                                <path d="M28.2,31.2414 L27.6,31.2414 C27.2688,31.2414 27,31.5096 27,31.8414 C27,32.1732 27.2688,32.4414 27.6,32.4414 L28.2,32.4414 C28.5312,32.4414 28.8,32.1732 28.8,31.8414 C28.8,31.5096 28.5312,31.2414 28.2,31.2414 Z" id="Path"></path>
+                                <path d="M25.8,31.2414 L25.2,31.2414 C24.8688,31.2414 24.6,31.5096 24.6,31.8414 C24.6,32.1732 24.8688,32.4414 25.2,32.4414 L25.8,32.4414 C26.1312,32.4414 26.4,32.1732 26.4,31.8414 C26.4,31.5096 26.1312,31.2414 25.8,31.2414 Z" id="Path"></path>
+                                <path d="M35.4,31.2414 L34.8,31.2414 C34.4688,31.2414 34.2,31.5096 34.2,31.8414 C34.2,32.1732 34.4688,32.4414 34.8,32.4414 L35.4,32.4414 C35.7312,32.4414 36,32.1732 36,31.8414 C36,31.5096 35.7312,31.2414 35.4,31.2414 Z" id="Path"></path>
+                                <path d="M30.6,31.2414 L30,31.2414 C29.6688,31.2414 29.4,31.5096 29.4,31.8414 C29.4,32.1732 29.6688,32.4414 30,32.4414 L30.6,32.4414 C30.9312,32.4414 31.2,32.1732 31.2,31.8414 C31.2,31.5096 30.9312,31.2414 30.6,31.2414 Z" id="Path"></path>
+                                <path d="M33,31.2414 L32.4,31.2414 C32.0688,31.2414 31.8,31.5096 31.8,31.8414 C31.8,32.1732 32.0688,32.4414 32.4,32.4414 L33,32.4414 C33.3312,32.4414 33.6,32.1732 33.6,31.8414 C33.6,31.5096 33.3312,31.2414 33,31.2414 Z" id="Path"></path>
+                                <path d="M18.6,27.6414 L18.6,27.0414 C18.6,26.7096 18.3312,26.4414 18,26.4414 C17.6688,26.4414 17.4,26.7096 17.4,27.0414 L17.4,27.6414 C17.4,27.9732 17.6688,28.2414 18,28.2414 C18.3312,28.2414 18.6,27.9732 18.6,27.6414 Z" id="Path"></path>
+                                <path d="M17.4,24.6414 L17.4,25.2414 C17.4,25.5732 17.6688,25.8414 18,25.8414 C18.3312,25.8414 18.6,25.5732 18.6,25.2414 L18.6,24.6414 C18.6,24.3096 18.3312,24.0414 18,24.0414 C17.6688,24.0414 17.4,24.3096 17.4,24.6414 Z" id="Path"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg b/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg
new file mode 100644
index 000000000..18bb8f952
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-comType4-sm.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>language</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-55.000000, -741.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="functions" transform="translate(0.000000, 479.000000)">
+                    <g id="list" transform="translate(8.000000, 51.000000)">
+                        <g id="3" transform="translate(12.000000, 132.000000)">
+                            <g id="txt" transform="translate(35.000000, 10.000000)">
+                                <g id="language" transform="translate(0.000000, 9.000000)">
+                                    <path d="M10,0 C4.47721354,0 0,4.47721354 0,10 C0,15.5227865 4.47721354,20 10,20 C15.5227865,20 20,15.5227865 20,10 C19.9938151,4.47981771 15.5201823,0.00618491667 10,0 Z M18.6486003,13.5032552 L15.8046875,13.9939779 C16.1302083,12.8001302 16.3059896,11.5704752 16.3279622,10.3333333 L19.3250325,10.3333333 C19.2874349,11.4215495 19.058431,12.4946289 18.6486003,13.5032552 L18.6486003,13.5032552 Z M0.674967458,10.3333333 L3.67203775,10.3333333 C3.69401042,11.5704752 3.86979167,12.8001302 4.1953125,13.9939779 L1.35139975,13.5032552 C0.941569,12.4946289 0.712565083,11.4215495 0.674967458,10.3333333 Z M1.35139975,6.49674479 L4.1953125,6.00602213 C3.86979167,7.19986979 3.69401042,8.42952475 3.67203775,9.66666667 L0.674967458,9.66666667 C0.712565083,8.5784505 0.941569,7.50537108 1.35139975,6.49674479 Z M10.3333333,5.35205079 C11.5310872,5.36735025 12.7259115,5.47639975 13.9067383,5.67838542 L15.0833333,5.88134767 C15.4448242,7.11149088 15.6393229,8.38460288 15.6616211,9.66666667 L10.3333333,9.66666667 L10.3333333,5.35205079 Z M14.020345,5.02132163 C12.8020833,4.81315104 11.5691732,4.70068358 10.3333333,4.68538413 L10.3333333,0.685384125 C12.2443034,0.868977875 13.9042969,2.61865233 14.8450521,5.16503908 L14.020345,5.02132163 Z M9.66666667,4.68538413 C8.43082683,4.70068358 7.19824217,4.81315104 5.97998046,5.02132163 L5.15494792,5.1640625 C6.09570313,2.61702475 7.75569663,0.866699208 9.66666667,0.68391925 L9.66666667,4.68538413 Z M6.09358725,5.67838542 C7.27425129,5.47639975 8.46891275,5.36735025 9.66666667,5.35205079 L9.66666667,9.66666667 L4.33837892,9.66666667 C4.36067708,8.38460288 4.55517579,7.11149088 4.91666667,5.88134767 L6.09358725,5.67838542 Z M4.33837892,10.3333333 L9.66666667,10.3333333 L9.66666667,14.6479492 C8.46891275,14.6326497 7.27408854,14.5236002 6.09326171,14.3216146 L4.91666667,14.1186523 C4.55517579,12.8885091 4.36067708,11.6153971 4.33837892,10.3333333 L4.33837892,10.3333333 Z M5.97965496,14.9786784 C7.19791667,15.1871745 8.43066408,15.3001302 9.66666667,15.3164062 L9.66666667,19.3164062 C7.75569663,19.1326497 6.09570313,17.3829752 5.15494792,14.8365885 L5.97965496,14.9786784 Z M10.3333333,15.3164062 C11.5691732,15.3001302 12.8017578,15.1871745 14.0200195,14.9786784 L14.8450521,14.8359375 C13.9042969,17.3829752 12.2443034,19.1333008 10.3333333,19.3160807 L10.3333333,15.3164062 Z M13.9064128,14.3216146 C12.7257487,14.5236002 11.5310872,14.6326497 10.3333333,14.6479492 L10.3333333,10.3333333 L15.6616211,10.3333333 C15.6393229,11.6153971 15.4448242,12.8885091 15.0833333,14.1186523 L13.9064128,14.3216146 Z M16.3279623,9.66666667 C16.3059896,8.42952475 16.1302083,7.19986979 15.8046875,6.00602213 L18.6486003,6.49674479 C19.058431,7.50537108 19.2874349,8.5784505 19.3250325,9.66666667 L16.3279623,9.66666667 Z M18.3113607,5.76204425 L15.5852865,5.29166667 C15.0952148,3.69287108 14.1783854,2.25797525 12.9332683,1.14160158 C15.261556,1.91861979 17.1923828,3.57731121 18.3113607,5.76204425 Z M7.06673175,1.14160158 C5.82161458,2.25797525 4.90478517,3.69287108 4.41471354,5.29166667 L1.68863933,5.76204425 C2.80761717,3.57731121 4.738444,1.91861979 7.06673175,1.14160158 Z M1.68863933,14.2379557 L4.41471354,14.7083333 C4.90478517,16.3071289 5.82161458,17.7420247 7.06673175,18.8583984 C4.738444,18.0813802 2.80761717,16.4226888 1.68863933,14.2379557 Z M12.9332683,18.8583984 C14.1783854,17.7420247 15.0952148,16.3071289 15.5852865,14.7083333 L18.3113607,14.2379557 C17.1923828,16.4226888 15.261556,18.0813802 12.9332683,18.8583984 Z" id="Shape"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg b/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg
new file mode 100644
index 000000000..844043d1e
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-drag.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="11px" viewBox="0 0 4 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>drag menu</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-40.000000, -687.000000)" fill="#C3CDDB" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="functions" transform="translate(0.000000, 479.000000)">
+                    <g id="list" transform="translate(8.000000, 51.000000)">
+                        <g id="2" transform="translate(12.000000, 82.000000)">
+                            <g id="drag-menu" transform="translate(20.000000, 15.000000)">
+                                <g id="left">
+                                    <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
+                                    <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
+                                    <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
+                                    <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
+                                </g>
+                                <g id="right" transform="translate(2.400000, 0.000000)">
+                                    <circle id="1" cx="0.8" cy="0.8" r="1"></circle>
+                                    <circle id="2" cx="0.8" cy="3.8" r="1"></circle>
+                                    <circle id="3" cx="0.8" cy="6.8" r="1"></circle>
+                                    <circle id="4" cx="0.8" cy="9.8" r="1"></circle>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg b/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg
new file mode 100644
index 000000000..d4f10aae6
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-edit.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>edit</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-1156.000000, -252.000000)" fill="#0070F4" fill-rule="nonzero">
+            <g id="action-attributes" transform="translate(1044.000000, 60.000000)">
+                <g id="actions" transform="translate(36.000000, 0.000000)">
+                    <g id="STEPS" transform="translate(0.000000, 131.000000)">
+                        <g id="name" transform="translate(20.000000, 57.000000)">
+                            <g id="edit">
+                                <path d="M56,12.6778017 L56,15.000024 L58.3222222,15.000024 L65.0444444,8.21669063 L62.7222222,5.89446841 L56,12.6778017 Z M66.8166667,6.44446841 C67.0611111,6.20002397 67.0611111,5.8333573 66.8166667,5.58891285 L65.4111111,4.18333333 C65.1666667,3.93888889 64.8,3.93888889 64.5555556,4.18333333 L63.4555556,5.28333333 L65.7777778,7.60555556 L66.8166667,6.44446841 Z"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg b/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg
new file mode 100644
index 000000000..e48e59537
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-redo.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="6px" viewBox="0 0 13 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>redo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-591.000000, -77.000000)" fill="#D9E3EE" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="undo/redo">
+                        <g id="icons" transform="translate(10.000000, 10.000000)">
+                            <path d="M34.6636156,0.634620137 C32.9850092,0.634620137 31.4555606,1.25972082 30.2846682,2.28466819 L28,1.00808251e-13 L28,5.71167048 L33.7116705,5.71167048 L31.4174828,3.41748284 C32.2964554,2.67814874 33.4229039,2.2212151 34.6636156,2.2212151 C36.913389,2.2212151 38.8172792,3.68402746 39.4836407,5.71167048 L40.9845309,5.21665904 C40.1119245,2.5575492 37.6146453,0.634620137 34.6636156,0.634620137 Z" id="redo" transform="translate(34.492265, 2.855835) scale(-1, 1) translate(-34.492265, -2.855835) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg b/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg
new file mode 100644
index 000000000..e6bea0cc9
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-search-light.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>search</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-20.000000, -79.000000)" fill="#D0D7E4" fill-rule="nonzero">
+            <g id="controller" transform="translate(0.000000, 60.000000)">
+                <g id="search">
+                    <g id="txt" transform="translate(20.000000, 19.000000)">
+                        <path d="M11.9341186,12.0639984 L8.43795198,8.42806982 C9.32969918,7.53373444 9.88215892,6.30081747 9.88215892,4.94107946 C9.88215892,2.21642707 7.66573185,6.30606678e-14 4.94107946,6.30606678e-14 C2.21642707,6.30606678e-14 -1.77635684e-15,2.21642707 -1.77635684e-15,4.94107946 C-1.77635684e-15,7.66573185 2.21642707,9.88215892 4.94107946,9.88215892 C6.13705598,9.88215892 7.23468149,9.4546379 8.0901941,8.74524006 L11.5948312,12.3901097 C11.6409479,12.438344 11.7025938,12.4623436 11.7644749,12.4623436 C11.8232973,12.4623436 11.8818844,12.4404616 11.9275305,12.3966978 C12.0211757,12.3065819 12.0239992,12.1576437 11.9341186,12.0639984 Z M4.94107946,9.41157992 C2.47595139,9.41157992 0.470578996,7.40620753 0.470578996,4.94107946 C0.470578996,2.47595139 2.47595139,0.470578996 4.94107946,0.470578996 C7.40620753,0.470578996 9.41157992,2.47595139 9.41157992,4.94107946 C9.41157992,7.40620753 7.40597224,9.41157992 4.94107946,9.41157992 Z" id="search"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg b/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg
new file mode 100644
index 000000000..3d53d447d
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-topologySource.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>source-page</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-823.000000, -73.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="view-options" transform="translate(192.000000, 0.000000)">
+                        <g id="source" transform="translate(66.000000, 0.000000)">
+                            <g id="txt" transform="translate(12.000000, 6.000000)">
+                                <g id="source-page">
+                                    <g id="Group" transform="translate(2.944785, 5.521472)">
+                                        <path d="M3.01527607,4.48886503 C3.00915644,4.44657975 2.9865184,4.4084816 2.95233129,4.38289877 L1.21766871,3.08567485 L2.95233129,1.78845092 C2.9865184,1.7628681 3.00915644,1.72476994 3.01527607,1.68248466 C3.02134969,1.64019939 3.01044479,1.59726994 2.98481595,1.5629908 L2.70924847,1.19452454 C2.65592025,1.12329755 2.55506135,1.10871166 2.48383436,1.16203988 L0.0839723926,2.95670245 C0.0433435583,2.98707055 0.0193711656,3.0348773 0.0193711656,3.08567485 C0.0193711656,3.13647239 0.0433435583,3.18427914 0.0839723926,3.21464724 L2.48383436,5.00930982 C2.51273006,5.0309816 2.54659509,5.04138037 2.58013804,5.04138037 C2.62918712,5.04138037 2.67763804,5.01911043 2.70924847,4.97682515 L2.98481595,4.6083589 C3.01039877,4.57407975 3.02134969,4.53115031 3.01527607,4.48886503 Z" id="Path"></path>
+                                        <path d="M9.00763804,2.95670245 L6.6078681,1.16203988 C6.5366411,1.10875767 6.43578221,1.12334356 6.3825,1.19452454 L6.10693252,1.5629908 C6.08134969,1.59722393 6.07039877,1.64019939 6.07647239,1.68248466 C6.08259202,1.72472393 6.10518405,1.7628681 6.13941718,1.78845092 L7.87403374,3.08567485 L6.13941718,4.38289877 C6.10518405,4.4084816 6.08259202,4.44662577 6.07647239,4.48886503 C6.07039877,4.53115031 6.08130368,4.57412577 6.10693252,4.6083589 L6.3825,4.97682515 C6.41415644,5.01911043 6.46256135,5.04138037 6.51161043,5.04138037 C6.54515337,5.04138037 6.57897239,5.03093558 6.60791411,5.00930982 L9.00768405,3.21464724 C9.04831288,3.18427914 9.07228528,3.13647239 9.07228528,3.08567485 C9.07228528,3.0348773 9.04826687,2.98707055 9.00763804,2.95670245 Z" id="Path"></path>
+                                        <path d="M6.08576687,0.204110429 L5.66194785,0.024892638 C5.62265337,0.00823619632 5.57829755,0.0079601227 5.53868098,0.0239723926 C5.49911043,0.0400306748 5.4675,0.0711349693 5.45088957,0.11047546 L2.92021472,6.09593558 C2.88556748,6.17783742 2.92389571,6.27234663 3.00584356,6.30699387 L3.42966258,6.48621166 C3.44967791,6.49472393 3.47102761,6.49891104 3.4923773,6.49891104 C3.51294479,6.49891104 3.53351227,6.49495399 3.55292945,6.48708589 C3.5925,6.47102761 3.62406442,6.43992331 3.64072086,6.40058282 L6.17139571,0.415122699 C6.20599693,0.333220859 6.16766871,0.238757669 6.08576687,0.204110429 Z" id="Path"></path>
+                                    </g>
+                                    <path d="M14.1760123,0.021303681 L0.805214724,0.021303681 C0.361242331,0.021303681 0,0.382546012 0,0.826518405 L0,13.4185123 C0,13.8624847 0.361242331,14.223727 0.805214724,14.223727 L14.1760123,14.223727 C14.6199847,14.223727 14.981227,13.8624847 14.981227,13.4185123 L14.981227,0.826518405 C14.981227,0.3825 14.6199847,0.021303681 14.1760123,0.021303681 Z M12.5827454,1.25595092 C12.9506135,1.25595092 13.2499233,1.55526074 13.2499233,1.92312883 C13.2499233,2.29099693 12.9506135,2.59030675 12.5827454,2.59030675 C12.2148773,2.59030675 11.9155675,2.29099693 11.9155675,1.92312883 C11.9155675,1.55526074 12.2148773,1.25595092 12.5827454,1.25595092 Z M10.3202761,1.25595092 C10.6881442,1.25595092 10.987454,1.55526074 10.987454,1.92312883 C10.987454,2.29099693 10.6881442,2.59030675 10.3202761,2.59030675 C9.95240798,2.59030675 9.65309816,2.29099693 9.65309816,1.92312883 C9.65309816,1.55526074 9.95240798,1.25595092 10.3202761,1.25595092 Z M2.04289877,1.57803681 L4.73461656,1.57803681 C4.92519939,1.57803681 5.07970859,1.7325 5.07970859,1.92312883 C5.07970859,2.11375767 4.92519939,2.26822086 4.73461656,2.26822086 L2.04289877,2.26822086 C1.85231595,2.26822086 1.69780675,2.11375767 1.69780675,1.92312883 C1.69780675,1.7325 1.85231595,1.57803681 2.04289877,1.57803681 Z M13.7022699,12.8284969 C13.7022699,12.8863804 13.6551534,12.9335429 13.5971779,12.9335429 L1.38404908,12.9335429 C1.32611963,12.9335429 1.27895706,12.8863804 1.27895706,12.8284969 L1.27895706,4.15656442 L13.7022699,4.15656442 L13.7022699,12.8284969 Z" id="Shape"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg b/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg
new file mode 100644
index 000000000..dad285835
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-topologyView-active.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>sketch</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-756.000000, -73.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="view-options" transform="translate(192.000000, 0.000000)">
+                        <g id="view">
+                            <g id="txt" transform="translate(11.000000, 6.000000)">
+                                <g id="sketch">
+                                    <path d="M15,1.90910156 C15,0.864492188 14.1494531,0.0146484375 13.1039941,0.0146484375 L1.89600586,0.0146484375 C0.850546875,0.0146484375 2.84217094e-14,0.864492187 2.84217094e-14,1.90910156 L2.84217094e-14,9.68118164 C2.84217094e-14,10.1628223 0.180820313,10.6030664 0.478212891,10.9376953 C0.18796875,11.1564258 2.84217094e-14,11.5038281 2.84217094e-14,11.8942676 C2.84217094e-14,13.0171289 0.914267578,13.9306641 2.03806641,13.9306641 L12.9619043,13.9306641 C14.0857031,13.9306641 15,13.0171289 15,11.8942676 C15,11.5038281 14.812002,11.1564258 14.5217578,10.9376953 C14.8191797,10.6030664 15,10.1628223 15,9.68118164 L15,1.90910156 Z M0.87890625,1.90910156 C0.87890625,1.34912109 1.33517578,0.893554688 1.89600586,0.893554688 L13.1039941,0.893554688 C13.6648242,0.893554688 14.1210938,1.34912109 14.1210938,1.90910156 L14.1210938,9.68118164 C14.1210938,10.2411621 13.6648242,10.6967285 13.1039941,10.6967285 L10.1249121,10.6967285 C9.72714844,10.6967285 9.40353516,11.0202246 9.40353516,11.4178125 C9.40353516,11.5361719 9.30691406,11.6324707 9.18817383,11.6324707 L5.81182617,11.6324707 C5.69308594,11.6324707 5.59646484,11.5361719 5.59646484,11.4178125 C5.59646484,11.0202246 5.27285156,10.6967285 4.87508789,10.6967285 L1.89600586,10.6967285 C1.33517578,10.6967285 0.87890625,10.2411621 0.87890625,9.68118164 L0.87890625,1.90910156 Z M12.9619336,13.0517578 L2.03806641,13.0517578 C1.39889648,13.0517578 0.87890625,12.5325 0.87890625,11.8942676 C0.87890625,11.7185742 1.02222656,11.5756348 1.19833008,11.5756348 L4.72892578,11.5756348 C4.80571289,12.1041211 5.26207031,12.5113477 5.81182617,12.5113477 L9.18817383,12.5113477 C9.73792969,12.5113477 10.1942871,12.1040918 10.2710742,11.5756348 L13.8016699,11.5756348 C13.9778027,11.5756348 14.1210938,11.7185742 14.1210938,11.8942676 C14.1210938,12.5325 13.6011035,13.0517578 12.9619336,13.0517578 Z" id="Shape"></path>
+                                    <path d="M8.75830078,9.28186523 C8.78850586,9.41323242 8.87736328,9.52347656 8.99935547,9.58092773 C9.05868164,9.60887695 9.12263672,9.62282227 9.1865918,9.62282227 C9.2540918,9.62282227 9.32150391,9.60729492 9.3834375,9.57626953 L10.787959,8.87267578 C10.8760254,8.82855469 10.9467187,8.75613281 10.9887012,8.66701172 L13.2263379,3.91576172 C13.5576855,3.21222656 13.254873,2.37029297 12.5513086,2.03894531 L12.5513379,2.03894531 C12.210498,1.87842773 11.8275879,1.86023437 11.473125,1.98773437 C11.1186035,2.11523437 10.8350098,2.37313477 10.6744922,2.71394531 L8.43682617,7.46519531 C8.39484375,7.55431641 8.3840332,7.65495117 8.40612305,7.75095703 L8.75830078,9.28186523 Z M11.7705469,2.81475586 C11.9041113,2.76673828 12.0484277,2.77356445 12.1768066,2.8340625 L12.1768359,2.8340625 C12.4419141,2.95892578 12.5560254,3.27615234 12.4311914,3.54125977 L12.2237695,3.98165039 L11.2622168,3.5287793 L11.4696387,3.08838867 C11.5301074,2.95998047 11.6369531,2.86280273 11.7705469,2.81475586 L11.7705469,2.81475586 Z M10.8877148,4.32392578 L11.8492969,4.77676758 L10.2583008,8.15493164 L9.48952148,8.54006836 L9.29674805,7.70206055 L10.8877148,4.32392578 Z" id="Shape"></path>
+                                    <path d="M2.37079102,9.62279297 L6.62724609,9.62279297 C6.86994141,9.62279297 7.06669922,9.42603516 7.06669922,9.18333984 L7.06669922,5.75036133 C7.06669922,5.50766602 6.86994141,5.3109082 6.62724609,5.3109082 L2.37079102,5.3109082 C2.1280957,5.3109082 1.93133789,5.50766602 1.93133789,5.75036133 L1.93133789,9.18333984 C1.93133789,9.42603516 2.1280957,9.62279297 2.37079102,9.62279297 Z M2.81024414,6.18981445 L6.18779297,6.18981445 L6.18779297,8.74388672 L2.81024414,8.74388672 L2.81024414,6.18981445 Z" id="Shape"></path>
+                                    <path d="M2.37079102,2.82873047 L7.81514648,2.82873047 C8.0578418,2.82873047 8.25459961,2.63197266 8.25459961,2.38927734 C8.25459961,2.14658203 8.0578418,1.94982422 7.81514648,1.94982422 L2.37079102,1.94982422 C2.1280957,1.94982422 1.93133789,2.14658203 1.93133789,2.38927734 C1.93133789,2.63197266 2.1280957,2.82873047 2.37079102,2.82873047 Z" id="Path"></path>
+                                    <path d="M2.37079102,4.29357422 L6.49678711,4.29357422 C6.73948242,4.29357422 6.93624023,4.09681641 6.93624023,3.85412109 C6.93624023,3.61142578 6.73948242,3.41466797 6.49678711,3.41466797 L2.37079102,3.41466797 C2.1280957,3.41466797 1.93133789,3.61142578 1.93133789,3.85412109 C1.93133789,4.09681641 2.1280957,4.29357422 2.37079102,4.29357422 Z" id="Path"></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg b/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg
new file mode 100644
index 000000000..2ae0cb6b3
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-undoActive.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="6px" viewBox="0 0 13 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>undo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-563.000000, -77.000000)" fill="#1B3E6F" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="undo/redo">
+                        <g id="icons" transform="translate(10.000000, 10.000000)">
+                            <path d="M6.66361556,0.634620137 C4.98500915,0.634620137 3.45556064,1.25972082 2.28466819,2.28466819 L2.48689958e-14,1.00808251e-13 L2.48689958e-14,5.71167048 L5.71167048,5.71167048 L3.41748284,3.41748284 C4.29645538,2.67814874 5.42290389,2.2212151 6.66361556,2.2212151 C8.91338902,2.2212151 10.8172792,3.68402746 11.4836407,5.71167048 L12.9845309,5.21665904 C12.1119245,2.5575492 9.61464531,0.634620137 6.66361556,0.634620137 Z" id="undo"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg b/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg
new file mode 100644
index 000000000..857787634
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-zoomIn.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-703.000000, -74.000000)" fill="#D9E3EE" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="zoom" transform="translate(81.000000, 0.000000)">
+                        <g id="icons" transform="translate(10.000000, 7.000000)">
+                            <path d="M65,0 C61.6916923,0 59,2.69146154 59,6 C59,9.30853846 61.6916923,12 65,12 C68.3083077,12 71,9.30853846 71,6 C71,2.69146154 68.3083077,0 65,0 Z M67.8846154,6.46153846 L65.4615385,6.46153846 L65.4615385,9 C65.4615385,9.25476923 65.2547692,9.46153846 65,9.46153846 C64.7452308,9.46153846 64.5384615,9.25476923 64.5384615,9 L64.5384615,6.46153846 L62.1153846,6.46153846 C61.8606154,6.46153846 61.6538462,6.25476923 61.6538462,6 C61.6538462,5.74523077 61.8606154,5.53846154 62.1153846,5.53846154 L64.5384615,5.53846154 L64.5384615,3.23076923 C64.5384615,2.976 64.7452308,2.76923077 65,2.76923077 C65.2547692,2.76923077 65.4615385,2.976 65.4615385,3.23076923 L65.4615385,5.53846154 L67.8846154,5.53846154 C68.1393846,5.53846154 68.3461538,5.74523077 68.3461538,6 C68.3461538,6.25476923 68.1393846,6.46153846 67.8846154,6.46153846 Z" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg b/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg
new file mode 100644
index 000000000..5449f63f4
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/icon-zoomOut.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.1.1-Designer" transform="translate(-644.000000, -74.000000)" fill="#D9E3EE" fill-rule="nonzero">
+            <g id="edit-actions" transform="translate(543.000000, 61.000000)">
+                <g id="elements" transform="translate(10.000000, 6.000000)">
+                    <g id="zoom" transform="translate(81.000000, 0.000000)">
+                        <g id="icons" transform="translate(10.000000, 7.000000)">
+                            <path d="M6,0 C2.69169231,0 0,2.69146154 0,6 C0,9.30853846 2.69169231,12 6,12 C9.30830769,12 12,9.30853846 12,6 C12,2.69146154 9.30830769,0 6,0 Z M8.88461538,6.46153846 L3.11538462,6.46153846 C2.86061538,6.46153846 2.65384615,6.25476923 2.65384615,6 C2.65384615,5.74523077 2.86061538,5.53846154 3.11538462,5.53846154 L8.88461538,5.53846154 C9.13938462,5.53846154 9.34615385,5.74523077 9.34615385,6 C9.34615385,6.25476923 9.13938462,6.46153846 8.88461538,6.46153846 Z" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg b/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg
new file mode 100644
index 000000000..8b9f98b03
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/img-user1.jpeg
diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg b/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg
new file mode 100644
index 000000000..d107129c4
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/img-user2.jpg
diff --git a/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg b/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg
new file mode 100644
index 000000000..23e305930
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/assets/img/img-user3.jpg
diff --git a/cds-ui/client-frankfurt/src/styles.css b/cds-ui/client-frankfurt/src/styles.css
index 0a88e5d79..850f6824a 100644
--- a/cds-ui/client-frankfurt/src/styles.css
+++ b/cds-ui/client-frankfurt/src/styles.css
@@ -3,6 +3,8 @@ html, body{
 }
 body{ 
   background: #FAFAFA !important;
+  /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
+  background-size: 6px 6px; */
   margin: 0;
   font-family: 'HelvNeueOrange', 'Helvetica Neue', sans-serif !important;
   color: #1B3E6F !important;
@@ -10,7 +12,6 @@ body{
 *:focus{
   outline: none;
 }
-
 /*Bootstrap*/
 .custom-control-label::before{
   border: solid 1px #1B3E6F !important;
@@ -19,350 +20,246 @@ body{
 .custom-control-input:checked ~ .custom-control-label::before{
   background: #1B3E6F !important;
 }
-
+  
 /*Components*/
-/**Tab Nav**/
-.nav-tabs{
-  border-bottom-color: #ECEDF2 !important;
+/* Menu Styles */
+.primary-nav{
+  /* left: 0; */
+  position: fixed;
+  z-index: 999;
 }
-.nav-link{
-  padding: 15px 20px 15px 0 !important;
-  text-transform: uppercase !important;
-  font-size: 12px;
-  font-weight: bold;
-  color: #C3CDDB !important;
-  border: none !important;
+.menu{
+  position: relative;
 }
-.nav-tabs .nav-link:focus, 
-.nav-tabs .nav-link:hover{
-  border: 0 !important;
+.menu ul{
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.nav-tabs .nav-link:hover{
-  color: #1B3E6F !important;
+.open-panel{
+  border: none;
+  background-color:#fff;
+  padding: 0;
 }
-.nav-tabs .nav-link.active{
-  color: #1B3E6F !important;
-  background: transparent !important;
-  border: 0 !important;
-  border-bottom: solid 2px #1B3E6F !important;
+.logo-icon{
+  background: #fff;
+  position: relative;
+  display: block;
+  text-align: center;
+  padding: 16px 0;
+  width: 50px;
+  height: 60px;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  cursor: pointer;
 }
-.nav-tabs .nav-link::before{
-  content: "|";
-  padding-right: 20px !important;
-  color: #C3CDDB;
-  font-weight: normal;
+.primary-nav .menu li{
+  position: relative;
 }
-.nav-tabs .nav-link:first-child::before{
-  content: none;
+.menu .icon{
+  position: absolute;
+  top: 12px;
+  right: 10px;
+  pointer-events: none;
+  width: 30px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
 }
-.nav-tabs .nav-link:first-child{
-  padding-left: 20px !important;
+.menu .icon .fa{
+vertical-align: middle;
 }
-/**Sliding Search Input**/
-.searchBox{
-  position: absolute;
-  top: 0%;
-  right: 0%;
-  transform: translate(0%,-0%);
-  height: 40px;
+.menu,
+.menu a,
+.menu a:visited{
+  color: #fff;
+  text-decoration: none!important;
+  position: relative;
 }
-.searchButton{
-  float: right;
-  margin-top: 14px;
-  padding-left: 0 !important;
-  padding-right: 24px !important;
-  width: 60px;
-  height: 24px;
-  background: url(../src/assets/img/icon-search.svg) center center no-repeat;
-  background-size: 28%;
-  border: 0 !important;
-  border-right: solid 1px #1B3E6F !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: 0.4s;
+.menu a{
+  display: block;
+  white-space: nowrap;
+  padding: 10px 1em;
+  font-size: 12px;
+  font-weight: bold;
+  height: 52px;
+  line-height: 30px;
 }
-.searchBox:hover > .searchInput{
-  width: 240px;
-  border-bottom: solid 1px #C3CDDB;
+.menu a:hover{
+  color: #fff;
 }
-.searchBox:hover > .searchButton{
-  color: #1B3E6F;
+.menu-dropdown li .icon{
+  padding: 2px 6px;
+  color: #fff;  
 }
-.searchInput{
-  border: none;
-  background: none;
-  outline: none;
-  float: left;
-  padding: 0;
-  color: #1B3E6F;
-  font-size: 14px;
-  transition: 0.4s;
-  line-height: 40px;
-  width: 0px;
+.menu-dropdown li.active .icon{
+  color: #fff;
+  background: #265699;
+  border-radius: 50%;
 }
-.searchInput::placeholder{
-  color: #BABBC3;
+.menu-dropdown li:hover{
+  background: #172B4D;
 }
-/**Drop Down Menu**/
-.dropdown{
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  width: 132px;
-  z-index: 200;
+.menu label{
+  margin-bottom: 0;
+  display: block;
 }
-.dropdown-text{
+.menu label:hover{
   cursor: pointer;
-  position: relative;
-  text-indent: 10px;
-  line-height: 32px;
-  background-color: #eee;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
-  width: 100%;
 }
-.dropdown-text:after{
+.menu input[type="checkbox"]{
+  display: none;
+}
+input#menu[type="checkbox"]{
+  display: none;
+}
+.sub-menu-dropdown{
+  display: none;
+}
+.new-wrapper{
   position: absolute;
-  right: 6px;
-  top: 15px;
-  content: '';
-  width: 0px;
-  height: 0px;
-  border-style: solid;
-  border-width: 5px 4px 0 4px;
-  border-color: #555 transparent transparent transparent;
+  left: 50px;
+  width: calc(100% - 50px);
+  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-.dropdown-toggle{
-  font-size: 0;
-  z-index: 1;
-  cursor: pointer;
+#menu:checked + ul.menu-dropdown{
+  left: 0;
+  -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.sub-menu-checkbox:checked + ul.sub-menu-dropdown{
+  display: block!important;
+  -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
+  border-top: solid 2px #1B3E6F;
+}
+.openNav .new-wrapper{
   position: absolute;
-  top: 0;
-  border: none;
-  padding: 0;
-  margin: 0 0 0 1px;
+  transform: translate3d(200px, 0, 0);
+  width: calc(100% - 250px);
+  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.downarrow{
   background: transparent;
-  text-indent: -10px;
-  height: 34px;
-  width: 100%;
+  position: absolute;
+  right: 50px;
+  top: 12px;
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  display: block;
 }
-.dropdown-toggle:focus{
-  outline: 0;
+.downarrow:hover{
+  color: #fff;
 }
-.dropdown-content{
+.menu{
   position: absolute;
-  top: 32px;
-  width: 140px;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  visibility:hidden;
-  -webkit-transition: all .25s ease;
-  -moz-transition: all .25s ease;
-  -ms-transition: all .25s ease;
-  -o-transition: all .25s ease;
-  transition: all .25s ease;
-  list-style-type: none;
-  border-radius: 3px;
-  text-indent: 10px;
-  line-height: 32px;
-  background-color: #eee;
-  border: 1px solid #ccc;
-}
-.dropdown-content a{
   display: block;
+  left: -200px;
+  top: 0;
+  width: 250px;
+  height: 100vh;
+  transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
+  background-color: #1B3E6F;
+  z-index: 999;
 }
-.dropdown-content a:hover{
-  background: #e8e8e8;
+.menu-dropdown{
+  top: 0;
+  overflow-y: auto;
 }
-.dropdown-toggle:hover ~ .dropdown-text,
-.dropdown-toggle:focus ~ .dropdown-text{
-  background-color: #e8e8e8;
+.overflow-container{
+  position: relative;
+  height: calc(100vh - 60px)!important;
+  overflow-y: auto;
+  border-top: 60px solid #fff;
+  z-index: -1;
+  display:block;
 }
-.dropdown-toggle:focus ~ .dropdown-text{
-  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
-  z-index: 2;
+
+.menu .logotype{
+  position: absolute !important;
+  top: 16px;
+  left: 55px;
+  display: block;
 }
-.dropdown-toggle:focus ~ .dropdown-text:after{
-  border-width: 0 4px 5px 4px;
-  border-color: transparent transparent #555 transparent;
+/* .sub-menu-dropdown{
+background-color: #333;
+}   */
+.menu:hover{
+  position: absolute;
+  left: 0;
+  top: 0;
 }
-.dropdown-content:hover,
-.dropdown-toggle:focus ~ .dropdown-content{
-  opacity: 1;
-  visibility:visible;
-  top: 42px;
+.openNav .menu:hover{
+  position: absolute;
+  left: -200px;
+  top: 60px;
+}
+.openNav .menu{
+  top: 60px;
+  transform: translate3d(200px, 0, 0);
+  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-/**Card**/
-/* Hover Shadow */
-@keyframes hover {
+@-webkit-keyframes grow{
+  0% {
+    display: none;
+    opacity: 0;
+  }
   50% {
-    transform: translateY(-3px);
+    display: block;
+    opacity: 0.5;
   }
   100% {
-    transform: translateY(-6px);
+    opacity: 1;
   }
 }
-@keyframes card {
+@keyframes grow{
+    
   0% {
-    transform: translateY(6px);
-    opacity: .3;
+    display: none;
+    opacity: 0;
   }
   50% {
-    transform: translateY(3px);
-    opacity: .8;
+    display: block;
+    opacity: 0.5;
   }
   100% {
-    transform: translateY(6px);
-    opacity: .3;
-  }
-}
-.card {
-  /* display: inline-block;
-  position: relative;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transform: translateZ(0); */
-  margin-bottom: 25px !important;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-}
-/* .card:before {
-  pointer-events: none;
-  position: absolute;
-  z-index: -1;
-  content: '';
-  top: 100%;
-  left: 5%;
-  height: 10px;
-  width: 90%;
-  opacity: 0;
-  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
-  transition-duration: 0.2s;
-  transition-property: transform opacity;
-} */
-/* .card:hover {
-  transform: translateY(-3px);
-  animation-name: hover;
-  animation-duration: 1s;
-  animation-delay: 0.2s;
-  animation-timing-function: linear;
-  animation-iteration-count: 1; 
-  animation-direction: alternate;
-}
-.card:hover:before {
-  opacity: .4;
-  transform: translateY(3px);
-  animation-name: card;
-  animation-duration: 1s;
-  animation-delay: .2s;
-  animation-timing-function: linear;
-  animation-iteration-count: 1; 
-  animation-direction: alternate;
-} */
-.card-body{
-  padding: 20px !important;
+    opacity: 1
+  }  
 }
-
-/*Main Container*/
-.main-container{
-  padding: 0 !important;
-}
-/*Page Title*/
-.page-title{
-  padding: 21px 30px;
-  background:#fff;
-  border-left: solid 1px #FAFAFA;
-  margin-bottom: 30px;
-  -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
-  box-shadow: 0 4px 10px 0 #eef0f5;
-  position: relative;
-  z-index: 8;
-}
-.page-title h2{
-  font-size: 16px;
-  font-weight: bold;
-}
-.page-title h2 span{
-  color: #BABBC3;
-  font-size: 14px;
-}
-/*Content*/
-.body-container{
-  padding: 0 30px !important;
-}
-.search-filter-col{
-  padding-right: 0 !important;
-  border-bottom: solid 1px #ECEDF2 !important;
-}
-/**Packages Filter**/
-.packagesFilter{
-  margin-top: 12px;
+/*User Profile*/
+.userProfile .dropdown{
+  width: 100%;
 }
-.packagesFilter .dropdown-toggle{
-  height: 36px !important;
+.userProfile .dropdown:hover{
+  background: #172B4D !important;
 }
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
-  border-color: transparent transparent #1B3E6F transparent;
-}
-.packagesFilter .dropdown-text{
+.userProfile .dropdown-text{
   background: transparent;
   border: 0;
   box-shadow: none;
-  text-indent: 14px;
-  line-height: 30px;
-  font-size: 12px;
-}
-.packagesFilter .dropdown-text::after{
-  right: 12px;
-  border-color: #1B3E6F transparent transparent transparent;
-}
-.packagesFilter .dropdown-toggle:hover ~ .dropdown-text, 
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
-  background-color: transparent; 
-  box-shadow: none;
-  border-radius: 0;
-}
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
-  background: #fff;
-  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
-}
-.packagesFilter .dropdown-text::after{
-  top: 12px;
-}
-.packagesFilter .dropdown-content{
-  padding: 6px 0 15px;
-  background: #fff;
-  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
-  border: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.packagesFilter .dropdown-content:hover, 
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
-  top: 30px;
-}
-.packagesFilter .form-control{
-  padding: 12px 9px 12px 38px !important;
-  border: 0 !important;
-  border-bottom: solid 1px #D7E7F9 !important;
-  background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
-  background-size: 4%;
-  border-radius: 0 !important;
-  color: #1B3E6F;
   font-size: 13px;
+  line-height: 40px;
 }
-.packagesFilter .form-control::placeholder{
-  color: #BABBC3;
-}
-.packagesFilter .form-control:focus{
+/* .userProfile .dropdown-toggle{
+height: 40px;
+} */
+.userProfile .dropdown-toggle:hover ~ .dropdown-text, 
+.userProfile .dropdown-toggle:focus ~ .dropdown-text{
+  background: transparent !important;
+  border-radius: 0 !important;
   box-shadow: none !important;
-  border-bottom: solid 1px #1B3E6F !important;
 }
+
+.userProfile .dropdown-text::after {
+          right: 14px;
+          top: 8px;
+          width: 24px;
+          height: 24px;
+          background: url(/assets/img/img-userProfile.png) center center no-repeat;
+        }
 .packagesFilter .custom-checkbox{
   margin-left: 8px;
 }
@@ -509,270 +406,1009 @@ body{
   right: 0;
   width: 120px;
   padding: 6px 0;
+
   border: 0;
-  text-indent: 0;
-  border-radius: 2px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  background: #1B3E6F;
-}
-.packages-card .dropdown-content a{
-  padding-left: 45px;
-  color: #fff;
-  font-size: 13px;
-  background-position: 20px center;
-  background-size: 10%;
-  background-repeat: no-repeat;
-}
-.packages-card .dropdown-content a:hover{
-  background-color: #172B4D;
-  text-decoration: unset;
-}
-.packages-card .action-clone a,
-.packages-card .action-clone a:hover{
-  background-image: url(../src/assets/img/icon-clone-sm.svg);
-}
-.packages-card .action-archive a,
-.packages-card .action-archive a:hover{
-  background-image: url(../src/assets/img/icon-archive-sm.svg);
-}
-.packages-card .action-delete a,
-.packages-card .action-delete a:hover{
-  background-image: url(../src/assets/img/icon-delete-sm.svg);
-}
-.packages-card .dropdown-content:hover, 
-.packages-card .dropdown-toggle:focus ~ .dropdown-content{
-  top: 24px;
-}
-.packages-card .dropdown-toggle:hover ~ .dropdown-text{
-  background: transparent;
-  opacity: 1;
-} 
-.packages-card .dropdown-toggle:focus ~ .dropdown-text{
-  opacity: 1;
-  background: #1B3E6F;
-  box-shadow: none;
-}
-/***Contributers***/
-ul.package-contributers{
-  margin-bottom: 0 !important;
-  padding-left: 0 !important;
-}
-.package-contributers li{
-  list-style: none;
-  display: inline-block;
-}
-.package-contributers li{
-  margin-left: -5px;
-}
-.package-contributers li:first-child{
-  margin-left: 0;
-}
-.package-contributers li:last-child{
-  margin-left: 9px;
-}
-.package-contributers button{
-  padding: 0 !important;
-  border-radius: 100%;
-  border: 0 !important;
-  /*Hover Effect*/
-  -webkit-transition: box-shadow 0.2s ease;
-  -moz-transition: box-shadow 0.2s ease;
-  transition: box-shadow 0.2s ease;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  display: inline-block;
-  position: relative;
-}
-.package-contributers button:before{
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
   border-radius: 50%;
-  bottom: 0;
-  box-shadow: 0 0 0 2px #fff;
-  content: "";
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.package-contributers button:hover{
-  box-shadow: 0 0 0 2px #D7E7F9;
-  text-decoration: none;
-}
-.package-contributers button:hover:before{
-  -webkit-transform: scale(0.925);
-  -moz-transform: scale(0.925);
-  -ms-transform: scale(0.925);
-  -o-transform: scale(0.925);
-  transform: scale(0.925);
-  box-shadow: 0 0 0 1px #D7E7F9;
-  opacity: 0.5;
-}
-.package-contributers button img{
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-  vertical-align: top;
-  border-radius: 100%;
+} 
+/* .userProfile .dropdown-content{
+  bottom: 40px !important;
+  top: unset !important;
+  width: 100%;
+} */
+/**Tab Nav**/
+.nav-tabs{
+  border-bottom-color: #ECEDF2 !important;
 }
-.package-contributers a{
+.nav-link{
+  padding: 15px 20px 15px 0 !important;
+  text-transform: uppercase !important;
   font-size: 12px;
-  color: #1273EB;
-}
-.package-contributers a:hover{
-  text-decoration: unset;
-}
-/***Package Footer***/
-.packages-card .card-footer{
-  padding: 0 20px !important;
-  background: transparent !important;
-  border-top-color: #F7F6F6 !important;
-}
-.packages-card .card-footer .col:first-child{
-  border-right: solid 1px #F7F6F6;
-}
-.packages-card .card-footer .btn{
-  background-color: transparent !important;
+  font-weight: bold;
   color: #C3CDDB !important;
-  border: 0;
-  font-size: 13px;
-  opacity: .7;
-}
-.packages-card .card-footer .btn:hover{
-  opacity: 1;
-}
-.btn-card-config,
-.btn-card-topology{
-  padding: 15px 0 15px 28px !important;
-  background-size: 16%;
-  background-position: left center;
-  background-repeat: no-repeat;
-}
-.btn-card-config{
-  background-image: url(../src/assets/img/icon-btn-card-config.svg);
-}
-.btn-card-topology{
-  background-image: url(../src/assets/img/icon-btn-card-topology.svg);
+  border: none !important;
 }
-.icon-deployed{
-  margin-right: 5px;
-  display: inline;
-  background: url(../src/assets/img/icon-deploy.svg) center center no-repeat;
+.nav-tabs .nav-link:focus, 
+.nav-tabs .nav-link:hover{
+  border: 0 !important;
 }
-
-
-
+  .nav-tabs .nav-link:hover{
+    color: #1B3E6F !important;
+  }
+  .nav-tabs .nav-link.active{
+    color: #1B3E6F !important;
+    background: transparent !important;
+    border: 0 !important;
+    border-bottom: solid 2px #1B3E6F !important;
+  }
+  .nav-tabs .nav-link::before{
+    content: "|";
+    padding-right: 20px !important;
+    color: #C3CDDB;
+    font-weight: normal;
+  }
+  .nav-tabs .nav-link:first-child::before{
+    content: none;
+  }
+  .nav-tabs .nav-link:first-child{
+    padding-left: 20px !important;
+  }
+  /**Sliding Search Input**/
+  .searchBox{
+    position: absolute;
+    top: 0%;
+    right: 0%;
+    transform: translate(0%,-0%);
+    height: 40px;
+  }
+  .searchButton{
+    float: right;
+    margin-top: 14px;
+    padding-left: 0 !important;
+    padding-right: 24px !important;
+    width: 60px;
+    height: 24px;
+    background: url(../src/assets/img/icon-search.svg) center center no-repeat;
+    background-size: 28%;
+    border: 0 !important;
+    border-right: solid 1px #1B3E6F !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.4s;
+  }
+  .searchBox:hover > .searchInput{
+    width: 240px;
+    border-bottom: solid 1px #C3CDDB;
+  }
+  .searchBox:hover > .searchButton{
+    color: #1B3E6F;
+  }
+  .searchInput{
+    border: none;
+    background: none;
+    outline: none;
+    float: left;
+    padding: 0;
+    color: #1B3E6F;
+    font-size: 14px;
+    transition: 0.4s;
+    line-height: 40px;
+    width: 0px;
+  }
+  .searchInput::placeholder{
+    color: #BABBC3;
+  }
+  /**Drop Down Menu**/
+  .dropdown{
+    position: relative;
+    display: inline-block;
+    text-align: left;
+    width: 132px;
+    z-index: 200;
+  }
+  .dropdown-text{
+    cursor: pointer;
+    position: relative;
+    text-indent: 10px;
+    line-height: 32px;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
+    width: 100%;
+  }
+  .dropdown-text:after{
+    position: absolute;
+    right: 6px;
+    top: 15px;
+    content: '';
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 5px 4px 0 4px;
+    border-color: #555 transparent transparent transparent;
+  }
+  .dropdown-toggle{
+    font-size: 0;
+    z-index: 1;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    border: none;
+    padding: 0;
+    margin: 0 0 0 1px;
+    background: transparent;
+    text-indent: -10px;
+    height: 34px;
+    width: 100%;
+  }
+  .dropdown-toggle:focus{
+    outline: 0;
+  }
+  .dropdown-content{
+    position: absolute;
+    top: 32px;
+    width: 140px;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    visibility:hidden;
+    -webkit-transition: all .25s ease;
+    -moz-transition: all .25s ease;
+    -ms-transition: all .25s ease;
+    -o-transition: all .25s ease;
+    transition: all .25s ease;
+    list-style-type: none;
+    border-radius: 3px;
+    text-indent: 10px;
+    line-height: 32px;
+    background-color: #eee;
+    border: 1px solid #ccc;
+  }
+  .dropdown-content a{
+    display: block;
+  }
+  .dropdown-content a:hover{
+    background: #e8e8e8;
+  }
+  .dropdown-toggle:hover ~ .dropdown-text,
+  .dropdown-toggle:focus ~ .dropdown-text{
+    background-color: #e8e8e8;
+  }
+  .dropdown-toggle:focus ~ .dropdown-text{
+    box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
+    z-index: 2;
+  }
+  .dropdown-toggle:focus ~ .dropdown-text:after{
+    border-width: 0 4px 5px 4px;
+    border-color: transparent transparent #555 transparent;
+  }
+  .dropdown-content:hover,
+  .dropdown-toggle:focus ~ .dropdown-content{
+    opacity: 1;
+    visibility:visible;
+    top: 42px;
+  }
+  /**Card**/
+  /* Hover Shadow */
+  @keyframes hover {
+    50% {
+      transform: translateY(-3px);
+    }
+    100% {
+      transform: translateY(-6px);
+    }
+  }
+  @keyframes card {
+    0% {
+      transform: translateY(6px);
+      opacity: .3;
+    }
+    50% {
+      transform: translateY(3px);
+      opacity: .8;
+    }
+    100% {
+      transform: translateY(6px);
+      opacity: .3;
+    }
+  }
+  .card {
+    /* display: inline-block;
+    position: relative;
+    transition-duration: 0.2s;
+    transition-property: transform;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    transform: translateZ(0); */
+    margin-bottom: 25px !important;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  }
+  /* .card:before {
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
+    content: '';
+    top: 100%;
+    left: 5%;
+    height: 10px;
+    width: 90%;
+    opacity: 0;
+    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
+    transition-duration: 0.2s;
+    transition-property: transform opacity;
+  } */
+  /* .card:hover {
+    transform: translateY(-3px);
+    animation-name: hover;
+    animation-duration: 1s;
+    animation-delay: 0.2s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1; 
+    animation-direction: alternate;
+  }
+  .card:hover:before {
+    opacity: .4;
+    transform: translateY(3px);
+    animation-name: card;
+    animation-duration: 1s;
+    animation-delay: .2s;
+    animation-timing-function: linear;
+    animation-iteration-count: 1; 
+    animation-direction: alternate;
+  } */
+  .card-body{
+    padding: 20px !important;
+  }
   
-
-
-
-
-
-
-/* Border Fade */
-.border-fade {
-  display: inline-block;
-  transition-duration: 0.3s;
-  transition-property: box-shadow;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transform: translateZ(0);
-  box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
-  /* Hack to improve aliasing on mobile/tablet devices */
-}
-.border-fade:hover {
-  box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
-  /* Hack to improve aliasing on mobile/tablet devices */
-}
-/*Content*/
-
-/**Title Action Buttons**/
-.page-title-actions li{
-  display: inline-block;
-  text-align: center;
-}
-.title-action{
-  -webkit-transition: box-shadow 0.2s ease;
-  -moz-transition: box-shadow 0.2s ease;
-  transition: box-shadow 0.2s ease;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  border-radius: 50%;
-  color: #6a75eb;
-  display: inline-block;
-  font-size: 0.889em;
-  height: 4em;
-  margin: 0 1em 1em;
+  /*Main Container*/
+  .main-container{
+    padding: 0 !important;
+  }
+  /*Page Title*/
+  .page-title{
+    padding: 21px 30px;
+    background:#fff;
+    border-left: solid 1px #FAFAFA;
+    margin-bottom: 21px;
+    -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
+    box-shadow: 0 4px 10px 0 #eef0f5;
+    position: relative;
+    z-index: 8;
+  }
+  .page-title h2{
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .page-title h2 span{
+    color: #BABBC3;
+    font-size: 14px;
+  }
+  /*Content*/
+  .body-container{
+    padding: 0 30px !important;
+  }
+  .search-filter-col{
+    padding-right: 0 !important;
+    border-bottom: solid 1px #ECEDF2 !important;
+  }
+  /**Packages Filter**/
+  .packagesFilter{
+    margin-top: 12px;
+  }
+  .packagesFilter .dropdown-toggle{
+    height: 36px !important;
+  }
+  .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
+    border-color: transparent transparent #1B3E6F transparent;
+  }
+  .packagesFilter .dropdown-text{
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    text-indent: 14px;
+    line-height: 30px;
+    font-size: 12px;
+  }
+  .packagesFilter .dropdown-text::after{
+    right: 12px;
+    border-color: #1B3E6F transparent transparent transparent;
+  }
+  .packagesFilter .dropdown-toggle:hover ~ .dropdown-text, 
+  .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
+    background-color: transparent; 
+    box-shadow: none;
+    border-radius: 0;
+  }
+  .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
+    background: #fff;
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  }
+  .packagesFilter .dropdown-text::after{
+    top: 12px;
+  }
+  .packagesFilter .dropdown-content{
+    padding: 6px 0 15px;
+    background: #fff;
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .packagesFilter .dropdown-content:hover, 
+  .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
+    top: 30px;
+  }
+  .packagesFilter .form-control{
+    padding: 12px 9px 12px 38px !important;
+    border: 0 !important;
+    border-bottom: solid 1px #D7E7F9 !important;
+    background: url(../src/assets/img/icon-search.svg) 15px center no-repeat;
+    background-size: 4%;
+    border-radius: 0 !important;
+    color: #1B3E6F;
+    font-size: 13px;
+  }
+  .packagesFilter .form-control::placeholder{
+    color: #BABBC3;
+  }
+  .packagesFilter .form-control:focus{
+    box-shadow: none !important;
+    border-bottom: solid 1px #1B3E6F !important;
+  }
+  .packagesFilter .custom-checkbox{
+    margin-left: 8px;
+  }
+  .packagesFilter .custom-control-label{
+    line-height: 28px !important;
+    font-size: 13px !important;
+    text-indent: 6px !important;
+  } 
+  /**Packages Sort**/
+  .sort-packages{
+    font-size: 12px;
+    font-weight: bold;
+    color: #C3CDDB;
+  }
+  .sort-packages .dropdown{
+    width: 88px;
+  }
+  .sort-packages .dropdown-text{
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    color: #1B3E6F;
+  }
+  .sort-packages .dropdown-text::after{
+    border-color: #1B3E6F transparent transparent transparent;
+  }
+  .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
+    border-color: transparent transparent #1B3E6F transparent;
+  }
+  .sort-packages .dropdown-toggle:hover ~ .dropdown-text, 
+  .sort-packages .dropdown-toggle:focus ~ .dropdown-text{
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+    background: #fff;
+  }
+  .sort-packages .dropdown-content:hover, 
+  .sort-packages .dropdown-toggle:focus ~ .dropdown-content{
+    top: 30px;
+  }
+  .sort-packages .dropdown-content{
+    width: 88px;
+    padding: 6px 0;
+    background: #fff;
+    border-radius: 2px;
+    border: 0;
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  }
+  .sort-packages .dropdown-content a{
+    color: #1B3E6F;
+    font-size: 12px;
+  }
+  .sort-packages .dropdown-content a:hover{
+    background-color: #F4F9FE;
+    text-decoration: unset;
+  }
+  /**Pagination**/
+  .page-item .page-link,
+  .page-item.disabled .page-link{
+    background: transparent !important;
+    border: 0;
+    color: #1B3E6F !important;
+    font-size: 14px;
+  }
+  .page-link:hover{
+    color: #fff !important;
+    background-color: #C3CDDB !important;
+    border-radius: 100%;
+  }
+  /**Packages Cards***/
+  /***Package Info Card***/
+  .packages-card .card{
+    margin: 0 9px;
+    border-radius: 2px;
+    border: 0;
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
+  }
+  .packages-card .card:hover{
+    box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .15);
+    transition: all 0.5s ease;
+  }
+  .packages-card .card-title{
+    margin-bottom: 0 !important;
+    font-size: 15px;
+    font-weight: bold;
+  }
+  .packages-card p{
+    font-size: 14px;
+    color: #D0D7E4;
+  }
+  /***Add Package Card***/
+  .addPaackage-card{
+    background: #F4F9FE !important;
+    border: solid 1px #D7E7F9 !important;
+  }
+  .addPaackage-card:hover{
+    box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
+  }
+  .addPaackage-card img{
+    margin-bottom: 12px;
+    margin-top: 8px;
+  }
+  .addPaackage-card a{
+    margin: 0 0 20px;
+    padding: 10px 10px 10px 32px;
+    font-weight: bold;
+    font-size: 10px;
+    text-transform: uppercase;
+    border-radius: 2px;
+    border-width: .5px;
+    border-style: solid;
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    text-align: left;
+  }
+  .addPaackage-card a:hover{
+    text-decoration: unset;
+  }
+  .btn-create-package,
+  .btn-create-package:hover{
+    background-color: #1B3E6F;
+    border-color: #1B3E6F;
+    color: #fff;
+    background-image: url(../src/assets/img/icon-create-white.svg);
+    background-repeat: no-repeat;
+  }
+  .btn-import-package,
+  .btn-import-package:hover{
+    color: #1B3E6F;
+    background-image: url(../src/assets/img/icon-import-blue.svg);
+  }
+  /***Actions Menu***/
+  .packages-card .dropdown{
+    width: auto;
+    float: right;
+  }
+  .packages-card .dropdown-text{
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    text-indent: 0;
+    line-height: unset;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    opacity: .6;
+  }
+  .packages-card .dropdown-text::after{
+    display: none;
+  }
+  .packages-card .dropdown-text img{
+    padding: 9px 7px;
+  }
+  .packages-card .dropdown-content{
+    right: 0;
+    width: 120px;
+    padding: 6px 0;
+    border: 0;
+    text-indent: 0;
+    border-radius: 2px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: #1B3E6F;
+  }
+  .packages-card .dropdown-content a{
+    padding-left: 45px;
+    color: #fff;
+    font-size: 13px;
+    background-position: 20px center;
+    background-size: 10%;
+    background-repeat: no-repeat;
+  }
+  .packages-card .dropdown-content a:hover{
+    background-color: #172B4D;
+    text-decoration: unset;
+  }
+  .packages-card .action-clone a,
+  .packages-card .action-clone a:hover{
+    background-image: url(../src/assets/img/icon-clone-sm.svg);
+  }
+  .packages-card .action-archive a,
+  .packages-card .action-archive a:hover{
+    background-image: url(../src/assets/img/icon-archive-sm.svg);
+  }
+  .packages-card .action-delete a,
+  .packages-card .action-delete a:hover{
+    background-image: url(../src/assets/img/icon-delete-sm.svg);
+  }
+  .packages-card .dropdown-content:hover, 
+  .packages-card .dropdown-toggle:focus ~ .dropdown-content{
+    top: 24px;
+  }
+  .packages-card .dropdown-toggle:hover ~ .dropdown-text{
+    background: transparent;
+    opacity: 1;
+  } 
+  .packages-card .dropdown-toggle:focus ~ .dropdown-text{
+    opacity: 1;
+    background: #1B3E6F;
+    box-shadow: none;
+  }
+  /***Contributers***/
+  ul.package-contributers{
+    margin-bottom: 0 !important;
+    padding-left: 0 !important;
+  }
+  .package-contributers li{
+    list-style: none;
+    display: inline-block;
+  }
+  .package-contributers li{
+    margin-left: -5px;
+  }
+  .package-contributers li:first-child{
+    margin-left: 0;
+  }
+  .package-contributers li:last-child{
+    margin-left: 9px;
+  }
+  .package-contributers button{
+    padding: 0 !important;
+    border-radius: 100%;
+    border: 0 !important;
+    /*Hover Effect*/
+    -webkit-transition: box-shadow 0.2s ease;
+    -moz-transition: box-shadow 0.2s ease;
+    transition: box-shadow 0.2s ease;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    display: inline-block;
+    position: relative;
+  }
+  .package-contributers button:before{
+    -webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    border-radius: 50%;
+    bottom: 0;
+    box-shadow: 0 0 0 2px #fff;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .package-contributers button:hover{
+    box-shadow: 0 0 0 2px #D7E7F9;
+    text-decoration: none;
+  }
+  .package-contributers button:hover:before{
+    -webkit-transform: scale(0.925);
+    -moz-transform: scale(0.925);
+    -ms-transform: scale(0.925);
+    -o-transform: scale(0.925);
+    transform: scale(0.925);
+    box-shadow: 0 0 0 1px #D7E7F9;
+    opacity: 0.5;
+  }
+  .package-contributers button img{
+    width: 28px;
+    height: 28px;
+    object-fit: cover;
+    vertical-align: top;
+    border-radius: 100%;
+  }
+  .package-contributers a{
+    font-size: 12px;
+    color: #1273EB;
+  }
+  .package-contributers a:hover{
+    text-decoration: unset;
+  }
+  /***Package Footer***/
+  .packages-card .card-footer{
+    padding: 0 20px !important;
+    background: transparent !important;
+    border-top-color: #F7F6F6 !important;
+  }
+  .packages-card .card-footer .col:first-child{
+    border-right: solid 1px #F7F6F6;
+  }
+  .packages-card .card-footer .btn{
+    background-color: transparent !important;
+    color: #C3CDDB !important;
+    border: 0;
+    font-size: 13px;
+    opacity: .7;
+  }
+  .packages-card .card-footer .btn:hover{
+    opacity: 1;
+  }
+  .btn-card-config,
+  .btn-card-topology{
+    padding: 15px 0 15px 28px !important;
+    background-size: 16%;
+    background-position: left center;
+    background-repeat: no-repeat;
+  }
+  .btn-card-config{
+    background-image: url(../src/assets/img/icon-btn-card-config.svg);
+  }
+  .btn-card-topology{
+    background-image: url(../src/assets/img/icon-btn-card-topology.svg);
+  }
+  .icon-deployed{
+    margin-right: 5px;
+    display: inline;
+    background: url(../src/assets/img/icon-deploy.svg) center center no-repeat;
+  }
+  
+  
+  
+    
+  
+  
+  
+  
+  
+  
+  /* Border Fade */
+  .border-fade {
+    display: inline-block;
+    transition-duration: 0.3s;
+    transition-property: box-shadow;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    transform: translateZ(0);
+    box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
+    /* Hack to improve aliasing on mobile/tablet devices */
+  }
+  .border-fade:hover {
+    box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
+    /* Hack to improve aliasing on mobile/tablet devices */
+  }
+  /*Content*/
+  
+  /**Title Action Buttons**/
+  .page-title-actions li{
+    display: inline-block;
+    text-align: center;
+  }
+  .title-action{
+    -webkit-transition: box-shadow 0.2s ease;
+    -moz-transition: box-shadow 0.2s ease;
+    transition: box-shadow 0.2s ease;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    border-radius: 50%;
+    color: #6a75eb;
+    display: inline-block;
+    font-size: 0.889em;
+    height: 4em;
+    margin: 0 1em 1em;
+    position: relative;
+    text-align: center;
+    text-transform: lowercase;
+    width: 4em;
+    line-height: 4em;
+  }
+  
+  .title-action:before{
+    -webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    border-radius: 50%;
+    bottom: 0;
+    box-shadow: 0 0 0 1px #000;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .title-action:hover{
+    box-shadow: 0 0 0 7px #07819b;
+    text-decoration: none;
+  }
+  .title-action:hover:before{
+    -webkit-transform: scale(0.925);
+    -moz-transform: scale(0.925);
+    -ms-transform: scale(0.925);
+    -o-transform: scale(0.925);
+    transform: scale(0.925);
+    box-shadow: 0 0 0 1px #07819b;
+    opacity: 0.5;
+  }
+  
+  /*Animation Button*/
+  /**Float**/
+  .float {
+    display: inline-block;
+    transition-duration: 0.3s;
+    transition-property: transform;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  }
+  .float:hover {
+    transform: translateY(-5px);
+  }
+  
+/*TOOLTIP*/
+/* Base styles for the element that has a tooltip */
+[data-tooltip],
+.tooltip {
   position: relative;
+  cursor: pointer;
   text-align: center;
-  text-transform: lowercase;
-  width: 4em;
-  line-height: 4em;
 }
 
-.title-action:before{
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-  border-radius: 50%;
-  bottom: 0;
-  box-shadow: 0 0 0 1px #000;
-  content: "";
-  left: 0;
+/* Base styles for the entire tooltip */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after {
   position: absolute;
-  right: 0;
-  top: 0;
-}
-.title-action:hover{
-  box-shadow: 0 0 0 7px #07819b;
-  text-decoration: none;
+  visibility: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: 
+      opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out,
+        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    -moz-transition:    
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out,
+        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    transition:         
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out,
+        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform:    translate3d(0, 0, 0);
+  transform:         translate3d(0, 0, 0);
+  pointer-events: none;
 }
-.title-action:hover:before{
-  -webkit-transform: scale(0.925);
-  -moz-transform: scale(0.925);
-  -ms-transform: scale(0.925);
-  -o-transform: scale(0.925);
-  transform: scale(0.925);
-  box-shadow: 0 0 0 1px #07819b;
-  opacity: 0.5;
+
+/* Show the entire tooltip on hover and focus */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after {
+  visibility: visible;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
 }
 
-/*Animation Button*/
-/**Float**/
-.float {
-  display: inline-block;
-  transition-duration: 0.3s;
-  transition-property: transform;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-}
-.float:hover {
-  transform: translateY(-5px);
+/* Base styles for the tooltip's directional arrow */
+.tooltip:before,
+[data-tooltip]:before {
+  z-index: 1001;
+  border: 6px solid transparent;
+  background: transparent;
+  content: "";
 }
 
+/* Base styles for the tooltip's content area */
+.tooltip:after,
+[data-tooltip]:after {
+  z-index: 1000;
+  padding: 8px;
+  width: auto;
+  background-color: #DEE8F3;
+  background-color: rgba(222, 232, 243, 1.0);
+  color: #1B3E6F;
+  content: attr(data-tooltip);
+  font-size: 10px;
+  line-height: 1.2;
+  border-radius: 2px;
+}
 
+/* Directions */
 
+/* Top (default) */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after,
+.tooltip-top:before,
+.tooltip-top:after {
+  bottom: 100%;
+  left: 50%;
+}
 
+[data-tooltip]:before,
+.tooltip:before,
+.tooltip-top:before {
+  margin-left: 0;
+  margin-bottom: -12px;
+  
+  border-bottom-color: #DEE8F3;
+  border-bottom-color: rgba(222, 232, 243, 1.0);
+}
 
+/* Horizontally align top/bottom tooltips */
+[data-tooltip]:after,
+.tooltip:after,
+.tooltip-top:after {
+  margin-left: -50%;
+}
 
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after,
+.tooltip-top:hover:before,
+.tooltip-top:hover:after,
+.tooltip-top:focus:before,
+.tooltip-top:focus:after {
+  -webkit-transform: translateY(-12px);
+  -moz-transform:    translateY(-12px);
+  transform:         translateY(-12px); 
+}
 
+/* Left */
+.tooltip-left:before,
+.tooltip-left:after {
+  right: 100%;
+  bottom: 50%;
+  left: auto;
+}
 
+.tooltip-left:before {
+  margin-left: 0;
+  margin-right: -12px;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-left-color: #000;
+  border-left-color: hsla(0, 0%, 20%, 0.9);
+}
 
+.tooltip-left:hover:before,
+.tooltip-left:hover:after,
+.tooltip-left:focus:before,
+.tooltip-left:focus:after {
+  -webkit-transform: translateX(-12px);
+  -moz-transform:    translateX(-12px);
+  transform:         translateX(-12px); 
+}
 
+/* Bottom */
+.tooltip-bottom:before,
+.tooltip-bottom:after {
+  top: 100%;
+  bottom: auto;
+  left: 20%;
+}
 
+.tooltip-bottom:before {
+  margin-top: -12px;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-bottom-color: #DEE8F3;
+  border-bottom-color: rgba(222, 232, 243, 1.0);
+}
 
+.tooltip-bottom:hover:before,
+.tooltip-bottom:hover:after,
+.tooltip-bottom:focus:before,
+.tooltip-bottom:focus:after {
+  -webkit-transform: translateY(12px);
+  -moz-transform:    translateY(12px);
+  transform:         translateY(12px); 
+}
 
+/* Right */
+.tooltip-right:before,
+.tooltip-right:after {
+  bottom: 50%;
+  left: 20%;
+}
 
+.tooltip-right:before {
+  margin-bottom: 0;
+  margin-left: -12px;
+  border-top-color: transparent;
+  border-right-color: #000;
+  border-right-color: hsla(0, 0%, 20%, 0.9);
+}
 
+.tooltip-right:hover:before,
+.tooltip-right:hover:after,
+.tooltip-right:focus:before,
+.tooltip-right:focus:after {
+  -webkit-transform: translateX(12px);
+  -moz-transform:    translateX(12px);
+  transform:         translateX(12px); 
+}
 
+/* Move directional arrows down a bit for left/right tooltips */
+.tooltip-left:before,
+.tooltip-right:before {
+  top: 3px;
+}
 
+/* Vertically center tooltip content for left/right tooltips */
+.tooltip-left:after,
+.tooltip-right:after {
+  margin-left: 0;
+  margin-bottom: -16px;
+}
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575.98px) {
+  .page-title{
+    padding: 18px;
+  }
+}
 
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767.98px) {
 
+}
 
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+  
+}
 
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
 
+}
 
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
 
+}
 
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+