diff --git a/package.json b/package.json
index 264dc07..4858905 100644
--- a/package.json
+++ b/package.json
@@ -57,13 +57,12 @@
     "rxjs": "^6.5.4",
     "rxjs-compat": "^6.5.5",
     "stream": "0.0.2",
-    "text-encoding": "^0.7.0",
     "tslib": "^1.11.1",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.0",
+    "@angular-devkit/build-angular": "^0.901.8",
     "@angular/cli": "~9.1.0",
     "@angular/compiler-cli": "~9.1.0",
     "@angular/language-service": "~9.1.0",
diff --git a/src/app/approutes.module.ts b/src/app/approutes.module.ts
index e2f863c..6145aae 100644
--- a/src/app/approutes.module.ts
+++ b/src/app/approutes.module.ts
@@ -104,6 +104,13 @@
                 loadChildren: async (): Promise<any> => import('./k8s/K8sModule')
                     .then((m: typeof import('./k8s/K8sModule')) => m.K8sModule),
                 canActivate: [AuthGuardService]
+            },
+            {
+                path: 'repos',
+                // tslint:disable-next-line: no-any
+                loadChildren: async (): Promise<any> => import('./osm-repositories/OsmRepositoriesModule')
+                    .then((m: typeof import('./osm-repositories/OsmRepositoriesModule')) => m.OsmRepositoriesModule),
+                canActivate: [AuthGuardService]
             }
         ]
     },
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 4ab802f..31a8516 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -106,8 +106,11 @@
     /** Give the message for the loading @public */
     public message: string = 'PLEASEWAIT';
 
-    /** List of NS Success Instances @private */
-    public nsRunningInstance: string[] = [];
+    /** List of NS Success Instances @public */
+    public nsRunningInstance: {}[] = [];
+
+    /** List of color for Instances @private */
+    private backgroundColor: string[] = [];
 
     /** Utilizes rest service for any CRUD operations @private */
     private restService: RestService;
@@ -157,21 +160,6 @@
     /** Contians hour converter @private */
     private hourConverter: number = 3600;
 
-    /** Contians color code for chart @private */
-    private chartColorPink: string = '#e4397c';
-
-    /** Contians color code for chart @private */
-    private chartColorPurple: string = '#605ca8';
-
-    /** Contians color code for chart @private */
-    private chartColorCyan: string = '#00c0ef';
-
-    /** Contians color code for chart @private */
-    private chartColorBlue: string = '#054C8C';
-
-    /** Contians color code for chart @private */
-    private chartColorYellow: string = '#ffce56';
-
     constructor(injector: Injector) {
         this.injector = injector;
         this.restService = this.injector.get(RestService);
@@ -254,20 +242,20 @@
     public getVnfdPackageCount(): void {
         this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
             .subscribe((vnfdPackageData: VNFDDetails[]) => {
-            this.vnfdPackageCount = vnfdPackageData.length;
-        }, (error: ERRORDATA) => {
-            this.restService.handleError(error, 'get');
-        });
+                this.vnfdPackageCount = vnfdPackageData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
     }
 
     /** Get NSD Package details @public */
     public getNsdPackageCount(): void {
         this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
             .subscribe((nsdPackageData: NSDDetails[]) => {
-            this.nsdPackageCount = nsdPackageData.length;
-        }, (error: ERRORDATA) => {
-            this.restService.handleError(error, 'get');
-        });
+                this.nsdPackageCount = nsdPackageData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
     }
 
     /** Get NS Instance details @public */
@@ -293,7 +281,8 @@
             if (operationalStatus === 'failed' || configStatus === 'failed') {
                 this.nsFailedInstances.push(nsdInstanceData);
             } else if (operationalStatus === 'running' && configStatus === 'configured') {
-                this.nsRunningInstance.push(nsdInstanceData.name);
+                this.nsRunningInstance.push({ name: nsdInstanceData.name, id: nsdInstanceData.id });
+                this.backgroundColor.push(this.sharedService.generateColor());
                 this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit));
             }
         });
