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'],