diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 8df0e7c..56b79a4 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -34,7 +34,6 @@
 import { SharedService } from 'SharedService';
 import { ProjectRoleMappings, UserDetail } from 'UserModel';
 import { VimAccountDetails } from 'VimAccountModel';
-import { VNFDDetails } from 'VNFDModel';
 import { VNFInstanceDetails } from 'VNFInstanceModel';
 
 /**
@@ -189,13 +188,13 @@
 
     /** Get all the projects @public */
     public getUserAccessedProjects(): void {
-        this.projectService.getUserProjects().subscribe((projects: UserDetail) => {
+        this.projectService.getUserProjects().subscribe((projects: UserDetail): void => {
             const projectList: {}[] = projects.project_role_mappings;
             this.projectList = projectList.filter(
-                (thing: ProjectRoleMappings, i: number, arr: []) => arr
-                    .findIndex((t: ProjectRoleMappings) => t.project_name === thing.project_name) === i
+                (thing: ProjectRoleMappings, i: number, arr: []): boolean => arr
+                    .findIndex((t: ProjectRoleMappings): boolean => t.project_name === thing.project_name) === i
             );
-        }, (error: Error) => {
+        }, (error: Error): void => {
             // TODO: Handle failure
         });
     }
@@ -203,14 +202,14 @@
     /** Fetching all the Project in dashboard @public */
     public getAllProjects(): void {
         this.isProjectsLoadingResults = true;
-        this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => {
+        this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]): void => {
             this.allProjectList = [];
-            projectsData.forEach((projectData: ProjectDetails) => {
+            projectsData.forEach((projectData: ProjectDetails): void => {
                 const projectDataObj: ProjectData = this.generateProjectData(projectData);
                 this.allProjectList.push(projectDataObj);
             });
             this.isProjectsLoadingResults = false;
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
             this.restService.handleError(error, 'get');
             this.isProjectsLoadingResults = false;
         });
@@ -230,9 +229,9 @@
     /** Function to check admin privilege @public */
     public checkAdminPrivilege(): void {
         if (!this.isAdmin) {
-            this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => {
+            this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}): void => {
                 this.currentProjectDetails = projectDetails;
-            }, (error: Error) => {
+            }, (error: Error): void => {
                 // TODO: Handle failure
             });
         }
@@ -241,9 +240,9 @@
     /** Get VNFD Package details @public */
     public getVnfdPackageCount(): void {
         this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
-            .subscribe((vnfdPackageData: VNFDDetails[]) => {
+            .subscribe((vnfdPackageData: []): void => {
                 this.vnfdPackageCount = vnfdPackageData.length;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
             });
     }
@@ -251,9 +250,9 @@
     /** Get NSD Package details @public */
     public getNsdPackageCount(): void {
         this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
-            .subscribe((nsdPackageData: NSDDetails[]) => {
+            .subscribe((nsdPackageData: NSDDetails[]): void => {
                 this.nsdPackageCount = nsdPackageData.length;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
             });
     }
@@ -262,12 +261,12 @@
     public getNsInstanceCount(): void {
         this.isCanvasLoadingResults = true;
         this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
-            .subscribe((nsInstancesData: NSInstanceDetails[]) => {
+            .subscribe((nsInstancesData: NSInstanceDetails[]): void => {
                 this.nsInstancesDataArr = nsInstancesData;
                 this.nsInstanceCount = nsInstancesData.length;
                 this.nsInstanceChart();
                 this.isCanvasLoadingResults = false;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
                 this.isCanvasLoadingResults = false;
             });
@@ -275,7 +274,7 @@
 
     /** Get NS Instance chart details @public */
     public nsInstanceChart(): void {
-        this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => {
+        this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails): void => {
             const operationalStatus: string = nsdInstanceData['operational-status'];
             const configStatus: string = nsdInstanceData['config-status'];
             if (operationalStatus === 'failed' || configStatus === 'failed') {
@@ -288,7 +287,7 @@
         });
         const now: Date = new Date();
         const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
-        this.createdTimes.forEach((createdTime: string) => {
+        this.createdTimes.forEach((createdTime: string): void => {
             this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
         });
         this.drawNsChart();
@@ -342,9 +341,9 @@
     /** Get VNFD instance details @public */
     public getVnfInstanceCount(): void {
         this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
-            .subscribe((vnfInstanceData: VNFInstanceDetails[]) => {
+            .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => {
                 this.vnfInstanceCount = vnfInstanceData.length;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
             });
     }
@@ -352,9 +351,9 @@
     /** Get VIM account details @public */
     public getVimAccountCount(): void {
         this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
-            .subscribe((vimAccountData: VimAccountDetails[]) => {
+            .subscribe((vimAccountData: VimAccountDetails[]): void => {
                 this.vimAccountCount = vimAccountData.length;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
             });
     }
@@ -362,9 +361,9 @@
     /** Get SDN Controller Count  @public */
     public getSDNControllerCount(): void {
         this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL)
-            .subscribe((sdnControllerData: SDNControllerModel[]) => {
+            .subscribe((sdnControllerData: SDNControllerModel[]): void => {
                 this.sdnControllerCount = sdnControllerData.length;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.restService.handleError(error, 'get');
             });
     }
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.ts b/src/app/instances/ns-instances/NSInstancesComponent.ts
index 07184da..41bb384 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.ts
+++ b/src/app/instances/ns-instances/NSInstancesComponent.ts
@@ -124,7 +124,7 @@
         this.generateTableColumn();
         this.generateTableSettings();
         this.generateData();
-        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+        this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
     }
 
     /** Generate smart table row title and filters @public  */
@@ -219,9 +219,9 @@
     /** generateData initiate the ns-instance list @public */
     public generateData(): void {
         this.isLoadingResults = true;
-        this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]) => {
+        this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]): void => {
             this.nsInstanceData = [];
-            nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails) => {
+            nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails): void => {
                 const nsDataObj: NSDInstanceData = {
                     name: nsdInstanceData.name,
                     identifier: nsdInstanceData.id,
@@ -229,7 +229,7 @@
                     OperationalStatus: nsdInstanceData['operational-status'],
                     ConfigStatus: nsdInstanceData['config-status'],
                     DetailedStatus: nsdInstanceData['detailed-status'],
-                    memberIndex: nsdInstanceData.nsd['constituent-vnfd'],
+                    memberIndex: nsdInstanceData.nsd.df,
                     nsConfig: nsdInstanceData.nsd['ns-configuration']
                 };
                 this.nsInstanceData.push(nsDataObj);
@@ -239,10 +239,10 @@
             } else {
                 this.checkDataClass = 'dataTables_empty';
             }
-            this.dataSource.load(this.nsInstanceData).then((data: {}) => {
+            this.dataSource.load(this.nsInstanceData).then((data: {}): void => {
                 this.isLoadingResults = false;
             }).catch();
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
             this.restService.handleError(error, 'get');
             this.isLoadingResults = false;
         });
@@ -262,7 +262,7 @@
     /** Instantiate NS using modalservice @public */
     public instantiateNS(): void {
         const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' });
-        modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+        modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
             if (result) {
                 this.generateData();
             }
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.html b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
index 82e3992..2f3c155 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.html
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
@@ -31,10 +31,10 @@
             </div>
         </div>
         <div class="form-group row" *ngIf="primitiveType === 'VNF_Primitive' || primitiveType === 'VDU_Primitive' || primitiveType === 'KDU_Primitive'">
-            <label class="col-sm-4 col-form-label">VNF {{'MEMBERINDEX' | translate}}*</label>
+            <label class="col-sm-4 col-form-label">VNF Profile ID *</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>
+                <ng-select (change)="indexChange($event, primitiveType)" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="params.memberIndex[0]['vnf-profile']" bindLabel="id" bindValue="id" formControlName="member_vnf_index" id="member_vnf_index"
+                    [ngClass]="{ 'is-invalid': submitted && f.member_vnf_index.errors }"></ng-select>
             </div>
         </div>
         <div class="form-group row" *ngIf="primitiveType === 'VDU_Primitive'">
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
index d5cf565..50f7707 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
@@ -23,14 +23,15 @@
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
-import { APIURLHEADER, ERRORDATA, URLPARAMS } from 'CommonModel';
+import { APIURLHEADER, ERRORDATA, PRIMITIVEDATA, PRIMITIVETYPES, URLPARAMS } from 'CommonModel';
 import { DataService } from 'DataService';
 import { environment } from 'environment';
-import { KDUPRIMITIVELEVEL, NSData, VDUPRIMITIVELEVEL } from 'NSDModel';
+import { KDUPRIMITIVELEVEL, NSData, VDUPRIMITIVELEVEL, VNFPROFILE } from 'NSDModel';
 import { NSPrimitiveParams } from 'NSInstanceModel';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
 import { isNullOrUndefined } from 'util';
+import { CONFIGPRIMITIVE, DF, VDUCONFIG, VDUPROFILE, VNFCONFIG, VNFD } from 'VNFDModel';
 
 /**
  * Creating component
@@ -76,13 +77,13 @@
     public primitiveList: {}[];
 
     /** Contains objects that is used to hold types of primitive @public */
-    public primitiveTypeList: {}[] = [];
+    public primitiveTypeList: PRIMITIVETYPES[] = [];
 
     /** Model value used to hold selected primitive type @public */
     public primitiveType: string;
 
     /** Contains list of VDU primitive lists @public */
-    public vduList: {}[];
+    public vduList: VDUPROFILE[];
 
     /** Contains list of KDU primitive lists @public */
     public kduList: {}[];
@@ -137,12 +138,15 @@
         ];
     }
 
+    /** convenience getter for easy access to form fields */
+    get f(): FormGroup['controls'] { return this.primitiveForm.controls; }
+
     /**
      * Lifecyle Hooks the trigger before component is instantiate
      */
     public ngOnInit(): void {
         /** Setting up initial value for NSD */
-        this.dataService.currentMessage.subscribe((event: NSData) => {
+        this.dataService.currentMessage.subscribe((event: NSData): void => {
             if (event.identifier !== undefined || event.identifier !== '' || event.identifier !== null) {
                 this.nsdId = event.identifier;
             }
@@ -150,14 +154,11 @@
         this.initializeForm();
     }
 
-    /** convenience getter for easy access to form fields */
-    get f(): FormGroup['controls'] { return this.primitiveForm.controls; }
-
     /** initialize Forms @public */
     public initializeForm(): void {
         this.primitiveForm = this.formBuilder.group({
             primitive: [null, [Validators.required]],
-            vnf_member_index: [null, [Validators.required]],
+            member_vnf_index: [null, [Validators.required]],
             vdu_id: [null, [Validators.required]],
             kdu_name: [null, [Validators.required]],
             primitive_params: this.formBuilder.array([this.primitiveParamsBuilder()])
@@ -194,7 +195,7 @@
         this.objectPrimitiveParams = {};
         this.sharedService.cleanForm(this.primitiveForm);
         if (this.primitiveForm.invalid) { return; } // Proceed, onces form is valid
-        this.primitiveForm.value.primitive_params.forEach((params: NSPrimitiveParams) => {
+        this.primitiveForm.value.primitive_params.forEach((params: NSPrimitiveParams): void => {
             if (params.primitive_params_name !== null && params.primitive_params_value !== '') {
                 this.objectPrimitiveParams[params.primitive_params_name] = params.primitive_params_value;
             }
@@ -206,17 +207,17 @@
         };
         if (this.primitiveType === 'VNF_Primitive') {
             // tslint:disable-next-line: no-string-literal
-            primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index;
+            primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index;
         }
         if (this.primitiveType === 'VDU_Primitive') {
             // tslint:disable-next-line: no-string-literal
-            primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index;
+            primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index;
             // tslint:disable-next-line: no-string-literal
             primitiveParamsPayLoads['vdu_id'] = this.primitiveForm.value.vdu_id;
         }
         if (this.primitiveType === 'KDU_Primitive') {
             // tslint:disable-next-line: no-string-literal
-            primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index;
+            primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index;
             // tslint:disable-next-line: no-string-literal
             primitiveParamsPayLoads['kdu_name'] = this.primitiveForm.value.kdu_name;
         }
@@ -224,23 +225,23 @@
             url: environment.NSDINSTANCES_URL + '/' + this.nsdId + '/action'
         };
         this.isLoadingResults = true;
-        this.restService.postResource(apiURLHeader, primitiveParamsPayLoads).subscribe((result: {}) => {
+        this.restService.postResource(apiURLHeader, primitiveParamsPayLoads).subscribe((result: {}): void => {
             this.activeModal.dismiss();
             this.notifierService.notify('success', this.translateService.instant('PAGE.NSPRIMITIVE.EXECUTEDSUCCESSFULLY'));
             this.isLoadingResults = false;
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
             this.isLoadingResults = false;
             this.restService.handleError(error, 'post');
         });
     }
     /** Primitive type change event @public */
-    public primitiveTypeChange(data: { value: string }): void {
+    public primitiveTypeChange(data: PRIMITIVETYPES): void {
         this.primitiveList = [];
         this.primitiveParameter = [];
         this.initializeForm();
         if (data.value === 'NS_Primitive') {
             this.getNSInfo(this.params.name);
-            this.setUpdateValueandValidation('vnf_member_index');
+            this.setUpdateValueandValidation('member_vnf_index');
         }
         if (data.value === 'VNF_Primitive' || data.value === 'KDU_Primitive' || data.value === 'NS_Primitive') {
             this.setUpdateValueandValidation('vdu_id');
@@ -250,11 +251,11 @@
         }
     }
     /** Member index change event */
-    public indexChange(data: {}, getType?: string): void {
+    public indexChange(data: VNFPROFILE, getType?: string): void {
         this.getFormControl('vdu_id').setValue(null);
         this.getFormControl('kdu_name').setValue(null);
-        if (data) {
-            this.getVnfdInfo(data['vnfd-id-ref'], getType);
+        if (data['vnfd-id'] !== null) {
+            this.getVnfdInfo(data['vnfd-id'], getType);
         } else {
             this.primitiveList = [];
             this.getFormControl('primitive').setValue(null);
@@ -266,7 +267,7 @@
         this.primitiveList = data[selectedType + '-configuration']['config-primitive'];
     }
     /** Primivtive change event */
-    public primitiveChange(data: { parameter: {}[] }): void {
+    public primitiveChange(data: PRIMITIVEDATA): void {
         this.primitiveParameter = [];
         const formArr: FormArray = this.getFormControl('primitive_params') as FormArray;
         formArr.controls = [];
@@ -276,11 +277,13 @@
         }
     }
     /** Generate vdu section @public */
-    public generateVDUData(vduData: VDUPRIMITIVELEVEL): VDUPRIMITIVELEVEL {
+    public generateVDUData(vduData: VDUPROFILE, vduConfig: VDUCONFIG[]): VDUPROFILE {
+        const getVDUConfig: VDUCONFIG = vduConfig.filter((itemData: VDUCONFIG): boolean =>
+            itemData.id === vduData['vdu-configuration-id'])[0];
         return {
             id: vduData.id,
-            name: vduData.name,
-            'vdu-configuration': vduData['vdu-configuration']
+            name: vduData.id,
+            'vdu-configuration': getVDUConfig
         };
     }
     /** Generate kdu section @public */
@@ -297,13 +300,13 @@
         this.getFormControl(formName).updateValueAndValidity();
     }
     /** Update primitive value based on parameter */
-    private updatePrimitive(primitive: { parameter: {}[] }): void {
+    private updatePrimitive(primitive: PRIMITIVEDATA): void {
         if (primitive.parameter) {
             this.primitiveParameter = primitive.parameter;
         } else {
             this.primitiveParameter = [];
             const formArr: AbstractControl[] = this.getControls();
-            formArr.forEach((formGp: FormGroup) => {
+            formArr.forEach((formGp: FormGroup): void => {
                 formGp.controls.primitive_params_name.setValidators([]);
                 formGp.controls.primitive_params_name.updateValueAndValidity();
                 formGp.controls.primitive_params_value.setValidators([]);
@@ -316,24 +319,33 @@
         this.primitiveList = [];
         this.primitiveParameter = [];
         this.getFormControl('primitive').setValue(null);
-        const apiUrl: string = environment.VNFPACKAGES_URL + '?short-name=' + vnfdRef;
+        const apiUrl: string = environment.VNFPACKAGES_URL + '?product-name=' + vnfdRef;
         this.isLoadingResults = true;
         this.restService.getResource(apiUrl)
-            .subscribe((vnfdInfo: {}) => {
-                if (vnfdInfo[0]['vnf-configuration'] !== undefined && vnfdInfo[0]['vnf-configuration']) {
+            .subscribe((vnfdInfo: VNFD[]): void => {
+                const vnfInstances: VNFD = vnfdInfo[0];
+                if (!isNullOrUndefined(vnfInstances.df) && !isNullOrUndefined(vnfInstances['vnf-configuration'])) {
                     this.getFormControl('vdu_id').setValidators([]);
                     this.getFormControl('kdu_name').setValidators([]);
-                    this.primitiveList = vnfdInfo[0]['vnf-configuration']['config-primitive'];
+                    vnfInstances.df.forEach((df: DF): void => {
+                        if (df['vnf-configuration-id'] !== undefined) {
+                            const vnfprimitiveList: VNFCONFIG = vnfInstances['vnf-configuration']
+                                .filter((itemData: VNFCONFIG): boolean => itemData.id === df['vnf-configuration-id'])[0];
+                            this.primitiveList = vnfprimitiveList['config-primitive'];
+                        }
+                    });
                 }
                 if (getType === 'VDU_Primitive') {
                     this.kduList = [];
                     this.vduList = [];
                     this.primitiveList = [];
-                    if (!isNullOrUndefined(vnfdInfo[0].vdu)) {
-                        vnfdInfo[0].vdu.forEach((vduData: VDUPRIMITIVELEVEL) => {
-                            if (vduData['vdu-configuration']) {
-                                const vduDataObj: VDUPRIMITIVELEVEL = this.generateVDUData(vduData);
-                                this.vduList.push(vduDataObj);
+                    if (!isNullOrUndefined(vnfInstances.df) && !isNullOrUndefined(vnfInstances['vdu-configuration'])) {
+                        vnfInstances.df.forEach((df: DF): void => {
+                            if (df['vdu-profile'] !== undefined) {
+                                df['vdu-profile'].forEach((element: VDUPROFILE): void => {
+                                    const vduDataObj: VDUPROFILE = this.generateVDUData(element, vnfInstances['vdu-configuration']);
+                                    this.vduList.push(vduDataObj);
+                                });
                             }
                         });
                     }
@@ -342,8 +354,8 @@
                     this.kduList = [];
                     this.vduList = [];
                     this.primitiveList = [];
-                    if (!isNullOrUndefined(vnfdInfo[0].kdu)) {
-                        vnfdInfo[0].kdu.forEach((kduData: KDUPRIMITIVELEVEL) => {
+                    if (!isNullOrUndefined(vnfInstances.kdu)) {
+                        vnfInstances.kdu.forEach((kduData: KDUPRIMITIVELEVEL): void => {
                             if (kduData['kdu-configuration']) {
                                 const kduDataObj: KDUPRIMITIVELEVEL = this.generateKDUData(kduData);
                                 this.kduList.push(kduDataObj);
@@ -352,7 +364,7 @@
                     }
                 }
                 this.isLoadingResults = false;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.isLoadingResults = false;
                 this.restService.handleError(error, 'get');
             });
@@ -362,10 +374,10 @@
         this.primitiveList = [];
         this.primitiveParameter = [];
         this.getFormControl('primitive').setValue(null);
-        const apiUrl: string = environment.NSDESCRIPTORS_URL + '?short-name=' + nsdRef;
+        const apiUrl: string = environment.NSDESCRIPTORS_URL + '?name=' + nsdRef;
         this.isLoadingResults = true;
         this.restService.getResource(apiUrl)
-            .subscribe((nsdInfo: {}) => {
+            .subscribe((nsdInfo: {}): void => {
                 if (!isNullOrUndefined(nsdInfo[0]['ns-configuration'])) {
                     this.primitiveList = !isNullOrUndefined(nsdInfo[0]['ns-configuration']['config-primitive']) ?
                         nsdInfo[0]['ns-configuration']['config-primitive'] : [];
@@ -373,7 +385,7 @@
                     this.primitiveList = [];
                 }
                 this.isLoadingResults = false;
-            }, (error: ERRORDATA) => {
+            }, (error: ERRORDATA): void => {
                 this.isLoadingResults = false;
                 this.restService.handleError(error, 'get');
             });
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.html b/src/app/instances/ns-topology/NSTopologyComponent.html
index 0a3051c..d500535 100644
--- a/src/app/instances/ns-topology/NSTopologyComponent.html
+++ b/src/app/instances/ns-topology/NSTopologyComponent.html
@@ -62,10 +62,6 @@
                         <table class="table table-bordered text-dark custom-table">
                             <tbody>
                                 <tr>
-                                    <td>short-name</td>
-                                    <td>{{(virtualLink.shortName)?virtualLink.shortName:'-'}}</td>
-                                </tr>
-                                <tr>
                                     <td>Name</td>
                                     <td>{{(virtualLink.name)?virtualLink.name:'-'}}</td>
                                 </tr>
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.ts b/src/app/instances/ns-topology/NSTopologyComponent.ts
index 44c6309..668f251 100644
--- a/src/app/instances/ns-topology/NSTopologyComponent.ts
+++ b/src/app/instances/ns-topology/NSTopologyComponent.ts
@@ -27,7 +27,7 @@
 import * as d3 from 'd3';
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
-import { VNFDCONNECTIONPOINTREF } from 'NSDModel';
+import { CCI, DF, VLC, VNFPROFILE } from 'NSDModel';
 import { COMPOSERNODES, CONNECTIONPOINT, NSD, NSDVLD, NSINFO, NSInstanceDetails, NSINSTANCENODES, VLINFO, VNFRINFO } from 'NSInstanceModel';
 import { GRAPHDETAILS, Tick, TickPath } from 'NSTopologyModel';
 import { RestService } from 'src/services/RestService';
@@ -159,7 +159,7 @@
       this.force.stop();
     }
     this.forceSimulationActive = alreadyFixedIsActive;
-    this.nodes.forEach((d: COMPOSERNODES) => {
+    this.nodes.forEach((d: COMPOSERNODES): void => {
       d.fx = (alreadyFixedIsActive) ? null : d.x;
       d.fy = (alreadyFixedIsActive) ? null : d.y;
     });
@@ -211,49 +211,48 @@
   }
   /** Prepare all the information for node creation @private */
   private generateData(): void {
-    this.restService.getResource(environment.NSINSTANCESCONTENT_URL + '/' + this.nsIdentifier).subscribe((nsData: NSInstanceDetails) => {
-      this.nsData = nsData;
-      this.nsInfo = {
-        nsInstanceID: nsData._id,
-        nsName: nsData.name,
-        nsOperationalStatus: nsData['operational-status'],
-        nsConfigStatus: nsData['config-status'],
-        nsDetailedStatus: nsData['detailed-status'],
-        nsResourceOrchestrator: nsData['resource-orchestrator']
-      };
-      if (this.nsData['constituent-vnfr-ref'] !== undefined) {
-        this.generateVNFRCPNodes();
-      }
-      if (this.nsData.vld !== undefined) {
-        this.generateVLDNetworkNodes();
-      }
-      setTimeout(() => {
-        this.pushAllNodes();
-        this.generateVNFDCP();
-        this.generateVLDCP();
+    this.restService.getResource(environment.NSINSTANCESCONTENT_URL + '/' + this.nsIdentifier)
+      .subscribe((nsData: NSInstanceDetails): void => {
+        this.nsData = nsData;
+        this.nsInfo = {
+          nsInstanceID: nsData._id,
+          nsName: nsData.name,
+          nsOperationalStatus: nsData['operational-status'],
+          nsConfigStatus: nsData['config-status'],
+          nsDetailedStatus: nsData['detailed-status'],
+          nsResourceOrchestrator: nsData['resource-orchestrator']
+        };
+        if (this.nsData['constituent-vnfr-ref'] !== undefined) {
+          this.generateVNFRCPNodes();
+        }
+        if (this.nsData.vld !== undefined) {
+          this.generateVLDNetworkNodes();
+        }
+        setTimeout((): void => {
+          this.pushAllNodes();
+          this.generateVNFDCP();
+          this.generateVLDCP();
+          this.isLoadingResults = false;
+          this.createNode(this.nodes, this.links);
+        }, this.TIMEOUT);
+      }, (error: ERRORDATA): void => {
         this.isLoadingResults = false;
-        this.createNode(this.nodes, this.links);
-      }, this.TIMEOUT);
-    }, (error: ERRORDATA) => {
-      this.isLoadingResults = false;
-      if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
-        this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
-      } else {
-        this.restService.handleError(error, 'get');
-      }
-    });
+        if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
+          this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
+        } else {
+          this.restService.handleError(error, 'get');
+        }
+      });
   }
-
   /** Fetching all the VNFR Information @private */
   private generateVNFRCPNodes(): void {
-    this.nsData['constituent-vnfr-ref'].forEach((vnfdrID: string) => {
-      this.restService.getResource(environment.VNFINSTANCES_URL + '/' + vnfdrID).subscribe((vndfrDetail: NSD) => {
+    this.nsData['constituent-vnfr-ref'].forEach((vnfdrID: string): void => {
+      this.restService.getResource(environment.VNFINSTANCES_URL + '/' + vnfdrID).subscribe((vndfrDetail: NSD): void => {
         this.nodes.push({
           id: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'],
           nodeTypeRef: 'vnfd',
           cp: vndfrDetail['connection-point'],
           vdur: vndfrDetail.vdur,
-          vld: vndfrDetail.vld,
           nsID: vndfrDetail['nsr-id-ref'],
           vnfdID: vndfrDetail['vnfd-id'],
           vimID: vndfrDetail['vim-account-id'],
@@ -264,7 +263,7 @@
           selectorId: 'nsInst-' + vndfrDetail.id
         });
         // Fetching all the connection point of VNF & Interface
-        vndfrDetail['connection-point'].forEach((cp: CONNECTIONPOINT) => {
+        vndfrDetail['connection-point'].forEach((cp: CONNECTIONPOINT): void => {
           this.nodes.push({
             id: cp.name + ':' + vndfrDetail['member-vnf-index-ref'],
             vndfCPRef: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'],
@@ -272,32 +271,29 @@
             name: cp.name
           });
         });
-      }, (error: ERRORDATA) => {
+      }, (error: ERRORDATA): void => {
         this.restService.handleError(error, 'get');
       });
     });
   }
-
   /** Fetching all the VLD/Network Information @private */
   private generateVLDNetworkNodes(): void {
     this.nsdData = this.nsData.nsd;
-    this.nsdData.vld.forEach((ref: NSDVLD) => {
+    this.nsdData['virtual-link-desc'].forEach((ref: NSDVLD): void => {
       this.nodes.push({
         id: ref.id,
         nodeTypeRef: 'vld',
-        name: ref.name,
+        name: ref.id,
         type: ref.type,
-        vnfdCP: ref['vnfd-connection-point-ref'],
+        vnfdCP: this.nsdData.df,
         vimNetworkName: ref['vim-network-name'],
-        shortName: ref['short-name'],
         selectorId: 'nsInst-' + ref.id
       });
     });
   }
-
   /** Pushing connection points of path/links nodes @private */
   private pushAllNodes(): void {
-    this.nodes.forEach((nodeList: NSINSTANCENODES) => {
+    this.nodes.forEach((nodeList: NSINSTANCENODES): void => {
       if (nodeList.nodeTypeRef === 'vnfd') {
         this.vnfdNodes.push(nodeList);
       } else if (nodeList.nodeTypeRef === 'vld') {
@@ -307,13 +303,12 @@
       }
     });
   }
-
   /** Get CP position based on vndf @private */
   private generateVNFDCP(): void {
-    this.vnfdNodes.forEach((list: NSINSTANCENODES) => {
-      const vndfPos: number = this.nodes.map((e: NSINSTANCENODES) => { return e.id; }).indexOf(list.id);
+    this.vnfdNodes.forEach((list: NSINSTANCENODES): void => {
+      const vndfPos: number = this.nodes.map((e: NSINSTANCENODES): string => { return e.id; }).indexOf(list.id);
       this.cpCount = 0;
-      this.nodes.forEach((res: NSINSTANCENODES) => {
+      this.nodes.forEach((res: NSINSTANCENODES): void => {
         if (res.nodeTypeRef === 'cp' && res.vndfCPRef === list.id) {
           this.links.push({ source: this.nodes[vndfPos], target: this.nodes[this.cpCount] });
         }
@@ -321,44 +316,49 @@
       });
     });
   }
-
   /** Get CP position based on vld @private */
   private generateVLDCP(): void {
     let vldPos: number = 0;
-    this.vldNodes.forEach((list: NSINSTANCENODES) => {
+    this.vldNodes.forEach((list: NSINSTANCENODES): void => {
       if (!isNullOrUndefined(list.vnfdCP)) {
-        list.vnfdCP.forEach((cpRef: VNFDCONNECTIONPOINTREF) => {
-          this.cpCount = 0;
-          this.nodes.forEach((res: NSINSTANCENODES) => {
-            if (res.nodeTypeRef === 'cp' && res.id === cpRef['vnfd-connection-point-ref'] + ':' + cpRef['member-vnf-index-ref']) {
-              this.links.push({ source: this.nodes[vldPos], target: this.nodes[this.cpCount] });
-            }
-            this.cpCount++;
+        list.vnfdCP.forEach((cpRef: DF): void => {
+          cpRef['vnf-profile'].forEach((vnfProfile: VNFPROFILE): void => {
+            vnfProfile['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => {
+              resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => {
+                this.cpCount = 0;
+                this.nodes.forEach((res: NSINSTANCENODES): void => {
+                  if (res.nodeTypeRef === 'cp' &&
+                    res.id === resultCCI['constituent-cpd-id'] + ':' + resultCCI['constituent-base-element-id']) {
+                    this.links.push({ source: this.nodes[vldPos], target: this.nodes[this.cpCount] });
+                  }
+                  this.cpCount++;
+                });
+              });
+            });
           });
         });
         vldPos++;
       }
     });
   }
-
   /** Node is created and render at D3 region @private */
   private createNode(nodes: NSINSTANCENODES[], links: {}[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     d3.selectAll('svg#graphContainer > *').remove();
-    d3.select(window).on('keydown', () => { this.keyDown(); });
-    d3.select(window).on('keyup', () => { this.keyUp(); });
+    d3.select(window).on('keydown', (): void => { this.keyDown(); });
+    d3.select(window).on('keyup', (): void => { this.keyUp(); });
     this.svg = d3.select('#graphContainer')
       .attr('oncontextmenu', 'return false;')
       .attr('width', graphContainerAttr.width)
       .attr('height', graphContainerAttr.height);
     this.force = d3.forceSimulation()
       .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength))
-      .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance))
+      .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance))
       .force('center', d3.forceCenter(graphContainerAttr.width / graphContainerAttr.forcex,
         graphContainerAttr.height / graphContainerAttr.forcey))
       .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex))
       .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey))
-      .on('tick', () => { this.tick(); });
+      .on('tick', (): void => { this.tick(); });
     // handles to link and node element groups
     this.path = this.svg.append('svg:g').selectAll('path');
     this.network = this.svg.append('svg:g').selectAll('network');
@@ -366,12 +366,11 @@
     this.circle = this.svg.append('svg:g').selectAll('circle');
     this.restart(nodes, links);
   }
-
   /** Update force layout (called automatically each iteration) @private */
   private tick(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     // draw directed edges with proper padding from node centers
-    this.path.attr('class', 'link').attr('d', (d: Tick) => {
+    this.path.attr('class', 'link').attr('d', (d: Tick): string => {
       const deltaX: number = d.target.x - d.source.x;
       const deltaY: number = d.target.y - d.source.y;
       const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -385,29 +384,27 @@
       const targetY: number = d.target.y - (targetPadding * normY);
       return `M${sourceX},${sourceY}L${targetX},${targetY}`;
     });
-    this.network.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
-    this.square.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
-    this.circle.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
+    this.network.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
+    this.square.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
+    this.circle.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
   }
-
   /** Update graph (called when needed) @private */
   private restart(nodes: NSINSTANCENODES[], links: {}[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     this.path = this.path.data(links);
     const vnfdNodes: {}[] = []; const vldNodes: {}[] = []; const cpNodes: {}[] = []; // NB: Nodes are known by id, not by index!
-    nodes.forEach((nodeList: NSINSTANCENODES) => {
+    nodes.forEach((nodeList: NSINSTANCENODES): void => {
       if (nodeList.nodeTypeRef === 'vnfd') { vnfdNodes.push(nodeList); }
       else if (nodeList.nodeTypeRef === 'vld') { vldNodes.push(nodeList); }
       else if (nodeList.nodeTypeRef === 'cp') { cpNodes.push(nodeList); }
     });
-    this.square = this.square.data(vnfdNodes, (d: { id: number }) => d.id);
-    this.network = this.network.data(vldNodes, (d: { id: number }) => d.id);
-    this.circle = this.circle.data(cpNodes, (d: { id: number }) => d.id);
+    this.square = this.square.data(vnfdNodes, (d: COMPOSERNODES): string => d.id);
+    this.network = this.network.data(vldNodes, (d: COMPOSERNODES): string => d.id);
+    this.circle = this.circle.data(cpNodes, (d: COMPOSERNODES): string => d.id);
     this.resetAndCreateNodes();
     this.force.nodes(nodes).force('link').links(links); //Set the graph in motion
     this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
   }
-
   /** Rest and create nodes @private */
   private resetAndCreateNodes(): void {
     this.path.exit().remove();
@@ -424,7 +421,6 @@
     this.path = gPath.merge(this.path);
     this.circle = this.gCircle.merge(this.circle);
   }
-
   /** Events handles when Shift Click to perform create cp @private */
   // tslint:disable-next-line: no-any
   private singleClick(nodeSelected: any, d: COMPOSERNODES): void {
@@ -470,16 +466,16 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/VNFD.svg')
-      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gSquare, d); this.onNodeClickToggleSidebar(); });
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.gSquare, d); this.onNodeClickToggleSidebar(); });
     this.gSquare.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.id);
+      .text((d: COMPOSERNODES): string => d.id);
   }
-
   /** Settings all the network attributes of nodes @private */
   private getgNetwork(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
@@ -489,16 +485,16 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/VL.svg')
-      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gNetwork, d); this.onNodeClickToggleSidebar(); });
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.gNetwork, d); this.onNodeClickToggleSidebar(); });
     this.gNetwork.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.name);
+      .text((d: COMPOSERNODES): string => d.name);
   }
-
   /** Settings all the connection point attributes of nodes @private */
   private getgCircle(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
@@ -508,14 +504,22 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
+      .call(this.onDragDrop())
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/CP.svg');
     this.gCircle.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.name);
+      .text((d: COMPOSERNODES): string => d.name);
   }
-
+  /** drag event @private */
+  // tslint:disable-next-line: no-any
+  private onDragDrop(): any {
+    return d3.drag().filter(this.dragFilter)
+      .on('start', this.dragstarted)
+      .on('drag', this.dragged)
+      .on('end', this.dragended);
+  }
   /** Key press event @private */
   private keyDown(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
@@ -545,6 +549,10 @@
       this.svg.classed('ctrl', false);
     }
   }
+  /** Events handles when to drag using filter for the keys @private */
+  private dragFilter(): boolean {
+    return d3.event.ctrlKey && !d3.event.button;
+  }
   /** Events handles when dragstarted @private */
   private dragstarted(d: COMPOSERNODES): void {
     d.fx = d.x;
diff --git a/src/app/instances/vnf-instances/VNFInstancesComponent.ts b/src/app/instances/vnf-instances/VNFInstancesComponent.ts
index d829ee2..fdfe9fa 100644
--- a/src/app/instances/vnf-instances/VNFInstancesComponent.ts
+++ b/src/app/instances/vnf-instances/VNFInstancesComponent.ts
@@ -141,7 +141,7 @@
         this.isLoadingResults = true;
         this.restService.getResource(environment.VNFINSTANCES_URL).subscribe((vnfInstancesData: VNFInstanceDetails[]) => {
             this.vnfInstanceData = [];
-            vnfInstancesData.forEach((vnfInstanceData: VNFInstanceDetails) => {
+            vnfInstancesData.forEach((vnfInstanceData: VNFInstanceDetails): void => {
                 const vnfDataObj: {} =
                 {
                     VNFD: vnfInstanceData['vnfd-ref'],
diff --git a/src/app/layouts/header/HeaderComponent.html b/src/app/layouts/header/HeaderComponent.html
index a9ff5ac..c7b3bae 100644
--- a/src/app/layouts/header/HeaderComponent.html
+++ b/src/app/layouts/header/HeaderComponent.html
@@ -15,13 +15,16 @@
 
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
-<span class="d-none px-3 py-2 text-center text-bold bg-primary text-white">Here is a newer {{'APPVERSION' | translate}} {{PACKAGEVERSION}}
-    of OSM!</span>
+<span [ngClass]="toShowNewTag ? 'd-block': 'd-none'" class="px-3 py-2 text-center text-bold bg-secondary text-white">
+    {{'NEWVERSIONTAG' | translate:{appVersion: sharedService.osmVersion} }}
+    <button type="button" class="close closeVersion" aria-label="Close" (click)="closeVersion();">
+        <i class="fas fa-times text-white"></i>
+    </button>
+</span>
 
 <nav class="navbar navbar-expand-md sticky-top bg-white" role="navigation">
     <a class="navbar-brand">
-        <img routerLink="/" src="assets/images/logo.png" class="osm-logo"
-            alt="OPEN SOURCE MANO" draggable="false">
+        <img routerLink="/" src="assets/images/logo.png" class="osm-logo" alt="OPEN SOURCE MANO" draggable="false">
     </a>
     <div class="nav navbar-nav nav-flex-icons ml-auto">
         <ul class="navbar-nav cursor-pointer" ngbDropdown display="dynamic" placement="bottom-right">
@@ -61,7 +64,8 @@
                         <i class="fas fa-sign-out-alt"></i>
                     </a>
                     <div class="custom-divider"></div>
-                    <a *ngIf="sharedService.osmVersion" ngbDropdownItem class="dropdown-item project-item osm-version" href="javascript:void(0);">
+                    <a *ngIf="sharedService.osmVersion" ngbDropdownItem class="dropdown-item project-item osm-version"
+                        href="javascript:void(0);">
                         <span>{{'OSMVERSION' | translate}} {{sharedService.osmVersion}}</span>
                     </a>
                 </div>
diff --git a/src/app/layouts/header/HeaderComponent.ts b/src/app/layouts/header/HeaderComponent.ts
index 4d7f3b1..b496ff1 100644
--- a/src/app/layouts/header/HeaderComponent.ts
+++ b/src/app/layouts/header/HeaderComponent.ts
@@ -26,7 +26,6 @@
 import { ProjectService } from 'ProjectService';
 import { Observable } from 'rxjs';
 import { SharedService } from 'SharedService';
-import { ProjectRoleMappings, UserDetail } from 'UserModel';
 import { UserSettingsComponent } from 'UserSettingsComponent';
 
 /**
@@ -64,6 +63,9 @@
     /** Contains all methods related to shared @public */
     public sharedService: SharedService;
 
+    /** Property contains to show new version tag shared @public */
+    public toShowNewTag: Boolean = false;
+
     /** Utilizes auth service for any auth operations @private */
     private authService: AuthenticationService;
 
@@ -85,13 +87,19 @@
     public ngOnInit(): void {
         this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false;
         this.selectedProject = this.authService.ProjectName;
-        this.authService.ProjectName.subscribe((projectNameFinal: string) => {
+        this.authService.ProjectName.subscribe((projectNameFinal: string): void => {
             this.getSelectedProject = projectNameFinal;
         });
         this.username$ = this.authService.username;
         this.projectService.setHeaderProjects();
         this.projectList$ = this.projectService.projectList;
         this.PACKAGEVERSION = environment.packageVersion;
+        const getLocalStorageVersion: string = localStorage.getItem('osmVersion');
+        if (getLocalStorageVersion === null) {
+            this.showNewVersion();
+        } else if (getLocalStorageVersion !== this.sharedService.osmVersion) {
+            this.showNewVersion();
+        }
     }
 
     /** Logout function  @public */
@@ -99,6 +107,17 @@
         this.authService.logout();
     }
 
+    /** Show Version function  @public */
+    public showNewVersion(): void {
+        this.toShowNewTag = true;
+    }
+
+    /** Close Version and add in local storage  @public */
+    public closeVersion(): void {
+        this.toShowNewTag = false;
+        localStorage.setItem('osmVersion', this.sharedService.osmVersion);
+    }
+
     /** Implementation of model for UserSettings options.@public */
     public userSettings(): void {
         this.modalService.open(UserSettingsComponent, { backdrop: 'static' });
diff --git a/src/app/packages/ns-packages/NSPackagesComponent.ts b/src/app/packages/ns-packages/NSPackagesComponent.ts
index 5dc36e7..7302ea4 100644
--- a/src/app/packages/ns-packages/NSPackagesComponent.ts
+++ b/src/app/packages/ns-packages/NSPackagesComponent.ts
@@ -127,11 +127,12 @@
     public generateColumns(): void {
         this.columnLists = {
             name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
-            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '30%' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            version: { title: this.translateService.instant('VERSION'), width: '10%' },
+            designer: { title: this.translateService.instant('DESIGNER'), width: '15%' },
             description: { title: this.translateService.instant('DESCRIPTION'), width: '25%' },
-            version: { title: this.translateService.instant('VERSION'), width: '15%' },
             Actions: {
-                name: 'Actions', width: '15%', filter: false, sort: false, type: 'custom',
+                name: 'Actions', width: '20%', filter: false, sort: false, type: 'custom',
                 title: this.translateService.instant('ACTIONS'),
                 valuePrepareFunction: (cell: NSData, row: NSData): NSData => row, renderComponent: NsPackagesActionComponent
             }
@@ -214,7 +215,8 @@
             name: nsdpackagedata.name,
             identifier: nsdpackagedata._id,
             description: nsdpackagedata.description,
-            version: nsdpackagedata.version
+            version: nsdpackagedata.version,
+            designer: nsdpackagedata.designer !== undefined ? nsdpackagedata.designer : '-'
         };
     }
 
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
index 4e78c16..c4ec96d 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
@@ -33,45 +33,38 @@
           <div class="col-12 p-0">
             <form autocomplete="off">
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
-                    [(ngModel)]="vnfdPackageDetails.shortName">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'VENDOR' | translate }}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="{{ 'VENDOR' | translate }}" name="vendor"
-                    [(ngModel)]="vnfdPackageDetails.vendor">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
-                <div class="col-sm-8 p-0">
-                  <textarea type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
-                    name="description" [(ngModel)]="vnfdPackageDetails.description"></textarea>
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
-                    [(ngModel)]="vnfdPackageDetails.version">
-                </div>
-              </div>
-              <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
-                    [(ngModel)]="vnfdPackageDetails.id">
+                    [(ngModel)]="nsPackageDetails.id">
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="vnfdPackageDetails.name">
+                    [(ngModel)]="nsPackageDetails.name">
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+                    name="description" [(ngModel)]="nsPackageDetails.description"></textarea>
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
+                    [(ngModel)]="nsPackageDetails.version">
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
+                    [(ngModel)]="nsPackageDetails.designer">
                 </div>
               </div>
               <button type="button" class="btn btn-primary" (click)="saveNSD()" placement="top"
@@ -87,43 +80,23 @@
           <div class="col-12 p-0">
             <form autocomplete="off">
               <div class="form-group row">
-                <label class="col-sm-4 p-0 col-form-label">{{ 'NAME' | translate }}</label>
+                <label class="col-sm-4 p-0 col-form-label">{{ 'ID' | translate }}</label>
                 <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="vlDetails.name">
+                  <input type="text" readonly class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+                    [(ngModel)]="virtualLinkDesc.id">
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.MGMTNETWORK' | translate}}</label>
                 <div class="col-sm-8 p-0">
-                  <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="vlDetails['mgmt-network']">
+                  <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="virtualLinkDesc['mgmt-network']">
                     <option [value]="true">True</option>
                     <option [value]="false">False</option>
                   </select>
                 </div>
               </div>
-              <div class="form-group row">
-                <label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.VIMNETWORKNAME' | translate}}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="Vim network name" name="vim-network-name"
-                    [(ngModel)]="vlDetails['vim-network-name']">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 p-0 col-form-label">{{'TYPE' | translate}}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="Type" name="type" [(ngModel)]="vlDetails.type">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 p-0 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8 p-0">
-                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
-                    [(ngModel)]="vlDetails.id">
-                </div>
-              </div>
               <button type="button" class="btn btn-primary" placement="top" ngbTooltip="Save"
-                (click)="saveVL(vlDetails.id)">
+                (click)="saveVL(virtualLinkDesc.id)">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -136,12 +109,12 @@
             <table class="table table-bordered text-dark custom-table">
               <tbody>
                 <tr>
-                  <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.MEMBER-VNF-INDEX' | translate}}</td>
-                  <td>{{ vnfData['member-vnf-index'] }}</td>
+                  <th scope="row">id</th>
+                  <td>{{ vnfData.id }}</td>
                 </tr>
                 <tr>
-                  <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
-                  <td>{{ vnfData['vnfd-id-ref'] }}</td>
+                  <th scope="row">vnfd-id</th>
+                  <td>{{ vnfData['vnfd-id'] }}</td>
                 </tr>
               </tbody>
             </table>
@@ -154,20 +127,24 @@
             <table class="table table-bordered text-dark custom-table">
               <tbody>
                 <tr>
-                  <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VLD-ID' | translate}}</td>
-                  <td>{{ vlDetails['name'] }}</td>
+                  <th scope="row">id</th>
+                  <td>{{ vnfData.id }}</td>
                 </tr>
                 <tr>
-                  <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-CP-REF' | translate}}</td>
-                  <td>{{ cpData['vnfd-connection-point-ref'] }}</td>
+                  <th scope="row">vnfd-id</th>
+                  <td>{{ vnfData['vnfd-id'] }}</td>
                 </tr>
                 <tr>
-                  <td>{{'MEMBERINDEX' | translate}}</td>
-                  <td>{{ cpData['member-vnf-index-ref'] }}</td>
+                  <th scope="row">constituent-base-element-id</th>
+                  <td>{{ cpData['constituent-base-element-id'] }}</td>
                 </tr>
                 <tr>
-                  <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
-                  <td>{{ cpData['vnfd-id-ref'] }}</td>
+                  <th scope="row">constituent-cpd-id</th>
+                  <td>{{ cpData['constituent-cpd-id'] }}</td>
+                </tr>
+                <tr>
+                  <th scope="row">virtual-link-profile-id</th>
+                  <td>{{ virtualLinkProfileID }}</td>
                 </tr>
               </tbody>
             </table>
@@ -211,9 +188,9 @@
             <ul class="list-group list-group-flush dragable scroll-box">
               <li id="list['id']" class="list-group-item" draggable="true" (dragstart)="drag($event)"
                 [attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
-              container="body" ngbTooltip="{{ list['short-name'] }}">
+              container="body" ngbTooltip="{{ list['product-name'] }}">
                 <img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
-                &nbsp;<span class="span-overflow-text font-weight-bold">{{ list['short-name'] }}</span>
+                &nbsp;<span class="span-overflow-text font-weight-bold">{{ list['product-name'] }}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
             </ul>
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
index 687f4fa..7ef8394 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file NS Compose Component
  */
-// tslint:disable: no-increment-decrement
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -32,11 +31,20 @@
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
 import * as jsyaml from 'js-yaml';
-import { COMPOSERNODES, CONSTITUENTVNFD, GRAPHDETAILS, NSDDetails, Tick, TickPath, VLD, VNFDCONNECTIONPOINTREF } from 'NSDModel';
+import {
+  CCI,
+  COMPOSERNODES,
+  DF,
+  GRAPHDETAILS,
+  NSData,
+  NSDATACREATION,
+  NSDDetails,
+  Tick, TickPath, VLC, VLD, VNFPROFILE
+} from 'NSDModel';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
 import { isNullOrUndefined } from 'util';
-import { VNFData, VNFDDetails } from 'VNFDModel';
+import { VNFD, VNFData } from 'VNFDModel';
 
 /**
  * Creating component
@@ -57,14 +65,11 @@
   /** dataService to pass the data from one component to another @public */
   public dataService: DataService;
   /** Contains VNFD Informations @public */
-  public vnfdPackageDetails: VNFData = { identifier: '', shortName: '', vendor: '', description: '', version: '', id: '', name: '' };
+  public nsPackageDetails: NSData = { id: '', name: '', description: '', version: '', designer: '' };
   /** Contains VL Details @public */
-  public vlDetails: VLD = {
-    name: '',
-    'mgmt-network': true,
-    'vim-network-name': '',
-    type: '',
-    id: ''
+  public virtualLinkDesc: VLD = {
+    id: '',
+    'mgmt-network': true
   };
   /** Contains the information of the type of modification @public  */
   public putType: string;
@@ -87,19 +92,21 @@
   /** Contains the node information of VNF @public */
   public vnfNodes: {}[] = [];
   /** contains the VNF Details @public */
-  public vnfData: CONSTITUENTVNFD;
+  public vnfData: VNFPROFILE;
+  /** contains the Virtual Link connectivity Details @public */
+  public virtualLinkProfileID: string;
   /** Need to show the VNF Details @public */
   public isShowVNFDetails: boolean = false;
   /** Contains the node information of CP @public */
   public cpNodes: {}[] = [];
   /** Need to show the CP Details */
-  public cpData: VNFDCONNECTIONPOINTREF;
+  public cpData: CCI;
   /** Need to show the VNF Details @public */
   public isShowCPDetails: boolean = false;
   /** random number count @public */
   public randomNumberLength: number;
   /** Contains the vnfd information @public */
-  public vnfList: VNFDDetails[] = [];
+  public vnfList: VNFD[] = [];
   /** Add the activeclass for the selected @public */
   public activeClass: string = 'active';
   /** Add the fixed class for the freeze @public */
@@ -109,7 +116,7 @@
   /** Give the message for the loading @public */
   public message: string = 'PLEASEWAIT';
   /** Get VNF selected node @public */
-  public getVNFSelectedData: VNFDDetails[];
+  public getVNFSelectedData: VNFD;
   /** Assign the forcesimulation active @public */
   public forceSimulationActive: boolean = false;
   /** Assign pinned class for the button when freezed @public */
@@ -145,26 +152,14 @@
   private force: any;
   /** Contains all the selected node @private */
   private selectedNode: COMPOSERNODES[] = [];
-  /** variables used for CP @private */
-  private iConnectionPointRef: number = 0;
   /** Contains the connected point @private */
   private connectionPoint: string;
-  /** Contains all the NSD information @private */
-  private nsd: string;
-  /** Contains all the VNFD information @private */
-  private vnfd: string;
   /** Contains id of the node @private */
   private identifier: string;
-  /** Variables used for cp @private */
-  private jConnectionPointRef: number = 0;
   /** Contains copy of NSD information @private */
   private nsdCopy: string;
   /** Contains the VNFD copy @private */
   private vnfdCopy: string;
-  /** Contains name of the node @private */
-  private name: string;
-  /** Contains member vnf index value of the node @private */
-  private memberVnfIndexValue: number = 0;
   /** Contains path information of the node */
   // tslint:disable-next-line:no-any
   private path: any;
@@ -198,8 +193,8 @@
   private setVnfdName: string;
   /** Contains all methods related to shared @private */
   private sharedService: SharedService;
-  /** Contains selected node VLD objects @private */
-  private selectedVLDResult: VLD;
+  /** Contains selected node VNF profile objects @private */
+  private selectedVNFProfile: VNFPROFILE[];
 
   constructor(injector: Injector) {
     this.injector = injector;
@@ -234,106 +229,107 @@
   }
   /** On clicking redirect to NS edit page @public */
   public onEdit(): void {
-    this.router.navigate(['/packages/ns/edit/', this.identifier]).catch(() => {
+    this.router.navigate(['/packages/ns/edit/', this.identifier]).catch((): void => {
       // Catch Navigation Error
     });
   }
   /** Events handles drop at D3 region @public */
   public drop(ev: DragEvent): void {
-    event.preventDefault();
-    this.name = ev.dataTransfer.getData('text');
-    if (this.name === 'vl') {
+    ev.preventDefault();
+    const getDropedName: string = ev.dataTransfer.getData('text');
+    if (getDropedName === 'vl') {
       this.svg.selectAll('*').remove();
       this.vldropComposer();
     } else {
       this.svg.selectAll('*').remove();
-      this.vnfd = ev.dataTransfer.getData('text');
-      this.vnfdropComposer();
+      const vnfdName: string = ev.dataTransfer.getData('text');
+      this.vnfdropComposer(vnfdName);
     }
   }
   /** Drop VL Composer Data @public */
   public vldropComposer(): void {
     this.randomNumberLength = CONSTANTNUMBER.randomNumber;
-    const generateId: string = 'ns_vl_' + this.randomString(
-      this.randomNumberLength,
-      '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
-    );
-    if (this.nsData.vld !== undefined) {
-      this.nsData.vld.push({
-        'vim-network-name': 'PUBLIC',
-        name: generateId,
-        'mgmt-network': true,
-        type: 'ELAN',
-        id: generateId
-      });
-    } else {
-      Object.assign(this.nsData, {
-        vld: [{
-          'vim-network-name': 'PUBLIC',
-          name: generateId,
-          'mgmt-network': true,
-          type: 'ELAN',
-          id: generateId
-        }]
-      });
+    const generateId: string = 'ns_vl_' + this.sharedService.randomString();
+    if (this.nsData['virtual-link-desc'] === undefined) {
+      this.nsData['virtual-link-desc'] = [];
     }
+    this.nsData['virtual-link-desc'].push({
+      id: generateId,
+      'mgmt-network': false
+    });
     this.putType = 'nsdadd';
     this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
   }
   /** Drop VNFD Composer Data @public */
-  public vnfdropComposer(): void {
-    if (this.nsData['constituent-vnfd'] !== undefined) {
-      this.nsData['constituent-vnfd'].push({
-        'vnfd-id-ref': this.vnfd,
-        'member-vnf-index': ++this.memberVnfIndexValue
+  public vnfdropComposer(vnfdName: string): void {
+    const vnfID: string = 'ns_vnfd_' + this.sharedService.randomString();
+    if (this.nsData.df.length > 0) {
+      this.addVNFDID(vnfdName);
+      this.nsData.df.forEach((res: DF): void => {
+        if (res['vnf-profile'] === undefined) {
+          res['vnf-profile'] = [];
+        }
+        res['vnf-profile'].push({
+          id: vnfID,
+          'virtual-link-connectivity': [],
+          'vnfd-id': vnfdName
+        });
       });
     } else {
-      Object.assign(this.nsData, {
-        'constituent-vnfd': [{
-          'vnfd-id-ref': this.vnfd,
-          'member-vnf-index': ++this.memberVnfIndexValue
+      Object.assign(this.nsData.df, {
+        id: 'default-df',
+        'vnf-profile': [{
+          id: vnfID,
+          'virtual-link-connectivity': [],
+          'vnfd-id': vnfdName
         }]
       });
     }
     this.putType = 'vnfdadd';
     this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
   }
+  /** Add the VNFD-ID while drop VNFD if not exists @public */
+  public addVNFDID(vnfdName: string): void {
+    const vnfdIDArray: string[] = this.nsData['vnfd-id'];
+    if (vnfdIDArray !== undefined) {
+      if (vnfdIDArray.indexOf(vnfdName) === -1) {
+        vnfdIDArray.push(vnfdName);
+      }
+    } else {
+      Object.assign(this.nsData, {
+        'vnfd-id': [vnfdName]
+      });
+    }
+  }
   /** Events handles allow drop on D3 region @public */
   public allowDrop(ev: DragEvent): void {
     ev.preventDefault();
   }
   /** Save NSD Information @public */
   public saveNSD(): void {
-    if (this.vnfdPackageDetails.shortName !== undefined) {
-      this.nsData['short-name'] = this.vnfdPackageDetails.shortName;
+    if (this.nsPackageDetails.id !== undefined) {
+      this.nsData.id = this.nsPackageDetails.id;
     }
-    if (this.vnfdPackageDetails.vendor !== undefined) {
-      this.nsData.vendor = this.vnfdPackageDetails.vendor;
+    if (this.nsPackageDetails.name !== undefined) {
+      this.nsData.name = this.nsPackageDetails.name;
     }
-    if (this.vnfdPackageDetails.description !== undefined) {
-      this.nsData.description = this.vnfdPackageDetails.description;
+    if (this.nsPackageDetails.description !== undefined) {
+      this.nsData.description = this.nsPackageDetails.description;
     }
-    if (this.vnfdPackageDetails.version !== undefined) {
-      this.nsData.version = this.vnfdPackageDetails.version;
+    if (this.nsPackageDetails.version !== undefined) {
+      this.nsData.version = this.nsPackageDetails.version;
     }
-    if (this.vnfdPackageDetails.id !== undefined) {
-      this.nsData.id = this.vnfdPackageDetails.id;
-    }
-    if (this.vnfdPackageDetails.name !== undefined) {
-      this.nsData.name = this.vnfdPackageDetails.name;
+    if (this.nsPackageDetails.designer !== undefined) {
+      this.nsData.designer = this.nsPackageDetails.designer;
     }
     this.putType = 'nsdUpdate';
     this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
   }
   /** Save Virtual Link @public */
   public saveVL(vlid: string): void {
-    this.nsData.vld.forEach((result: VLD) => {
+    this.nsData['virtual-link-desc'].forEach((result: VLD): void => {
       if (result.id === vlid) {
-        result.name = this.vlDetails.name;
-        result['mgmt-network'] = !isNullOrUndefined(this.vlDetails['mgmt-network']) ? this.vlDetails['mgmt-network'] : true;
-        result['vim-network-name'] = !isNullOrUndefined(this.vlDetails['vim-network-name']) ? this.vlDetails['vim-network-name'] : '';
-        result.type = this.vlDetails.type;
-        result.id = this.vlDetails.id;
+        result['mgmt-network'] = !isNullOrUndefined(this.virtualLinkDesc['mgmt-network']) ? this.virtualLinkDesc['mgmt-network'] : true;
       }
     });
     this.putType = 'vlUpdate';
@@ -367,18 +363,17 @@
       url: apiURL + '/' + identifier + '/nsd_content',
       httpOptions: { headers: this.headers }
     };
-    const nsData: {} = {};
-    nsData['nsd:nsd-catalog'] = {};
-    nsData['nsd:nsd-catalog'].nsd = [];
-    nsData['nsd:nsd-catalog'].nsd.push(data);
-    const descriptorInfo: string = jsyaml.dump(nsData, {sortKeys: true});
+    const nsData: NSDATACREATION = { nsd: { nsd: [] } };
+    nsData.nsd.nsd = [];
+    nsData.nsd.nsd.push(data);
+    const descriptorInfo: string = jsyaml.dump(nsData, { sortKeys: true });
     this.sharedService.targzFile({ packageType: 'nsd', id: this.identifier, descriptor: descriptorInfo })
       .then((content: ArrayBuffer): void => {
-        this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => {
+        this.restService.putResource(apiURLHeader, content).subscribe((res: {}): void => {
           this.generateData();
           this.notifierService.notify('success', this.translateService.instant(successMessage));
           this.isLoadingResults = false;
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
           this.generateData();
           this.restService.handleError(error, 'put');
           this.isLoadingResults = false;
@@ -393,7 +388,7 @@
     const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
     modalRef.componentInstance.topologyType = 'Info';
     modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO');
-    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
       if (result) {
         // empty
       }
@@ -408,7 +403,7 @@
       this.force.stop();
     }
     this.forceSimulationActive = alreadyFixedIsActive;
-    this.nodes.forEach((d: COMPOSERNODES) => {
+    this.nodes.forEach((d: COMPOSERNODES): void => {
       d.fx = (alreadyFixedIsActive) ? null : d.x;
       d.fy = (alreadyFixedIsActive) ? null : d.y;
     });
@@ -430,9 +425,9 @@
   }
   /** Prepare the information of the VNFD @private */
   private generateVNFData(): void {
-    this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => {
+    this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFD[]): void => {
       this.vnfList = vnfdPackageData;
-    }, (error: ERRORDATA) => {
+    }, (error: ERRORDATA): void => {
       this.restService.handleError(error, 'get');
     });
   }
@@ -440,32 +435,29 @@
   private generateDataNSDTopology(): void {
     this.nodes = [];
     this.links = [];
-    this.iConnectionPointRef = 0;
-    this.jConnectionPointRef = 0;
-    this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails) => {
+    this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails): void => {
       delete nsData._admin;
       delete nsData._id;
       delete nsData._links;
       this.nsData = nsData;
-      this.vnfdPackageDetails.shortName = nsData['short-name'];
-      this.vnfdPackageDetails.vendor = nsData.vendor;
-      this.vnfdPackageDetails.description = nsData.description;
-      this.vnfdPackageDetails.version = nsData.version;
-      this.vnfdPackageDetails.id = nsData.id;
-      this.vnfdPackageDetails.name = nsData.name;
-      if (nsData.vld !== undefined) {
+      this.generateNSInfo(nsData);
+      if (nsData['virtual-link-desc'] !== undefined) {
         /** Details of the VL */
         this.nsDataVLD(nsData);
       }
-      if (nsData['constituent-vnfd'] !== undefined) {
-        /** Details of the VNFD */
-        this.nsDataConstituentVNFD(nsData);
+      if (this.nsData.df.length > 0) {
+        this.nsData.df.forEach((res: DF): void => {
+          if (res['vnf-profile'] !== undefined) {
+            /** Details of the VNFD */
+            this.nsDataConstituentVNFD(nsData);
+          }
+        });
       }
-      if (nsData.vld !== undefined) {
+      if (nsData.df.length > 0) {
         this.nsDataVLDLinkCreation(nsData);
       }
       this.separateAndCreatenode();
-    }, (error: ERRORDATA) => {
+    }, (error: ERRORDATA): void => {
       if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
         this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
       } else {
@@ -475,79 +467,89 @@
       this.isShowNSDDetails = false;
     });
   }
-  /** nsData-vld undefined Call this function @private */
+  /** Generate the NS Package Information */
+  private generateNSInfo(nsData: NSDDetails): void {
+    this.nsPackageDetails.id = nsData.id;
+    this.nsPackageDetails.name = nsData.name;
+    this.nsPackageDetails.description = nsData.description;
+    this.nsPackageDetails.version = nsData.version;
+    this.nsPackageDetails.designer = nsData.designer;
+  }
+  /** nsData VL node creation function @private */
   private nsDataVLD(nsData: NSDDetails): void {
-    nsData.vld.forEach((res: VLD) => {
+    nsData['virtual-link-desc'].forEach((res: VLD): void => {
       this.nodes.push({ id: res.id, reflexive: false, type: 'vld', name: res.id, selectorId: res.id });
-      this.nsd = res.id;
-      if (res['vnfd-connection-point-ref'] !== undefined) {
-        res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => {
-          this.nodes.push(
-            {
-              id: this.nsd + ++this.iConnectionPointRef + ':' + result['vnfd-connection-point-ref'],
-              reflexive: false,
-              type: 'ns',
-              name: result['vnfd-connection-point-ref'],
-              nodeIndex: result['member-vnf-index-ref'],
-              selectorId: result['vnfd-connection-point-ref'] + '_' + result['member-vnf-index-ref'] + '-osm-' + this.nsd
-            });
-        });
-      }
     });
   }
-  /** nsData constituent-vnfd undefined Call this function @private */
+  /** nsData VNFD node creation function @private */
   private nsDataConstituentVNFD(nsData: NSDDetails): void {
-    nsData['constituent-vnfd'].forEach((res: CONSTITUENTVNFD) => {
-      this.nodes.push(
-        {
-          id: res['vnfd-id-ref'] + ':' + res['member-vnf-index'],
-          reflexive: false,
-          type: 'vnfd',
-          name: res['vnfd-id-ref'],
-          nodeIndex: res['member-vnf-index'],
-          selectorId: res['vnfd-id-ref'] + '_' + res['member-vnf-index']
-        });
-      this.vnfd = res['vnfd-id-ref'];
-      this.memberVnfIndexValue = res['member-vnf-index'];
+    nsData.df.forEach((resDF: DF): void => {
+      resDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => {
+        this.nodes.push(
+          {
+            id: resVNF['vnfd-id'] + ':' + resVNF.id,
+            reflexive: false,
+            type: 'vnfd',
+            name: resVNF['vnfd-id'],
+            nodeIndex: resVNF.id,
+            selectorId: resVNF['vnfd-id'] + '_' + resVNF.id
+          });
+        if (resVNF['virtual-link-connectivity'] !== undefined) {
+          this.nsDataCP(resVNF, resVNF.id);
+        }
+      });
     });
   }
-
-  /** nsData-vld undefined Call this function @private */
+  /** nsData CP node creation function @private */
+  private nsDataCP(resVNF: VNFPROFILE, vnfID: string): void {
+    resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => {
+      resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => {
+        this.nodes.push(
+          {
+            id: vnfID + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id'],
+            reflexive: false,
+            type: 'ns',
+            name: resultCCI['constituent-cpd-id'],
+            nodeIndex: resultCCI['constituent-base-element-id'],
+            selectorId: 'osm-' + resultCCI['constituent-cpd-id'] + '-' + vnfID + resultCCI['constituent-base-element-id'] + index
+          });
+      });
+    });
+  }
+  /** nsData Link node creation function @private */
   private nsDataVLDLinkCreation(nsData: NSDDetails): void {
-    nsData.vld.forEach((res: VLD) => {
-      this.nsdCopy = res.id;
-      if (res['vnfd-connection-point-ref'] !== undefined) {
-        this.nsDataVNFDConnectionPointRefrence(res);
+    nsData.df.forEach((resDF: DF): void => {
+      if (resDF['vnf-profile'] !== undefined) {
+        resDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => {
+          this.nsdCopy = resVNF['vnfd-id'] + ':' + resVNF.id;
+          if (resVNF['virtual-link-connectivity'] !== undefined) {
+            this.nsDataVNFDConnectionPointRefrence(resVNF);
+          }
+        });
       }
     });
   }
-  /** nsData-vnfd-connection-point-ref undefined Call this function @private */
-  private nsDataVNFDConnectionPointRefrence(res: VLD): void {
-    res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => {
-      this.connectionPoint = this.nsdCopy + ++this.jConnectionPointRef + ':' + result['vnfd-connection-point-ref'];
-      this.vnfdCopy = result['vnfd-id-ref'] + ':' + result['member-vnf-index-ref'];
-      const connectionPointPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.connectionPoint);
-      const nsdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.nsdCopy);
-      const vnfdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.vnfdCopy);
-      this.links.push(
-        {
-          source: this.nodes[connectionPointPos],
-          target: this.nodes[nsdPos]
-        },
-        {
-          source: this.nodes[connectionPointPos],
-          target: this.nodes[vnfdPos]
-        });
+  /** nsDataVNFDConnectionPointRefrence undefined Call this function @private */
+  private nsDataVNFDConnectionPointRefrence(resVNF: VNFPROFILE): void {
+    resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => {
+      resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => {
+        this.vnfdCopy = resultVLC['virtual-link-profile-id'];
+        this.connectionPoint = resVNF.id + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id'];
+        const connectionPointPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.connectionPoint);
+        const nsdPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.nsdCopy);
+        const vnfdPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.vnfdCopy);
+        this.links.push(
+          {
+            source: this.nodes[connectionPointPos],
+            target: this.nodes[nsdPos]
+          },
+          {
+            source: this.nodes[connectionPointPos],
+            target: this.nodes[vnfdPos]
+          });
+      });
     });
   }
-  /** Generate random string @private  */
-  private randomString(length: number, chars: string): string {
-    let result: string = '';
-    for (let randomStringRef: number = length; randomStringRef > 0; --randomStringRef) {
-      result += chars[Math.floor(Math.random() * chars.length)];
-    }
-    return result;
-  }
   /** Separate and create node @private */
   private separateAndCreatenode(): void {
     this.seprateNodes(this.nodes);
@@ -581,7 +583,7 @@
   /** Separate the nodes along with its tyep @private */
   private seprateNodes(node: COMPOSERNODES[]): void {
     this.vlNodes = []; this.vnfNodes = []; this.cpNodes = [];
-    node.forEach((nodeList: COMPOSERNODES) => {
+    node.forEach((nodeList: COMPOSERNODES): void => {
       if (nodeList.type === 'vld') {
         this.vlNodes.push(nodeList);
       } else if (nodeList.type === 'vnfd') {
@@ -595,21 +597,20 @@
   private createnode(node: COMPOSERNODES[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     d3.selectAll('svg#graphContainer > *').remove();
-    d3.select(window).on('keydown', () => { this.keyDown(); });
-    d3.select(window).on('keyup', () => { this.keyUp(); });
+    d3.select(window).on('keydown', (): void => { this.keyDown(); });
+    d3.select(window).on('keyup', (): void => { this.keyUp(); });
     this.svg = d3.select('#graphContainer')
       .attr('oncontextmenu', 'return false;')
-      .attr('width', graphContainerAttr.width)
-      .attr('height', graphContainerAttr.height)
-      .on('mousemove', () => { this.mousemove(); });
+      .attr('viewBox', `0 0 ${graphContainerAttr.width} ${graphContainerAttr.height}`)
+      .on('mousemove', (): void => { this.mousemove(); });
     this.force = d3.forceSimulation()
       .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength))
-      .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance))
+      .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance))
       .force('center', d3.forceCenter(graphContainerAttr.width / graphContainerAttr.forcex,
         graphContainerAttr.height / graphContainerAttr.forcey))
       .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex))
       .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey))
-      .on('tick', () => { this.tick(); });
+      .on('tick', (): void => { this.tick(); });
     this.dragLine = this.svg.append('svg:path').attr('class', 'link dragline hidden').attr('d', 'M0,0L0,0');
     this.path = this.svg.append('svg:g').selectAll('path');
     this.vlNode = this.svg.append('svg:g').selectAll('vlnode');
@@ -622,7 +623,7 @@
   private tick(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     // draw directed edges with proper padding from node centers
-    this.path.attr('class', 'link').attr('d', (d: Tick) => {
+    this.path.attr('class', 'link').attr('d', (d: Tick): string => {
       const deltaX: number = d.target.x - d.source.x;
       const deltaY: number = d.target.y - d.source.y;
       const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -635,18 +636,18 @@
       const targetX: number = d.target.x - (targetPadding * normX);
       const targetY: number = d.target.y - (targetPadding * normY);
       return `M${sourceX},${sourceY}L${targetX},${targetY}`;
-    }).on('dblclick', (d: Tick) => { this.getDeleteLinkConfirmation(d); });
-    this.vlNode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
-    this.vnfdnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
-    this.cpnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
+    }).on('dblclick', (d: Tick): void => { this.getDeleteLinkConfirmation(d); });
+    this.vlNode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
+    this.vnfdnode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
+    this.cpnode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`);
   }
   /** Update graph (called when needed) at D3 region @private */
   private restart(node: COMPOSERNODES[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     this.path = this.path.data(this.links);
-    this.vlNode = this.vlNode.data(this.vlNodes, (d: COMPOSERNODES) => d.id);
-    this.vnfdnode = this.vnfdnode.data(this.vnfNodes, (d: COMPOSERNODES) => d.id);
-    this.cpnode = this.cpnode.data(this.cpNodes, (d: COMPOSERNODES) => d.id);
+    this.vlNode = this.vlNode.data(this.vlNodes, (d: COMPOSERNODES): string => d.id);
+    this.vnfdnode = this.vnfdnode.data(this.vnfNodes, (d: COMPOSERNODES): string => d.id);
+    this.cpnode = this.cpnode.data(this.cpNodes, (d: COMPOSERNODES): string => d.id);
     this.resetAndCreateNodes();
     this.force.nodes(node).force('link').links(this.links);
     this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
@@ -679,17 +680,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/VL.svg')
-      .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
-      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
-      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vlNode, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.vlNode, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gvlNode.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.id);
+      .text((d: COMPOSERNODES): string => d.id);
   }
   /** Setting all the VNFD nodes @private */
   private getVNFDNodes(): void {
@@ -700,17 +702,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/VNFD.svg')
-      .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
-      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
-      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vnfdnode, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.vnfdnode, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gvnfdNode.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.id);
+      .text((d: COMPOSERNODES): string => d.name);
   }
   /** Setting all the CP nodes @private */
   private getCPNodes(): void {
@@ -721,17 +724,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/CP.svg')
-      .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
-      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
-      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.cpnode, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.cpnode, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gcpNode.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: COMPOSERNODES) => d.id);
+      .text((d: COMPOSERNODES): string => d.name);
   }
   /** Events handles when mousemove it will capture the selected node data @private */
   private mousemove(): void {
@@ -740,41 +744,43 @@
       `M${this.mousedownNode.x},${this.mousedownNode.y}L${d3.mouse(d3.event.currentTarget)[0]},${d3.mouse(d3.event.currentTarget)[1]}`);
   }
   /** Get confirmation Before Deleting the Link in Topology @private */
-  private getAddConfirmation(mouseData: COMPOSERNODES, getNsData: NSDDetails, addType: string, getVLDIndex: number): void {
+  private getAddConfirmation(mouseData: COMPOSERNODES, getNsData: NSDDetails, addType: string, getVLDIndex: string): void {
     let findVNFName: string = '';
     let findVLDID: string = '';
     if (mouseData.type === 'vld') {
       findVNFName = this.mouseupNode.name;
       findVLDID = this.mousedownNode.id;
+      this.vlName = this.mousedownNode.name;
     } else {
       findVNFName = this.mousedownNode.name;
       findVLDID = this.mouseupNode.id;
+      this.vlName = this.mouseupNode.name;
     }
-    getNsData.vld.forEach((result: VLD) => {
-      if (result.id === findVLDID) {
-        this.vlName = result.name;
-        this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFDDetails) => vnfList.id === findVNFName);
-        this.setVnfdConnectionPointRef = this.getVNFSelectedData[0]['mgmt-interface'].cp;
-        this.setVnfdName = this.getVNFSelectedData[0].name;
-        this.selectedVLDResult = result;
-      }
-    });
+    if (getNsData['vnfd-id'] !== undefined) {
+      getNsData['vnfd-id'].forEach((resVNFid: string): void => {
+        if (resVNFid === findVNFName) {
+          this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFD): boolean => vnfList.id === findVNFName)[0];
+          this.setVnfdConnectionPointRef = this.getVNFSelectedData['mgmt-cp'];
+          this.setVnfdName = this.getVNFSelectedData['product-name'];
+          this.selectedVNFProfile = getNsData.df[0]['vnf-profile'];
+        }
+      });
+    }
     if (this.vlName !== undefined && this.setVnfdName !== undefined && this.setVnfdConnectionPointRef !== undefined) {
       const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
       modalRef.componentInstance.topologyType = 'Add';
-      modalRef.componentInstance.cpDetails = this.getVNFSelectedData[0]['connection-point'];
+      modalRef.componentInstance.cpDetails = this.getVNFSelectedData['ext-cpd'];
       this.translateService.get('PAGE.TOPOLOGY.ADDINGCP', {
         vlname: '<b>' + this.vlName + '</b>',
         vnfdname: '<b>' + this.setVnfdName + '</b>',
         cpname: '<b>' + this.setVnfdConnectionPointRef + '</b>'
-      }).subscribe((res: string) => {
+      }).subscribe((res: string): void => {
         modalRef.componentInstance.topologyname = res;
       });
       modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.CONNECTIONPOINT');
-      modalRef.result.then((result: MODALCLOSERESPONSEWITHCP) => {
+      modalRef.result.then((result: MODALCLOSERESPONSEWITHCP): void => {
         if (result) {
-          this.nsData = getNsData;
-          this.generateCPForVNF(this.selectedVLDResult, result.connection_point, getVLDIndex);
+          this.generateCPForVNF(this.selectedVNFProfile, result.connection_point, getVLDIndex);
           this.addData(environment.NSDESCRIPTORS_URL, this.identifier, getNsData, addType);
         } else {
           this.deselectPath();
@@ -785,26 +791,32 @@
       this.notifierService.notify('error', this.translateService.instant('ERROR'));
     }
   }
-
   /** Generate connection point for vnf using vld @private */
-  private generateCPForVNF(result: VLD, cp: string, getVLDIndex: number): void {
-    if (result['vnfd-connection-point-ref'] !== undefined) {
-      result['vnfd-connection-point-ref'].push({
-        'member-vnf-index-ref': getVLDIndex,
-        'vnfd-connection-point-ref': cp,
-        'vnfd-id-ref': this.getVNFSelectedData[0].name
+  private generateCPForVNF(result: VNFPROFILE[], cp: string, getVLDIndex: string): void {
+    if (result !== undefined) {
+      result.forEach((resultVNFPROFILE: VNFPROFILE, index: number): void => {
+        if (getVLDIndex === resultVNFPROFILE.id) {
+          resultVNFPROFILE['virtual-link-connectivity'].push({
+            'constituent-cpd-id': [{
+              'constituent-base-element-id': getVLDIndex,
+              'constituent-cpd-id': cp
+            }],
+            'virtual-link-profile-id': this.vlName
+          });
+        }
       });
     } else {
       Object.assign(result, {
-        'vnfd-connection-point-ref': [{
-          'member-vnf-index-ref': getVLDIndex,
-          'vnfd-connection-point-ref': cp,
-          'vnfd-id-ref': this.getVNFSelectedData[0].name
+        'virtual-link-connectivity': [{
+          'constituent-cpd-id': [{
+            'constituent-base-element-id': getVLDIndex,
+            'constituent-cpd-id': cp
+          }],
+          'virtual-link-profile-id': this.vlName
         }]
       });
     }
   }
-
   /** Events handles when mousedown click it will capture the selected node data @private */
   private mouseDown(d: COMPOSERNODES): void {
     event.preventDefault();
@@ -827,12 +839,12 @@
     this.mouseupNode = d;
     if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vnfd') {
       const getOldVLDIndex: string[] = this.mouseupNode.id.split(':');
-      const setOldVLDindex: number = +getOldVLDIndex[1];
+      const setOldVLDindex: string = getOldVLDIndex[1];
       this.putType = 'cpAdded';
       this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex);
     } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'vld') {
       const getOldVLDIndex: string[] = this.mousedownNode.id.split(':');
-      const setOldVLDindex: number = +getOldVLDIndex[1];
+      const setOldVLDindex: string = getOldVLDIndex[1];
       this.putType = 'cpAdded';
       this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex);
     } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'ns') {
@@ -894,27 +906,39 @@
     this.deselectAllNodes();
     nodeSeleced.select('#' + d.selectorId).classed(this.activeClass, !alreadyIsActive);
     if (d.type === 'vld' && !alreadyIsActive) {
-      this.nsData.vld.forEach((result: VLD) => {
+      this.nsData['virtual-link-desc'].forEach((result: VLD): void => {
         if (result.id === d.id) {
           this.showRightSideInfo(false, true, false, false);
-          this.vlDetails = result;
+          this.virtualLinkDesc = result;
         }
       });
     } else if (d.type === 'vnfd' && !alreadyIsActive) {
-      this.nsData['constituent-vnfd'].forEach((result: CONSTITUENTVNFD) => {
-        if (result['member-vnf-index'] === d.nodeIndex && result['vnfd-id-ref'] === d.name) {
-          this.showRightSideInfo(false, false, true, false);
-          this.vnfData = result;
+      this.nsData.df.forEach((res: DF): void => {
+        if (res['vnf-profile'] !== undefined) {
+          res['vnf-profile'].forEach((resVNF: VNFPROFILE): void => {
+            if (resVNF.id === d.nodeIndex && resVNF['vnfd-id'] === d.name) {
+              this.showRightSideInfo(false, false, true, false);
+              this.vnfData = resVNF;
+            }
+          });
         }
       });
     } else if (d.type === 'ns' && !alreadyIsActive) {
-      this.nsData.vld.forEach((result: VLD) => {
-        if (result['vnfd-connection-point-ref'] !== undefined) {
-          result['vnfd-connection-point-ref'].forEach((resultCP: VNFDCONNECTIONPOINTREF) => {
-            if (resultCP['member-vnf-index-ref'] === d.nodeIndex && resultCP['vnfd-connection-point-ref'] === d.name) {
-              this.cpData = resultCP;
-              this.vlDetails = result;
-              this.showRightSideInfo(false, false, false, true);
+      this.nsData.df.forEach((resultDF: DF): void => {
+        if (resultDF['vnf-profile'] !== undefined) {
+          resultDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => {
+            if (resVNF['virtual-link-connectivity'] !== undefined) {
+              resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => {
+                resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => {
+                  const connectionPointID: string = resVNF.id + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id'];
+                  if (connectionPointID === d.id) {
+                    this.cpData = resultCCI;
+                    this.vnfData = resVNF;
+                    this.virtualLinkProfileID = resultVLC['virtual-link-profile-id'];
+                    this.showRightSideInfo(false, false, false, true);
+                  }
+                });
+              });
             }
           });
         }
@@ -927,9 +951,9 @@
   private getDeleteLinkConfirmation(d: Tick): void {
     const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
     modalRef.componentInstance.topologyType = 'Delete';
-    modalRef.componentInstance.topologyname = this.translateService.instant('PAGE.TOPOLOGY.LINK');
+    modalRef.componentInstance.topologyname = this.translateService.instant('PAGE.TOPOLOGY.LINK') + ' - ' + d.source.id;
     modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.LINK';
-    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
       if (result) {
         this.doubleClickLink(d);
       }
@@ -938,20 +962,32 @@
   /** Events handles when Double Click to Delete the link @private */
   private doubleClickLink(d: Tick): void {
     let getID: string = '';
-    if (d.target.type === 'vld') {
-      getID = d.target.id;
-    } else if (d.source.type === 'vld') {
+    let getName: string = '';
+    let getNodeIndex: string;
+    if (d.source.type === 'ns') {
       getID = d.source.id;
+      getName = d.source.name;
+      getNodeIndex = d.source.nodeIndex;
     }
-    this.nodes.forEach((res: COMPOSERNODES) => {
-      if (res.id === getID) {
-        if (this.nsData.vld !== undefined) {
-          this.nsData.vld.forEach((vldresult: VLD) => {
-            if (vldresult.id === getID) {
-              delete vldresult['vnfd-connection-point-ref'];
-            }
-          });
-        }
+    /** Split the selected node of connectionpoint */
+    const selectedNode: string[] = getID.split(':');
+    this.nsData.df.forEach((resultDF: DF): void => {
+      if (resultDF['vnf-profile'] !== undefined) {
+        resultDF['vnf-profile'].forEach((elementVNF: VNFPROFILE): void => {
+          const selectedVNFProfileID: string = selectedNode[0];
+          /** If VNF ID is equal to selected VNFProfile ID check the VLC of CCI to match the id and name to remove the VLC index */
+          if (selectedVNFProfileID === elementVNF.id) {
+            elementVNF['virtual-link-connectivity'].forEach((elementVLC: VLC, index: number): void => {
+              const posCCI: number = elementVLC['constituent-cpd-id'].findIndex((e: CCI): boolean => {
+                const getCID: string = elementVNF.id + ':' + e['constituent-base-element-id'] + index + ':' + e['constituent-cpd-id'];
+                return getID === getCID;
+              });
+              if (posCCI !== -1) {
+                elementVNF['virtual-link-connectivity'].splice(index, 1);
+              }
+            });
+          }
+        });
       }
     });
     this.putType = 'linkdelete';
@@ -969,7 +1005,7 @@
     } else if (d.type === 'ns') {
       modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT';
     }
-    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
       if (result) {
         this.doubleClick(d);
       }
@@ -978,72 +1014,95 @@
   /** Events handles when Double Click to Delete @private */
   private doubleClick(d: COMPOSERNODES): void {
     const deletedNode: COMPOSERNODES = d;
-    this.nodes.forEach((res: COMPOSERNODES) => {
+    this.nodes.forEach((res: COMPOSERNODES, i: number): void => {
       if (res.id === d.id) {
         if (deletedNode.type === 'vld') {
-          const pos: number = this.nsData.vld.map((e: VLD) => { return e.id; }).indexOf(d.id);
-          this.nsData.vld.splice(pos, 1);
+          /** Remove the virtual-link-desc related to VL */
+          const pos: number = this.nsData['virtual-link-desc'].map((e: VLD): string => { return e.id; }).indexOf(d.id);
+          this.nsData['virtual-link-desc'].splice(pos, 1);
+          /** Remove the virtual-link-connectivity between VL and VNFD */
+          this.nsData.df.forEach((resultDF: DF): void => {
+            if (resultDF['vnf-profile'] !== undefined) {
+              resultDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => {
+                const getVLArray: number[] = resVNF['virtual-link-connectivity'].map((e: VLC, index: number): number => {
+                  if (e['virtual-link-profile-id'] === d.id) {
+                    return index;
+                  }
+                });
+                if (getVLArray.length > 0) {
+                  getVLArray.forEach((removeIndex: number): void => {
+                    const index: string = removeIndex.toString();
+                    resVNF['virtual-link-connectivity'].splice(resVNF['virtual-link-connectivity'][index], 1);
+                  });
+                }
+              });
+            }
+          });
           this.putType = 'nsddelete';
         } else if (deletedNode.type === 'vnfd') {
-          const constituentVNFD: string[] = [];
-          if (this.nsData['constituent-vnfd'] !== undefined) {
-            this.nsData['constituent-vnfd'].forEach((ref: CONSTITUENTVNFD) => {
-              constituentVNFD.push(ref['vnfd-id-ref'] + ':' + ref['member-vnf-index']);
-            });
-          }
-          const pos: number = constituentVNFD.map((e: string) => { return e; }).indexOf(d.id);
-          this.nsData['constituent-vnfd'].splice(pos, 1);
-          const getCP: string[] = d.id.split(':');
-          const memberVnfIndexRef: number = +getCP[1];
-          const vnfdIDRef: string = getCP[0];
-          if (this.nsData.vld !== undefined) {
-            this.nsData.vld.forEach((resf: VLD) => {
-              if (resf['vnfd-connection-point-ref'] !== undefined) {
-                resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => {
-                  if (+connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef && connectionPoint['vnfd-id-ref'] === vnfdIDRef) {
-                    resf['vnfd-connection-point-ref'].splice(index, 1);
-                  }
+          this.nsData.df.forEach((resultDF: DF): void => {
+            if (resultDF['vnf-profile'] !== undefined) {
+              /** Remove the vnf-profile related to VNFD */
+              const posVNF: number = resultDF['vnf-profile'].findIndex((e: VNFPROFILE): boolean => {
+                return e['vnfd-id'] === d.name && e.id === d.nodeIndex;
+              });
+              resultDF['vnf-profile'].splice(posVNF, 1);
+              /** Check the VNFD exists in any vnf-profile */
+              const isVNFDExists: boolean = resultDF['vnf-profile'].some((e: VNFPROFILE): boolean => {
+                return e['vnfd-id'] === d.name;
+              });
+              /** If VNFD not exists in the vnf-profile remove from vnfd-id */
+              if (!isVNFDExists) {
+                const posVNFD: number = this.nsData['vnfd-id'].findIndex((e: string): boolean => {
+                  return e === d.name;
                 });
+                this.nsData['vnfd-id'].splice(posVNFD, 1);
               }
-            });
-          }
+            }
+          });
           this.putType = 'vnfddelete';
         } else if (deletedNode.type === 'ns') {
-          const getCP: string[] = d.selectorId.split('-osm-');
-          const memberVnfIndexRef: number = d.nodeIndex;
-          const vnfdIDRef: string = getCP[getCP.length - 1];
-          if (this.nsData.vld !== undefined) {
-            this.nsData.vld.forEach((resf: VLD) => {
-              if (resf['vnfd-connection-point-ref'] !== undefined && resf.id === vnfdIDRef) {
-                resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => {
-                  if (connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef) {
-                    resf['vnfd-connection-point-ref'].splice(index, 1);
-                  }
-                });
-              }
-            });
-          }
+          /** Split the selected node */
+          const selectedNode: string[] = d.id.split(':');
+          this.nsData.df.forEach((resultDF: DF): void => {
+            if (resultDF['vnf-profile'] !== undefined) {
+              resultDF['vnf-profile'].forEach((elementVNF: VNFPROFILE): void => {
+                const selectedVNFProfileID: string = selectedNode[0];
+                /** If VNF ID is equal to selected VNFProfile ID check the VLC of CCI to match the id and name to remove the VLC index */
+                if (selectedVNFProfileID === elementVNF.id) {
+                  elementVNF['virtual-link-connectivity'].forEach((elementVLC: VLC, index: number): void => {
+                    const posCCI: number = elementVLC['constituent-cpd-id'].findIndex((e: CCI): boolean => {
+                      const getID: string = elementVNF.id + ':' + e['constituent-base-element-id'] + index + ':' + e['constituent-cpd-id'];
+                      return d.id === getID;
+                    });
+                    if (posCCI !== -1) {
+                      elementVNF['virtual-link-connectivity'].splice(index, 1);
+                    }
+                  });
+                }
+              });
+            }
+          });
           this.putType = 'nsdelete';
         }
         this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
       }
     });
   }
+  /** drag event @private */
+  // tslint:disable-next-line: no-any
+  private onDragDrop(): any {
+    return d3.drag().filter(this.dragFilter)
+      .on('start', this.dragstarted)
+      .on('drag', this.dragged)
+      .on('end', this.dragended);
+  }
   /** Key press event @private */
   private keyDown(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     if (this.lastKeyDown !== -1) { return; }
     this.lastKeyDown = d3.event.keyCode;
     if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) {
-      this.gvlNode.call(d3.drag()
-        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
-      );
-      this.gvnfdNode.call(d3.drag()
-        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
-      );
-      this.gcpNode.call(d3.drag()
-        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
-      );
       this.svg.classed('ctrl', true);
     }
   }
@@ -1058,6 +1117,10 @@
       this.svg.classed('ctrl', false);
     }
   }
+  /** Events handles when to drag using filter for the keys @private */
+  private dragFilter(): boolean {
+    return d3.event.ctrlKey && !d3.event.button;
+  }
   /** Events handles when dragstarted @private */
   private dragstarted(d: COMPOSERNODES): void {
     d.fx = d.x;
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
index 2aa8f12..a947069 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
@@ -21,9 +21,12 @@
     <div class="sidebar-header">
       <span class="topology_title" *ngIf="showRightSideInfo === 'vnfdInfo'">{{'PAGE.TOPOLOGY.VNFD' | translate}}</span>
       <span class="topology_title" *ngIf="showRightSideInfo === 'vduInfo'">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' |
+        translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' |
+        translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' |
+        translate}}</span>
       <button (click)="toggleSidebar()" class="close" type="button">
         <i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
       </button>
@@ -34,41 +37,42 @@
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
-                    [(ngModel)]="vnfdInfo.shortName">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
-                    [(ngModel)]="vnfdInfo.description">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
-                    [(ngModel)]="vnfdInfo.version">
-                </div>
-              </div>
-              <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
                     [(ngModel)]="vnfdInfo.id">
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="vnfdInfo.name">
+                <label class="col-sm-4 col-form-label">{{ 'PRODUCTNAME' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'PRODUCTNAME' | translate }}"
+                    name="product-name" [(ngModel)]="vnfdInfo['product-name']">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top" ngbTooltip="Save">
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+                    name="description" [(ngModel)]="vnfdInfo.description"></textarea>
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
+                    [(ngModel)]="vnfdInfo.version">
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'PROVIDER' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'PROVIDER' | translate }}" name="provider"
+                    [(ngModel)]="vnfdInfo.provider">
+                </div>
+              </div>
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top"
+                ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -80,89 +84,35 @@
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'COUNT' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'COUNT' | translate }}" name="count"
-                    [(ngModel)]="vduInfo.count">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
-                    [(ngModel)]="vduInfo.description">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="image"
-                    [(ngModel)]="vduInfo.image">
-                </div>
-              </div>
-              <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
                     [(ngModel)]="vduInfo.id">
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
                     [(ngModel)]="vduInfo.name">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)" placement="top"
-                ngbTooltip="Save">
-                <i class="fas fa-save"></i> {{'SAVE' | translate}}
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
-        <div class="row">
-          <div class="col-12 p-0">
-            <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
-                    [(ngModel)]="intvlInfo.shortName">
+                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+                    name="description" [(ngModel)]="vduInfo.description"></textarea>
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="intvlInfo.name">
+                <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="sw-image-desc"
+                    [(ngModel)]="vduInfo['sw-image-desc']">
                 </div>
               </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
-                    [(ngModel)]="intvlInfo.type">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'IPPROFILEREF' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'IP Profile Ref' | translate }}"
-                    name="ipProfileRef" [(ngModel)]="intvlInfo.ipProfileRef">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
-                    [(ngModel)]="intvlInfo.id">
-                </div>
-              </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)" placement="top"
-                ngbTooltip="Save">
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)"
+                placement="top" ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -174,21 +124,33 @@
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
-                    [(ngModel)]="cpInfo.type">
+                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+                    [(ngModel)]="cpInfo.id">
                 </div>
               </div>
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.id)"
+                placement="top" ngbTooltip="Save">
+                <i class="fas fa-save"></i> {{'SAVE' | translate}}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
+        <div class="row">
+          <div class="col-12 p-0">
+            <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="cpInfo.name">
+                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+                    [(ngModel)]="intvlInfo.id">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.name)" placement="top"
-                ngbTooltip="Save">
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)"
+                placement="top" ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -200,27 +162,9 @@
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="shortName" [(ngModel)]="intcpInfo.shortName" disabled>
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="type" [(ngModel)]="intcpInfo.type" disabled>
-                </div>
-              </div>
-              <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.id" disabled>
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="name" [(ngModel)]="intcpInfo.name" disabled>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.name" disabled>
                 </div>
               </div>
             </form>
@@ -247,17 +191,17 @@
             </legend>
             <ul class="list-group list-group-flush dragable">
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vdu">
-                <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="cp">
-                <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.CP' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="intvl">
-                <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
@@ -271,7 +215,8 @@
         <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
           <div class="btn-group list" role="group" aria-label="Basic example">
             <button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
-              [class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
+              [class.pinned]="classApplied" placement="top" container="body"
+              ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
               <i class="fas fa-thumbtack"></i>
             </button>
             <button type="button" class="btn btn-primary topology-btn" (click)="onEdit()" placement="top"
@@ -286,16 +231,16 @@
         </div>
         <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.CP' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.INTCP' | translate}}</span>
         </div>
       </div>
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
index bf78d7f..081874a 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
@@ -24,7 +24,7 @@
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
-import { APIURLHEADER, ERRORDATA, GETAPIURLHEADER, MODALCLOSERESPONSEDATA } from 'CommonModel';
+import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
 import { ConfirmationTopologyComponent } from 'ConfirmationTopology';
 import * as d3 from 'd3';
 import { DataService } from 'DataService';
@@ -33,11 +33,7 @@
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
-import { isNullOrUndefined } from 'util';
-import {
-  COMPOSERNODES, CONNECTIONPOINT, GRAPHDETAILS, InternalVLD, Tick, TickPath,
-  VDU, VDUInternalConnectionPoint, VLDInternalConnectionPoint, VNFDInterface, VNFDNODE
-} from 'VNFDModel';
+import { COMPOSERNODES, EXTCPD, GRAPHDETAILS, INTCPD, IVLD, Tick, TickPath, VDU, VDUINTCPD, VNFD, VNFDATA, VNIR } from 'VNFDModel';
 
 /**
  * Creating component
@@ -60,10 +56,8 @@
   public randomNumberLength: number;
   /** Contains the vnfd information @public */
   public vnfList: string[] = [];
-  /** Contains node type @public */
-  public nodeTypeRef: string;
   /** Contains VNFD Information @public */
-  public vnfdInfo: VNFDNODE = { shortName: '', description: '', version: '', id: '', name: '' };
+  public vnfdInfo: VNFD = { 'product-name': '', description: '', version: '', id: '', provider: '' };
   /** Contains right panel box information @public */
   public showRightSideInfo: string = '';
   /** Add the fixed class for the freeze @public */
@@ -78,7 +72,6 @@
   public classApplied: boolean = false;
   /** Contains sidebar open status @public */
   public sideBarOpened: boolean = false;
-
   /** Contains SVG attributes @private */
   // tslint:disable-next-line:no-any
   private svg: any;
@@ -106,7 +99,7 @@
   // tslint:disable-next-line:no-any
   private intConnectionPoint: any;
   /** Contains the node information @private */
-  private nodes: VNFDNODE[] = [];
+  private nodes: COMPOSERNODES[] = [];
   /** Contains the link information of nodes @private */
   private links: {}[] = [];
   /** Instance of the rest service @private */
@@ -136,7 +129,7 @@
   // tslint:disable-next-line:no-any
   private gIntConnectionPoint: any;
   /** Contains all the information about VNF Details @private */
-  private vnfdPackageDetails: VNFDNODE;
+  private vnfdPackageDetails: VNFD;
   /** Conatins mousedown action @private */
   private mousedownNode: COMPOSERNODES = null;
   /** Conatins mouseup action @private */
@@ -149,12 +142,18 @@
   private lastKeyDown: number = -1;
   /** Contains VDU Information @private */
   private vduInfo: VDU;
+  /** Contains VDU Old value Information @private */
+  private oldVDUID: string;
   /** Contains Internal VL Information @private */
-  private intvlInfo: InternalVLD;
+  private intvlInfo: IVLD;
+  /** Contains Internal VL Old value Information @private */
+  private oldintVLID: string;
   /** Contains Connection Point Information @private */
-  private cpInfo: CONNECTIONPOINT;
+  private cpInfo: EXTCPD;
+  /** Contains Connection Point Old value Information @private */
+  private oldCPID: string;
   /** Contains Internal Connection Point Information @private */
-  private intcpInfo: VLDInternalConnectionPoint;
+  private intcpInfo: VNIR;
   /** Instance of the modal service @private */
   private modalService: NgbModal;
 
@@ -187,43 +186,26 @@
   public generateData(): void {
     this.nodes = []; this.links = []; this.vnfdPackageDetails = null;
     this.showRightSideInfo = 'vnfdInfo';
-    const httpOptions: GETAPIURLHEADER = {
-      headers: new HttpHeaders({
-        'Content-Type': 'application/zip',
-        Accept: 'text/plain',
-        'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
-      }),
-      responseType: 'text'
-    };
-    this.restService.getResource(environment.VNFPACKAGES_URL + '/' + this.identifier + '/vnfd', httpOptions)
-      .subscribe((vnfdPackageDetails: VNFDNODE) => {
+    this.restService.getResource(environment.VNFPACKAGESCONTENT_URL + '/' + this.identifier)
+      .subscribe((vnfdPackageDetails: VNFD): void => {
         try {
-          const getJson: string = jsyaml.load(vnfdPackageDetails.toString(), { json: true });
-          if (getJson.hasOwnProperty('vnfd-catalog')) {
-            this.vnfdPackageDetails = getJson['vnfd-catalog'].vnfd[0];
-          } else if (getJson.hasOwnProperty('vnfd:vnfd-catalog')) {
-            this.vnfdPackageDetails = getJson['vnfd:vnfd-catalog'].vnfd[0];
-          } else if (getJson.hasOwnProperty('vnfd')) {
-            // tslint:disable-next-line: no-string-literal
-            this.vnfdPackageDetails = getJson['vnfd'][0];
-          }
-          this.generateCPPoint(this.vnfdPackageDetails);
-          this.generateVDU(this.vnfdPackageDetails);
-          this.generateInternalVLD(this.vnfdPackageDetails);
-          this.generateInternalCP(this.vnfdPackageDetails);
-          this.generateIntVLCPLinks(this.vnfdPackageDetails);
-          this.generateVDUCPLinks(this.vnfdPackageDetails);
+          delete vnfdPackageDetails._admin;
+          delete vnfdPackageDetails._id;
+          delete vnfdPackageDetails._links;
+          this.vnfdPackageDetails = vnfdPackageDetails;
+          this.generateVDU(vnfdPackageDetails);
+          this.generateCPPoint(vnfdPackageDetails);
+          this.generateInternalVLD(vnfdPackageDetails);
+          this.generateInternalCP(vnfdPackageDetails);
+          this.generateIntVLCPLinks(vnfdPackageDetails);
+          this.generateVDUCPLinks(vnfdPackageDetails);
           this.createNode(this.nodes);
-          this.vnfdInfo.shortName = this.vnfdPackageDetails['short-name'];
-          this.vnfdInfo.description = this.vnfdPackageDetails.description;
-          this.vnfdInfo.version = this.vnfdPackageDetails.version;
-          this.vnfdInfo.id = this.vnfdPackageDetails.id;
-          this.vnfdInfo.name = this.vnfdPackageDetails.name;
+          this.generateVNFInfo(vnfdPackageDetails);
         } catch (e) {
           this.notifierService.notify('error', this.translateService.instant('ERROR'));
         }
         this.isLoadingResults = false;
-      }, (error: ERRORDATA) => {
+      }, (error: ERRORDATA): void => {
         error.error = typeof error.error === 'string' ? jsyaml.load(error.error) : error.error;
         if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
           this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
@@ -234,6 +216,14 @@
         this.showRightSideInfo = '';
       });
   }
+  /** Generate the VNF Package Information */
+  public generateVNFInfo(vnfdPackageDetails: VNFD): void {
+    this.vnfdInfo['product-name'] = vnfdPackageDetails['product-name'];
+    this.vnfdInfo.description = vnfdPackageDetails.description;
+    this.vnfdInfo.version = vnfdPackageDetails.version;
+    this.vnfdInfo.id = vnfdPackageDetails.id;
+    this.vnfdInfo.provider = vnfdPackageDetails.provider;
+  }
   /** Events handles at drag on D3 region @public */
   // tslint:disable-next-line:no-any
   public drag(ev: any): void {
@@ -242,14 +232,14 @@
   /** Events handles drop at D3 region @public */
   public drop(ev: DragEvent): void {
     ev.preventDefault();
-    this.nodeTypeRef = ev.dataTransfer.getData('text');
-    if (this.nodeTypeRef === 'vdu') {
+    const getDropedName: string = ev.dataTransfer.getData('text');
+    if (getDropedName === 'vdu') {
       this.svg.selectAll('*').remove();
       this.vduDropCompose();
-    } else if (this.nodeTypeRef === 'cp') {
+    } else if (getDropedName === 'cp') {
       this.svg.selectAll('*').remove();
       this.cpDropCompose();
-    } else if (this.nodeTypeRef === 'intvl') {
+    } else if (getDropedName === 'intvl') {
       this.svg.selectAll('*').remove();
       this.intvlDropCompose();
     }
@@ -258,65 +248,79 @@
   public allowDrop(ev: DragEvent): void {
     ev.preventDefault();
   }
-  /** Generate and list CP points @public */
-  public generateCPPoint(vnfdPackageDetails: VNFDNODE): void {
-    if (vnfdPackageDetails['connection-point'] !== undefined) {
-      vnfdPackageDetails['connection-point'].forEach((cp: CONNECTIONPOINT) => {
-        this.nodes.push({ id: cp.name, nodeTypeRef: 'cp', name: cp.name, type: cp.type });
+  /** Generate and list VDU @public */
+  public generateVDU(vnfdPackageDetails: VNFD): void {
+    if (vnfdPackageDetails.vdu !== undefined) {
+      vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        this.nodes.push({
+          id: vdu.id,
+          name: vdu.name,
+          reflexive: false,
+          type: 'vdu'
+        });
       });
     }
   }
-  /** Generate and list VDU @public */
-  public generateVDU(vnfdPackageDetails: VNFDNODE): void {
-    if (vnfdPackageDetails.vdu !== undefined) {
-      vnfdPackageDetails.vdu.forEach((vdu: VDU) => {
+  /** Generate and list CP points @public */
+  public generateCPPoint(vnfdPackageDetails: VNFD): void {
+    if (vnfdPackageDetails['ext-cpd'] !== undefined) {
+      vnfdPackageDetails['ext-cpd'].forEach((cp: EXTCPD): void => {
         this.nodes.push({
-          id: vdu.name, nodeTypeRef: 'vdu', 'cloud-init-file': vdu['cloud-init-file'], count: vdu.count, description: vdu.description,
-          vduID: vdu.id, name: vdu.name, interface: vdu.interface, 'vm-flavor': vdu['vm-flavor']
+          id: cp['int-cpd'] !== undefined ? cp['int-cpd'].cpd : cp.id,
+          name: cp.id,
+          reflexive: false,
+          type: 'cp'
         });
       });
     }
   }
   /** Generate and list Internal VLD @public */
-  public generateInternalVLD(vnfdPackageDetails: VNFDNODE): void {
-    if (vnfdPackageDetails['internal-vld'] !== undefined) {
-      vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => {
+  public generateInternalVLD(vnfdPackageDetails: VNFD): void {
+    if (vnfdPackageDetails['int-virtual-link-desc'] !== undefined) {
+      vnfdPackageDetails['int-virtual-link-desc'].forEach((ivld: IVLD): void => {
         this.nodes.push({
-          id: internalVLD.name, nodeTypeRef: 'intvl', intVLID: internalVLD.id,
-          'internal-connection-point': internalVLD['internal-connection-point'],
-          'ip-profile-ref': internalVLD['ip-profile-ref'], name: internalVLD.name, 'short-name': internalVLD['short-name'],
-          type: internalVLD.type
+          id: ivld.id,
+          name: ivld.id,
+          reflexive: false,
+          type: 'intvl'
         });
       });
     }
   }
   /** Generate and list Internal CP @public */
-  public generateInternalCP(vnfdPackageDetails: VNFDNODE): void {
+  public generateInternalCP(vnfdPackageDetails: VNFD): void {
     if (vnfdPackageDetails.vdu !== undefined) {
-      vnfdPackageDetails.vdu.forEach((intCP: VDUInternalConnectionPoint) => {
-        if (intCP['internal-connection-point'] !== undefined) {
-          intCP['internal-connection-point'].forEach((internalCP: VDUInternalConnectionPoint) => {
-            this.nodes.push({
-              id: internalCP.name, nodeTypeRef: 'intcp', name: internalCP.name,
-              'short-name': internalCP['short-name'], type: internalCP.type
-            });
+      vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        if (vdu['int-cpd'] !== undefined) {
+          vdu['int-cpd'].forEach((intcpd: VDUINTCPD): void => {
+            if (intcpd['int-virtual-link-desc'] !== undefined) {
+              intcpd['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => {
+                this.nodes.push({
+                  id: intcpd.id,
+                  name: vnir.name,
+                  reflexive: false,
+                  type: 'intcp'
+                });
+              });
+            }
           });
         }
       });
     }
   }
   /** Generate VDU External and Internal CP Links @public */
-  public generateVDUCPLinks(vnfdPackageDetails: VNFDNODE): void {
+  public generateVDUCPLinks(vnfdPackageDetails: VNFD): void {
     if (vnfdPackageDetails.vdu !== undefined) {
-      vnfdPackageDetails.vdu.forEach((vdu: VDU) => {
-        const vduLink: string = vdu.name;
-        if (vdu.interface !== undefined) {
-          vdu.interface.forEach((interfaceDetails: VNFDInterface) => {
-            if (interfaceDetails['external-connection-point-ref'] !== undefined) {
-              this.links.push({ source: vduLink, target: interfaceDetails['external-connection-point-ref'] });
-            }
-            if (interfaceDetails['internal-connection-point-ref'] !== undefined) {
-              this.links.push({ source: vduLink, target: interfaceDetails['internal-connection-point-ref'] });
+      vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        const vduLink: string = vdu.id;
+        if (vdu['int-cpd'] !== undefined) {
+          vdu['int-cpd'].forEach((intCPD: VDUINTCPD): void => {
+            if (intCPD['int-virtual-link-desc'] !== undefined) {
+              intCPD['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => {
+                this.links.push({ source: vduLink, target: intCPD.id });
+              });
+            } else {
+              this.links.push({ source: vduLink, target: intCPD.id });
             }
           });
         }
@@ -324,13 +328,17 @@
     }
   }
   /** Generate Network/VLD/Internal VirtualLink, CP Links @public */
-  public generateIntVLCPLinks(vnfdPackageDetails: VNFDNODE): void {
-    if (vnfdPackageDetails['internal-vld'] !== undefined) {
-      vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => {
-        const vldName: string = internalVLD.name;
-        if (internalVLD['internal-connection-point'] !== undefined) {
-          internalVLD['internal-connection-point'].forEach((intCP: VLDInternalConnectionPoint) => {
-            this.links.push({ source: vldName, target: intCP['id-ref'] });
+  public generateIntVLCPLinks(vnfdPackageDetails: VNFD): void {
+    if (vnfdPackageDetails.vdu !== undefined) {
+      vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        if (vdu['int-cpd'] !== undefined) {
+          vdu['int-cpd'].forEach((intCPD: VDUINTCPD): void => {
+            const vldName: string = intCPD['int-virtual-link-desc'];
+            if (intCPD['int-virtual-link-desc'] !== undefined) {
+              intCPD['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => {
+                this.links.push({ source: vldName, target: intCPD.id });
+              });
+            }
           });
         }
       });
@@ -338,52 +346,65 @@
   }
   /** VNFD details can be saved on users inputs @public */
   public saveVNFD(): void {
-    this.vnfdPackageDetails['short-name'] = this.vnfdInfo.shortName;
+    this.vnfdPackageDetails['product-name'] = this.vnfdInfo['product-name'];
     this.vnfdPackageDetails.description = this.vnfdInfo.description;
     this.vnfdPackageDetails.version = this.vnfdInfo.version;
     this.vnfdPackageDetails.id = this.vnfdInfo.id;
-    this.vnfdPackageDetails.name = this.vnfdInfo.name;
+    this.vnfdPackageDetails.provider = this.vnfdInfo.provider;
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
-    delete this.vnfdPackageDetails.shortName;
   }
   /** VDU details can be saved on users inputs @public */
-  public saveVDU(vduID: string): void {
-    this.vnfdPackageDetails.vdu.forEach((ref: VDU) => {
-      if (ref.id === vduID) {
-        ref.count = this.vduInfo.count;
-        ref.description = this.vduInfo.description;
-        ref.image = this.vduInfo.image;
+  public saveVDU(getVDUID: string): void {
+    const getOLDVDUID: string = this.oldVDUID;
+    this.vnfdPackageDetails.vdu.forEach((ref: VDU): void => {
+      if (ref.id === getVDUID) {
         ref.id = this.vduInfo.id;
         ref.name = this.vduInfo.name;
+        ref.description = this.vduInfo.description !== undefined ? this.vduInfo.description : '';
+        ref['sw-image-desc'] = this.vduInfo['sw-image-desc'];
+      }
+    });
+    this.vnfdPackageDetails['ext-cpd'].forEach((extCPD: EXTCPD): void => {
+      if (extCPD['int-cpd'] !== undefined) {
+        if (extCPD['int-cpd']['vdu-id'] === getOLDVDUID) {
+          extCPD['int-cpd']['vdu-id'] = this.vduInfo.id;
+        }
       }
     });
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** IntVL details can be saved on users inputs @public */
   public saveIntVL(intVLID: string): void {
-    this.vnfdPackageDetails['internal-vld'].forEach((ref: InternalVLD) => {
-      if (ref.id === intVLID) {
-        ref['short-name'] = this.intvlInfo.shortName;
-        ref.name = this.intvlInfo.name;
-        ref.type = this.intvlInfo.type;
-        ref['ip-profile-ref'] = !isNullOrUndefined(this.intvlInfo.ipProfileRef) ? this.intvlInfo.ipProfileRef : '';
-        ref.id = this.intvlInfo.id;
-        delete ref.shortName;
-        delete ref.ipProfileRef;
+    const getOldID: string = this.oldintVLID;
+    this.vnfdPackageDetails['int-virtual-link-desc'].forEach((ivldDetails: IVLD): void => {
+      if (ivldDetails.id === intVLID) {
+        ivldDetails.id = this.intvlInfo.id;
+      }
+    });
+    this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU): void => {
+      if (vduDetails['int-cpd'] !== undefined) {
+        vduDetails['int-cpd'].forEach((intCPDDetails: VDUINTCPD): void => {
+          if (intCPDDetails['int-virtual-link-desc'] !== undefined) {
+            if (intCPDDetails['int-virtual-link-desc'] === getOldID) {
+              intCPDDetails['int-virtual-link-desc'] = this.intvlInfo.id;
+            }
+          }
+        });
       }
     });
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** IntVL details can be saved on users inputs @public */
-  public saveCP(cpName: string): void {
-    this.vnfdPackageDetails['connection-point'].forEach((ref: CONNECTIONPOINT) => {
-      if (ref.name === cpName) {
-        if (!isNullOrUndefined(this.cpInfo.type)) {
-          ref.type = this.cpInfo.type;
-        }
-        ref.name = this.cpInfo.name;
+  public saveCP(cpID: string): void {
+    const getOldCP: string = this.oldCPID;
+    this.vnfdPackageDetails['ext-cpd'].forEach((ref: EXTCPD): void => {
+      if (ref.id === cpID) {
+        ref.id = this.cpInfo.id;
       }
     });
+    if (this.vnfdPackageDetails['mgmt-cp'] === getOldCP) {
+      this.vnfdPackageDetails['mgmt-cp'] = this.cpInfo.id;
+    }
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** Edit topology @public */
@@ -395,7 +416,7 @@
     const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
     modalRef.componentInstance.topologyType = 'Info';
     modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO');
-    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
       if (result) {
         // empty
       }
@@ -410,7 +431,7 @@
       this.force.stop();
     }
     this.forceSimulationActive = alreadyFixedIsActive;
-    this.nodes.forEach((d: COMPOSERNODES) => {
+    this.nodes.forEach((d: COMPOSERNODES): void => {
       d.fx = (alreadyFixedIsActive) ? null : d.x;
       d.fy = (alreadyFixedIsActive) ? null : d.y;
     });
@@ -449,19 +470,21 @@
     };
   }
   /** Node is created and render at D3 region @private */
-  private createNode(nodes: VNFDNODE[]): void {
+  private createNode(nodes: VNFD[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     d3.selectAll('svg#graphContainer > *').remove();
-    d3.select(window).on('keydown', () => { this.keyDown(); });
-    d3.select(window).on('keyup', () => { this.keyUp(); });
-    this.svg = d3.select('#graphContainer').attr('oncontextmenu', 'return false;').attr('width', graphContainerAttr.width)
-      .attr('height', graphContainerAttr.height).on('mousemove', () => { this.mousemove(); });
+    d3.select(window).on('keydown', (): void => { this.keyDown(); });
+    d3.select(window).on('keyup', (): void => { this.keyUp(); });
+    this.svg = d3.select('#graphContainer')
+      .attr('oncontextmenu', 'return false;')
+      .attr('viewBox', `0 0 ${graphContainerAttr.width} ${graphContainerAttr.height}`)
+      .on('mousemove', (): void => { this.mousemove(); });
     this.force = d3.forceSimulation()
-      .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance))
+      .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance))
       .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength))
       .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex))
       .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey))
-      .on('tick', () => { this.tick(); });
+      .on('tick', (): void => { this.tick(); });
     this.path = this.svg.append('svg:g').selectAll('path');
     this.dragLine = this.svg.append('svg:path').attr('class', 'link dragline hidden').attr('d', 'M0,0L0,0');
     this.network = this.svg.append('svg:g').selectAll('network');
@@ -473,7 +496,7 @@
   /** Update force layout (called automatically each iteration) @private */
   private tick(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
-    this.path.attr('d', (d: Tick) => {
+    this.path.attr('d', (d: Tick): string => {
       const deltaX: number = d.target.x - d.source.x; const deltaY: number = d.target.y - d.source.y;
       const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       const normX: number = deltaX / dist; const normY: number = deltaY / dist;
@@ -482,27 +505,27 @@
       const sourceX: number = d.source.x + (sourcePadding * normX); const sourceY: number = d.source.y + (sourcePadding * normY);
       const targetX: number = d.target.x - (targetPadding * normX); const targetY: number = d.target.y - (targetPadding * normY);
       return `M${sourceX},${sourceY}L${targetX},${targetY}`;
-    }).on('dblclick', (d: Tick) => { this.getDeleteLinkConfirmation(d); });
-    this.network.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`);
-    this.virutualDeploymentUnit.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`);
-    this.connectionPoint.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`);
-    this.intConnectionPoint.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`);
+    }).on('dblclick', (d: Tick): void => { this.getDeleteLinkConfirmation(d); });
+    this.network.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`);
+    this.virutualDeploymentUnit.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`);
+    this.connectionPoint.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`);
+    this.intConnectionPoint.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`);
   }
   /** Update graph (called when needed) @private */
-  private restart(nodes: VNFDNODE[]): void {
+  private restart(nodes: VNFD[]): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     this.path = this.path.data(this.links);
     const cpNodes: {}[] = []; const vduNodes: {}[] = []; const vlNodes: {}[] = []; const intcpNodes: {}[] = []; //Nodes are known by id
-    nodes.forEach((nodeList: VNFDNODE) => {
-      if (nodeList.nodeTypeRef === 'cp') { cpNodes.push(nodeList); }
-      else if (nodeList.nodeTypeRef === 'vdu') { vduNodes.push(nodeList); }
-      else if (nodeList.nodeTypeRef === 'intvl') { vlNodes.push(nodeList); }
-      else if (nodeList.nodeTypeRef === 'intcp') { intcpNodes.push(nodeList); }
+    nodes.forEach((nodeList: COMPOSERNODES): void => {
+      if (nodeList.type === 'cp') { cpNodes.push(nodeList); }
+      else if (nodeList.type === 'vdu') { vduNodes.push(nodeList); }
+      else if (nodeList.type === 'intvl') { vlNodes.push(nodeList); }
+      else if (nodeList.type === 'intcp') { intcpNodes.push(nodeList); }
     });
-    this.network = this.network.data(vlNodes, (d: { id: number }) => d.id);
-    this.virutualDeploymentUnit = this.virutualDeploymentUnit.data(vduNodes, (d: { id: number }) => d.id);
-    this.connectionPoint = this.connectionPoint.data(cpNodes, (d: { id: number }) => d.id);
-    this.intConnectionPoint = this.intConnectionPoint.data(intcpNodes, (d: { id: number }) => d.id);
+    this.network = this.network.data(vlNodes, (d: VNFD): string => d.id);
+    this.virutualDeploymentUnit = this.virutualDeploymentUnit.data(vduNodes, (d: VNFD): string => d.id);
+    this.connectionPoint = this.connectionPoint.data(cpNodes, (d: VNFD): string => d.id);
+    this.intConnectionPoint = this.intConnectionPoint.data(intcpNodes, (d: VNFD): string => d.id);
     this.resetAndCreateNodes();
     this.force.nodes(nodes).force('link').links(this.links); //Set the graph in motion
     this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
@@ -538,17 +561,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: VNFDNODE) => { return d.id; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.id; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/INTVL.svg')
-      .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); })
-      .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); })
-      .on('click', (d: VNFDNODE) => { this.singleClick(this.network, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.network, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gNetwork.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: { id: number }) => d.id);
+      .text((d: COMPOSERNODES): string => d.id);
   }
   /** Settings all the connection point attributes of nodes @private */
   private getgVirutualDeploymentUnit(): void {
@@ -559,17 +583,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: VNFDNODE) => { return d.id; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.id; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/VDU.svg')
-      .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); })
-      .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); })
-      .on('click', (d: VNFDNODE) => { this.singleClick(this.virutualDeploymentUnit, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.virutualDeploymentUnit, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gVirutualDeploymentUnit.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: { id: string }) => d.id);
+      .text((d: COMPOSERNODES): string => d.id);
   }
   /** Settings all the connection point attributes of nodes @private */
   private getgConnectionPoint(): void {
@@ -580,17 +605,18 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: VNFDNODE) => { return d.id; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.id; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/CP-VNF.svg')
-      .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); })
-      .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); })
-      .on('click', (d: VNFDNODE) => { this.singleClick(this.connectionPoint, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.connectionPoint, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gConnectionPoint.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: { id: string }) => d.id);
+      .text((d: COMPOSERNODES): string => d.name);
   }
   /** Settings all the internal connection point attributes of nodes @private */
   private getgIntConnectionPoint(): void {
@@ -601,86 +627,78 @@
       .style('opacity', 1)
       .attr('x', graphContainerAttr.imageX)
       .attr('y', graphContainerAttr.imageY)
-      .attr('id', (d: VNFDNODE) => { return d.id; })
+      .call(this.onDragDrop())
+      .attr('id', (d: COMPOSERNODES): string => { return d.id; })
       .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
       .attr('xlink:href', 'assets/images/INTCP.svg')
-      .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); })
-      .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); })
-      .on('click', (d: VNFDNODE) => { this.singleClick(this.intConnectionPoint, d); this.onNodeClickToggleSidebar(); })
-      .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
+      .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); })
+      .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); })
+      .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.intConnectionPoint, d); this.onNodeClickToggleSidebar(); })
+      .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); });
     this.gIntConnectionPoint.append('svg:text')
       .attr('class', 'node_text')
       .attr('y', graphContainerAttr.textY)
-      .text((d: { id: string }) => d.id);
+      .text((d: COMPOSERNODES): string => d.name);
   }
   /** Drop VDU Composer Data @private */
   private vduDropCompose(): void {
     const randomID: string = this.sharedService.randomString();
-    const vduNode: VNFDNODE[] = [{
-      nodeTypeRef: 'vdu', id: 'vdu_' + randomID, count: 1, description: '', name: 'vdu_' + randomID, image: 'ubuntu',
-      interface: [], 'internal-connection-point': [], 'monitoring-param': [], 'vm-flavor': {}
-    }];
-    const nodeCopy: VNFDNODE[] = this.nodes;
-    Array.prototype.push.apply(vduNode, nodeCopy);
-    this.nodes = vduNode;
-    if (this.vnfdPackageDetails.vdu === undefined) { this.vnfdPackageDetails.vdu = []; }
+    if (this.vnfdPackageDetails.vdu === undefined) {
+      this.vnfdPackageDetails.vdu = [];
+    }
     this.vnfdPackageDetails.vdu.push({
-      id: 'vdu_' + randomID, count: 1, description: '', name: 'vdu_' + randomID, image: 'ubuntu',
-      interface: [], 'internal-connection-point': [], 'monitoring-param': [], 'vm-flavor': {}
+      id: 'vdu_' + randomID,
+      name: 'vdu_' + randomID,
+      description: '',
+      'sw-image-desc': 'ubuntu',
+      'int-cpd': [],
+      'monitoring-parameter': [],
+      'virtual-compute-desc': '',
+      'virtual-storage-desc': []
     });
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** Drop CP Composer Data @private */
   private cpDropCompose(): void {
     const randomID: string = this.sharedService.randomString();
-    const cpNode: VNFDNODE[] = [{ nodeTypeRef: 'cp', id: 'cp_' + randomID, name: 'cp_' + randomID }];
-    const nodeCopy: VNFDNODE[] = this.nodes;
-    Array.prototype.push.apply(cpNode, nodeCopy);
-    this.nodes = cpNode;
-    if (this.vnfdPackageDetails['connection-point'] === undefined) {
-      this.vnfdPackageDetails['connection-point'] = [];
+    if (this.vnfdPackageDetails['ext-cpd'] === undefined) {
+      this.vnfdPackageDetails['ext-cpd'] = [];
+      this.vnfdPackageDetails['mgmt-cp'] = 'cp_' + randomID;
     }
-    this.vnfdPackageDetails['connection-point'].push({
-      id: 'cp_' + randomID, name: 'cp_' + randomID, type: 'VPORT'
+    this.vnfdPackageDetails['ext-cpd'].push({
+      id: 'cp_' + randomID,
+      'int-cpd': {}
     });
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** Drop IntVL Composer Data @private */
   private intvlDropCompose(): void {
     const randomID: string = this.sharedService.randomString();
-    const intvlNode: VNFDNODE[] = [{
-      nodeTypeRef: 'intvl', id: 'vnf_vl_' + randomID, name: 'vnf_vl_' + randomID, 'short-name': 'vnf_vl_' + randomID, 'ip-profile-ref': '',
-      type: 'ELAN'
-    }];
-    const nodeCopy: VNFDNODE[] = this.nodes;
-    Array.prototype.push.apply(intvlNode, nodeCopy);
-    this.nodes = intvlNode;
-    if (this.vnfdPackageDetails['internal-vld'] === undefined) { this.vnfdPackageDetails['internal-vld'] = []; }
-    this.vnfdPackageDetails['internal-vld'].push({
-      id: 'vnf_vl_' + randomID, name: 'vnf_vl_' + randomID, 'short-name': 'vnf_vl_' + randomID,
-      'ip-profile-ref': '', type: 'ELAN', 'internal-connection-point': []
+    if (this.vnfdPackageDetails['int-virtual-link-desc'] === undefined) {
+      this.vnfdPackageDetails['int-virtual-link-desc'] = [];
+    }
+    this.vnfdPackageDetails['int-virtual-link-desc'].push({
+      id: 'vnf_vl_' + randomID
     });
     this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails);
   }
   /** Add the Add Nodes Data @private */
-  private addNodes(apiURL: string, identifier: string, data: VNFDNODE): void {
+  private addNodes(apiURL: string, identifier: string, data: VNFD): void {
     this.isLoadingResults = true;
     const apiURLHeader: APIURLHEADER = {
       url: apiURL + '/' + identifier + '/package_content',
       httpOptions: { headers: this.headers }
     };
-    const vnfData: {} = {};
-    vnfData['vnfd:vnfd-catalog'] = {};
-    vnfData['vnfd:vnfd-catalog'].vnfd = [];
-    vnfData['vnfd:vnfd-catalog'].vnfd.push(data);
+    const vnfData: VNFDATA = {};
+    vnfData.vnfd = data;
     const descriptorInfo: string = jsyaml.dump(vnfData, { sortKeys: true });
     this.sharedService.targzFile({ packageType: 'vnfd', id: this.identifier, descriptor: descriptorInfo })
       .then((content: ArrayBuffer): void => {
-        this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => {
+        this.restService.putResource(apiURLHeader, content).subscribe((res: {}): void => {
           this.generateData();
           this.notifierService.notify('success', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.UPDATEDSUCCESSFULLY'));
           this.isLoadingResults = false;
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
           this.generateData();
           this.restService.handleError(error, 'put');
           this.isLoadingResults = false;
@@ -691,7 +709,7 @@
       });
   }
   /** Events handles when mousedown click it will capture the selected node data @private */
-  private mouseDown(d: VNFDNODE): void {
+  private mouseDown(d: COMPOSERNODES): void {
     event.preventDefault();
     if (d3.event.ctrlKey) { return; }
     if (d3.event.shiftKey) {
@@ -702,17 +720,17 @@
     }
   }
   /** Event handles when mouseup event occures @private */
-  private mouseUp(d: VNFDNODE): void {
+  private mouseUp(d: COMPOSERNODES): void {
     if (!this.mousedownNode) { return; }
     this.dragLine.classed('hidden', true);
     this.mouseupNode = d;
-    if (this.mousedownNode.nodeTypeRef === 'vdu') {
+    if (this.mousedownNode.type === 'vdu') {
       this.vduMouseDownNode();
-    } else if (this.mousedownNode.nodeTypeRef === 'cp') {
+    } else if (this.mousedownNode.type === 'cp') {
       this.cpMouseDownNode();
-    } else if (this.mousedownNode.nodeTypeRef === 'intvl') {
+    } else if (this.mousedownNode.type === 'intvl') {
       this.intVLMouseDownNode();
-    } else if (this.mousedownNode.nodeTypeRef === 'intcp') {
+    } else if (this.mousedownNode.type === 'intcp') {
       this.intCPMouseDownNode();
     } else {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.INVALIDSELECTION'));
@@ -723,123 +741,131 @@
   }
   /** Establish a connection point between vdu and other nodes @private */
   private vduMouseDownNode(): void {
-    if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'cp') {
+    if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'cp') {
       this.vduCPConnection(this.mousedownNode.id, this.mouseupNode.id);
-    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intcp') {
+    } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'intcp') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDINTCP'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'vdu') {
+    } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'vdu') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDVDU'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intvl') {
+    } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === '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') {
+    if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'vdu') {
       this.vduCPConnection(this.mouseupNode.id, this.mousedownNode.id);
-    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intvl') {
+    } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'intvl') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDVNFVL'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intcp') {
+    } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'intcp') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDINTCP'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'cp') {
+    } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === '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') {
+    if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'cp') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDCP'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'vdu') {
+    } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'vdu') {
       this.vduIntvlConnection(this.mouseupNode.id, this.mousedownNode.id);
-    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intvl') {
+    } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'intvl') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDVNFVL'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intcp') {
+    } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === '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') {
+    if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'vdu') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVDU'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'cp') {
+    } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'cp') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDCP'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intvl') {
+    } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'intvl') {
       this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVNFVL'));
       this.deselectPath();
-    } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intcp') {
+    } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === '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'] = [];
+    const vduExternalID: string = nodeA + '-eth_' + this.sharedService.randomString();
+    if (this.vnfdPackageDetails.vdu !== undefined) {
+      this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        const vduID: string = vdu.id;
+        if (vdu.id === nodeA) {
+          if (this.vnfdPackageDetails['ext-cpd'] !== undefined) {
+            this.vnfdPackageDetails['ext-cpd'].forEach((extcpd: EXTCPD, index: number): void => {
+              if (extcpd.id === nodeB) {
+                if (vdu['int-cpd'] === undefined) {
+                  vdu['int-cpd'] = [];
+                }
+                if (extcpd['int-cpd'] === undefined) {
+                  vdu['int-cpd'].push({
+                    id: vduExternalID,
+                    'virtual-network-interface-requirement': [
+                      {
+                        name: vduExternalID,
+                        position: 1,
+                        'virtual-interface': { type: 'PARAVIRT' }
+                      }
+                    ]
+                  });
+                  this.vnfdPackageDetails['ext-cpd'][index] = {
+                    id: extcpd.id,
+                    'int-cpd': {
+                      cpd: vduExternalID,
+                      'vdu-id': vduID
+                    }
+                  };
+                }
+              }
+            });
+          }
         }
-        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 = [];
+    const vduInternalID: string = nodeA + '-eth_' + this.sharedService.randomString();
+    if (this.vnfdPackageDetails.vdu !== undefined) {
+      this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        if (vdu.id === nodeA) {
+          if (vdu['int-cpd'] === undefined) {
+            vdu['int-cpd'] = [];
+          }
+          vdu['int-cpd'].push({
+            id: vduInternalID,
+            'int-virtual-link-desc': nodeB,
+            'virtual-network-interface-requirement': [
+              {
+                name: vduInternalID,
+                position: 1,
+                'virtual-interface': { type: 'PARAVIRT' }
+              }
+            ]
+          });
         }
-        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; }
@@ -851,16 +877,20 @@
     this.mousedownNode = null;
     this.mouseupNode = null;
   }
+  /** drag event @private */
+  // tslint:disable-next-line: no-any
+  private onDragDrop(): any {
+    return d3.drag().filter(this.dragFilter)
+      .on('start', this.dragstarted)
+      .on('drag', this.dragged)
+      .on('end', this.dragended);
+  }
   /** Key press event @private */
   private keyDown(): void {
     const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
     if (this.lastKeyDown !== -1) { return; }
     this.lastKeyDown = d3.event.keyCode;
     if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) {
-      this.gNetwork.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended));
-      this.gVirutualDeploymentUnit.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended));
-      this.gConnectionPoint.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended));
-      this.gIntConnectionPoint.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended));
       this.svg.classed('ctrl', true);
     }
   }
@@ -882,106 +912,117 @@
   }
   /** Events handles when Shift Click to perform create cp @private */
   // tslint:disable-next-line: no-any
-  private singleClick(nodeSelected: any, d: VNFDNODE): void {
+  private singleClick(nodeSelected: any, d: COMPOSERNODES): void {
     this.selectedNode(nodeSelected, d);
   }
   /** Get confirmation Before Deleting the Node in Topology @private */
-  private getDeleteNodeConfirmation(d: VNFDNODE): void {
+  private getDeleteNodeConfirmation(d: COMPOSERNODES): void {
     const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
     modalRef.componentInstance.topologyType = 'Delete';
     modalRef.componentInstance.topologyname = d.name;
-    if (d.nodeTypeRef === 'vdu') {
+    if (d.type === 'vdu') {
       modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VDU';
-    } else if (d.nodeTypeRef === 'intvl') {
+    } else if (d.type === 'intvl') {
       modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.INTVL';
-    } else if (d.nodeTypeRef === 'cp') {
+    } else if (d.type === 'cp') {
       modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT';
-    } else if (d.nodeTypeRef === 'intcp') {
+    } else if (d.type === 'intcp') {
       modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.INTCP';
     }
-    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => {
       if (result) {
         this.deleteNode(d);
       }
     }).catch();
   }
   /** Delete nodes @private */
-  private deleteNode(d: VNFDNODE): void {
-    const deletedNode: VNFDNODE = d;
-    this.nodes.forEach((node: VNFDNODE) => {
+  private deleteNode(d: COMPOSERNODES): void {
+    // tslint:disable-next-line: max-func-body-length
+    this.nodes.forEach((node: VNFD): void => {
       if (node.id === d.id) {
-        if (deletedNode.nodeTypeRef === 'cp') {
-          if (this.vnfdPackageDetails.vdu !== undefined) {
-            this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
-              if (vduDetails.interface !== undefined) {
-                const interfacePos: number = vduDetails.interface.map((e: VNFDInterface) => { return e['external-connection-point-ref']; })
-                  .indexOf(d.id);
-                if (interfacePos >= 0) {
-                  vduDetails.interface.splice(interfacePos, 1);
+        if (d.type === 'cp') {
+          if (this.vnfdPackageDetails['ext-cpd'] !== undefined) {
+            let getRelatedVDUCPD: string; let getRelatedVDUID: string;
+            const posExtCPD: number = this.vnfdPackageDetails['ext-cpd'].findIndex((e: EXTCPD): boolean => {
+              if (e.id === d.name) {
+                if (e['int-cpd'] !== undefined) {
+                  getRelatedVDUCPD = e['int-cpd'].cpd; getRelatedVDUID = e['int-cpd']['vdu-id'];
                 }
+                return true;
+              } else {
+                return false;
               }
             });
-          }
-          const cpPos: number = this.vnfdPackageDetails['connection-point'].map((e: CONNECTIONPOINT) => { return e.name; })
-            .indexOf(d.id);
-          if (cpPos >= 0) {
-            this.vnfdPackageDetails['connection-point'].splice(cpPos, 1);
-          }
-        } else if (deletedNode.nodeTypeRef === 'intcp') {
-          this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => {
-            // Delete Interface
-            const interfacePos: number = vduDetails.interface.map((e: VNFDInterface) => { return e['internal-connection-point-ref']; })
-              .indexOf(d.id);
-            if (interfacePos >= 0) {
-              vduDetails.interface.splice(interfacePos, 1);
+            if (posExtCPD !== -1) {
+              this.vnfdPackageDetails['ext-cpd'].splice(posExtCPD, 1);
             }
-            // Delete Internal CP
-            const interCPPos: number = vduDetails['internal-connection-point']
-              .map((e: VDUInternalConnectionPoint) => { return e.id; })
-              .indexOf(d.id);
-            if (interCPPos >= 0) {
-              vduDetails['internal-connection-point'].splice(interCPPos, 1);
-            }
-          });
-          if (this.vnfdPackageDetails['internal-vld'] !== undefined && this.vnfdPackageDetails['internal-vld'].length > 0) {
-            this.vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => {
-              const interfacePos: number = internalVLD['internal-connection-point']
-                .map((e: VLDInternalConnectionPoint) => { return e['id-ref']; }).indexOf(d.id);
-              if (interfacePos >= 0) {
-                internalVLD['internal-connection-point'].splice(interfacePos, 1);
-              }
-            });
-          }
-        } else if (deletedNode.nodeTypeRef === 'intvl') {
-          const intvlPos: number = this.vnfdPackageDetails['internal-vld']
-            .map((e: InternalVLD) => { return e.name; }).indexOf(d.id);
-          if (intvlPos >= 0) {
-            this.vnfdPackageDetails['internal-vld'].splice(intvlPos, 1);
-          }
-        } else if (deletedNode.nodeTypeRef === 'vdu') {
-          const internalCPList: string[] = [];
-          if (deletedNode.interface !== undefined && deletedNode.interface.length > 0) {
-            deletedNode.interface.forEach((interfaceNode: InternalVLD) => {
-              if (interfaceNode['internal-connection-point-ref'] !== undefined) {
-                internalCPList.push(interfaceNode['internal-connection-point-ref']);
-              }
-            });
-          }
-          internalCPList.forEach((list: string) => {
-            if (this.vnfdPackageDetails['internal-vld'] !== undefined && this.vnfdPackageDetails['internal-vld'].length > 0) {
-              this.vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => {
-                const interfacePos: number = internalVLD['internal-connection-point']
-                  .map((e: VLDInternalConnectionPoint) => { return e['id-ref']; }).indexOf(list);
-                if (interfacePos >= 0) {
-                  internalVLD['internal-connection-point'].splice(interfacePos, 1);
+            if (getRelatedVDUCPD !== undefined && getRelatedVDUID !== undefined) {
+              this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+                if (vdu.id === getRelatedVDUID) {
+                  const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => {
+                    return intCPD.id === getRelatedVDUCPD;
+                  });
+                  if (posINTCPD !== -1) {
+                    vdu['int-cpd'].splice(posINTCPD, 1);
+                  }
                 }
               });
             }
-          });
-          const vduPos: number = this.vnfdPackageDetails.vdu.map((e: VDU) => { return e.id; }).indexOf(d.id);
-          if (vduPos >= 0) {
-            this.vnfdPackageDetails.vdu.splice(vduPos, 1);
           }
+        } else if (d.type === 'intcp') {
+          this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+            const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => {
+              return intCPD.id === d.id;
+            });
+            if (posINTCPD !== -1) {
+              vdu['int-cpd'].splice(posINTCPD, 1);
+            }
+          });
+        } else if (d.type === 'intvl') {
+          const posINTVLD: number = this.vnfdPackageDetails['int-virtual-link-desc'].findIndex((intVLD: IVLD): boolean => {
+            return intVLD.id === d.id;
+          });
+          if (posINTVLD !== -1) {
+            this.vnfdPackageDetails['int-virtual-link-desc'].splice(posINTVLD, 1);
+          }
+          if (this.vnfdPackageDetails.vdu !== undefined) {
+            this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU): void => {
+              if (vduDetails['int-cpd'] !== undefined) {
+                const newVDUintCPDArray: VDUINTCPD[] = vduDetails['int-cpd'].filter((item: VDUINTCPD): boolean => {
+                  return item['int-virtual-link-desc'] !== undefined ? item['int-virtual-link-desc'] !== d.id ? true : false : true;
+                });
+                vduDetails['int-cpd'] = newVDUintCPDArray;
+              }
+            });
+          }
+        } else if (d.type === 'vdu') {
+          const getRelatedExtCPD: string[] = [];
+          const posVDU: number = this.vnfdPackageDetails.vdu.findIndex((vduDetails: VDU): boolean => {
+            if (vduDetails.id === d.id) {
+              if (vduDetails['int-cpd'] !== undefined) {
+                vduDetails['int-cpd'].forEach((intCPDDetails: VDUINTCPD): void => {
+                  if (intCPDDetails['int-virtual-link-desc'] === undefined) {
+                    getRelatedExtCPD.push(intCPDDetails.id);
+                  }
+                });
+              }
+              return true;
+            } else {
+              return false;
+            }
+          });
+          if (posVDU !== -1) {
+            this.vnfdPackageDetails.vdu.splice(posVDU, 1);
+          }
+          getRelatedExtCPD.forEach((CPDID: string, index: number): void => {
+            this.vnfdPackageDetails['ext-cpd'].forEach((extCPD: EXTCPD): void => {
+              if (extCPD['int-cpd'] !== undefined) {
+                if (extCPD['int-cpd'].cpd === CPDID) {
+                  delete extCPD['int-cpd'];
+                }
+              }
+            });
+          });
         } else {
           this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.INVALIDSELECTION'));
         }
@@ -995,38 +1036,48 @@
   }
   /** Selected nodes @private */
   // tslint:disable-next-line: no-any
-  private selectedNode(nodeSeleced: any, d: VNFDNODE): void {
+  private selectedNode(nodeSeleced: any, d: COMPOSERNODES): void {
     const alreadyIsActive: boolean = nodeSeleced.select('#' + d.id).classed(this.activeNode);
     this.deselectAllNodes();
     nodeSeleced.select('#' + d.id).classed(this.activeNode, !alreadyIsActive);
-    if (d.nodeTypeRef === 'vdu' && !alreadyIsActive) {
-      this.vnfdPackageDetails.vdu.forEach((res: VDU) => {
-        if (res.name === d.id) {
+    if (d.type === 'vdu' && !alreadyIsActive) {
+      this.vnfdPackageDetails.vdu.forEach((res: VDU): void => {
+        if (res.id === d.id) {
           this.showRightSideInfo = 'vduInfo';
           this.vduInfo = res;
+          this.oldVDUID = res.id;
         }
       });
-    } else if (d.nodeTypeRef === 'intvl' && !alreadyIsActive) {
-      this.vnfdPackageDetails['internal-vld'].forEach((res: InternalVLD) => {
-        if (res.name === d.id) {
-          this.showRightSideInfo = 'intvlInfo';
-          this.intvlInfo = res;
-          this.intvlInfo.shortName = res['short-name'];
-          this.intvlInfo.ipProfileRef = res['ip-profile-ref'];
-        }
-      });
-    } else if (d.nodeTypeRef === 'cp' && !alreadyIsActive) {
-      this.vnfdPackageDetails['connection-point'].forEach((res: CONNECTIONPOINT) => {
-        if (res.name === d.id) {
+    } else if (d.type === 'cp' && !alreadyIsActive) {
+      this.vnfdPackageDetails['ext-cpd'].forEach((cp: EXTCPD): void => {
+        const getCPDID: string = cp['int-cpd'] !== undefined ? cp['int-cpd'].cpd : cp.id;
+        if (getCPDID === d.id) {
           this.showRightSideInfo = 'cpInfo';
-          this.cpInfo = res;
+          this.cpInfo = cp;
+          this.oldCPID = cp.id;
         }
       });
-    }
-    else if (d.nodeTypeRef === 'intcp' && !alreadyIsActive) {
-      this.intcpInfo = d;
-      this.showRightSideInfo = 'intcpInfo';
-      this.intcpInfo.shortName = d['short-name'];
+    } else if (d.type === 'intvl' && !alreadyIsActive) {
+      this.vnfdPackageDetails['int-virtual-link-desc'].forEach((ivld: IVLD): void => {
+        if (ivld.id === d.id) {
+          this.showRightSideInfo = 'intvlInfo';
+          this.intvlInfo = ivld;
+          this.oldintVLID = ivld.id;
+        }
+      });
+    } else if (d.type === 'intcp' && !alreadyIsActive) {
+      this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => {
+        vdu['int-cpd'].forEach((intcpd: VDUINTCPD): void => {
+          if (intcpd.id === d.id) {
+            if (intcpd['int-virtual-link-desc'] !== undefined) {
+              intcpd['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => {
+                this.intcpInfo = vnir;
+                this.showRightSideInfo = 'intcpInfo';
+              });
+            }
+          }
+        });
+      });
     } else {
       this.showRightSideInfo = 'vnfdInfo';
     }
@@ -1038,6 +1089,10 @@
     this.connectionPoint.select('image').classed(this.activeNode, false);
     this.intConnectionPoint.select('image').classed(this.activeNode, false);
   }
+  /** Events handles when to drag using filter for the keys @private */
+  private dragFilter(): boolean {
+    return d3.event.ctrlKey && !d3.event.button;
+  }
   /** Events handles when dragstarted @private */
   private dragstarted(d: COMPOSERNODES): void {
     d.fx = d.x;
diff --git a/src/app/packages/vnf-packages/VNFPackagesComponent.ts b/src/app/packages/vnf-packages/VNFPackagesComponent.ts
index 5e23034..8169782 100644
--- a/src/app/packages/vnf-packages/VNFPackagesComponent.ts
+++ b/src/app/packages/vnf-packages/VNFPackagesComponent.ts
@@ -31,7 +31,7 @@
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
 import { SharedService } from 'SharedService';
-import { VNFData, VNFDDetails } from 'VNFDModel';
+import { VNFD, VNFData } from 'VNFDModel';
 import { VNFPackagesActionComponent } from 'VNFPackagesAction';
 
 /**
@@ -121,14 +121,16 @@
             Accept: 'application/json',
             'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
         });
-        this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
+        this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
     }
 
     /** smart table Header Colums @public */
     public generateColumns(): void {
         this.columnLists = {
             productName: { title: this.translateService.instant('PRODUCTNAME'), width: '15%', sortDirection: 'asc' },
-            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' },
+            identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+            version: { title: this.translateService.instant('VERSION'), width: '10%' },
+            provider: { title: this.translateService.instant('PROVIDER'), width: '10%' },
             type: {
                 title: this.translateService.instant('TYPE'),
                 filter: {
@@ -142,10 +144,9 @@
                         ]
                     }
                 },
-                width: '15%'
+                width: '10%'
             },
             description: { title: this.translateService.instant('DESCRIPTION'), width: '25%' },
-            version: { title: this.translateService.instant('VERSION'), width: '10%' },
             Actions: {
                 name: 'Action', width: '15%', filter: false, sort: false, type: 'custom',
                 title: this.translateService.instant('ACTIONS'),
@@ -215,23 +216,24 @@
     /** Post the droped files and reload the page @public */
     public saveFileData(urlHeader: APIURLHEADER, fileData: {}): void {
         this.fileInput.nativeElement.value = null;
-        this.restService.postResource(urlHeader, fileData).subscribe((result: {}) => {
+        this.restService.postResource(urlHeader, fileData).subscribe((result: {}): void => {
             this.notifierService.notify('success', this.translateService.instant('PAGE.VNFPACKAGE.CREATEDSUCCESSFULLY'));
             this.generateData();
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
             this.restService.handleError(error, 'post');
             this.isLoadingResults = false;
         });
     }
 
     /** Generate nsData object from loop and return for the datasource @public */
-    public generatevnfdData(vnfdpackagedata: VNFDDetails): VNFData {
+    public generatevnfdData(vnfdpackagedata: VNFD): VNFData {
         return {
             productName: vnfdpackagedata['product-name'],
             identifier: vnfdpackagedata._id,
             type: vnfdpackagedata._admin.type,
             description: vnfdpackagedata.description,
-            version: vnfdpackagedata.version
+            version: vnfdpackagedata.version,
+            provider: vnfdpackagedata.provider !== undefined ? vnfdpackagedata.provider : '-'
         };
     }
     /** Handle compose new ns package method  @public */
@@ -249,9 +251,9 @@
     /** Fetching the data from server to Load in the smarttable @protected */
     protected generateData(): void {
         this.isLoadingResults = true;
-        this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => {
+        this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFD[]): void => {
             this.vnfData = [];
-            vnfdPackageData.forEach((vnfdpackagedata: VNFDDetails) => {
+            vnfdPackageData.forEach((vnfdpackagedata: VNFD): void => {
                 const vnfDataObj: VNFData = this.generatevnfdData(vnfdpackagedata);
                 this.vnfData.push(vnfDataObj);
             });
@@ -260,12 +262,12 @@
             } else {
                 this.checkDataClass = 'dataTables_empty';
             }
-            this.dataSource.load(this.vnfData).then((data: boolean) => {
+            this.dataSource.load(this.vnfData).then((data: boolean): void => {
                 this.isLoadingResults = false;
-            }).catch(() => {
+            }).catch((): void => {
                 this.isLoadingResults = false;
             });
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
             this.restService.handleError(error, 'get');
             this.isLoadingResults = false;
         });
diff --git a/src/app/utilities/clone-package/ClonePackageComponent.ts b/src/app/utilities/clone-package/ClonePackageComponent.ts
index 94e0920..125a726 100644
--- a/src/app/utilities/clone-package/ClonePackageComponent.ts
+++ b/src/app/utilities/clone-package/ClonePackageComponent.ts
@@ -26,9 +26,10 @@
 import { APIURLHEADER, ERRORDATA, GETAPIURLHEADER, MODALCLOSERESPONSEDATA, URLPARAMS } from 'CommonModel';
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
-import { NSDDetails } from 'NSDModel';
+import { NSDATACREATION, NSDDetails } from 'NSDModel';
 import { RestService } from 'RestService';
 import { SharedService } from 'SharedService';
+import { VNFDATA } from 'VNFDModel';
 
 /**
  * Creating component
@@ -99,9 +100,9 @@
       apiUrl = environment.VNFPACKAGES_URL + '/' + this.params.id + '/vnfd';
     this.isLoadingResults = true;
     this.restService.getResource(apiUrl, httpOptions)
-      .subscribe((nsData: NSDDetails[]) => {
+      .subscribe((nsData: NSDDetails[]): void => {
         this.modifyContent(nsData);
-      }, (error: ERRORDATA) => {
+      }, (error: ERRORDATA): void => {
         this.isLoadingResults = false;
         error.error = typeof error.error === 'string' ? jsyaml.load(error.error) : error.error;
         this.restService.handleError(error, 'get');
@@ -125,30 +126,28 @@
    * Get and modify package information based on type
    */
   private modifyContent(packageInfo: NSDDetails[]): void {
-    const packageContent: string = jsyaml.load(packageInfo.toString());
     if (this.params.page === 'nsd') {
-      this.packageName = 'clone_' + packageContent['nsd:nsd-catalog'].nsd[0].name;
+      const nsPackageContent: NSDATACREATION = jsyaml.load(packageInfo.toString());
+      this.packageName = 'clone_' + nsPackageContent.nsd.nsd[0].name;
       this.endPoint = environment.NSDESCRIPTORSCONTENT_URL;
-      packageContent['nsd:nsd-catalog'].nsd.forEach((nsd: NSDDetails) => {
+      nsPackageContent.nsd.nsd.forEach((nsd: NSDDetails): void => {
         nsd.id = 'clone_' + nsd.id;
         nsd.name = 'clone_' + nsd.name;
-        nsd['short-name'] = 'clone_' + nsd['short-name'];
       });
+      this.clonePackage(nsPackageContent);
     } else {
-      this.packageName = 'clone_' + packageContent['vnfd:vnfd-catalog'].vnfd[0].name;
+      const vnfPackageContent: VNFDATA = jsyaml.load(packageInfo.toString());
+      this.packageName = 'clone_' + vnfPackageContent.vnfd['product-name'];
       this.endPoint = environment.VNFPACKAGESCONTENT_URL;
-      packageContent['vnfd:vnfd-catalog'].vnfd.forEach((vnfd: NSDDetails) => {
-        vnfd.id = 'clone_' + vnfd.id;
-        vnfd.name = 'clone_' + vnfd.name;
-        vnfd['short-name'] = 'clone_' + vnfd['short-name'];
-      });
+      vnfPackageContent.vnfd.id = 'clone_' + vnfPackageContent.vnfd.id;
+      vnfPackageContent.vnfd['product-name'] = 'clone_' + vnfPackageContent.vnfd['product-name'];
+      this.clonePackage(vnfPackageContent);
     }
-    this.clonePackage(packageContent);
   }
   /**
    * Create clone package and upload as TAR.GZ file
    */
-  private clonePackage(packageContent: string): void {
+  private clonePackage(packageContent: NSDATACREATION | VNFDATA): void {
     const descriptorInfo: string = jsyaml.dump(packageContent);
     const apiHeader: HttpHeaders = new HttpHeaders({
       'Content-Type': 'application/gzip',
@@ -164,11 +163,12 @@
           url: this.endPoint,
           httpOptions: { headers: apiHeader }
         };
-        this.restService.postResource(apiURLHeader, content).subscribe((result: { id: string }) => {
+        // tslint:disable-next-line: completed-docs
+        this.restService.postResource(apiURLHeader, content).subscribe((result: { id: string }): void => {
           this.activeModal.close(modalData);
           this.isLoadingResults = false;
           this.notifierService.notify('success', this.translateService.instant('CLONESUCCESSFULLY'));
-        }, (error: ERRORDATA) => {
+        }, (error: ERRORDATA): void => {
           this.isLoadingResults = false;
           this.restService.handleError(error, 'post');
         });
diff --git a/src/app/utilities/compose-packages/ComposePackages.ts b/src/app/utilities/compose-packages/ComposePackages.ts
index 9567b43..be70655 100644
--- a/src/app/utilities/compose-packages/ComposePackages.ts
+++ b/src/app/utilities/compose-packages/ComposePackages.ts
@@ -113,6 +113,9 @@
     this.sharedService = this.injector.get(SharedService);
   }
 
+  /** convenience getter for easy access to form fields */
+  get f(): FormGroup['controls'] { return this.packagesForm.controls; }
+
   /**
    * Lifecyle Hooks the trigger before component is instantiate
    */
@@ -132,9 +135,6 @@
     });
   }
 
-  /** convenience getter for easy access to form fields */
-  get f(): FormGroup['controls'] { return this.packagesForm.controls; }
-
   /** Create packages @public */
   public createPackages(): void {
     this.submitted = true;
@@ -166,11 +166,12 @@
       url: this.endPoint,
       httpOptions: { headers: this.headers }
     };
-    this.restService.postResource(apiURLHeader, packageContent).subscribe((result: { id: string }) => {
+    // tslint:disable-next-line: completed-docs
+    this.restService.postResource(apiURLHeader, packageContent).subscribe((result: { id: string }): void => {
       this.isLoadingResults = false;
       this.activeModal.close();
       this.composeNSPackages(result.id);
-    }, (error: ERRORDATA) => {
+    }, (error: ERRORDATA): void => {
       this.isLoadingResults = false;
       this.restService.handleError(error, 'post');
     });
@@ -187,48 +188,54 @@
       this.notifierService.notify('success', this.packagesForm.value.name + ' ' +
         this.translateService.instant('PAGE.VNFPACKAGE.CREATEDSUCCESSFULLY'));
     }
-    this.router.navigate([packageUrl, id]).catch(() => {
+    this.router.navigate([packageUrl, id]).catch((): void => {
       // Catch Navigation Error
     });
   }
   /** Deafult template for NS and VNF Packages @private */
   private packageYaml(descriptorType: string): string {
     let packageYaml: {} = {};
+    const composerName: string = 'NGUI Composer';
+    const composerDefaultVersion: string = '1.0';
     if (descriptorType === 'ns-package') {
       packageYaml = {
-        'nsd:nsd-catalog': {
+        nsd: {
           nsd: [
             {
-              'short-name': this.packagesForm.value.name,
-              vendor: 'OSM Composer',
-              description: this.packagesForm.value.name + ' descriptor',
-              vld: [],
-              'constituent-vnfd': [],
-              version: '1.0',
               id: this.packagesForm.value.name,
-              name: this.packagesForm.value.name
+              name: this.packagesForm.value.name,
+              version: composerDefaultVersion,
+              description: this.packagesForm.value.name + ' descriptor',
+              designer: composerName,
+              df: [
+                {
+                  id: 'default-df',
+                  'vnf-profile': []
+                }
+              ]
             }
           ]
         }
       };
     } else {
       packageYaml = {
-        'vnfd:vnfd-catalog': {
-          vnfd: [
+        vnfd: {
+          id: this.packagesForm.value.name,
+          'product-name': this.packagesForm.value.name,
+          version: composerDefaultVersion,
+          description: this.packagesForm.value.name + ' descriptor',
+          provider: composerName,
+          df: [
             {
-              'short-name': this.packagesForm.value.name,
-              vdu: [],
-              description: '',
-              'mgmt-interface': {
-                cp: ''
-              },
-              id: this.packagesForm.value.name,
-              version: '1.0',
-              'internal-vld': [],
-              'connection-point': [],
-              name: this.packagesForm.value.name
+              id: 'default-df',
+              'instantiation-level': [],
+              'vdu-profile': []
             }
-          ]
+          ],
+          'ext-cpd': [],
+          vdu: [],
+          'sw-image-desc': [],
+          'virtual-storage-desc': []
         }
       };
     }
diff --git a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
index 03f5564..92a2726 100644
--- a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
+++ b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
@@ -29,8 +29,8 @@
     <div class="modal-body">
       <div *ngIf="topologyType === 'Add'">
         <p [innerHTML]="topologyname"></p>
-        <ng-select placeholder="{{'SELECT' | translate}}" formControlName="cpName" [items]="cpDetails" bindLabel="name"
-          bindValue="name" [(ngModel)]="connectionPointInput"
+        <ng-select placeholder="{{'SELECT' | translate}}" formControlName="cpName" [items]="cpDetails" bindLabel="id"
+          bindValue="id" [(ngModel)]="connectionPointInput"
           [ngClass]="{ 'is-invalid': submitted && f.cpName.errors }"></ng-select>
       </div>
     </div>
@@ -51,7 +51,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <span *ngIf="topologyType === 'Delete'">{{'DELETECONFIRMPOPUPMESSAGE' | translate}} {{ topologyname }} ?</span>
+    <span *ngIf="topologyType === 'Delete'">{{'DELETECONFIRMPOPUPMESSAGE' | translate}} <b>{{ topologyname }}</b> ?</span>
     <ul *ngIf="topologyType === 'Info'">
       <li>
         <p><b>{{'PAGE.TOPOLOGY.HELPINFO.CREATEEDGE' | translate}}</b>:
diff --git a/src/app/utilities/delete/DeleteComponent.ts b/src/app/utilities/delete/DeleteComponent.ts
index 014b66a..b403e9b 100644
--- a/src/app/utilities/delete/DeleteComponent.ts
+++ b/src/app/utilities/delete/DeleteComponent.ts
@@ -115,8 +115,6 @@
     this.title = '';
     if (data.name !== undefined) {
       this.title = data.name;
-    } else if (data.shortName !== undefined) {
-      this.title = data.shortName;
     } else if (data.projectName !== undefined) {
       this.title = data.projectName;
       this.id = this.title;
@@ -124,6 +122,8 @@
       this.title = data.userName;
     } else if (data.username !== undefined) {
       this.title = data.username;
+    } else if (data.productName !== undefined) {
+      this.title = data.productName;
     }
   }
   /** Generate Delete url from data @public */
diff --git a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts
index 6e7fbfb..18f3e5a 100644
--- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts
+++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts
@@ -109,7 +109,7 @@
       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
     });
     this.nsdID = this.value.identifier;
-    this.nsdName = this.value.shortName;
+    this.nsdName = this.value.name;
   }
 
   /** Instantiate NS using modalservice @public */
diff --git a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts
index f9d1955..cd0d2dc 100644
--- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts
+++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts
@@ -108,7 +108,7 @@
       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
     });
     this.vnfID = this.value.identifier;
-    this.vnfName = this.value.shortName;
+    this.vnfName = this.value.productName;
   }
 
   /** Delete VNF packages @public */