@@ -314,14 +303,24 @@
                 datasets: [{
                     data: this.noOfHours,
                     label: this.translateService.instant('NOOFHOURS'),
-                    borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
-                    this.chartColorBlue, this.chartColorYellow],
+                    borderColor: this.backgroundColor,
                     fill: false,
-                    backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
-                    this.chartColorBlue, this.chartColorYellow]
+                    backgroundColor: this.backgroundColor
                 }]
             },
             options: {
+                hover: {
+                    onHover(evt: Event, item: {}): void {
+                        const el: HTMLElement = document.getElementById('canvas');
+                        el.style.cursor = item[0] ? 'pointer' : 'default';
+                    }
+                },
+                onClick(evt: Event, item: {}): void {
+                    if (item[0] !== undefined) {
+                        const location: string = '/instances/ns/' + item[0]._chart.data.labels[item[0]._index].id;
+                        window.open(location);
+                    }
+                },
                 legend: { display: false },
                 scales: {
                     xAxes: [{
@@ -331,10 +330,10 @@
                             callback: (label: any, index: number, labels: string): string => {
                                 const length: number = 20;
                                 const ending: string = '...';
-                                if (label.length > length) {
-                                    return label.substring(0, length - ending.length) + ending;
+                                if (label.name.length > length) {
+                                    return label.name.substring(0, length - ending.length) + ending;
                                 } else {
-                                    return label;
+                                    return label.name;
                                 }
                             }
                         },
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.html b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
index 646c8ae..324642a 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.html
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
@@ -29,22 +29,31 @@
                 <ng-select (change)="primitiveTypeChange($event)" [clearable]="false"
                     placeholder="{{'SELECT' | translate}}" [items]="primitiveTypeList" bindLabel="title"
                     bindValue="value" [(ngModel)]="primitiveType" id="primitiveType"
-                    [ngModelOptions]="{standalone: true}"></ng-select>
+                    [ngModelOptions]="{standalone: true}"
+                    [ngClass]="{ 'is-invalid': submitted && !primitiveType }"></ng-select>
             </div>
         </div>
-        <div class="form-group row">
-            <ng-container *ngIf="primitiveType == 'VNF_Primitive'">
-                <label class="col-sm-4 col-form-label">VNF {{'MEMBERINDEX' | translate}}*</label>
-                <div class="col-sm-3">
-                    <ng-select (change)="indexChange($event)" [clearable]="false" placeholder="{{'SELECT' | translate}}"
-                        [items]="params.memberIndex" bindLabel="member-vnf-index" bindValue="member-vnf-index"
-                        formControlName="vnf_member_index" id="vnf_member_index"
-                        [ngClass]="{ 'is-invalid': submitted && f.vnf_member_index.errors }"></ng-select>
-                </div>
-            </ng-container>
-            <label [ngClass]="{ 'col-sm-4': primitiveType != 'VNF_Primitive', 'col-sm-2': primitiveType == 'VNF_Primitive' }" class="col-form-label">
+        <div class="form-group row" *ngIf="primitiveType === 'VNF_Primitive' || primitiveType === 'VDU_Primitive'">
+            <label class="col-sm-4 col-form-label">VNF {{'MEMBERINDEX' | translate}}*</label>
+            <div class="col-sm-3">
+                <ng-select (change)="indexChange($event, primitiveType)" [clearable]="false" placeholder="{{'SELECT' | translate}}"
+                    [items]="params.memberIndex" bindLabel="member-vnf-index" bindValue="member-vnf-index"
+                    formControlName="vnf_member_index" id="vnf_member_index"
+                    [ngClass]="{ 'is-invalid': submitted && f.vnf_member_index.errors }"></ng-select>
+            </div>
+        </div>
+        <div class="form-group row" *ngIf="primitiveType === 'VDU_Primitive'">
+            <label class="col-sm-4 col-form-label">{{'SELECT' | translate}} VDU *</label>
+            <div class="col-sm-8">
+                <ng-select (change)="getVDUPrimitive($event)" [clearable]="false" placeholder="{{'SELECT' | translate}}"
+                    [items]="vduList" bindLabel="name" bindValue="id" formControlName="vdu_id" id="vdu_id"
+                    [ngClass]="{ 'is-invalid': submitted && f.vdu_id.errors }"></ng-select>
+            </div>
+        </div>
+        <div class="form-group row" *ngIf="primitiveType">
+            <label class="col-sm-4 col-form-label">
                 {{'PAGE.NSPRIMITIVE.PRIMITIVE' | translate}}*</label>
-            <div [ngClass]="{ 'col-sm-8': primitiveType != 'VNF_Primitive', 'col-sm-3': primitiveType == 'VNF_Primitive' }" class="col-sm-3">
+            <div class="col-sm-8">
                 <ng-select (change)="primitiveChange($event)" [clearable]="false" placeholder="{{'SELECT' | translate}}"
                     [items]="primitiveList" bindLabel="name" bindValue="name" formControlName="primitive" id="primitive"
                     [ngClass]="{ 'is-invalid': submitted && f.primitive.errors }"></ng-select>
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
index 02269d3..1086f49 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
@@ -26,7 +26,7 @@
 import { APIURLHEADER, ERRORDATA, URLPARAMS } from 'CommonModel';
 import { DataService } from 'DataService';
 import { environment } from 'environment';
-import { NSData } from 'NSDModel';
+import { NSData, VDUPRIMITIVELEVEL } from 'NSDModel';
 import { NSPrimitiveParams } from 'NSInstanceModel';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
@@ -81,6 +81,9 @@
     /** Model value used to hold selected primitive type @public */
     public primitiveType: string;
 
+    /** Contains list of VDU primitive lists @public */
+    public vduList: {}[];
+
     /** FormBuilder instance added to the formBuilder @private */
     private formBuilder: FormBuilder;
 
@@ -111,8 +114,20 @@
         this.sharedService = this.injector.get(SharedService);
         this.activeModal = this.injector.get(NgbActiveModal);
         this.formBuilder = this.injector.get(FormBuilder);
-        this.primitiveTypeList = [{ title: this.translateService.instant('VNFPRIMITIVE'), value: 'VNF_Primitive' }];
-        this.primitiveType = 'VNF_Primitive';
+        this.primitiveTypeList = [
+            {
+                title: this.translateService.instant('NSPRIMITIVE'),
+                value: 'NS_Primitive'
+            },
+            {
+                title: this.translateService.instant('VNFPRIMITIVE'),
+                value: 'VNF_Primitive'
+            },
+            {
+                title: this.translateService.instant('VDUPRIMITIVE'),
+                value: 'VDU_Primitive'
+            }
+        ];
     }
 
     /**
@@ -125,9 +140,6 @@
                 this.nsdId = event.identifier;
             }
         });
-        if (!isNullOrUndefined(this.params.nsConfig)) {
-            this.primitiveTypeList.push({ title: this.translateService.instant('NSPRIMITIVE'), value: 'NS_Primitive' });
-        }
         this.initializeForm();
     }
 
@@ -139,6 +151,7 @@
         this.primitiveForm = this.formBuilder.group({
             primitive: [null, [Validators.required]],
             vnf_member_index: [null, [Validators.required]],
+            vdu_id: [null, [Validators.required]],
             primitive_params: this.formBuilder.array([this.primitiveParamsBuilder()])
         });
     }
@@ -187,6 +200,12 @@
             // tslint:disable-next-line: no-string-literal
             primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index;
         }
+        if (this.primitiveType === 'VDU_Primitive') {
+            // tslint:disable-next-line: no-string-literal
+            primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index;
+            // tslint:disable-next-line: no-string-literal
+            primitiveParamsPayLoads['vdu_id'] = this.primitiveForm.value.vdu_id;
+        }
         const apiURLHeader: APIURLHEADER = {
             url: environment.NSDINSTANCES_URL + '/' + this.nsdId + '/action'
         };
@@ -206,21 +225,31 @@
         this.primitiveParameter = [];
         this.initializeForm();
         if (data.value === 'NS_Primitive') {
-            this.primitiveList = !isNullOrUndefined(this.params.nsConfig['config-primitive']) ?
-                this.params.nsConfig['config-primitive'] : [];
+            this.getNSInfo(this.params.name);
             this.getFormControl('vnf_member_index').setValidators([]);
+            this.getFormControl('vnf_member_index').updateValueAndValidity();
+            this.getFormControl('vdu_id').setValidators([]);
+            this.getFormControl('vdu_id').updateValueAndValidity();
+        } else if (data.value === 'VNF_Primitive') {
+            this.getFormControl('vdu_id').setValidators([]);
+            this.getFormControl('vdu_id').updateValueAndValidity();
         }
     }
     /** Member index change event */
-    public indexChange(data: {}): void {
+    public indexChange(data: {}, getType?: string): void {
+        this.getFormControl('vdu_id').setValue(null);
         if (data) {
-            this.getVnfdInfo(data['vnfd-id-ref']);
+            this.getVnfdInfo(data['vnfd-id-ref'], getType);
         } else {
             this.primitiveList = [];
             this.getFormControl('primitive').setValue(null);
             this.primitiveParameter = [];
         }
     }
+    /** Get VDU Primitive from selected VDU id/name change event */
+    public getVDUPrimitive(data: {}): void {
+        this.primitiveList = data['vdu-configuration']['config-primitive'];
+    }
     /** Primivtive change event */
     public primitiveChange(data: { parameter: {}[] }): void {
         this.primitiveParameter = [];
@@ -231,6 +260,14 @@
             this.updatePrimitive(data);
         }
     }
+    /** Generate vdu section @public */
+    public generateVDUData(vduData: VDUPRIMITIVELEVEL): VDUPRIMITIVELEVEL {
+        return {
+            id: vduData.id,
+            name: vduData.name,
+            'vdu-configuration': vduData['vdu-configuration']
+        };
+    }
     /** Update primitive value based on parameter */
     private updatePrimitive(primitive: { parameter: {}[] }): void {
         if (primitive.parameter) {
@@ -247,7 +284,7 @@
         }
     }
     /** Get primivitive actions from vnfd data */
-    private getVnfdInfo(vnfdRef: string): void {
+    private getVnfdInfo(vnfdRef: string, getType?: string): void {
         this.primitiveList = [];
         this.primitiveParameter = [];
         this.getFormControl('primitive').setValue(null);
@@ -255,9 +292,41 @@
         this.isLoadingResults = true;
         this.restService.getResource(apiUrl)
             .subscribe((vnfdInfo: {}) => {
-                if (vnfdInfo[0]['vnf-configuration']) {
+                if (vnfdInfo[0]['vnf-configuration'] !== undefined && vnfdInfo[0]['vnf-configuration']) {
+                    this.getFormControl('vdu_id').setValidators([]);
                     this.primitiveList = vnfdInfo[0]['vnf-configuration']['config-primitive'];
                 }
+                if (getType === 'VDU_Primitive') {
+                    this.vduList = [];
+                    this.primitiveList = [];
+                    vnfdInfo[0].vdu.forEach((vduData: VDUPRIMITIVELEVEL) => {
+                        if (vduData['vdu-configuration']) {
+                            const vduDataObj: VDUPRIMITIVELEVEL = this.generateVDUData(vduData);
+                            this.vduList.push(vduDataObj);
+                        }
+                    });
+                }
+                this.isLoadingResults = false;
+            }, (error: ERRORDATA) => {
+                this.isLoadingResults = false;
+                this.restService.handleError(error, 'get');
+            });
+    }
+    /** Get primivitive actions from NSD data */
+    private getNSInfo(nsdRef: string): void {
+        this.primitiveList = [];
+        this.primitiveParameter = [];
+        this.getFormControl('primitive').setValue(null);
+        const apiUrl: string = environment.NSDESCRIPTORS_URL + '?short-name=' + nsdRef;
+        this.isLoadingResults = true;
+        this.restService.getResource(apiUrl)
+            .subscribe((nsdInfo: {}) => {
+                if (!isNullOrUndefined(nsdInfo[0]['ns-configuration'])) {
+                    this.primitiveList = !isNullOrUndefined(nsdInfo[0]['ns-configuration']['config-primitive']) ?
+                    nsdInfo[0]['ns-configuration']['config-primitive'] : [];
+                } else {
+                    this.primitiveList = [];
+                }
                 this.isLoadingResults = false;
             }, (error: ERRORDATA) => {
                 this.isLoadingResults = false;
diff --git a/src/app/layouts/LayoutComponent.scss b/src/app/layouts/LayoutComponent.scss
index 649387a..19e8ea0 100644
--- a/src/app/layouts/LayoutComponent.scss
+++ b/src/app/layouts/LayoutComponent.scss
@@ -24,6 +24,7 @@
     .content-section {
       @include wh-value(100%, null);
       @include transition(all, 0.3s, null, null);
+      @include flexbox(block, null, null, null, null, null);
       overflow-x: auto;
     }
   }
diff --git a/src/app/osm-repositories/OsmRepositoriesComponent.html b/src/app/osm-repositories/OsmRepositoriesComponent.html
new file mode 100644
index 0000000..06b8876
--- /dev/null
+++ b/src/app/osm-repositories/OsmRepositoriesComponent.html
@@ -0,0 +1,18 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file 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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<router-outlet></router-outlet>
diff --git a/src/app/osm-repositories/OsmRepositoriesComponent.scss b/src/app/osm-repositories/OsmRepositoriesComponent.scss
new file mode 100644
index 0000000..0ecd95d
--- /dev/null
+++ b/src/app/osm-repositories/OsmRepositoriesComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
\ No newline at end of file
diff --git a/src/app/osm-repositories/OsmRepositoriesComponent.ts b/src/app/osm-repositories/OsmRepositoriesComponent.ts
new file mode 100644
index 0000000..5f42eee
--- /dev/null
+++ b/src/app/osm-repositories/OsmRepositoriesComponent.ts
@@ -0,0 +1,55 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file OsmRepositoriesComponent.ts
+ */
+import { Component, Injector } from '@angular/core';
+import { Router, RouterEvent } from '@angular/router';
+/**
+ * Creating Component
+ * @Component takes OsmRepositoriesComponent.html as template url
+ */
+@Component({
+    selector: 'app-osmrepositories',
+    templateUrl: './OsmRepositoriesComponent.html',
+    styleUrls: ['./OsmRepositoriesComponent.scss']
+})
+/** Exporting a class @exports OsmRepositoriesComponent */
+export class OsmRepositoriesComponent{
+    /** Invoke service injectors @public */
+  public injector: Injector;
+
+  /** Holds teh instance of router service @private */
+  private router: Router;
+
+  /** creates OSM Repo component */
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.router = this.injector.get(Router);
+    this.router.events.subscribe((event: RouterEvent) => {
+      this.redirectToList(event.url);
+    });
+  }
+
+  /** Return to osm Repo Details list */
+  public redirectToList(getURL: string): void {
+    if (getURL === '/repos') {
+      this.router.navigate(['/repos/details']).catch();
+    }
+  }
+}
diff --git a/src/app/osm-repositories/OsmRepositoriesModule.ts b/src/app/osm-repositories/OsmRepositoriesModule.ts
new file mode 100644
index 0000000..20901e4
--- /dev/null
+++ b/src/app/osm-repositories/OsmRepositoriesModule.ts
@@ -0,0 +1,78 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file Osm Repository Module.
+ */
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TranslateModule } from '@ngx-translate/core';
+import { DataService } from 'DataService';
+import { LoaderModule } from 'LoaderModule';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { OsmRepoCreateUpdateComponent } from 'OsmRepoCreateUpdate';
+import { OsmRepositoriesComponent } from 'OsmRepositories';
+import { OsmRepositoriesActionComponent } from 'OsmRepositoriesAction';
+import { OsmRepositoriesDetailsComponent } from 'OsmRepositoriesDetails';
+import { PagePerRowModule } from 'PagePerRowModule';
+import { PageReloadModule } from 'PageReloadModule';
+
+/** To halndle project information */
+const projectInfo: {} = { title: '{project}', url: '/' };
+
+/**
+ * configures  routers
+ */
+const routes: Routes = [
+    {
+        path: '',
+        component: OsmRepositoriesComponent,
+        children: [
+            {
+                path: 'details',
+                data: {
+                    breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+                    projectInfo, { title: 'PAGE.OSMREPO.MENUOSMREPO', url: null }]
+                },
+                component: OsmRepositoriesDetailsComponent
+            }
+        ]
+    }
+];
+/**
+ * Creating @NgModule component for Modules
+ */
+// tslint:disable-next-line: no-stateless-class
+@NgModule({
+    imports: [FormsModule, ReactiveFormsModule, CommonModule, HttpClientModule, TranslateModule,
+        RouterModule.forChild(routes), NgbModule, PagePerRowModule, Ng2SmartTableModule, LoaderModule, PageReloadModule, NgSelectModule],
+    declarations: [OsmRepositoriesComponent, OsmRepositoriesDetailsComponent, OsmRepositoriesActionComponent, OsmRepoCreateUpdateComponent],
+    providers: [
+        DataService
+    ],
+    entryComponents: [
+        OsmRepoCreateUpdateComponent
+    ]
+})
+/** Exporting a class @exports OsmRepositoriesModule */
+export class OsmRepositoriesModule { }
diff --git a/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html
new file mode 100644
index 0000000..38c753b
--- /dev/null
+++ b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html
@@ -0,0 +1,70 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file 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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<form [formGroup]="osmrepoForm" (ngSubmit)="osmRepoSubmit();">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{(getCreateupdateType === 'Add' ? 'PAGE.OSMREPO.NEWOSMREPO' : 'PAGE.OSMREPO.EDITOSMREPO') | translate }}</h4>
+    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+      <i class="fas fa-times-circle text-danger"></i>
+    </button>
+  </div>
+  <div class="modal-body osmrepoadd">
+    <div class="form-group row">
+      <label class="col-sm-12 col-form-label mandatory-label"
+        [ngClass]="{'text-danger': osmrepoForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
+      <label class="col-sm-4 col-form-label" for="name">{{'NAME' | translate}}*</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'NAME' | translate}}" type="text"
+          formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }"
+          maxlength="{{sharedService.MAX_LENGTH_NAME}}" required>
+      </div>
+    </div>
+    <div class="form-group row">
+      <label class="col-sm-4 col-form-label" for="type">{{'TYPE' | translate}}*</label>
+      <div class="col-sm-8">
+        <ng-select bindLabel="title" bindValue="value" [items]="osmrepoType"
+          placeholder="{{'SELECT' | translate}} {{'TYPE' | translate}}" formControlName="type" id="type"
+          [ngClass]="{ 'is-invalid': submitted && f.type.errors }" required>
+        </ng-select>
+      </div>
+    </div>
+    <div class="form-group row">
+      <label class="col-sm-4 col-form-label" for="url">{{'URL' | translate}}*</label>
+      <div class="col-sm-8">
+        <input autocomplete="off" class="form-control" placeholder="{{'URL' | translate}}" type="url"
+          formControlName="url" id="url" [ngClass]="{ 'is-invalid': submitted && f.url.errors }" required>
+        <div *ngIf="osmrepoForm.invalid" class="invalid-feedback">
+          <div *ngIf="f.url.errors && f.url.value">{{'DOMVALIDATIONS.INVALIDURL' | translate}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group row">
+      <label class="col-sm-4 col-form-label" for="description">{{'DESCRIPTION' | translate}}*</label>
+      <div class="col-sm-8">
+        <textarea rows="5" cols="50" class="form-control" placeholder="{{'DESCRIPTION' | translate}}" type="text"
+          formControlName="description" id="description" [ngClass]="{ 'is-invalid': submitted && f.description.errors }"
+          maxlength="{{sharedService.MAX_LENGTH_DESCRIPTION}}" required></textarea>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
+    <button type="submit"
+      class="btn btn-primary">{{(getCreateupdateType === 'Add' ? 'ADD' : 'UPDATE') | translate}}</button>
+  </div>
+</form>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.scss b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.scss
new file mode 100644
index 0000000..0ecd95d
--- /dev/null
+++ b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
\ No newline at end of file
diff --git a/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.ts b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.ts
new file mode 100644
index 0000000..e653e7c
--- /dev/null
+++ b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.ts
@@ -0,0 +1,184 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file OsmRepoCreateUpdateComponent.ts
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, OSMREPO_TYPES, TYPESECTION } from 'CommonModel';
+import { environment } from 'environment';
+import { OSMRepoDetails } from 'OsmRepoModel';
+import { RestService } from 'RestService';
+import { SharedService } from 'SharedService';
+/**
+ * Creating Component
+ * @Component takes OsmRepoCreateUpdateComponent.html as template url
+ */
+@Component({
+  selector: 'app-osm-repo-create-update',
+  templateUrl: './OsmRepoCreateUpdateComponent.html',
+  styleUrls: ['./OsmRepoCreateUpdateComponent.scss']
+})
+export class OsmRepoCreateUpdateComponent implements OnInit {
+  /** To inject services @public */
+  public injector: Injector;
+
+  /** Instance of the rest service @public */
+  public restService: RestService;
+
+  /** Instance for active modal service @public */
+  public activeModal: NgbActiveModal;
+
+  /** Setting OSM Repo types in array @public */
+  public osmrepoType: TYPESECTION[];
+
+  /** FormGroup osm repo added to the form @ html @public */
+  public osmrepoForm: FormGroup;
+
+  /** Form submission Add */
+  public submitted: boolean = false;
+
+  /** Check the loading results for loader status @public */
+  public isLoadingResults: boolean = false;
+
+  /** Give the message for the loading @public */
+  public message: string = 'PLEASEWAIT';
+
+  /** Contains osm repo create or edit @public */
+  public getCreateupdateType: string;
+
+  /** To inject input type services For creation or edit @public */
+  @Input() public createupdateType: string;
+
+  /** To inject input type services for ID @public */
+  @Input() public osmrepoid: string;
+
+  /** Contains all methods related to shared @public */
+  public sharedService: SharedService;
+
+  /** FormBuilder instance added to the formBuilder @private */
+  private formBuilder: FormBuilder;
+
+  /** Notifier service to popup notification @private */
+  private notifierService: NotifierService;
+
+  /** Contains tranlsate instance @private */
+  private translateService: TranslateService;
+
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.formBuilder = this.injector.get(FormBuilder);
+    this.restService = this.injector.get(RestService);
+    this.activeModal = this.injector.get(NgbActiveModal);
+    this.notifierService = this.injector.get(NotifierService);
+    this.translateService = this.injector.get(TranslateService);
+    this.sharedService = this.injector.get(SharedService);
+  }
+
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.osmrepoForm.controls; }
+
+  public ngOnInit(): void {
+    this.osmrepoType = OSMREPO_TYPES;
+    this.osmRepoFormInitialize();
+    this.getCreateupdateType = this.createupdateType;
+    if (this.getCreateupdateType === 'Edit') {
+      this.fetchAssigndata();
+    }
+  }
+
+  /** On modal initializing forms  @public */
+  public osmRepoFormInitialize(): void {
+    this.osmrepoForm = this.formBuilder.group({
+      name: [null, [Validators.required]],
+      type: [null, [Validators.required]],
+      url: [null, [Validators.required, Validators.pattern(this.sharedService.REGX_URL_PATTERN)]],
+      description: [null, [Validators.required]]
+    });
+  }
+
+  /** Assign and get the osm repo details for edit section @public */
+  public fetchAssigndata(): void {
+    this.isLoadingResults = true;
+    this.restService.getResource(environment.OSMREPOS_URL + '/' + this.osmrepoid).subscribe((data: OSMRepoDetails) => {
+      this.osmrepoForm.setValue({
+        name: data.name,
+        type: data.type,
+        url: data.url,
+        description: data.description
+      });
+      this.isLoadingResults = false;
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+      this.isLoadingResults = false;
+    });
+  }
+
+  /** On modal submit osm Repo will called @public */
+  public osmRepoSubmit(): void {
+    this.submitted = true;
+    this.sharedService.cleanForm(this.osmrepoForm);
+    if (this.osmrepoForm.invalid) {
+      return;
+    }
+    this.isLoadingResults = true;
+    const modalData: MODALCLOSERESPONSEDATA = {
+      message: 'Done'
+    };
+    if (this.getCreateupdateType === 'Add') {
+      const apiURLHeader: APIURLHEADER = {
+        url: environment.OSMREPOS_URL
+      };
+      this.addOsmRepo(apiURLHeader, modalData);
+    } else if (this.getCreateupdateType === 'Edit') {
+      const apiURLHeader: APIURLHEADER = {
+        url: environment.OSMREPOS_URL + '/' + this.osmrepoid
+      };
+      this.editOsmRepo(apiURLHeader, modalData);
+    } else {
+      this.notifierService.notify('error', this.translateService.instant('ERROR'));
+    }
+  }
+
+  /** This function used to add the osm repo @public */
+  public addOsmRepo(apiURLHeader: APIURLHEADER, modalData: MODALCLOSERESPONSEDATA): void {
+    this.restService.postResource(apiURLHeader, this.osmrepoForm.value).subscribe(() => {
+      this.activeModal.close(modalData);
+      this.notifierService.notify('success', this.translateService.instant('PAGE.OSMREPO.CREATEDSUCCESSFULLY'));
+      this.isLoadingResults = false;
+    }, (error: ERRORDATA) => {
+      this.isLoadingResults = false;
+      this.restService.handleError(error, 'post');
+    });
+  }
+
+  /** This function used to Edit the osm repo @public */
+  public editOsmRepo(apiURLHeader: APIURLHEADER, modalData: MODALCLOSERESPONSEDATA): void {
+    this.restService.patchResource(apiURLHeader, this.osmrepoForm.value).subscribe(() => {
+      this.activeModal.close(modalData);
+      this.notifierService.notify('success', this.translateService.instant('PAGE.OSMREPO.UPDATEDSUCCESSFULLY'));
+      this.isLoadingResults = false;
+    }, (error: ERRORDATA) => {
+      this.isLoadingResults = false;
+      this.restService.handleError(error, 'patch');
+    });
+  }
+}
diff --git a/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html
new file mode 100644
index 0000000..29cdbaa
--- /dev/null
+++ b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html
@@ -0,0 +1,35 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file 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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row d-flex flex-row justify-content-between">
+    <div class="d-flex align-items-center header-style">{{'PAGE.OSMREPO.OSMREPOTITLE' | translate}}</div>
+    <span class="button">
+        <button class="btn btn-primary" type="button" (click)="addOsmrepo()" placement="top" container="body" ngbTooltip="{{'PAGE.OSMREPO.ADDOSMREPO' | translate}}">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
+            {{'PAGE.OSMREPO.ADDOSMREPO' | translate}}
+        </button>
+    </span>
+</div>
+<div class="row mt-2 mb-0 form-group justify-content-end list-utilites-actions">
+    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-reload></page-reload>
+</div>
+<div class="smarttable-style bg-white mt-1">
+    <ng2-smart-table [settings]="settings" [source]="dataSource" (userRowSelect)="onUserRowSelect($event)">
+    </ng2-smart-table>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
diff --git a/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.scss b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.scss
new file mode 100644
index 0000000..0ecd95d
--- /dev/null
+++ b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
\ No newline at end of file
diff --git a/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.ts b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.ts
new file mode 100644
index 0000000..3415484
--- /dev/null
+++ b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.ts
@@ -0,0 +1,203 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file OsmRepositoriesDetailsComponent.ts
+ */
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { ERRORDATA, MODALCLOSERESPONSEDATA, OSMREPO_TYPES } from 'CommonModel';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import { LocalDataSource } from 'ng2-smart-table';
+import { OsmRepoCreateUpdateComponent } from 'OsmRepoCreateUpdate';
+import { OSMRepoData, OSMRepoDetails } from 'OsmRepoModel';
+import { OsmRepositoriesActionComponent } from 'OsmRepositoriesAction';
+import { RestService } from 'RestService';
+import { Subscription } from 'rxjs';
+import { SharedService } from 'SharedService';
+/**
+ * Creating Component
+ * @Component takes OsmRepositoriesComponent.html as template url
+ */
+@Component({
+  selector: 'app-osm-repositories-details',
+  templateUrl: './OsmRepositoriesDetailsComponent.html',
+  styleUrls: ['./OsmRepositoriesDetailsComponent.scss']
+})
+export class OsmRepositoriesDetailsComponent implements OnInit {
+  /** To inject services @public */
+  public injector: Injector;
+
+  /** handle translate @public */
+  public translateService: TranslateService;
+
+  /** Data of smarttable populate through LocalDataSource @public */
+  public dataSource: LocalDataSource = new LocalDataSource();
+
+  /** Columns list of the smart table @public */
+  public columnLists: object = {};
+
+  /** Settings for smarttable to populate the table with columns @public */
+  public settings: object = {};
+
+  /** Check the loading results @public */
+  public isLoadingResults: boolean = true;
+
+  /** Give the message for the loading @public */
+  public message: string = 'PLEASEWAIT';
+
+  /** Contains osm repo details data @public */
+  public osmRepoData: OSMRepoData[] = [];
+
+  /** Instance of the rest service @private */
+  private restService: RestService;
+
+  /** dataService to pass the data from one component to another @private */
+  private dataService: DataService;
+
+  /** Instance of the modal service @private */
+  private modalService: NgbModal;
+
+  /** Contains all methods related to shared @private */
+  private sharedService: SharedService;
+
+  /** Instance of subscriptions @private */
+  private generateDataSub: Subscription;
+
+  // creates osm repository component
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.restService = this.injector.get(RestService);
+    this.dataService = this.injector.get(DataService);
+    this.sharedService = this.injector.get(SharedService);
+    this.modalService = this.injector.get(NgbModal);
+    this.translateService = this.injector.get(TranslateService);
+  }
+
+  /** Lifecyle Hooks the trigger before component is instantiate @public */
+  public ngOnInit(): void {
+    this.generateColumns();
+    this.generateSettings();
+    this.generateData();
+    this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+  }
+
+  /** smart table listing manipulation @private */
+  public onChange(perPageValue: number): void {
+    this.dataSource.setPaging(1, perPageValue, true);
+  }
+
+  /** convert UserRowSelect Function @private */
+  public onUserRowSelect(event: MessageEvent): void {
+    Object.assign(event.data, { page: 'osmrepo' });
+    this.dataService.changeMessage(event.data);
+  }
+
+  /** smart table Header Colums @public */
+  public generateColumns(): void {
+    this.columnLists = {
+      name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
+      identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+      url: { title: this.translateService.instant('URL'), width: '15%' },
+      type: {
+        title: this.translateService.instant('TYPE'), width: '15%',
+        filter: {
+          type: 'list',
+          config: {
+            selectText: 'Select',
+            list: OSMREPO_TYPES
+          }
+        }
+      },
+      modified: { title: this.translateService.instant('MODIFIED'), width: '15%' },
+      created: { title: this.translateService.instant('CREATED'), width: '15%' },
+      Actions: {
+        name: 'Action', width: '10%', filter: false, sort: false, type: 'custom',
+        title: this.translateService.instant('ACTIONS'),
+        valuePrepareFunction: (cell: OSMRepoData, row: OSMRepoData): OSMRepoData => row,
+        renderComponent: OsmRepositoriesActionComponent
+      }
+    };
+  }
+
+  /** smart table Data Settings @public */
+  public generateSettings(): void {
+    this.settings = {
+      columns: this.columnLists,
+      actions: {
+        add: false,
+        edit: false,
+        delete: false,
+        position: 'right'
+      },
+      attr: this.sharedService.tableClassConfig(),
+      pager: this.sharedService.paginationPagerConfig(),
+      noDataMessage: this.translateService.instant('NODATAMSG')
+    };
+  }
+
+  /** Generate osmRepoData object from loop and return for the datasource @public */
+  public generateOsmRepoData(osmRepo: OSMRepoDetails): OSMRepoData {
+    return {
+      name: osmRepo.name,
+      identifier: osmRepo._id,
+      url: osmRepo.url,
+      type: osmRepo.type,
+      description: osmRepo.description,
+      modified: this.sharedService.convertEpochTime(Number(osmRepo._admin.modified)),
+      created: this.sharedService.convertEpochTime(Number(osmRepo._admin.created))
+    };
+  }
+
+  /** Create a osm repo @public */
+  public addOsmrepo(): void {
+    const modalRef: NgbModalRef = this.modalService.open(OsmRepoCreateUpdateComponent, { backdrop: 'static' });
+    modalRef.componentInstance.createupdateType = 'Add';
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.generateData();
+      }
+    }).catch();
+  }
+
+  /**
+   * Lifecyle hook which get trigger on component destruction
+   */
+  public ngOnDestroy(): void {
+    this.generateDataSub.unsubscribe();
+  }
+
+  /** Fetching the data from server to Load in the smarttable @protected */
+  protected generateData(): void {
+    this.isLoadingResults = true;
+    this.restService.getResource(environment.OSMREPOS_URL).subscribe((osmRepoData: OSMRepoDetails[]) => {
+      this.osmRepoData = [];
+      osmRepoData.forEach((osmRepo: OSMRepoDetails) => {
+        const osmRepoDataObj: OSMRepoData = this.generateOsmRepoData(osmRepo);
+        this.osmRepoData.push(osmRepoDataObj);
+      });
+      this.dataSource.load(this.osmRepoData).then((data: boolean) => {
+        this.isLoadingResults = false;
+      }).catch();
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+      this.isLoadingResults = false;
+    });
+  }
+}
diff --git a/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
index ed5e414..330edf8 100644
--- a/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
+++ b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
@@ -207,8 +207,11 @@
         });
         delete this.netSliceInstantiateForm.value.config;
       } else {
-        this.notifierService.notify('error', this.translateService.instant('INVALIDCONFIG'));
-        return;
+        const getConfigJson: string = jsyaml.load(this.netSliceInstantiateForm.value.config, { json: true });
+        Object.keys(getConfigJson).forEach((item: string) => {
+          this.netSliceInstantiateForm.value[item] = getConfigJson[item];
+        });
+        delete this.netSliceInstantiateForm.value.config;
       }
     }
     this.isLoadingResults = true;
@@ -259,24 +262,40 @@
   /** Config file process @private */
   public configFile(files: FileList): void {
     if (files && files.length === 1) {
-      this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
-        const getConfigJson: string = jsyaml.load(fileContent, { json: true });
-        // tslint:disable-next-line: no-backbone-get-set-outside-model
-        this.netSliceInstantiateForm.get('config').setValue(JSON.stringify(getConfigJson));
-      }).catch((err: string): void => {
-        if (err === 'typeError') {
-          this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
-        } else {
-          this.notifierService.notify('error', this.translateService.instant('ERROR'));
-        }
-        this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
-        this.fileInputConfig.nativeElement.value = null;
-      });
+      const fileFormat: string = this.sharedService.fetchFileExtension(files).toLocaleLowerCase();
+      if (fileFormat === 'yaml' || fileFormat === 'yml') {
+        this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
+          const getConfigJson: string = jsyaml.load(fileContent, { json: true });
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.netSliceInstantiateForm.get('config').setValue(JSON.stringify(getConfigJson));
+        }).catch((err: string): void => {
+          if (err === 'typeError') {
+            this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
+          } else {
+            this.notifierService.notify('error', this.translateService.instant('ERROR'));
+          }
+          this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+          this.fileInputConfig.nativeElement.value = null;
+        });
+      } else if (fileFormat === 'json') {
+        this.sharedService.getFileString(files, 'json').then((fileContent: string): void => {
+          const getConfigJson: string = jsyaml.load(fileContent, { json: true });
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.netSliceInstantiateForm.get('config').setValue(JSON.stringify(getConfigJson));
+        }).catch((err: string): void => {
+          if (err === 'typeError') {
+            this.notifierService.notify('error', this.translateService.instant('JSONFILETYPEERRROR'));
+          } else {
+            this.notifierService.notify('error', this.translateService.instant('ERROR'));
+          }
+          this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+          this.fileInputConfig.nativeElement.value = null;
+        });
+      }
     } else if (files && files.length > 1) {
       this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
     }
     this.fileInputConfigLabel.nativeElement.innerText = files[0].name;
     this.fileInputConfig.nativeElement.value = null;
   }
-
 }
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
index 515a24b..74569f1 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
@@ -197,8 +197,11 @@
         });
         delete this.instantiateForm.value.config;
       } else {
-        this.notifierService.notify('error', this.translateService.instant('INVALIDCONFIG'));
-        return;
+        const getConfigJson: string = jsyaml.load(this.instantiateForm.value.config, { json: true });
+        Object.keys(getConfigJson).forEach((item: string) => {
+          this.instantiateForm.value[item] = getConfigJson[item];
+        });
+        delete this.instantiateForm.value.config;
       }
     }
     const apiURLHeader: APIURLHEADER = {
@@ -246,19 +249,35 @@
   /** Config file process @private */
   public configFile(files: FileList): void {
     if (files && files.length === 1) {
-      this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
-        const getConfigJson: string = jsyaml.load(fileContent, { json: true });
-        // tslint:disable-next-line: no-backbone-get-set-outside-model
-        this.instantiateForm.get('config').setValue(JSON.stringify(getConfigJson));
-      }).catch((err: string): void => {
-        if (err === 'typeError') {
-          this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
-        } else {
-          this.notifierService.notify('error', this.translateService.instant('ERROR'));
-        }
-        this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
-        this.fileInputConfig.nativeElement.value = null;
-      });
+      const fileFormat: string = this.sharedService.fetchFileExtension(files).toLocaleLowerCase();
+      if (fileFormat === 'yaml' || fileFormat === 'yml') {
+        this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.instantiateForm.get('config').setValue(fileContent);
+        }).catch((err: string): void => {
+          if (err === 'typeError') {
+            this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
+          } else {
+            this.notifierService.notify('error', this.translateService.instant('ERROR'));
+          }
+          this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+          this.fileInputConfig.nativeElement.value = null;
+        });
+      } else if (fileFormat === 'json') {
+        this.sharedService.getFileString(files, 'json').then((fileContent: string): void => {
+          const getConfigJson: string = jsyaml.load(fileContent, { json: true });
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.instantiateForm.get('config').setValue(JSON.stringify(getConfigJson));
+        }).catch((err: string): void => {
+          if (err === 'typeError') {
+            this.notifierService.notify('error', this.translateService.instant('JSONFILETYPEERRROR'));
+          } else {
+            this.notifierService.notify('error', this.translateService.instant('ERROR'));
+          }
+          this.fileInputConfigLabel.nativeElement.innerText = this.translateService.instant('CHOOSEFILE');
+          this.fileInputConfig.nativeElement.value = null;
+        });
+      }
     } else if (files && files.length > 1) {
       this.notifierService.notify('error', this.translateService.instant('DROPFILESVALIDATION'));
     }
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
index 21aad71..bf78d7f 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
@@ -706,90 +706,140 @@
     if (!this.mousedownNode) { return; }
     this.dragLine.classed('hidden', true);
     this.mouseupNode = d;
-    if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intcp') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDINTCP'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'vdu') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDVDU'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'vdu') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVDU'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intvl') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDVNFVL'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'cp') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDCP'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'cp') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDCP'));
-      this.deselectPath();
-    }
-    else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intcp') {
-      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDINTCP'));
-      this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'cp') {
-      this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
-        if (vduDetails.id === this.mousedownNode.id) {
-          if (vduDetails.interface === undefined) { vduDetails.interface = []; }
-          vduDetails.interface.push({
-            'external-connection-point-ref': this.mouseupNode.id, 'mgmt-interface': true,
-            name: 'eth_' + this.sharedService.randomString(),
-            'virtual-interface': { type: 'VIRTIO' },
-            type: 'EXTERNAL'
-          });
-          if (vduDetails['internal-connection-point'] === undefined) {
-            vduDetails['internal-connection-point'] = [];
-          }
-          if (vduDetails['monitoring-param'] === undefined) {
-            vduDetails['monitoring-param'] = [];
-          }
-          if (vduDetails['vm-flavor'] === undefined) {
-            vduDetails['vm-flavor'] = {};
-          }
-        }
-      });
-      this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
-      this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intvl') {
-      const setIntCP: string = 'intcp_' + this.sharedService.randomString();
-      this.vnfdPackageDetails['internal-vld'].forEach((vldInternal: InternalVLD) => {
-        if (vldInternal.id === this.mouseupNode.id) {
-          if (vldInternal['internal-connection-point'] === undefined) { vldInternal['internal-connection-point'] = []; }
-          vldInternal['internal-connection-point'].push({ 'id-ref': setIntCP });
-        }
-      });
-      this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
-        if (vduDetails.id === this.mousedownNode.id) {
-          if (vduDetails.interface === undefined) {
-            vduDetails.interface = [];
-          }
-          vduDetails.interface.push({
-            'internal-connection-point-ref': setIntCP, name: 'int_' + setIntCP, type: 'INTERNAL', 'virtual-interface': { type: 'VIRTIO' }
-          });
-          if (vduDetails['internal-connection-point'] === undefined) {
-            vduDetails['internal-connection-point'] = [];
-          }
-          vduDetails['internal-connection-point'].push({
-            id: setIntCP, name: setIntCP, 'short-name': setIntCP, type: 'VPORT'
-          });
-        }
-      });
-      this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
-      this.deselectPath();
-    }
-    else {
+    if (this.mousedownNode.nodeTypeRef === 'vdu') {
+      this.vduMouseDownNode();
+    } else if (this.mousedownNode.nodeTypeRef === 'cp') {
+      this.cpMouseDownNode();
+    } else if (this.mousedownNode.nodeTypeRef === 'intvl') {
+      this.intVLMouseDownNode();
+    } else if (this.mousedownNode.nodeTypeRef === 'intcp') {
+      this.intCPMouseDownNode();
+    } else {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.INVALIDSELECTION'));
       this.deselectPath();
     }
     this.resetMouseActions();
     this.currentSelectedNode = null;
   }
+  /** Establish a connection point between vdu and other nodes @private */
+  private vduMouseDownNode(): void {
+    if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'cp') {
+      this.vduCPConnection(this.mousedownNode.id, this.mouseupNode.id);
+    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intcp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDINTCP'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'vdu') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDVDU'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intvl') {
+      this.vduIntvlConnection(this.mousedownNode.id, this.mouseupNode.id);
+    }
+  }
+
+  /** Establish a connection point between cp and other nodes @private */
+  private cpMouseDownNode(): void {
+    if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'vdu') {
+      this.vduCPConnection(this.mouseupNode.id, this.mousedownNode.id);
+    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intvl') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDVNFVL'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intcp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDINTCP'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'cp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDCP'));
+      this.deselectPath();
+    }
+  }
+
+  /** Establish a connection piont between intvl and other nodes @private */
+  private intVLMouseDownNode(): void {
+    if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'cp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDCP'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'vdu') {
+      this.vduIntvlConnection(this.mouseupNode.id, this.mousedownNode.id);
+    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intvl') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDVNFVL'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intcp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDONTCP'));
+      this.deselectPath();
+    }
+  }
+
+  /** Establish a connection point between intcp and other nodes @private */
+  private intCPMouseDownNode(): void {
+    if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'vdu') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVDU'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'cp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDCP'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intvl') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVNFVL'));
+      this.deselectPath();
+    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intcp') {
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDINTCP'));
+      this.deselectPath();
+    }
+  }
+
+  /** Establish a connection between VDU & CP vice versa @private */
+  private vduCPConnection(nodeA: string, nodeB: string): void {
+    this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
+      if (vduDetails.id === nodeA) {
+        if (vduDetails.interface === undefined) { vduDetails.interface = []; }
+        vduDetails.interface.push({
+          'external-connection-point-ref': nodeB, 'mgmt-interface': true,
+          name: 'eth_' + this.sharedService.randomString(),
+          'virtual-interface': { type: 'VIRTIO' },
+          type: 'EXTERNAL'
+        });
+        if (vduDetails['internal-connection-point'] === undefined) {
+          vduDetails['internal-connection-point'] = [];
+        }
+        if (vduDetails['monitoring-param'] === undefined) {
+          vduDetails['monitoring-param'] = [];
+        }
+        if (vduDetails['vm-flavor'] === undefined) {
+          vduDetails['vm-flavor'] = {};
+        }
+      }
+    });
+    this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
+    this.deselectPath();
+  }
+
+  /** Establish a connection between vdu & intvl and vice versa @private */
+  private vduIntvlConnection(nodeA: string, nodeB: string): void {
+    const setIntCP: string = 'intcp_' + this.sharedService.randomString();
+    this.vnfdPackageDetails['internal-vld'].forEach((vldInternal: InternalVLD) => {
+      if (vldInternal.id === nodeB) {
+        if (vldInternal['internal-connection-point'] === undefined) { vldInternal['internal-connection-point'] = []; }
+        vldInternal['internal-connection-point'].push({ 'id-ref': setIntCP });
+      }
+    });
+    this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
+      if (vduDetails.id === nodeA) {
+        if (vduDetails.interface === undefined) {
+          vduDetails.interface = [];
+        }
+        vduDetails.interface.push({
+          'internal-connection-point-ref': setIntCP, name: 'int_' + setIntCP, type: 'INTERNAL', 'virtual-interface': { type: 'VIRTIO' }
+        });
+        if (vduDetails['internal-connection-point'] === undefined) {
+          vduDetails['internal-connection-point'] = [];
+        }
+        vduDetails['internal-connection-point'].push({
+          id: setIntCP, name: setIntCP, 'short-name': setIntCP, type: 'VPORT'
+        });
+      }
+    });
+    this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
+    this.deselectPath();
+  }
+
   /** Events handles when mousemove it will capture the selected node data @private */
   private mousemove(): void {
     if (!this.mousedownNode) { return; }
diff --git a/src/app/projects/ProjectsComponent.ts b/src/app/projects/ProjectsComponent.ts
index 7524994..fe55271 100644
--- a/src/app/projects/ProjectsComponent.ts
+++ b/src/app/projects/ProjectsComponent.ts
@@ -32,6 +32,7 @@
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
 import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
 
 /**
  * Creating component
@@ -169,10 +170,12 @@
     public generateProjectData(projectData: ProjectDetails): ProjectData {
         return {
             projectName: projectData.name,
-            modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified),
-            creationDate: this.sharedService.convertEpochTime(projectData._admin.created),
+            modificationDate: this.sharedService.convertEpochTime(!isNullOrUndefined(projectData._admin)
+                ? projectData._admin.modified : null),
+            creationDate: this.sharedService.convertEpochTime(!isNullOrUndefined(projectData._admin) ? projectData._admin.created : null),
             id: projectData._id,
-            project: projectData._id
+            project: projectData._id,
+            quotas: !isNullOrUndefined(projectData.quotas) ? projectData.quotas : null
         };
     }
 
diff --git a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
index c327119..8afb727 100644
--- a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
+++ b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
@@ -17,30 +17,51 @@
 -->
 <form [formGroup]="projectForm" (ngSubmit)="projectAction(getProjectType)">
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{ (getProjectType == 'Add' ? 'NEW' : 'EDIT') | translate}} {{'PROJECT' | translate}}</h4>
+    <h4 class="modal-title" id="modal-basic-title">{{ (getProjectType == 'Add' ? 'NEW' : 'EDIT') | translate}}
+      {{'PROJECT' | translate}}</h4>
     <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
       <i class="fas fa-times-circle text-danger"></i>
     </button>
   </div>
-  <div class="modal-body project-create-update">
+  <div class="modal-body modal-body-custom-height">
+    <div class="row" *ngIf="getProjectType === 'Add'">
+      <label class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">{{'RECENTLY' | translate}}
+        {{'CREATED' | translate}} {{'PROJECT' | translate}}:
+        <b>{{(recentProject)?recentProject.name:''}}</b>
+      </label>
+    </div>
     <div class="form-group row">
-      <label class="col-sm-12 col-form-label mandatory-label" [ngClass]="{'text-danger': projectForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
+      <label class="col-sm-12 col-form-label mandatory-label"
+        [ngClass]="{'text-danger': projectForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-4 col-form-label">{{'PROJECT' | translate}} {{'NAME' | translate}}*</label>
       <div class="col-sm-8">
-        <input placeholder="{{'PROJECT' | translate}} {{'NAME' | translate}}" type="text" class="form-control" formControlName="project_name" [(ngModel)]="projectName" [ngClass]="{ 'is-invalid': submitted && f.project_name.errors }" required>
+        <input placeholder="{{'PROJECT' | translate}} {{'NAME' | translate}}" type="text" class="form-control"
+          formControlName="project_name" [ngClass]="{ 'is-invalid': submitted && f.project_name.errors }" required>
       </div>
     </div>
     <div class="form-group row" *ngIf="getProjectType === 'Add'">
       <label class="col-sm-4 col-form-label">{{'DOMAIN' | translate}} {{'NAME' | translate}}</label>
       <div class="col-sm-8">
-        <ng-select [clearable]="false" placeholder="{{'SELECT' | translate}}"
-        [items]="domains" bindLabel="text" bindValue="id" formControlName="domain_name" id="domain_name"
-        [ngClass]="{ 'is-invalid': submitted && f.domain_name.errors }"></ng-select>      </div>
+        <ng-select [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="domains" bindLabel="text"
+          bindValue="id" formControlName="domain_name" id="domain_name"
+          [ngClass]="{ 'is-invalid': submitted && f.domain_name.errors }"></ng-select>
+      </div>
     </div>
-    <div class="form-group row" *ngIf="getProjectType === 'Add'">
-      <label class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">{{'RECENTLY' | translate}} {{'CREATED' | translate}} {{'PROJECT' | translate}}:
-        <b>{{(recentProject)?recentProject.name:''}}</b>
-      </label>
+    <div class="form-check form-check-inline ml-2">
+      <input class="form-check-input" type="checkbox" formControlName="enable_quota" (change)="checkQuota()"
+        id="quotaCheck" *ngIf="getProjectType === 'Add' || quotaRefs === null">
+      <label class="form-check-label" for="quotaCheck">{{'PAGE.PROJECT.QUOTA' | translate}}</label>
+    </div>
+    <div class="row mt-1" [ngbCollapse]="!f.enable_quota.value">
+      <div class="form-group col-sm-6" *ngFor="let quota of quotaItems;">
+        <div class="row">
+          <label class="col-sm-7 col-form-label">{{quota.title | translate}}*</label>
+          <div class="col-sm-5">
+            <input placeholder="{{'COUNT' | translate}}" type="number" min="{{quota.minValue}}"
+              class="form-control" [formControlName]="quota.value" [ngClass]="{ 'is-invalid': submitted && f[quota.value].errors }" required>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="modal-footer">
@@ -48,4 +69,4 @@
     <button type="submit" class="btn btn-primary">{{(getProjectType == 'Add' ? 'CREATE' : 'APPLY') | translate}}</button>
   </div>
 </form>
-<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
index ea0bb8a..ba176e0 100644
--- a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
+++ b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
@@ -19,14 +19,14 @@
  * @file Project Add Modal
  */
 import { Component, Injector, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
 import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
 import { DataService } from 'DataService';
 import { environment } from 'environment';
-import { ProjectData, ProjectDetails } from 'ProjectModel';
+import { ProjectData, ProjectDetails, QUOTA_ITEMS, QUOTAITEM} from 'ProjectModel';
 import { ProjectService } from 'ProjectService';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
@@ -55,9 +55,6 @@
   /** Contains the recently created project details @public */
   public recentProject: ProjectDetails;
 
-  /** Contains project name @public */
-  public projectName: string;
-
   /** Contains project create or edit @public */
   public getProjectType: string;
 
@@ -79,6 +76,12 @@
   /** Holds list of domains @public */
   public domains: {}[] = [];
 
+  /** Holds list of quota items @public */
+  public quotaItems: QUOTAITEM[] = QUOTA_ITEMS;
+
+  /** Holds project reference from response  @public */
+  public quotaRefs: {} = null;
+
   /** FormBuilder instance added to the formBuilder @private */
   private formBuilder: FormBuilder;
 
@@ -116,7 +119,8 @@
     /** Initializing Form Action */
     this.projectForm = this.formBuilder.group({
       project_name: ['', Validators.required],
-      domain_name: [null]
+      domain_name: [null],
+      enable_quota: [false, Validators.required]
     });
   }
 
@@ -129,11 +133,14 @@
     if (this.getProjectType === 'Edit') {
       this.dataService.currentMessage.subscribe((data: ProjectData) => {
         if (data.projectName !== undefined || data.projectName !== '' || data.projectName !== null) {
-          this.projectName = data.projectName;
+          this.projectForm.patchValue({ project_name: data.projectName });
           this.projectRef = data.id;
+          this.quotaRefs = data.quotas;
+          this.patchQuotaInfo(this.quotaRefs);
         }
       });
     } else {
+      this.patchQuotaInfo();
       this.getProjects();
     }
   }
@@ -172,10 +179,11 @@
     const apiURLHeader: APIURLHEADER = {
       url: environment.PROJECTS_URL
     };
-    const projectPayload: {} = {
+    const projectPayload: ProjectDetails = {
       name: this.projectForm.value.project_name,
       domain_name: !isNullOrUndefined(this.projectForm.value.domain_name) ? this.projectForm.value.domain_name : undefined
     };
+    this.addQuotaLimit(projectPayload);
     this.restService.postResource(apiURLHeader, projectPayload).subscribe(() => {
       this.activeModal.close(this.modalData);
       this.isLoadingResults = false;
@@ -185,13 +193,29 @@
       this.isLoadingResults = false;
     });
   }
+  /** Handle enable quota limit checkbox event @public */
+  public checkQuota(): void {
+    if (this.getFormControl('enable_quota').value) {
+      this.quotaItems.forEach((quotaItem: QUOTAITEM): void => {
+        this.projectForm.addControl(quotaItem.value, new FormControl(quotaItem.minValue, Validators.required));
+      });
+    } else {
+      this.quotaItems.forEach((quotaItem: QUOTAITEM): void => {
+        this.getFormControl(quotaItem.value).setValue(quotaItem.minValue);
+      });
+    }
+  }
   /** Edit project @public */
   public editProject(): void {
     this.isLoadingResults = true;
     const apiURLHeader: APIURLHEADER = {
       url: environment.PROJECTS_URL + '/' + this.projectRef
     };
-    this.restService.patchResource(apiURLHeader, { name: this.projectForm.value.project_name }).subscribe(() => {
+    const projectPayload: ProjectDetails = {
+      name: this.projectForm.value.project_name
+    };
+    this.addQuotaLimit(projectPayload);
+    this.restService.patchResource(apiURLHeader, projectPayload).subscribe(() => {
       this.activeModal.close(this.modalData);
       this.isLoadingResults = false;
       this.projectService.setHeaderProjects();
@@ -230,4 +254,40 @@
       });
     }
   }
+
+  /** Used to get the AbstractControl of controlName passed @private */
+  private getFormControl(controlName: string): AbstractControl {
+    return this.projectForm.controls[controlName];
+  }
+
+  /** Add quota information to payload @private */
+  private addQuotaLimit(payload: ProjectDetails): void {
+    if (this.getFormControl('enable_quota').value) {
+      payload.quotas = {};
+      this.quotaItems.forEach((quotaItem: QUOTAITEM): void => {
+        payload.quotas[quotaItem.value] = this.getFormControl(quotaItem.value).value;
+      });
+    }
+  }
+
+  /** Set quota information in project form model @private */
+  private patchQuotaInfo(quotaRef?: {}): void {
+    if (quotaRef !== null && this.getProjectType === 'Edit') {
+      this.getFormControl('enable_quota').setValue(true);
+      this.quotaItems.forEach((quotaItem: QUOTAITEM): void => {
+        if (!isNullOrUndefined(quotaRef[quotaItem.value])) {
+          this.projectForm.addControl(quotaItem.value, new FormControl(quotaRef[quotaItem.value],
+            [Validators.required, Validators.min(quotaItem.minValue), Validators.max(quotaItem.maxValue)]));
+        } else {
+          this.projectForm.addControl(quotaItem.value, new FormControl(quotaItem.minValue, [Validators.required,
+          Validators.min(quotaItem.minValue), Validators.max(quotaItem.maxValue)]));
+        }
+      });
+    } else {
+      this.quotaItems.forEach((quotaItem: QUOTAITEM): void => {
+        this.projectForm.addControl(quotaItem.value, new FormControl(quotaItem.minValue, [Validators.required,
+        Validators.min(quotaItem.minValue), Validators.max(quotaItem.maxValue)]));
+      });
+    }
+  }
 }
diff --git a/src/app/roles/roles-details/RolesDetailsComponent.ts b/src/app/roles/roles-details/RolesDetailsComponent.ts
index 2568f5a..89affae 100644
--- a/src/app/roles/roles-details/RolesDetailsComponent.ts
+++ b/src/app/roles/roles-details/RolesDetailsComponent.ts
@@ -30,6 +30,7 @@
 import { RoleData, RoleDetails } from 'RolesModel';
 import { Subscription } from 'rxjs';
 import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
 
 /**
  * Creating component
@@ -170,8 +171,8 @@
     return {
       name: roleData.name,
       identifier: roleData._id,
-      modified: this.sharedService.convertEpochTime(Number(roleData._admin.modified)),
-      created: this.sharedService.convertEpochTime(Number(roleData._admin.created)),
+      modified: this.sharedService.convertEpochTime(!isNullOrUndefined(roleData._admin) ? Number(roleData._admin.modified) : null),
+      created: this.sharedService.convertEpochTime(!isNullOrUndefined(roleData._admin) ? Number(roleData._admin.created) : null),
       permissions: roleData.permissions
     };
   }
diff --git a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
index 7b909b1..5937862 100644
--- a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
+++ b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
@@ -36,9 +36,10 @@
             <label class="col-sm-4 col-form-label" for="sdn_type">{{'TYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select [items]="sdnType" placeholder="{{'SELECT' | translate}}" bindLabel="title" bindValue="value"
-                    formControlName="type" id="sdn_type" [(ngModel)]="sdnTypeMod"
+                    formControlName="type" id="sdn_type" [(ngModel)]="sdnTypeMod" [addTag]="sharedService.addCustomTag"
                     [ngClass]="{ 'is-invalid': submitted && f.type.errors }" required>
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
         </div>
         <div class="form-group row">
diff --git a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
index 75fc854..457c63c 100644
--- a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
+++ b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.ts
@@ -63,6 +63,9 @@
   /** Give the message for the loading @public */
   public message: string = 'PLEASEWAIT';
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -78,8 +81,8 @@
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.sdnControllerForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -103,9 +106,6 @@
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.sdnControllerForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
diff --git a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
index 842d101..28739cf 100644
--- a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
+++ b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
@@ -31,7 +31,7 @@
     <tr>
       <td>
         <b>{{'OPERATIONALSTATE' | translate}}:</b>
-        <span class="badge ml-1" [ngClass]="{'badge-info':sdnDetails._admin.operationalState === operationalStateFirstStep,
+        <span class="badge ml-1" [ngClass]="{'badge-warning text-white':sdnDetails._admin.operationalState === operationalStateFirstStep,
           'badge-success':sdnDetails._admin.operationalState === operationalStateSecondStep,
           'badge-danger':sdnDetails._admin.operationalState === operationalStateThirdStep}">
           {{(sdnDetails._admin.operationalState)?sdnDetails._admin.operationalState:''}}</span>
diff --git a/src/app/users/user-details/UserDetailsComponent.ts b/src/app/users/user-details/UserDetailsComponent.ts
index a4bedd5..aede6e2 100644
--- a/src/app/users/user-details/UserDetailsComponent.ts
+++ b/src/app/users/user-details/UserDetailsComponent.ts
@@ -32,6 +32,7 @@
 import { SharedService } from 'SharedService';
 import { UserData, UserDetail } from 'UserModel';
 import { UsersActionComponent } from 'UsersActionComponent';
+import { isNullOrUndefined } from 'util';
 
 /**
  * Creating component
@@ -170,8 +171,8 @@
   public setUserDetails(userData: UserDetail): void {
     const userDataObj: UserData = {
       username: userData.username,
-      modified: this.sharedService.convertEpochTime(userData._admin.modified),
-      created: this.sharedService.convertEpochTime(userData._admin.created),
+      modified: this.sharedService.convertEpochTime(!isNullOrUndefined(userData._admin) ? userData._admin.modified : null),
+      created: this.sharedService.convertEpochTime(!isNullOrUndefined(userData._admin) ? userData._admin.created : null),
       projects: userData.projectListName,
       identifier: userData._id
     };
diff --git a/src/app/utilities/delete/DeleteComponent.ts b/src/app/utilities/delete/DeleteComponent.ts
index 4baee64..014b66a 100644
--- a/src/app/utilities/delete/DeleteComponent.ts
+++ b/src/app/utilities/delete/DeleteComponent.ts
@@ -171,6 +171,9 @@
     } else if (data.page === 'k8-repo') {
       this.deleteURL = environment.K8REPOS_URL;
       this.notifyMessage = 'DELETEDSUCCESSFULLY';
+    } else if (data.page === 'osmrepo') {
+      this.deleteURL = environment.OSMREPOS_URL;
+      this.notifyMessage = 'DELETEDSUCCESSFULLY';
     }
   }
   /** Generate Data function @public */
diff --git a/src/app/utilities/edit-packages/EditPackagesComponent.html b/src/app/utilities/edit-packages/EditPackagesComponent.html
index 2defc33..f099af1 100644
--- a/src/app/utilities/edit-packages/EditPackagesComponent.html
+++ b/src/app/utilities/edit-packages/EditPackagesComponent.html
@@ -51,7 +51,7 @@
     </div>
   </div>
 </form>
-<div class="ngx-codemirror" *ngIf="defaults[mode] else noData">
+<div class="ngx-codemirror edit-packages" *ngIf="defaults[mode] else noData">
   <ngx-codemirror [options]="options" [ngModel]="defaults[mode]" [disabled]="readOnly" [autoFocus]="true"
     (ngModelChange)="handleChange($event)"></ngx-codemirror>
 </div>
diff --git a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
index 7fcc812..0f38cea 100644
--- a/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
+++ b/src/app/utilities/netslice-instances-action/NetsliceInstancesActionComponent.html
@@ -24,11 +24,11 @@
         container="body" ngbTooltip="{{'DELETE' | translate}}">
         <i class="far fa-trash-alt icons"></i>
     </button>
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="historyOfOperations()" placement="left"
                 container="body" ngbTooltip="{{'HISTORYOFOPERATIONS' | translate}}">
                 <i class="fas fa-history"></i> {{'HISTORYOFOPERATIONS' | translate}}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
index 41a58f5..2879d8b 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -28,11 +28,11 @@
         ngbTooltip="{{'DELETE' | translate}}">
         <i class="far fa-trash-alt icons"></i>
     </button>
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="infoNs()" placement="left"
                 container="body" ngbTooltip="{{'INFO' | translate}}">
                 <i class="fas fa-info icons list" title="info"></i> {{'INFO' | translate}}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
index 8bf43ce..e68ce63 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
@@ -144,9 +144,10 @@
 
   /** Exec NS Primitive @public */
   public execNSPrimitiveModal(): void {
-    this.modalService.open(NSPrimitiveComponent).componentInstance.params = {
+    this.modalService.open(NSPrimitiveComponent, { backdrop: 'static' }).componentInstance.params = {
       memberIndex: this.value.memberIndex,
-      nsConfig: this.value.nsConfig
+      nsConfig: this.value.nsConfig,
+      name: this.value.NsdName
     };
   }
 
diff --git a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
index 6e33d0d..b6c0fe7 100644
--- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
+++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.html
@@ -28,11 +28,11 @@
     ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons"></i>
   </button>
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
     <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
       {{'ACTION' | translate}}
     </button>
-    <div class="dropdown-menu" ngbDropdownMenu>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
       <button type="button" class="btn btn-primary dropdown-item" (click)="nsdEdit()" placement="left"
         container="body" ngbTooltip="{{'EDIT' | translate}}">
         <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.html b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.html
new file mode 100644
index 0000000..1666c7b
--- /dev/null
+++ b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.html
@@ -0,0 +1,27 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file 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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="btn-group list action" role="group">
+    <button type="button" class="btn btn-primary" (click)="editOsmrepo(identifier)" placement="top" container="body"
+        ngbTooltip="{{'EDIT' | translate}} {{osmrepoName}}">
+        <i class="fas fa-edit"></i>
+    </button>
+    <button type="button" class="btn btn-primary" (click)="deleteOsmRepository()" placement="top" container="body"
+        ngbTooltip="{{'DELETE' | translate}} {{osmrepoName}}">
+        <i class="fas fa-trash-alt"></i>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.scss b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.scss
new file mode 100644
index 0000000..0ecd95d
--- /dev/null
+++ b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
\ No newline at end of file
diff --git a/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.ts b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.ts
new file mode 100644
index 0000000..1f3523d
--- /dev/null
+++ b/src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent.ts
@@ -0,0 +1,90 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file OsmRepositoriesActionComponent.ts
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { DeleteComponent } from 'DeleteComponent';
+import { OsmRepoCreateUpdateComponent } from 'OsmRepoCreateUpdate';
+import { OSMRepoData } from 'OsmRepoModel';
+import { SharedService } from 'SharedService';
+/**
+ * Creating Component
+ * @Component takes OsmRepositoriesActionComponent.html as template url
+ */
+@Component({
+  selector: 'app-osm-repositories-action',
+  templateUrl: './OsmRepositoriesActionComponent.html',
+  styleUrls: ['./OsmRepositoriesActionComponent.scss']
+})
+/** Exporting a class @exports OsmRepositoriesActionComponent */
+export class OsmRepositoriesActionComponent implements OnInit {
+  /** To get the value from the osm repo via valuePrepareFunction default Property of ng-smarttable @public */
+  public value: OSMRepoData;
+
+  /** To inject services @public */
+  public injector: Injector;
+
+  /** Variables holds OSM repo name @public */
+  public osmrepoName: string;
+
+  /** Variables holds OSM repo id @public */
+  public identifier: string;
+
+  /** Instance of the modal service @private */
+  private modalService: NgbModal;
+
+  /** Contains all methods related to shared @private */
+  private sharedService: SharedService;
+
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.sharedService = this.injector.get(SharedService);
+    this.modalService = this.injector.get(NgbModal);
+  }
+
+  /** Lifecyle Hooks the trigger before component is instantiate @public */
+  public ngOnInit(): void {
+    this.osmrepoName = this.value.name;
+    this.identifier = this.value.identifier;
+  }
+
+  /** Delete OSM Repository @public */
+  public deleteOsmRepository(): void {
+    const modalRef: NgbModalRef = this.modalService.open(DeleteComponent, { backdrop: 'static' });
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch();
+  }
+
+  /** Edit a osm repo @public */
+  public editOsmrepo(id: string): void {
+    const modalRef: NgbModalRef = this.modalService.open(OsmRepoCreateUpdateComponent, { backdrop: 'static' });
+    modalRef.componentInstance.createupdateType = 'Edit';
+    modalRef.componentInstance.osmrepoid = id;
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch();
+  }
+}
diff --git a/src/app/utilities/projects-action/ProjectsActionComponent.html b/src/app/utilities/projects-action/ProjectsActionComponent.html
index a5d4d4e..3f193c2 100644
--- a/src/app/utilities/projects-action/ProjectsActionComponent.html
+++ b/src/app/utilities/projects-action/ProjectsActionComponent.html
@@ -16,14 +16,14 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="projectEdit()" placement="left"
-                container="body" ngbTooltip="{{'RENAME' | translate}}">
-                <i class="fa fa-edit icons"></i> {{'RENAME' | translate}}
+                container="body" ngbTooltip="{{'EDIT' | translate}}">
+                <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
             </button>
             <button type="button" class="btn btn-primary dropdown-item" (click)="projectDelete()" placement="left"
                 container="body" ngbTooltip="{{'DELETE' | translate}}">
diff --git a/src/app/utilities/roles-action/RolesActionComponent.html b/src/app/utilities/roles-action/RolesActionComponent.html
index 5a7453d..522ba83 100644
--- a/src/app/utilities/roles-action/RolesActionComponent.html
+++ b/src/app/utilities/roles-action/RolesActionComponent.html
@@ -16,11 +16,11 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
       <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
           {{'ACTION' | translate}}
       </button>
-      <div class="dropdown-menu" ngbDropdownMenu>
+      <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
           <button type="button" class="btn btn-primary dropdown-item" (click)="editRole()" placement="left"
               container="body" ngbTooltip="{{'EDIT' | translate}}">
               <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/users-action/UsersActionComponent.html b/src/app/utilities/users-action/UsersActionComponent.html
index 9ce546e..90559f9 100644
--- a/src/app/utilities/users-action/UsersActionComponent.html
+++ b/src/app/utilities/users-action/UsersActionComponent.html
@@ -16,11 +16,11 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-    <div ngbDropdown class="btn-group">
+    <div class="btn-group" ngbDropdown display="dynamic" container="body">
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="editUserModal('editPassword')" placement="left" container="body"
                 ngbTooltip="{{'PAGE.USERS.EDITCREDENTIALS' | translate}}">
                 <i class="fa fa-edit icons"></i> {{'PAGE.USERS.EDITCREDENTIALS' | translate}}
diff --git a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
index df3aa52..0f46919 100644
--- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
+++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.html
@@ -24,11 +24,11 @@
     ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons"></i>
   </button>
-  <div ngbDropdown class="btn-group">
+  <div class="btn-group" ngbDropdown display="dynamic" container="body">
     <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
       {{'ACTION' | translate}}
     </button>
-    <div class="dropdown-menu" ngbDropdownMenu>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
       <button type="button" class="btn btn-primary dropdown-item" (click)="vnfdEdit()" placement="left"
         container="body" ngbTooltip="{{'EDIT' | translate}}">
         <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/vim-accounts/VimAccountsModule.ts b/src/app/vim-accounts/VimAccountsModule.ts
index 3424bc4..c646857 100644
--- a/src/app/vim-accounts/VimAccountsModule.ts
+++ b/src/app/vim-accounts/VimAccountsModule.ts
@@ -24,6 +24,7 @@
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
@@ -80,7 +81,7 @@
 @NgModule({
     imports: [ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), FormsModule, CommonModule,
         HttpClientModule, NgSelectModule, Ng2SmartTableModule, TranslateModule, RouterModule.forChild(routes), NgbModule,
-        PagePerRowModule, LoaderModule, PageReloadModule],
+        PagePerRowModule, LoaderModule, PageReloadModule, CodemirrorModule],
     declarations: [VimAccountsComponent, InfoVimComponent, VimAccountDetailsComponent, NewVimaccountComponent],
     providers: [DataService],
     entryComponents: [InfoVimComponent]
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.html b/src/app/vim-accounts/info-vim/InfoVimComponent.html
index 2eac832..eeb91e2 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.html
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.html
@@ -34,13 +34,13 @@
 </div>
 <div id="demo" class="collapse context-style p-2" [ngbCollapse]="isCollapsed">
   <div class="row">
-    <div class="col-sm-6 text-dark mb-2 font-weight-bold" *ngFor="let details of configParams">
-      <label class="col-sm-5 col-form-label">{{ details.title | translate}}:</label>
-      <span class="col-sm-5"> {{(details.value !== undefined)?details.value : '--'}} </span>
+    <div class="col-sm-6 text-dark mb-2 font-weight-bold" *ngFor="let details of configParams | keyvalue">
+      <label class="col-sm-5 col-form-label text-captilize">{{ details.key}}:</label>
+      <span class="col-sm-5">{{(details.value !== null && details.value !== '' && details.value !== undefined)?details.value : '--'}}</span>
     </div>
   </div>
 </div>
-<div class="modal-footer list">
+<div class="modal-footer list border-0">
   <button (click)="onVimAccountBack()"
     class="btn btn-danger pull-right">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
 </div>
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.ts b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
index d40b696..c82e9b6 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.ts
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
@@ -47,7 +47,7 @@
   public vimAccountDetails: VimAccountDetails;
 
   /** Information Top Left @public */
-  public configParams: {}[] = [];
+  public configParams: {} = {};
 
   /** Showing more details of collapase */
   public isCollapsed: boolean = true;
@@ -116,19 +116,23 @@
     this.restService.getResource(environment.VIMACCOUNTS_URL + '/' + this.paramsID)
       .subscribe((vimAccountsData: VimAccountDetails) => {
         this.showDetails(vimAccountsData);
-        if (vimAccountsData.config !== undefined) {
-          if (vimAccountsData.vim_type === 'openstack') {
-            this.showOpenstackConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'aws') {
-            this.awsConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'openvim' || vimAccountsData.vim_type === 'opennebula') {
-            this.openVIMOpenNebulaConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'vmware') {
-            this.vmwareConfig(vimAccountsData.config);
-          } else if (vimAccountsData.vim_type === 'azure') {
-            this.azureConfig(vimAccountsData.config);
+        if (vimAccountsData.config.location !== undefined) {
+          const locationArr: string[] = vimAccountsData.config.location.split(',');
+          if (Array.isArray(locationArr)) {
+            vimAccountsData.config.location = locationArr[0];
           }
         }
+        Object.keys(vimAccountsData.config).forEach((key: string) => {
+          if (Array.isArray(vimAccountsData.config[key]) || typeof vimAccountsData.config[key] === 'object') {
+            vimAccountsData.config[key] = JSON.stringify(vimAccountsData.config[key]);
+          }
+          const keyArr: string[] = key.split('_');
+          if (keyArr.length > 1 ) {
+            vimAccountsData.config[key.split('_').join(' ')] = vimAccountsData.config[key];
+            delete vimAccountsData.config[key];
+          }
+        });
+        this.configParams = vimAccountsData.config;
         this.isLoadingResults = false;
       }, (error: ERRORDATA) => {
         this.isLoadingResults = false;
@@ -177,269 +181,4 @@
       }
     ];
   }
-
-  /** Openstack Config @public */
-  public showOpenstackConfig(config: CONFIG): void {
-    if (!isNullOrUndefined(config)) {
-      Object.keys(config).forEach((key: string) => {
-        if (Array.isArray(config[key])) {
-          config[key] = JSON.stringify(config[key]);
-        }
-      });
-    }
-    let location: string = config.location;
-    if (!isNullOrUndefined(location)) {
-      const locationArr: string[] = config.location.split(',');
-      if (Array.isArray(locationArr)) {
-        location = locationArr[0];
-      }
-    }
-
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SECURITYGROUPS',
-        value: config.security_groups
-      },
-      {
-        title: 'PAGE.VIMDETAILS.AVAILABILITYZONE',
-        value: config.availabilityZone
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.INSECURE',
-        value: config.insecure
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS',
-        value: config.use_existing_flavors
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEINTERNALENDPOINT',
-        value: config.use_internal_endpoint
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      },
-      {
-        title: 'PAGE.VIMDETAILS.APIVERSION',
-        value: config.APIversion
-      },
-      {
-        title: 'PAGE.VIMDETAILS.PROJECTDOMAINID',
-        value: config.project_domain_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.PROJECTDOMAINNAME',
-        value: config.project_domain_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USERDOMAINID',
-        value: config.user_domain_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USERDOMAINUSER',
-        value: config.user_domain_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.KEYPAIR',
-        value: config.keypair
-      },
-      {
-        title: 'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET',
-        value: config.dataplane_physical_net
-      },
-      {
-        title: 'PAGE.VIMDETAILS.USEFLOATINGIP',
-        value: config.use_floating_ip
-      },
-      {
-        title: 'PAGE.VIMDETAILS.MICROVERSION',
-        value: config.microversion
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMLOCATION',
-        value: location
-      }
-    ];
-  }
-
-  /** AWS Config @public */
-  public awsConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VPCCIDRBLOCK',
-        value: config.vpc_cidr_block
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SECURITYGROUPS',
-        value: config.security_groups
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.KEYPAIR',
-        value: config.keypair
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.FLAVORIINFO',
-        value: config.flavor_info
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** Open vim and open nebula config @public */
-  public openVIMOpenNebulaConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** vmware config @public */
-  public vmwareConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SDNCONTROLLER',
-        value: config.sdn_controller
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ORGNAME',
-        value: config.orgname
-      },
-      {
-        title: 'PAGE.VIMDETAILS.SDNPORTMAPPING',
-        value: config.sdn_port_mapping
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERIP',
-        value: config.vcenter_ip
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VIMNETWORKNAME',
-        value: config.vim_network_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERPORT',
-        value: config.vcenter_port
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADMINUSERNAME',
-        value: config.admin_username
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERUSER',
-        value: config.vcenter_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADMINPASSWORD',
-        value: config.admin_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VCENTERPASSWORD',
-        value: config.vcenter_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXMANAGER',
-        value: config.nsx_manager
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSSITE',
-        value: config.vrops_site
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXUSER',
-        value: config.nsx_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSUSER',
-        value: config.vrops_user
-      },
-      {
-        title: 'PAGE.VIMDETAILS.NSXPASSWORD',
-        value: config.nsx_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VROPSPASSWORD',
-        value: config.vrops_password
-      },
-      {
-        title: 'PAGE.VIMDETAILS.ADDITIONALCONFIG',
-        value: config.additional_conf
-      }
-    ];
-  }
-
-  /** Azure Config @public */
-  public azureConfig(config: CONFIG): void {
-    this.configParams = [
-      {
-        title: 'PAGE.VIMDETAILS.SUBSCRIPTIONID',
-        value: config.subscription_id
-      },
-      {
-        title: 'PAGE.VIMDETAILS.REGIONALNAME',
-        value: config.region_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.RESOURCEGROUP',
-        value: config.resource_group
-      },
-      {
-        title: 'PAGE.VIMDETAILS.VNETNAME',
-        value: config.vnet_name
-      },
-      {
-        title: 'PAGE.VIMDETAILS.FLAVORSPATTERN',
-        value: config.flavors_pattern
-      }
-    ];
-  }
 }
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
index cc56017..ce7a5d1 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
@@ -47,9 +47,10 @@
             </div>
             <div class="col-sm-3">
                 <ng-select bindLabel="title" bindValue="value" [items]="vimType" placeholder="{{'SELECT' | translate}}"
-                    formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType"
-                    [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }">
+                    formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType" [addTag]="sharedService.addCustomTag"
+                    [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }" (change)="clearConfig()">
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
             <div class="col-sm-3">
                 <label for="description">{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}</label>
@@ -89,8 +90,6 @@
                     placeholder="{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}" type="text" formControlName="vim_user"
                     id="vim_user" [ngClass]="{ 'is-invalid': submitted && f.vim_user.errors }">
             </div>
-        </div>
-        <div class="row form-group content-style">
             <div class="col-sm-3">
                 <label for="vim_password">{{'PAGE.VIMDETAILS.VIMPASSWORD' | translate}}*</label>
             </div>
@@ -100,6 +99,30 @@
                     [ngClass]="{ 'is-invalid': submitted && f.vim_password.errors }">
             </div>
         </div>
+        <div class="row form-group content-style">
+            <div class="col-sm-3">
+                <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
+            </div>
+            <div class="col-sm-3" formGroupName="config">
+                <ng-select [items]="getVIMLocation" bindLabel="label" bindValue="value"
+                    placeholder="{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}" formControlName="location" id="location"
+                    (keydown.enter)="fetchLocationLatLong($event.target.value)" (change)="locationChange($event)">
+                </ng-select>
+                <small class="text-info">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
+            </div>
+            <div class="col-sm-3">
+                <label>{{'UPLOADCONFIG' | translate}}</label>
+            </div>
+            <div class="col-sm-3 form-group">
+                <div class="custom-file">
+                    <input [disabled]="!selectedVimType" type="file" #fileInput class="custom-file-input"
+                        (change)="filesDropped($event.target.files)" id="customFile">
+                    <label class="custom-file-label" #fileInputLabel
+                        for="customFile">{{'CHOOSEFILE' | translate}}</label>
+                </div>
+                <small class="text-info">{{'UPLOADCONFIGLABEL' | translate}}</small>
+            </div>
+        </div>
         <div class="row" [hidden]="!selectedVimType">
             <div class="col-12">
                 <button type="button" class="btn btn-block border-0 bg-light text-dark"
@@ -107,555 +130,28 @@
                     [attr.aria-expanded]="!isCollapsed">{{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}</button>
             </div>
         </div>
-        <div formGroupName="vimconfig" id="configurationparameters" class="collapse mt-3" [ngbCollapse]="isCollapsed">
-            <div class="row" [hidden]="!selectedVimType">
-                <div class="col-sm-3">
-                    <label>{{'UPLOADCONFIG' | translate}}</label>
-                </div>
-                <div class="col-sm-3 form-group">
-                    <div class="custom-file">
-                        <input type="file" #fileInput class="custom-file-input"
-                            (change)="filesDropped($event.target.files)" id="customFile">
-                        <label class="custom-file-label" #fileInputLabel
-                            for="customFile">{{'CHOOSEFILE' | translate}}</label>
+        <div id="configurationparameters" class="row collapse mt-3" [ngbCollapse]="isCollapsed">
+            <div class="col-sm-12">
+                <div class="ngx-codemirror new-vim" [hidden]="!selectedVimType">
+                    <div class="form-group">
+                        <button type="button" class="btn btn-warning btn-sm mr-3" (click)="loadSampleConfig()">
+                            <i class="fa fa-clone" aria-hidden="true"></i>
+                            {{'PAGE.VIMDETAILS.LOADSAMPLECONFIG' | translate}}</button>
+                        <button type="button" class="btn btn-danger btn-sm" (click)="clearConfig()">
+                            <i class="fa fa-times-circle" aria-hidden="true"></i>
+                            {{'PAGE.VIMDETAILS.CLEARCONFIG' | translate}}</button>
                     </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'openstack'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="APIversion">{{'PAGE.VIMDETAILS.APIVERSION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.APIVERSION' | translate}}" type="text"
-                            formControlName="APIversion" id="APIversion">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="project_domain_id">{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}" type="text"
-                            formControlName="project_domain_id" id="project_domain_id">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="project_domain_name">{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}" type="text"
-                            formControlName="project_domain_name" id="project_domain_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="config_vim_ype">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIM_TYPE' | translate}}" type="text"
-                            formControlName="config_vim_ype" id="config_vim_ype">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="user_domain_id">{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}" type="text"
-                            formControlName="user_domain_id" id="user_domain_id">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
-                            formControlName="security_groups" id="security_groups">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="user_domain_name">{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}" type="text"
-                            formControlName="user_domain_name" id="user_domain_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="availabilityZone">{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}" type="text"
-                            formControlName="availabilityZone" id="availabilityZone">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
-                            formControlName="keypair" id="keypair">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label
-                            for="dataplane_physical_net">{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}" type="text"
-                            formControlName="dataplane_physical_net" id="dataplane_physical_net">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="insecure">{{'PAGE.VIMDETAILS.INSECURE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.INSECURE' | translate}}" formControlName="insecure"
-                            id="insecure">
-                        </ng-select>
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="use_floating_ip">{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id" id="use_floating_ip"
-                            placeholder="{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}"
-                            formControlName="use_floating_ip">
-                        </ng-select>
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="use_internal_endpoint">{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}"
-                            formControlName="use_internal_endpoint" id="use_internal_endpoint">
-                        </ng-select>
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="microversion">{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}" type="text"
-                            formControlName="microversion" id="microversion">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="use_existing_flavors">{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
-                            placeholder="{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}"
-                            formControlName="use_existing_flavors" id="use_existing_flavors">
-                        </ng-select>
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
-                    </div>
-                    <div class="col-sm-9">
-                        <ng-select [items]="getVIMLocation" bindLabel="label" bindValue="value"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}" formControlName="location"
-                            id="location" (keydown.enter)="fetchLocationLatLong($event.target.value)">
-                        </ng-select>
-                        <small>{{'PAGE.VIM.LOACTIONINFO' | translate}}</small>
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'openvim' || selectedVimType == 'opennebula'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'vmware'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="orgname">{{'PAGE.VIMDETAILS.ORGNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ORGNAME' | translate}}" type="text"
-                            formControlName="orgname" id="orgname">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_ip">{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}" type="text"
-                            formControlName="vcenter_ip" id="vcenter_ip">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_port">{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}" type="text"
-                            formControlName="vcenter_port" id="vcenter_port">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="admin_username">{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}" type="text"
-                            formControlName="admin_username" id="admin_username">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_user">{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}" type="text"
-                            formControlName="vcenter_user" id="vcenter_user">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="admin_password">{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}" type="text"
-                            formControlName="admin_password" id="admin_password">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vcenter_password">{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}" type="text"
-                            formControlName="vcenter_password" id="vcenter_password">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_manager">{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}" type="text"
-                            formControlName="nsx_manager" id="nsx_manager">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_site">{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}" type="text"
-                            formControlName="vrops_site" id="vrops_site">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_user">{{'PAGE.VIMDETAILS.NSXUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXUSER' | translate}}" type="text"
-                            formControlName="nsx_user" id="nsx_user">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_user">{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}" type="text"
-                            formControlName="vrops_user" id="vrops_user">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="nsx_password">{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}" type="text"
-                            formControlName="nsx_password" id="nsx_password">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vrops_password">{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}" type="text"
-                            formControlName="vrops_password" id="vrops_password">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'aws'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
-                            formControlName="sdn_controller" id="sdn_controller">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vpc_cidr_block">{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}" type="text"
-                            formControlName="vpc_cidr_block" id="vpc_cidr_block">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
-                            formControlName="sdn_port_mapping" id="sdn_port_mapping">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
-                            formControlName="security_groups" id="security_groups">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
-                            formControlName="vim_network_name" id="vim_network_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
-                            formControlName="keypair" id="keypair">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="flavor_info">{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}" type="text"
-                            formControlName="flavor_info" id="flavor_info">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
-                            formControlName="additional_conf" id="additional_conf">
-                    </div>
-                </div>
-            </div>
-            <div *ngIf="selectedVimType == 'azure'">
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="subscription_id">{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}" type="text"
-                            formControlName="subscription_id" id="subscription_id">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
-                            formControlName="region_name" id="region_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="resource_group">{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}" type="text"
-                            formControlName="resource_group" id="resource_group">
-                    </div>
-                    <div class="col-sm-3">
-                        <label for="vnet_name">{{'PAGE.VIMDETAILS.VNETNAME' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.VNETNAME' | translate}}" type="text"
-                            formControlName="vnet_name" id="vnet_name">
-                    </div>
-                </div>
-                <div class="row form-group content-style">
-                    <div class="col-sm-3">
-                        <label for="flavors_pattern">{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}</label>
-                    </div>
-                    <div class="col-sm-3">
-                        <input autocomplete="off" class="form-control"
-                            placeholder="{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}" type="text"
-                            formControlName="flavors_pattern" id="flavors_pattern">
-                    </div>
+                    <ngx-codemirror [options]="options" [ngModel]="defaults[mode]" [autoFocus]="true"
+                        (ngModelChange)="handleChange($event)" [ngModelOptions]="{standalone: true}">
+                    </ngx-codemirror>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="modal-footer">
-        <button type="button" (click)="onVimAccountBack()"
-            class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
-        <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        <div class="modal-footer border-0">
+            <button type="button" (click)="onVimAccountBack()"
+                class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
+            <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        </div>
     </div>
 </form>
 <app-loader [waitingMessage]="message" *ngIf="isLocationLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index bc6fd1e..0c2b3d6 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -24,13 +24,32 @@
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
-import { APIURLHEADER, ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/keymap/sublime';
+import 'codemirror/lib/codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/yaml/yaml';
+import {
+  APIURLHEADER, ERRORDATA, TYPEAWS, TYPEAZURE, TYPEOPENSTACK, TYPEOPENVIMNEBULA, TYPEOTERS,
+  TYPESECTION, TYPEVMWARE, VIM_TYPES
+} from 'CommonModel';
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
 import { isNullOrUndefined } from 'util';
 import { FEATURES, VIMLOCATION, VIMLOCATIONDATA } from 'VimAccountModel';
+import { VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
  * Creating component
@@ -79,12 +98,48 @@
   /** set the latitude value of the selected place @public */
   public setLat: number;
 
+  /** Handle the formate Change @public */
+  public defaults: {} = {
+    'text/x-yaml': ''
+  };
+
+  /** To Set Mode @public */
+  public mode: string = 'text/x-yaml';
+
+  /** To Set Mode @public */
+  public modeDefault: string = 'yaml';
+
+  /** options @public */
+  public options: {} = {
+    mode: this.modeDefault,
+    showCursorWhenSelecting: true,
+    autofocus: true,
+    autoRefresh: true,
+    lineNumbers: true,
+    lineWrapping: true,
+    foldGutter: true,
+    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+    autoCloseBrackets: true,
+    matchBrackets: true,
+    theme: 'neat',
+    keyMap: 'sublime'
+  };
+
+  /** Data @public */
+  public data: string = '';
+
+  /** Controls the File Type List form @public */
+  public fileTypes: { value: string; viewValue: string; }[] = [];
+
   /** Element ref for fileInput @public */
   @ViewChild('fileInput', { static: true }) public fileInput: ElementRef;
 
   /** Element ref for fileInput @public */
   @ViewChild('fileInputLabel', { static: true }) public fileInputLabel: ElementRef;
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -103,11 +158,11 @@
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** VIM Details @private */
+  private vimDetail: VimAccountDetails[];
 
-  /** Contains configuration key variables @private */
-  private configKeys: string[] = [];
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -128,63 +183,22 @@
       schema_type: [''],
       vim_user: [null, Validators.required],
       vim_password: [null, Validators.required],
-      vimconfig: this.paramsBuilder()
+      config: this.paramsBuilder()
     });
   }
 
   /** Generate params for config @public */
   public paramsBuilder(): FormGroup {
     return this.formBuilder.group({
-      use_existing_flavors: [null],
-      location: [null],
-      sdn_controller: [null],
-      APIversion: [null],
-      sdn_port_mapping: [null],
-      project_domain_id: [null],
-      vim_network_name: [null],
-      project_domain_name: [null],
-      config_vim_ype: [null],
-      user_domain_id: [null],
-      security_groups: [null],
-      user_domain_name: [null],
-      availabilityZone: [null],
-      keypair: [null],
-      region_name: [null],
-      dataplane_physical_net: [null],
-      insecure: [null],
-      use_floating_ip: [null],
-      microversion: [null],
-      use_internal_endpoint: [null],
-      additional_conf: [null],
-      orgname: [null],
-      vcenter_ip: [null],
-      vcenter_port: [null],
-      admin_username: [null],
-      vcenter_user: [null],
-      admin_password: [null],
-      vcenter_password: [null],
-      nsx_manager: [null],
-      vrops_site: [null],
-      nsx_user: [null],
-      vrops_user: [null],
-      nsx_password: [null],
-      vrops_password: [null],
-      vpc_cidr_block: [null],
-      flavor_info: [null],
-      subscription_id: [null],
-      resource_group: [null],
-      vnet_name: [null],
-      flavors_pattern: [null]
+      location: [null]
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.vimNewAccountForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
   public ngOnInit(): void {
+    this.fileTypes = [{ value: 'text/x-yaml', viewValue: 'yaml' }];
     this.vimType = VIM_TYPES;
     this.boolValue = [
       { id: '', name: 'None' },
@@ -196,6 +210,7 @@
       'Content-Type': 'application/json',
       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
     });
+    this.getVIMDetails();
   }
 
   /** On modal submit newVimAccountSubmit will called @public */
@@ -203,18 +218,25 @@
     this.submitted = true;
     if (!this.vimNewAccountForm.invalid) {
       this.isLocationLoadingResults = true;
-      this.configKeys.forEach((key: string) => {
-        this.vimNewAccountForm.controls.vimconfig.get(key).setValue(JSON.parse(this.vimNewAccountForm.controls.vimconfig.get(key).value));
-      });
-      this.sharedService.cleanForm(this.vimNewAccountForm);
-      Object.keys(this.vimNewAccountForm.value.vimconfig).forEach((key: string) => {
-        if (this.vimNewAccountForm.value.vimconfig[key] === undefined || this.vimNewAccountForm.value.vimconfig[key] === null ||
-          this.vimNewAccountForm.value.vimconfig[key] === '') {
-          delete this.vimNewAccountForm.value.vimconfig[key];
+      this.sharedService.cleanForm(this.vimNewAccountForm, 'vim');
+      if (!isNullOrUndefined(this.data) && this.data !== '') {
+        Object.assign(this.vimNewAccountForm.value.config, jsyaml.load(this.data.toString(), { json: true }));
+      } else {
+        Object.keys(this.vimNewAccountForm.value.config).forEach((res: string) => {
+          if (res !== 'location') {
+            delete this.vimNewAccountForm.value.config[res];
+          }
+        });
+      }
+
+      if (isNullOrUndefined(this.vimNewAccountForm.value.config.location)) {
+        delete this.vimNewAccountForm.value.config.location;
+      }
+      Object.keys(this.vimNewAccountForm.value.config).forEach((res: string) => {
+        if (isNullOrUndefined(this.vimNewAccountForm.value.config[res]) || this.vimNewAccountForm.value.config[res] === '') {
+          delete this.vimNewAccountForm.value.config[res];
         }
       });
-      this.vimNewAccountForm.value.config = this.vimNewAccountForm.value.vimconfig;
-      delete this.vimNewAccountForm.value.vimconfig;
       const apiURLHeader: APIURLHEADER = {
         url: environment.VIMACCOUNTS_URL,
         httpOptions: { headers: this.headers }
@@ -228,16 +250,17 @@
           });
           // Post the New Vim data and reflect in the VIM Details Page.
         }, (error: ERRORDATA) => {
-          this.configKeys.forEach((key: string) => {
-            this.vimNewAccountForm.controls.vimconfig.get(key)
-              .setValue(JSON.stringify(this.vimNewAccountForm.controls.vimconfig.get(key).value));
-          });
           this.restService.handleError(error, 'post');
           this.isLocationLoadingResults = false;
         });
     }
   }
 
+  /** HandleChange function @public */
+  public handleChange($event: string): void {
+    this.data = $event;
+  }
+
   /** Routing to VIM Account Details Page @public */
   public onVimAccountBack(): void {
     this.router.navigate(['vim/details']).catch(() => {
@@ -287,22 +310,11 @@
 
   /** Drag and drop feature and fetchind the details of files  @private */
   public filesDropped(files: FileList): void {
-    this.configKeys = [];
     if (files && files.length === 1) {
       this.sharedService.getFileString(files, 'yaml').then((fileContent: string): void => {
         const getJson: string = jsyaml.load(fileContent, { json: true });
-        Object.keys(getJson).forEach((item: string) => {
-          if (!isNullOrUndefined(this.vimNewAccountForm.controls.vimconfig.get(item))) {
-            if (typeof getJson[item] === 'object') {
-              // tslint:disable-next-line: no-backbone-get-set-outside-model
-              this.vimNewAccountForm.controls.vimconfig.get(item).setValue(JSON.stringify(getJson[item]));
-              this.configKeys.push(item);
-            } else {
-              // tslint:disable-next-line: no-backbone-get-set-outside-model
-              this.vimNewAccountForm.controls.vimconfig.get(item).setValue(getJson[item]);
-            }
-          }
-        });
+        this.defaults['text/x-yaml'] = fileContent;
+        this.data = fileContent;
       }).catch((err: string): void => {
         if (err === 'typeError') {
           this.notifierService.notify('error', this.translateService.instant('YAMLFILETYPEERRROR'));
@@ -318,4 +330,60 @@
     this.fileInputLabel.nativeElement.innerText = files[0].name;
     this.fileInput.nativeElement.value = null;
   }
+
+  /** Location chnage event in select box @public */
+  public locationChange(data: { value: string }): void {
+    this.vimDetail.forEach((vimAccountData: VimAccountDetails) => {
+      if (!isNullOrUndefined(vimAccountData.config.location) && !isNullOrUndefined(data)) {
+        if (vimAccountData.config.location === data.value) {
+          this.notifierService.notify('error', this.translateService.instant('PAGE.VIMDETAILS.LOCATIONERROR'));
+          // tslint:disable-next-line: no-backbone-get-set-outside-model
+          this.vimNewAccountForm.controls.config.get('location').setValue(null);
+        }
+      }
+    });
+  }
+
+  /** Load sample config based on VIM type @public */
+  public loadSampleConfig(): void {
+    this.clearConfig();
+    if (this.selectedVimType === 'openstack') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENSTACK);
+      this.data = JSON.stringify(TYPEOPENSTACK, null, '\t');
+    } else if (this.selectedVimType === 'aws') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAWS);
+      this.data = JSON.stringify(TYPEAWS, null, '\t');
+    } else if (this.selectedVimType === 'vmware') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEVMWARE);
+      this.data = JSON.stringify(TYPEVMWARE, null, '\t');
+    } else if (this.selectedVimType === 'openvim' || this.selectedVimType === 'opennebula') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOPENVIMNEBULA);
+      this.data = JSON.stringify(TYPEOPENVIMNEBULA, null, '\t');
+    } else if (this.selectedVimType === 'azure' || this.selectedVimType === 'opennebula') {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEAZURE);
+      this.data = JSON.stringify(TYPEAZURE, null, '\t');
+    } else {
+      this.defaults['text/x-yaml'] = jsyaml.dump(TYPEOTERS);
+      this.data = JSON.stringify(TYPEOTERS, null, '\t');
+    }
+  }
+
+  /** Clear config parameters @public */
+  public clearConfig(): void {
+    this.defaults['text/x-yaml'] = '';
+    this.data = '';
+    this.fileInput.nativeElement.value = null;
+  }
+
+  /** Method to get VIM details @private */
+  private getVIMDetails(): void {
+    this.isLocationLoadingResults = true;
+    this.restService.getResource(environment.VIMACCOUNTS_URL).subscribe((vimAccountsData: VimAccountDetails[]) => {
+      this.vimDetail = vimAccountsData;
+      this.isLocationLoadingResults = false;
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+      this.isLocationLoadingResults = false;
+    });
+  }
 }
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index 71455f5..2ebcea6 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -309,7 +309,7 @@
             this.nsData = [];
             this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]) => {
                 const nsRunningInstancesData: NSInstanceDetails[] = nsdInstancesData.filter((instancesData: NSInstanceDetails) =>
-                instancesData['operational-status'] === this.nsinstancesoperationalStateRunning);
+                    instancesData['operational-status'] === this.nsinstancesoperationalStateRunning);
                 this.nsData = nsRunningInstancesData;
                 resolve(true);
             }, (error: ERRORDATA) => {
@@ -331,7 +331,8 @@
             }),
             view: new View({
                 center: fromLonLat([CONSTANTNUMBER.osmapviewlong, CONSTANTNUMBER.osmapviewlat]),
-                zoom: 3
+                zoom: 3,
+                minZoom: 1.5
             })
         });
     }
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
index a97107f..925a5a2 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
@@ -36,9 +36,10 @@
             <label class="col-sm-4 col-form-label" for="wim_type">{{'TYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select bindLabel="title" bindValue="value" [items]="wimType" placeholder="{{'SELECT' | translate}}"
-                    formControlName="wim_type" id="wim_type" [(ngModel)]="wimTypeMod"
+                    formControlName="wim_type" id="wim_type" [(ngModel)]="wimTypeMod" [addTag]="sharedService.addCustomTag"
                     [ngClass]="{ 'is-invalid': submitted && f.wim_type.errors }" required>
                 </ng-select>
+                <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
         </div>
         <div class="form-group row">
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
index 7587b58..5b8e29a 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
@@ -71,6 +71,9 @@
   /** Element ref for fileInputConfig @public */
   @ViewChild('fileInputConfigLabel', { static: true }) public fileInputConfigLabel: ElementRef;
 
+  /** Contains all methods related to shared @private */
+  public sharedService: SharedService;
+
   /** Instance of the rest service @private */
   private restService: RestService;
 
@@ -86,8 +89,8 @@
   /** Contains tranlsate instance @private */
   private translateService: TranslateService;
 
-  /** Contains all methods related to shared @private */
-  private sharedService: SharedService;
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.wimNewAccountForm.controls; }
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -110,9 +113,6 @@
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.wimNewAccountForm.controls; }
-
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
diff --git a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
index 25126b8..930b63d 100644
--- a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
+++ b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
@@ -35,7 +35,7 @@
     </tr>
     <tr>
       <td>
-        <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ml-1 badge" [ngClass]="{'badge-info':wimDetails._admin.operationalState === operationalStateFirstStep,
+        <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ml-1 badge" [ngClass]="{'badge-warning text-white':wimDetails._admin.operationalState === operationalStateFirstStep,
         'badge-success':wimDetails._admin.operationalState === operationalStateSecondStep,
         'badge-danger':wimDetails._admin.operationalState === operationalStateThirdStep}">
           {{(wimDetails._admin.operationalState)?wimDetails._admin.operationalState:''}}
diff --git a/src/assets/config/rolePermissions.json b/src/assets/config/rolePermissions.json
index 7111144..4421fc4 100644
--- a/src/assets/config/rolePermissions.json
+++ b/src/assets/config/rolePermissions.json
@@ -569,6 +569,35 @@
             ]
         },
         {
+            "title": "OSM Repositories",
+            "permissions": [
+                {
+                    "operation": "osmrepos",
+                    "value": "NA"
+                },
+                {
+                    "operation": "osmrepos:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "osmrepos:post",
+                    "value": "NA"
+                },
+                {
+                    "operation": "osmrepos:id:get",
+                    "value": "NA"
+                },
+                {
+                    "operation": "osmrepos:id:delete",
+                    "value": "NA"
+                },
+                {
+                    "operation": "osmrepos:id:patch",
+                    "value": "NA"
+                }
+            ]
+        },
+        {
             "title": "Users",
             "permissions": [
                 {
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 6c80bf8..27cf950 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -97,6 +97,7 @@
     "EXECUTE": "Execute",
     "EXECNSPRIMITIVE": "Exec NS Primitive",
     "PRIMITIVETYPE": "Primitiver Typ",
+    "VDUPRIMITIVE": "VDU Level Primitive",
     "VNFPRIMITIVE": "VNF Level Primitive",
     "NSPRIMITIVE": "NS Level Primitive",
     "DESCRIPTOR": "Deskriptor",
@@ -144,6 +145,9 @@
     "YAMLCONFIG": "Yaml Konfig",
     "CHOOSEFILE": "Datei wählen",
     "INVALIDCONFIG": "Ungültige Konfiguration",
+    "NODATE": "Keine Datumsinformationen gefunden",
+    "TYPEINFO": "Um einen neuen TYPW hinzuzufügen, geben Sie oben die Eingabe ein",
+    "UPLOADCONFIGLABEL": "Bitte laden Sie eine Datei im .yaml- oder .yml-Format hoch",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Instrumententafel",
@@ -190,7 +194,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM erfolgreich erstellt",
-            "LOACTIONINFO": "Geben Sie den Standortnamen ein und klicken Sie auf die Eingabetaste, um den Standort aus der Liste auszuwählen"
+            "LOCATIONINFO": "Geben Sie den Standortnamen ein und klicken Sie auf die Eingabetaste"
         },
         "VIMDETAILS": {
             "NEWVIM": "Nieuwe VIM",
@@ -204,51 +208,13 @@
             "SCHEMATYPE": "Schematyp",
             "SCHEMAVERSION": "Schema-Version",
             "CONFIGPARAMETERS": "KONFIG-PARAMETER",
-            "SDNCONTROLLER": "SDN-Controller",
-            "SDNPORTMAPPING": "SDN-Port-Zuordnung",
-            "VIMNETWORKNAME": "VIM-Netzwerkname",
-            "SECURITYGROUPS": "Sicherheitsgruppen",
-            "AVAILABILITYZONE": "Verfügbarkeitszone",
-            "REGIONALNAME": "Name der Region",
-            "INSECURE": "Unsicher",
-            "USEEXISTINGFLAVOURS": "Verwenden Sie vorhandene Aromen",
-            "USEINTERNALENDPOINT": "Verwenden Sie den internen Endpunkt",
-            "APIVERSION": "API-Version",
-            "PROJECTDOMAINID": "Projektdomänen-ID",
-            "PROJECTDOMAINNAME": "Projektdomänenname",
-            "USERDOMAINID": "Benutzer-Domain-ID",
-            "USERDOMAINUSER": "Benutzer-Domainname",
-            "KEYPAIR": "Schlüsselpaar",
-            "DATAPLANEPHYSICALNET": "Dataplane physikalisches Netz",
-            "USEFLOATINGIP": "Verwenden Sie Floating IP",
-            "DATAPLANENETVLANRANGE": "Dataplane Net VLAN-Bereich",
-            "MICROVERSION": "Mikroversion",
-            "BACKTOVIMACCOUNTS": "Zurück zu VimAccounts",
-            "VIMPASSWORD": "VIM-Passwort",
-            "ADDITIONALCONFIG": "Zusätzliche Konfiguration",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "Neues VIM-Konto",
-            "ORGNAME": "Orgname",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter-Anschluss",
-            "ADMINUSERNAME": "Admin-Benutzername",
-            "VCENTERUSER": "Vcenter-Benutzer",
-            "ADMINPASSWORD": "Administrator-Passwort",
-            "VCENTERPASSWORD": "Vcenter Passwort",
-            "NSXMANAGER": "Nsx Manager",
-            "VROPSSITE": "Vrops Seite",
-            "NSXUSER": "Nsx Benutzer",
-            "VROPSUSER": "Vrops Benutzer",
-            "NSXPASSWORD": "Nsx Passwort",
-            "VROPSPASSWORD": "Vrops Passwort",
-            "VPCCIDRBLOCK": "VPC-CIDR-Block",
-            "FLAVORIINFO": "Geschmacksinfo",
-            "VIM_TYPE": "VIM-Typ",
+            "VIMPASSWORD": "VIM-Passwort",
             "VIMLOCATION": "VIM-Speicherort",
-            "SUBSCRIPTIONID": "Abonnement-ID",
-            "RESOURCEGROUP": "Ressourcengruppe",
-            "VNETNAME": "VNet Name",
-            "FLAVORSPATTERN": "Geschmacksmuster"
+            "BACKTOVIMACCOUNTS": "Zurück zu VimAccounts",
+            "LOCATIONERROR": "Das Datencenter ist bereits am ausgewählten Speicherort verfügbar",
+            "LOADSAMPLECONFIG": "Beispielkonfiguration laden",
+            "CLEARCONFIG": "Konfiguration löschen"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM erfolgreich erstellt",
@@ -340,7 +306,8 @@
         "PROJECT": {
             "NEWPROJECT": "Nieuw project",
             "CREATEDSUCCESSFULLY": "Projekt erfolgreich erstellt",
-            "UPDATEDSUCCESSFULLY": "Projekt erfolgreich aktualisiert"
+            "UPDATEDSUCCESSFULLY": "Projekt erfolgreich aktualisiert",
+            "QUOTA": "Kontingentlimit"
         },
         "NSPACKAGE": {
             "ADDNSPACKAGE": "Verfassen Sie eine neue NS",
@@ -385,7 +352,12 @@
                 "CANNOTLINKVNFVLANDCP": "Sie können vnf_vl nicht mit cp verknüpfen",
                 "CANNOTLINKINTCPANDCP": "Sie können intcp nicht mit cp verknüpfen",
                 "CANNOTLINKCPANDINTCP": "Sie können cp nicht mit int_cp verknüpfen",
-                "CANNOTLINKVDUANDVDU": "Sie können ein vdu nicht mit einem vdu verknüpfen"
+                "CANNOTLINKVDUANDVDU": "Sie können ein vdu nicht mit einem vdu verknüpfen",
+                "CANNOTLINKCPANDCP": "Sie können ein CP nicht mit einem CP verknüpfen",
+                "CANNOTLINKVNFVLANDVNFVL": "Sie können vnf_vl nicht mit vnf_vl verknüpfen",
+                "CANNOTLINKVNFVLANDONTCP": "Sie können vnf_vl nicht mit int_cp verknüpfen",
+                "CANNOTLINKINTCPANDVNFVL": "Sie können intcp nicht mit vnf_vl verknüpfen",
+                "CANNOTLINKINTCPANDINTCP": "Sie können intcp nicht mit intcp verknüpfen"
             }
         },
         "NETSLICE": {
@@ -446,6 +418,15 @@
             "NEWK8SREPO": "Nieuwe K8s Repository",
             "TYPE": "Type",
             "URL": "URL"
+        },
+        "OSMREPO": {
+            "MENUOSMREPO": "OSM-Repositorys",
+            "ADDOSMREPO": "Fügen Sie OSM-Repositorys hinzu",
+            "NEWOSMREPO": "Neue OSM-Repositorys",
+            "EDITOSMREPO": "Bearbeiten Sie OSM-Repositorys",
+            "OSMREPOTITLE": "Registriertes OSM-Repository",
+            "CREATEDSUCCESSFULLY": "OSM-Repository erfolgreich hinzugefügt",
+            "UPDATEDSUCCESSFULLY" : "OSM-Repository erfolgreich aktualisiert"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d22cbae..af4b196 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -97,6 +97,7 @@
     "EXECUTE": "Execute",
     "EXECNSPRIMITIVE": "Exec NS Primitive",
     "PRIMITIVETYPE": "Primitive Type",
+    "VDUPRIMITIVE": "VDU Level Primitive",
     "VNFPRIMITIVE": "VNF Level Primitive",
     "NSPRIMITIVE": "NS Level Primitive",
     "DESCRIPTOR": "Descriptor",
@@ -144,6 +145,9 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Choose File",
     "INVALIDCONFIG": "Invalid configuration",
+    "NODATE": "No date information found",
+    "TYPEINFO": "To add a new TYPE, Please enter input above",
+    "UPLOADCONFIGLABEL": "Please upload file with .yaml or .yml format",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Dashboard",
@@ -190,7 +194,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM Created Successfully",
-            "LOACTIONINFO": "Type the location name and click enter button to select the location from the list"
+            "LOCATIONINFO": "Type the location name and click enter"
         },
         "VIMDETAILS": {
             "NEWVIM": "New VIM",
@@ -204,51 +208,13 @@
             "SCHEMATYPE": "Schema Type",
             "SCHEMAVERSION": "Schema Version",
             "CONFIGPARAMETERS": "CONFIG PARAMETERS",
-            "SDNCONTROLLER": "SDN Controller",
-            "SDNPORTMAPPING": "SDN Port Mapping",
-            "VIMNETWORKNAME": "VIM Network Name",
-            "SECURITYGROUPS": "Security Groups",
-            "AVAILABILITYZONE": "Availability Zone",
-            "REGIONALNAME": "Region Name",
-            "INSECURE": "Insecure",
-            "USEEXISTINGFLAVOURS": "Use existing flavors",
-            "USEINTERNALENDPOINT": "Use internal endpoint",
-            "APIVERSION": "API version",
-            "PROJECTDOMAINID": "Project domain id",
-            "PROJECTDOMAINNAME": "Project domain name",
-            "USERDOMAINID": "User domain id",
-            "USERDOMAINUSER": "User domain name",
-            "KEYPAIR": "Keypair",
-            "DATAPLANEPHYSICALNET": "Dataplane physical net",
-            "USEFLOATINGIP": "Use floating ip",
-            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
-            "MICROVERSION": "Microversion",
-            "BACKTOVIMACCOUNTS": "Back to VimAccounts",
-            "VIMPASSWORD": "VIM Password",
-            "ADDITIONALCONFIG": "Additional configuration",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "New VIM Account",
-            "ORGNAME": "Orgname",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter port",
-            "ADMINUSERNAME": "Admin username",
-            "VCENTERUSER": "Vcenter user",
-            "ADMINPASSWORD": "Admin password",
-            "VCENTERPASSWORD": "Vcenter password",
-            "NSXMANAGER": "Nsx manager",
-            "VROPSSITE": "Vrops site",
-            "NSXUSER": "Nsx user",
-            "VROPSUSER": "Vrops user",
-            "NSXPASSWORD": "Nsx password",
-            "VROPSPASSWORD": "Vrops password",
-            "VPCCIDRBLOCK": "VPC cidr block",
-            "FLAVORIINFO": "Flavor info",
-            "VIM_TYPE": "VIM Type",
+            "VIMPASSWORD": "VIM Password",
             "VIMLOCATION": "VIM Location",
-            "SUBSCRIPTIONID": "Subscription ID",
-            "RESOURCEGROUP": "Resource Group",
-            "VNETNAME": "VNet Name",
-            "FLAVORSPATTERN": "Flavors Pattern"
+            "BACKTOVIMACCOUNTS": "Back to VimAccounts",
+            "LOCATIONERROR": "The Datacenter is already available in the selected location",
+            "LOADSAMPLECONFIG": "Load Sample Config",
+            "CLEARCONFIG": "Clear Config"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM Created Successfully",
@@ -340,7 +306,8 @@
         "PROJECT": {
             "NEWPROJECT": "New Project",
             "CREATEDSUCCESSFULLY": "Project Created Successfully",
-            "UPDATEDSUCCESSFULLY": "Project Updated Successfully"
+            "UPDATEDSUCCESSFULLY": "Project Updated Successfully",
+            "QUOTA": "Quota Limit"
         },
         "NSPACKAGE": {
             "ADDNSPACKAGE": "Compose a new NS",
@@ -385,7 +352,12 @@
                 "CANNOTLINKVNFVLANDCP": "You cant link vnf_vl with cp",
                 "CANNOTLINKINTCPANDCP": "You cant link intcp with cp",
                 "CANNOTLINKCPANDINTCP": "You cant link cp with int_cp",
-                "CANNOTLINKVDUANDVDU": "You can't link a vdu with a vdu"
+                "CANNOTLINKVDUANDVDU": "You can't link a vdu with a vdu",
+                "CANNOTLINKCPANDCP": "You can't link a cp with a cp",
+                "CANNOTLINKVNFVLANDVNFVL": "You cant link vnf_vl with vnf_vl",
+                "CANNOTLINKVNFVLANDONTCP": "You cant link vnf_vl with int_cp",
+                "CANNOTLINKINTCPANDVNFVL": "You cant link intcp with vnf_vl",
+                "CANNOTLINKINTCPANDINTCP": "You cant link intcp with intcp"
             }
         },
         "NETSLICE": {
@@ -446,6 +418,15 @@
             "NEWK8SREPO": "New K8s Repository",
             "TYPE": "Type",
             "URL": "URL"
+        },
+        "OSMREPO": {
+            "MENUOSMREPO": "OSM Repositories",
+            "ADDOSMREPO": "Add OSM Repositories",
+            "NEWOSMREPO": "New OSM Repositories",
+            "EDITOSMREPO": "Edit OSM Repositories",
+            "OSMREPOTITLE": "Registered OSM repository",
+            "CREATEDSUCCESSFULLY": "OSM Repository Added Successfully",
+            "UPDATEDSUCCESSFULLY" : "OSM Repository Updated Successfully"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 0cd37b1..c5796ea 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -46,7 +46,7 @@
     "VENDOR": "Vendedor",
     "VERSION": "Versión",
     "ACTIONS": "Comportamiento",
-    "NAME": "NOMBRE",
+    "NAME": "Nombre",
     "USAGESTATE": "Estado de uso",
     "MODIFICATIONDATE": "Fecha de modificación",
     "CREATEDDATE": "Fecha de creación",
@@ -97,6 +97,7 @@
     "EXECUTE": "Ejecutar",
     "EXECNSPRIMITIVE": "Ejecutar NS Primitiva",
     "PRIMITIVETYPE": "Tipo primitivo",
+    "VDUPRIMITIVE": "Primitiva a nivel de VDU",
     "VNFPRIMITIVE": "Nivel VNF Primitivo",
     "NSPRIMITIVE": "NS Level Primitive",
     "DESCRIPTOR": "Descriptora",
@@ -144,6 +145,9 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Elija el archivo",
     "INVALIDCONFIG": "Configuración inválida",
+    "NODATE": "No se encontró información de fecha",
+    "TYPEINFO": "Para agregar un nuevo TIPO, ingrese la entrada de arriba",
+    "UPLOADCONFIGLABEL": "Cargue el archivo con formato .yaml o .yml",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Tablero",
@@ -190,7 +194,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM Creada Exitosamente",
-            "LOACTIONINFO": "Escriba el nombre de la ubicación y haga clic en el botón Intro para seleccionar la ubicación de la lista"
+            "LOCATIONINFO": "Escriba el nombre de la ubicación y haga clic en ingresar"
         },
         "VIMDETAILS": {
             "NEWVIM": "Nuevo VIM",
@@ -204,51 +208,13 @@
             "SCHEMATYPE": "Tipo de esquema",
             "SCHEMAVERSION": "Versión de esquema",
             "CONFIGPARAMETERS": "CONFIGURAR PARÁMETROS",
-            "SDNCONTROLLER": "SDN Controladora",
-            "SDNPORTMAPPING": "SDN La asignación de puertos",
-            "VIMNETWORKNAME": "VIM Nombre de red",
-            "SECURITYGROUPS": "Grupos de seguridad",
-            "AVAILABILITYZONE": "Zona de disponibilidad",
-            "REGIONALNAME": "Nombre de región",
-            "INSECURE": "Insegura",
-            "USEEXISTINGFLAVOURS": "Usa sabores existentes",
-            "USEINTERNALENDPOINT": "Usar punto final interno",
-            "APIVERSION": "Versión API   ",
-            "PROJECTDOMAINID": "Proyecto dominio id",
-            "PROJECTDOMAINNAME": "Proyecto dominio name",
-            "USERDOMAINID": "Usuaria dominio id",
-            "USERDOMAINUSER": "Usuaria dominio nombre",
-            "KEYPAIR": "Par de claves",
-            "DATAPLANEPHYSICALNET": "Plano de datos physical net",
-            "USEFLOATINGIP": "Utilizar flotante ip",
-            "DATAPLANENETVLANRANGE": "Plano de datos net vlan range",
-            "MICROVERSION": "Microversión",
-            "BACKTOVIMACCOUNTS": "Atrás a VimAccounts",
-            "VIMPASSWORD": "VIM Contraseña",
-            "ADDITIONALCONFIG": "Adicional configuración",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1': [...], 'key2': {}, 'key3': ''}",
             "NEWVIMACCOUNT": "Nueva VIM Cuenta",
-            "ORGNAME": "Orgnombre",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Vcenter Puerto",
-            "ADMINUSERNAME": "Administración nombre de usuario",
-            "VCENTERUSER": "Vcenter usuaria",
-            "ADMINPASSWORD": "Administración contraseña",
-            "VCENTERPASSWORD": "Vcenter contraseña",
-            "NSXMANAGER": "Nsx gerente",
-            "VROPSSITE": "Vrops sitio",
-            "NSXUSER": "Nsx usuaria",
-            "VROPSUSER": "Vrops usuaria",
-            "NSXPASSWORD": "Nsx contraseña",
-            "VROPSPASSWORD": "Vrops contraseña",
-            "VPCCIDRBLOCK": "VPC cidr bloquear",
-            "FLAVORIINFO": "Flavor informacion",
-            "VIM_TYPE": "VIM Tipo",
+            "VIMPASSWORD": "VIM Contraseña",
             "VIMLOCATION": "VIM Ubicación",
-            "SUBSCRIPTIONID": "ID de suscripción",
-            "RESOURCEGROUP": "Grupo de recursos",
-            "VNETNAME": "Nombre de red virtual",
-            "FLAVORSPATTERN": "Patrón de sabores"
+            "BACKTOVIMACCOUNTS": "Atrás a VimAccounts",
+            "LOCATIONERROR": "El centro de datos ya está disponible en la ubicación seleccionada",
+            "LOADSAMPLECONFIG": "Cargar configuración de muestra",
+            "CLEARCONFIG": "Borrar configuración"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM Creado Exitosamente",
@@ -340,7 +306,8 @@
         "PROJECT": {
             "NEWPROJECT": "Nuevo proyecto",
             "CREATEDSUCCESSFULLY": "Proyecto Creada Exitosamente",
-            "UPDATEDSUCCESSFULLY": "Proyecto Actualizada Exitosamente"
+            "UPDATEDSUCCESSFULLY": "Proyecto Actualizada Exitosamente",
+            "QUOTA": "Límite de cuota"
         },
         "NSPACKAGE": {
             "ADDNSPACKAGE": "Componer un nuevo NS",
@@ -385,7 +352,12 @@
                 "CANNOTLINKVNFVLANDCP": "No puedes vincular vnf_vl con cp",
                 "CANNOTLINKINTCPANDCP": "No puedes vincular intcp con cp",
                 "CANNOTLINKCPANDINTCP": "No puedes vincular cp con int_cp",
-                "CANNOTLINKVDUANDVDU": "No puedes vincular un vdu con un vdu"
+                "CANNOTLINKVDUANDVDU": "No puedes vincular un vdu con un vdu",
+                "CANNOTLINKCPANDCP": "No puedes vincular una cp con una cp",
+                "CANNOTLINKVNFVLANDVNFVL": "No puede vincular vnf_vl con vnf_vl",
+                "CANNOTLINKVNFVLANDONTCP": "No puede vincular vnf_vl con int_cp",
+                "CANNOTLINKINTCPANDVNFVL": "No puedes vincular intcp con vnf_vl",
+                "CANNOTLINKINTCPANDINTCP": "No puede vincular intcp con intcp"
             }
         },
         "NETSLICE": {
@@ -446,6 +418,15 @@
             "NEWK8SREPO": "Nuevo repositorio K8s",
             "TYPE": "Tipo",
             "URL": "URL"
+        },
+        "OSMREPO": {
+            "MENUOSMREPO": "Repositorios OSM",
+            "ADDOSMREPO": "Agregar repositorios OSM",
+            "NEWOSMREPO": "Nuevos repositorios OSM",
+            "EDITOSMREPO": "Editar repositorios de OSM",
+            "OSMREPOTITLE": "Repositorio OSM registrado",
+            "CREATEDSUCCESSFULLY": "registrado OSM agregado con éxito",
+            "UPDATEDSUCCESSFULLY" : "El registrado de OSM se actualizó correctamente"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index 3c948ac..496d330 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -97,6 +97,7 @@
     "EXECUTE": "Executar",
     "EXECNSPRIMITIVE": "Exec NS Primitive",
     "PRIMITIVETYPE": "Tipo primitivo",
+    "VDUPRIMITIVE": "Primitivo de nível VDU",
     "VNFPRIMITIVE": "Primitivo de nível VNF",
     "NSPRIMITIVE": "NS Level Primitive",
     "DESCRIPTOR": "Descritora",
@@ -144,6 +145,9 @@
     "YAMLCONFIG": "Yaml Config",
     "CHOOSEFILE": "Escolher arquivo",
     "INVALIDCONFIG": "Configuração inválida",
+    "NODATE": "Nenhuma informação de data encontrada",
+    "TYPEINFO": "Para adicionar um novo TIPO, insira a entrada acima",
+    "UPLOADCONFIGLABEL": "Faça o upload do arquivo no formato .yaml ou .yml",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "painel de controle",
@@ -190,7 +194,7 @@
         },
         "VIM": {
             "CREATEDSUCCESSFULLY": "VIM criado com sucesso",
-            "LOACTIONINFO": "Digite o nome do local e clique no botão Enter para selecionar o local na lista"
+            "LOCATIONINFO": "Digite o nome do local e clique em Enter"
         },
         "VIMDETAILS": {
             "NEWVIM": "Novo VIM",
@@ -204,51 +208,13 @@
             "SCHEMATYPE": "Tipo de esquema",
             "SCHEMAVERSION": "Versão do esquema",
             "CONFIGPARAMETERS": "PARÂMETROS CONFIG",
-            "SDNCONTROLLER": "Controlador SDN",
-            "SDNPORTMAPPING": "Mapeamento de porta SDN",
-            "VIMNETWORKNAME": "Nome da rede VIM",
-            "SECURITYGROUPS": "Grupos de Segurança",
-            "AVAILABILITYZONE": "Zona de disponibilidade",
-            "REGIONALNAME": "Nome da região",
-            "INSECURE": "Insegura",
-            "USEEXISTINGFLAVOURS": "Use sabores existentes",
-            "USEINTERNALENDPOINT": "Usar terminal interno",
-            "APIVERSION": "Versão da API",
-            "PROJECTDOMAINID": "ID do domínio do projeto",
-            "PROJECTDOMAINNAME": "Nome de domínio do projeto",
-            "USERDOMAINID": "ID do domínio do usuário",
-            "USERDOMAINUSER": "Nome de domínio do usuário",
-            "KEYPAIR": "Par de chaves",
-            "DATAPLANEPHYSICALNET": "Rede física do plano de dados",
-            "USEFLOATINGIP": "Use ip flutuante",
-            "DATAPLANENETVLANRANGE": "Dataplane net vlan range",
-            "MICROVERSION": "Microversão",
-            "BACKTOVIMACCOUNTS": "Voltar para VimAccounts",
-            "VIMPASSWORD": "Senha do VIM",
-            "ADDITIONALCONFIG": "Configuração adicional",
-            "ADDITIONALCONFIGPLACEHOLDER": "{'key1':[...],'key2':{},'key3':''}",
             "NEWVIMACCOUNT": "Nova conta VIM",
-            "ORGNAME": "Orgnome",
-            "VCENTERIP": "Vcenter ip",
-            "VCENTERPORT": "Porta Vcenter",
-            "ADMINUSERNAME": "Nome de usuário do administrador",
-            "VCENTERUSER": "Usuário do Vcenter",
-            "ADMINPASSWORD": "senha do administrador",
-            "VCENTERPASSWORD": "Senha do Vcenter",
-            "NSXMANAGER": "Gerente Nsx",
-            "VROPSSITE": "Site Vrops",
-            "NSXUSER": "Usuário Nsx",
-            "VROPSUSER": "Usuário Vrops",
-            "NSXPASSWORD": "Senha Nsx",
-            "VROPSPASSWORD": "Senha Vrops",
-            "VPCCIDRBLOCK": "Bloco cidr VPC",
-            "FLAVORIINFO": "Informação do sabor",
-            "VIM_TYPE": "Tipo VIM",
+            "VIMPASSWORD": "Senha do VIM",
             "VIMLOCATION": "Localização do VIM",
-            "SUBSCRIPTIONID": "ID de Inscrição",
-            "RESOURCEGROUP": "Grupo de Recursos",
-            "VNETNAME": "Nome da VNet",
-            "FLAVORSPATTERN": "Padrão de sabores"
+            "BACKTOVIMACCOUNTS": "Voltar para VimAccounts",
+            "LOCATIONERROR": "O Datacenter já está disponível no local selecionado",
+            "LOADSAMPLECONFIG": "Carregar configuração de amostra",
+            "CLEARCONFIG": "Limpar configuração"
         },
         "WIMACCOUNTS": {
             "CREATEDSUCCESSFULLY": "WIM criado com sucesso",
@@ -340,7 +306,8 @@
         "PROJECT": {
             "NEWPROJECT": "Novo projeto",
             "CREATEDSUCCESSFULLY": "Projeto criado com sucesso",
-            "UPDATEDSUCCESSFULLY": "Projeto atualizado com sucesso"
+            "UPDATEDSUCCESSFULLY": "Projeto atualizado com sucesso",
+            "QUOTA": "Limite de cota"
         },
         "NSPACKAGE": {
             "ADDNSPACKAGE": "Componha um novo NS",
@@ -385,7 +352,12 @@
                 "CANNOTLINKVNFVLANDCP": "Você não pode vincular vnf_vl ao cp",
                 "CANNOTLINKINTCPANDCP": "Você não pode vincular o intcp ao cp",
                 "CANNOTLINKCPANDINTCP": "Você não pode vincular o cp ao int_cp",
-                "CANNOTLINKVDUANDVDU": "Você não pode vincular um vdu a um vdu"
+                "CANNOTLINKVDUANDVDU": "Você não pode vincular um vdu a um vdu",
+                "CANNOTLINKCPANDCP": "Você não pode vincular um cp a um cp",
+                "CANNOTLINKVNFVLANDVNFVL": "Você não pode vincular vnf_vl a vnf_vl",
+                "CANNOTLINKVNFVLANDONTCP": "Você não pode vincular vnf_vl com int_cp",
+                "CANNOTLINKINTCPANDVNFVL": "Você não pode vincular intcp a vnf_vl",
+                "CANNOTLINKINTCPANDINTCP": "Você não pode vincular intcp a intcp"
             }
         },
         "NETSLICE": {
@@ -446,6 +418,15 @@
             "NEWK8SREPO": "Novo Repositório do K8s",
             "TYPE": "Tipo",
             "URL": "URL"
+        },
+        "OSMREPO": {
+            "MENUOSMREPO": "Repositórios OSM",
+            "ADDOSMREPO": "Adicionar repositórios OSM",
+            "NEWOSMREPO": "Novos repositórios OSM",
+            "EDITOSMREPO": "Editar repositórios OSM",
+            "OSMREPOTITLE": "Repositório OSM registrado",
+            "CREATEDSUCCESSFULLY": "registrado OSM adicionado com sucesso",
+            "UPDATEDSUCCESSFULLY" : "registrado OSM atualizado com sucesso"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index bc8a216..9e8948d 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -22,10 +22,11 @@
 * {
   outline: 0;
 }
-button[type=submit]:focus, .sidebar-body button[type=button]:focus {
+button[type="submit"]:focus,
+.sidebar-body button[type="button"]:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
 }
-.btn-danger:focus{
+.btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }
 body,
@@ -33,7 +34,10 @@
 .scroll-box,
 .smarttable-style,
 .modal-body-custom-height,
-.layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
+.layout-wrapper,
+.CodeMirror-vscrollbar,
+.ng-sidebar,
+.runninginstances .popover-body {
   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }
@@ -185,9 +189,12 @@
     @include wh-value(null, calc(2rem + 8px) !important);
     @include padding-value(0, 10, 0, 10);
   }
-  .CodeMirror {
+  .edit-packages .CodeMirror {
     min-height: 400px !important;
   }
+  .new-vim .CodeMirror {
+    @include border(all, 1, solid, #eee !important);
+  }
   .table-layout-fixed {
     table-layout: fixed;
     word-wrap: break-word;
@@ -214,12 +221,12 @@
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
-  .runninginstances{
-     width:200px;
-     .popover-body{
+  .runninginstances {
+    width: 200px;
+    .popover-body {
       max-height: 200px;
       overflow-y: scroll;
-     }
+    }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
@@ -412,20 +419,24 @@
         }
       }
     }
-    .dropdown-menu {
-      @include border(all, 1, solid, $primary);
-      @include padding-value(0, 0, 0, 0);
-      button.btn.btn-primary {
-        @include background(null, transparent, null, null, null);
-        @include padding-value(8, 8, 8, 8);
-        @include roundedCorners(0);
-        &:hover {
-          @include background(null, $primary, null, null, null);
-          color: $white;
-        }
-        &:not(:last-child) {
-          @include border(bottom, 1, solid, $primary);
-        }
+  }
+  /****************************************************************************/
+  /*********************** List Action Dropdown section ***********************/
+  /****************************************************************************/
+  .list-action-dropdown {
+    @include border(all, 1, solid, $primary);
+    @include padding-value(0, 0, 0, 0);
+    button.btn.btn-primary {
+      @include background(null, transparent, null, null, null);
+      @include padding-value(8, 8, 8, 8);
+      @include roundedCorners(0);
+      color: $primary;
+      &:hover {
+        @include background(null, $primary, null, null, null);
+        color: $white;
+      }
+      &:not(:last-child) {
+        @include border(bottom, 1, solid, $primary);
       }
     }
   }
@@ -682,7 +693,12 @@
 /****************************************************************************/
 @media (max-width: map-get($grid-breakpoints, md)) {
   .smarttable-style {
+    @include flexbox(block, null, null, null, null, null);
     overflow-x: auto;
     white-space: nowrap;
   }
-}
\ No newline at end of file
+}
+
+.text-captilize {
+  text-transform: capitalize;
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 6592b10..a9be3ad 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -80,5 +80,6 @@
     PERMISSIONS_CONFIG_FILE: ASSETS_PATH + 'config/rolePermissions.json',
     GRAFANA_URL: GRAFANA_ENDPOINT + '/d',
     DOMAIN_URL: OSM_ADMIN_ENDPOINT + 'domains',
-    OSM_VERSION_URL: OSM_VERSION
+    OSM_VERSION_URL: OSM_VERSION,
+    OSMREPOS_URL: OSM_ADMIN_ENDPOINT + 'osmrepos'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index dbc2c98..d2e5575 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -80,5 +80,6 @@
     PERMISSIONS_CONFIG_FILE: ASSETS_PATH + 'config/rolePermissions.json',
     GRAFANA_URL: GRAFANA_ENDPOINT + '/d',
     DOMAIN_URL: OSM_ADMIN_ENDPOINT + 'domains',
-    OSM_VERSION_URL: OSM_VERSION
+    OSM_VERSION_URL: OSM_VERSION,
+    OSMREPOS_URL: OSM_ADMIN_ENDPOINT + 'osmrepos'
 };
diff --git a/src/models/CommonModel.ts b/src/models/CommonModel.ts
index e3d44e2..627074b 100644
--- a/src/models/CommonModel.ts
+++ b/src/models/CommonModel.ts
@@ -150,6 +150,8 @@
     'type'?: string;
     readAsString?: Function;
     buffer: ArrayBuffer;
+    header_offset?: Number;
+    size?: number;
 }
 /** Interface for Package information */
 export interface PACKAGEINFO {
@@ -200,8 +202,92 @@
     { value: 'onos_vpls', title: 'ONOS vpls' },
     { value: 'tapi', title: 'TAPI' }
 ];
+/** Constants of the OSM Repo Types */
+export const OSMREPO_TYPES: TYPESECTION[] = [
+    { value: 'osm', title: 'OSM' }
+];
 /** Interface for List, Add WIM & SDN Types */
 export interface TYPESECTION {
     value: string;
     title: string;
 }
+/** Interface for VIM type Openstack's Config */
+export const TYPEOPENSTACK: {} = {
+    sdn_controller: '',
+    APIversion: '',
+    sdn_port_mapping: '',
+    project_domain_id: '',
+    vim_network_name: '',
+    project_domain_name: '',
+    config_vim_ype: '',
+    user_domain_id: '',
+    security_groups: '',
+    user_domain_name: '',
+    availabilityZone: '',
+    keypair: '',
+    region_name: '',
+    dataplane_physical_net: '',
+    insecure: '',
+    use_floating_ip: '',
+    use_internal_endpoint: '',
+    microversion: '',
+    additional_conf: '',
+    use_existing_flavors: ''
+};
+/** Interface for VIM type AWS's Config */
+export const TYPEAWS: {} = {
+    sdn_controller: '',
+    vpc_cidr_block: '',
+    sdn_port_mapping: '',
+    security_groups: '',
+    vim_network_name: '',
+    keypair: '',
+    region_name: '',
+    flavor_info: '',
+    additional_conf: ''
+};
+/** Interface for VIM type VMWARE's Config */
+export const TYPEVMWARE: {} = {
+    sdn_controller: '',
+    orgname: '',
+    sdn_port_mapping: '',
+    vcenter_ip: '',
+    vim_network_name: '',
+    admin_username: '',
+    admin_password: '',
+    vcenter_port: '',
+    vcenter_user: '',
+    vcenter_password: '',
+    nsx_manager: '',
+    nsx_user: '',
+    nsx_password: '',
+    vrops_site: '',
+    vrops_user: '',
+    vrops_password: '',
+    additional_conf: ''
+};
+/** Interface for VIM type OPENVIMNEBULA's Config */
+export const TYPEOPENVIMNEBULA: {} = {
+    sdn_controller: '',
+    sdn_port_mapping: '',
+    vim_network_name: '',
+    additional_conf: ''
+};
+/** Interface for VIM type AZURE's Config */
+export const TYPEAZURE: {} = {
+    subscription_id: '',
+    region_name: '',
+    resource_group: '',
+    vnet_name: '',
+    flavors_pattern: ''
+};
+/** Interface for VIM other type Config */
+export const TYPEOTERS: {} = {
+    sdn_controller: '',
+    sdn_port_mapping: '',
+    vim_network_name: '',
+    use_floating_ip: '',
+    use_internal_endpoint: '',
+    additional_conf: '',
+    use_existing_flavors: ''
+};
diff --git a/src/models/MenuModel.ts b/src/models/MenuModel.ts
index dd77e0d..0b49db8 100644
--- a/src/models/MenuModel.ts
+++ b/src/models/MenuModel.ts
@@ -197,6 +197,17 @@
         liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
         anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
+        routerLink: '/repos/details',
+        routerLinkActive: ['parentactive'],
+        routerLinkActiveOptions: true,
+        icon: 'fas fa-fas fa-cloud-download-alt',
+        menuName: 'PAGE.OSMREPO.MENUOSMREPO',
+        isChildExists: false
+    },
+    {
+        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
+        clickFunction: 'nosubmenu',
         routerLink: '/wim/details',
         routerLinkActive: ['parentactive'],
         routerLinkActiveOptions: true,
diff --git a/src/models/NSDModel.ts b/src/models/NSDModel.ts
index 95331a2..584f4e0 100644
--- a/src/models/NSDModel.ts
+++ b/src/models/NSDModel.ts
@@ -166,3 +166,10 @@
     'netslice-vld': string;
     ssh_keys: string[];
 }
+
+/** Interface for the VDU Primitive Levels */
+export interface VDUPRIMITIVELEVEL {
+    id: string;
+    name: string;
+    'vdu-configuration': {};
+}
diff --git a/src/models/OsmRepoModel.ts b/src/models/OsmRepoModel.ts
new file mode 100644
index 0000000..2f2114b
--- /dev/null
+++ b/src/models/OsmRepoModel.ts
@@ -0,0 +1,46 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @file  Model for OSM Repo related information.
+ */
+
+/** Interface for OSM Repo Details */
+export interface OSMRepoDetails {
+    _admin: Admin;
+    _id: string;
+    name: string;
+    url: string;
+    'type': string;
+    project_id?: string;
+    description?: string;
+}
+/** Interface for Admin */
+interface Admin {
+    created: number;
+    modified: number;
+}
+/** Interface for OSM Repo data in smarttable */
+export interface OSMRepoData {
+    name: string;
+    identifier: string;
+    url: string;
+    'type': string;
+    modified: string;
+    created: string;
+    description: string;
+}
diff --git a/src/models/ProjectModel.ts b/src/models/ProjectModel.ts
index 878bb47..ad070c6 100644
--- a/src/models/ProjectModel.ts
+++ b/src/models/ProjectModel.ts
@@ -25,6 +25,8 @@
     _id?: string;
     name?: string;
     id?: string;
+    domain_name?: string;
+    quotas?: {};
 }
 
 /** Interface for Admin */
@@ -41,4 +43,88 @@
     page?: string;
     id?: string;
     project?: string;
+    quotas?: {};
+}
+/** Interface for quota items */
+export const QUOTA_ITEMS: QUOTAITEM[] = [
+    {
+        title: 'VNFPACKAGES',
+        value: 'vnfds',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'NSPACKAGES',
+        value: 'nsds',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PAGE.DASHBOARD.NETSLICETEMPLATE',
+        value: 'slice_templates',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PDUINSTANCES',
+        value: 'pduds',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'NSINSTANCES',
+        value: 'ns_instances',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PAGE.DASHBOARD.NETSLICEINSTANCE',
+        value: 'slice_instances',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'VIMACCOUNTS',
+        value: 'vim_accounts',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'WIMACCOUNTS',
+        value: 'wim_accounts',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'SDNCONTROLLER',
+        value: 'sdn_controllers',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PAGE.K8S.MENUK8SCLUSTER',
+        value: 'k8sclusters',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PAGE.K8S.MENUK8SREPO',
+        value: 'k8srepos',
+        minValue: 0,
+        maxValue: 9999
+    },
+    {
+        title: 'PAGE.OSMREPO.MENUOSMREPO',
+        value: 'osmrepos',
+        minValue: 0,
+        maxValue: 9999
+    }
+];
+
+/** Interface for quota individual item */
+export interface QUOTAITEM {
+    title: string;
+    value: string;
+    minValue: number;
+    maxValue: number;
 }
diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts
index 3a138e5..f2f730e 100644
--- a/src/services/SharedService.ts
+++ b/src/services/SharedService.ts
@@ -22,6 +22,7 @@
 import { EventEmitter, Injectable, Output } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { CONSTANTNUMBER, ERRORDATA, GETAPIURLHEADER, PACKAGEINFO, PAGERSMARTTABLE, SMARTTABLECLASS, TARSETTINGS } from 'CommonModel';
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
@@ -64,6 +65,12 @@
     // tslint:disable-next-line: max-line-length
     public REGX_PASSWORD_PATTERN: RegExp = new RegExp(/^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/);
 
+    /** Variables to hold maxlength for the description @public */
+    public MAX_LENGTH_DESCRIPTION: number = 500;
+
+    /** Variables to hold maxlength for the name @public */
+    public MAX_LENGTH_NAME: number = 50;
+
     /** FormGroup instance added to the form @ html @public */
     public formGroup: FormGroup;
 
@@ -88,27 +95,37 @@
     /** Service holds the router information @private */
     private router: Router;
 
+    /** Random color string generator length @private */
+    private colorStringLength: number = 256;
+
     /** Check for the root directory @private */
     private directoryCount: number = 2;
 
-    constructor(restService: RestService, router: Router) {
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
+
+    constructor(restService: RestService, router: Router, translateService: TranslateService) {
         this.restService = restService;
         this.router = router;
+        this.translateService = translateService;
     }
 
     /** convert epoch time function @public */
     public convertEpochTime(unixtimestamp: number): string {
-        const monthsArr: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-        const date: Date = new Date(unixtimestamp * this.epochTime1000);
-        const year: number = date.getFullYear();
-        const month: string = monthsArr[date.getMonth()];
-        const day: number = date.getDate();
-        const hours: number = date.getHours();
-        const minutes: string = '0' + date.getMinutes();
-        const seconds: string = '0' + date.getSeconds();
-        return month + '-' + day + '-' + year + ' ' + hours + ':' + minutes.substr(this.epochTimeMinus2) + ':'
-            + seconds.substr(this.epochTimeMinus2);
+        if (!isNullOrUndefined(unixtimestamp)) {
+            const monthsArr: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            const date: Date = new Date(unixtimestamp * this.epochTime1000);
+            const year: number = date.getFullYear();
+            const month: string = monthsArr[date.getMonth()];
+            const day: number = date.getDate();
+            const hours: number = date.getHours();
+            const minutes: string = '0' + date.getMinutes();
+            const seconds: string = '0' + date.getSeconds();
+            return month + '-' + day + '-' + year + ' ' + hours + ':' + minutes.substr(this.epochTimeMinus2) + ':'
+                + seconds.substr(this.epochTimeMinus2);
+        }
+        return this.translateService.instant('NODATE');
     }
 
     /** Download Files function @public */
@@ -218,21 +235,21 @@
         return true;
     }
     /** Clean the form before submit @public */
-    public cleanForm(formGroup: FormGroup): void {
+    public cleanForm(formGroup: FormGroup, formName?: String): void {
         Object.keys(formGroup.controls).forEach((key: string) => {
-            if ((!isNullOrUndefined((formGroup.get(key) as FormArray | FormGroup).controls)) && key !== 'vimconfig') {
+            if ((!isNullOrUndefined((formGroup.get(key) as FormArray | FormGroup).controls)) && key !== 'config') {
                 // tslint:disable-next-line: no-shadowed-variable
                 for (const { item, index } of (formGroup.get(key).value).map((item: {}, index: number) => ({ item, index }))) {
                     const newFormGroup: FormGroup = (formGroup.get(key) as FormArray).controls[index] as FormGroup;
                     this.cleanForm(newFormGroup);
                 }
-            } else if (formGroup.get(key).value !== undefined && formGroup.get(key).value !== null && key !== 'vimconfig') {
+            } else if (formGroup.get(key).value !== undefined && formGroup.get(key).value !== null && key !== 'config') {
                 if (!Array.isArray(formGroup.get(key).value)) {
                     if (typeof formGroup.get(key).value === 'string') {
                         formGroup.get(key).setValue(formGroup.get(key).value.trim());
                     }
                 }
-            } else if (key === 'vimconfig') {
+            } else if (key === 'config' && formName === 'vim') {
                 const newFormGroup: FormGroup = formGroup.get(key) as FormGroup;
                 this.cleanForm(newFormGroup);
             }
@@ -274,11 +291,32 @@
             this.restService.handleError(error, 'get');
         });
     }
+    /** Random RGB color code generator @public */
+    public generateColor(): string {
+        const x: number = Math.floor(Math.random() * this.colorStringLength);
+        const y: number = Math.floor(Math.random() * this.colorStringLength);
+        const z: number = Math.floor(Math.random() * this.colorStringLength);
+        return 'rgb(' + x + ',' + y + ',' + z + ')';
+    }
+
+    /** Add custom name/tag to the dropdown @public */
+    public addCustomTag(tag: string): string {
+        return tag;
+    }
+
+    /** Fetch file extension @public */
+    public fetchFileExtension(fileInfo: FileList): string {
+        return fileInfo[0].name.substring(fileInfo[0].name.lastIndexOf('.') + 1);
+    }
+
     /** Method to validate file extension and size @private */
     private vaildataFileInfo(fileInfo: File, fileType: string): boolean {
         const extension: string = fileInfo.name.substring(fileInfo.name.lastIndexOf('.') + 1);
         const packageSize: number = CONSTANTNUMBER.oneMB * environment.packageSize;
-        if (extension.toLowerCase() === fileType && fileInfo.size <= packageSize) {
+        if (fileType === 'yaml' && (extension.toLowerCase() === 'yaml' || extension.toLowerCase() === 'yml')
+            && fileInfo.size <= packageSize) {
+            return true;
+        } else if (extension.toLowerCase() === fileType && fileInfo.size <= packageSize) {
             return true;
         }
         return false;
diff --git a/tsconfig.json b/tsconfig.json
index fca2693..ba5b667 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -133,7 +133,12 @@
             "PageReloadModule": ["src/app/utilities/page-reload/PageReloadModule"],
             "GoToTopDirective": ["src/directive/GoToTopDirective"],
             "VNFLinkComponent": ["src/app/instances/vnf-instances/vnf-link/VNFLinkComponent"],
-            "PACKAGEJSON": ["package.json"]
+            "PACKAGEJSON": ["package.json"],
+            "OsmRepositories" : ["src/app/osm-repositories/OsmRepositoriesComponent"],
+            "OsmRepositoriesDetails":["src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent"],
+            "OsmRepositoriesAction" : ["src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent"],
+            "OsmRepoModel": ["src/models/OsmRepoModel"],
+            "OsmRepoCreateUpdate": ["src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent"]
         }
     }
 }
\ No newline at end of file