diff --git a/src/app/business/delfin/delfin-resolver.service.ts b/src/app/business/delfin/delfin-resolver.service.ts
index 53fb4820..27057de6 100644
--- a/src/app/business/delfin/delfin-resolver.service.ts
+++ b/src/app/business/delfin/delfin-resolver.service.ts
@@ -155,7 +155,6 @@ export class DelfinResolver implements Resolve<any> {
                 if(element['quotasExist']){
                     // Get all the Quotas associated with the Storage device
                     this.ds.getAllQuotas(element['id']).subscribe((res)=>{
-                        console.log("Quotas fetched")
                         let quotas = res.json().quotas;
                         element['quotas'] = quotas;
                     }, (error)=>{
@@ -173,4 +172,4 @@ export class DelfinResolver implements Resolve<any> {
   resolve(): Observable<any> {
     return this.allStorages;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/business/delfin/delfin.service.ts b/src/app/business/delfin/delfin.service.ts
index c51665bb..35f30cf8 100644
--- a/src/app/business/delfin/delfin.service.ts
+++ b/src/app/business/delfin/delfin.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { I18NService, HttpService, ParamStorService, Consts } from '../../shared/api';
+import { I18NService, HttpService, ParamStorService, Consts, Utils } from '../../shared/api';
 import { Observable } from 'rxjs';
 
 @Injectable()
@@ -61,31 +61,32 @@ export class DelfinService {
 
     //get all Volumes
     getAllVolumes(storageId?, nativeVolumeId?, nativeStoragePoolId?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(nativeVolumeId){
-            query += "?native_volume_id=" + nativeVolumeId;
+            query['native_volume_id'] = nativeVolumeId;
         }
         if(nativeStoragePoolId){
-            query += "?native_storage_pool_id=" + nativeStoragePoolId;
+            query['native_storage_pool_id'] = nativeStoragePoolId;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinVolumesUrl + query;
         return this.http.get(url);
     }
@@ -97,31 +98,32 @@ export class DelfinService {
 
     //get all Storage pools
     getAllStoragePools(storageId?, storagePoolId?, nativeStoragePoolId?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(storagePoolId){
-            query += "?id=" + storagePoolId;
+            query['id'] = storagePoolId;
         }
         if(nativeStoragePoolId){
-            query += "?native_storage_pool_id=" + nativeStoragePoolId;
+            query['native_storage_pool_id'] = nativeStoragePoolId;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinStoragePoolsUrl + query;
         return this.http.get(url);
     }
@@ -133,31 +135,32 @@ export class DelfinService {
 
 //get all Controllers
     getAllControllers(storageId?, controllerId?, nativeControllerId?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(controllerId){
-            query += "?id=" + controllerId;
+            query['id'] = controllerId;
         }
         if(nativeControllerId){
-            query += "?native_controller_id=" + nativeControllerId;
+            query['native_controller_id'] = nativeControllerId;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinControllersUrl + query;
         return this.http.get(url);
     }
@@ -168,32 +171,33 @@ export class DelfinService {
     }
 
     //get all Ports
-    getAllPorts(storageId?, portId?, nativePortId?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+    getAllPorts(storageId?, nativePortId?, portId?, name?, status?, limit?, offset?, sort?): Observable<any> {
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
-        }
-        if(portId){
-            query += "?id=" + portId;
+            query['storage_id'] = storageId;
         }
         if(nativePortId){
-            query += "?native_port_id=" + nativePortId;
+            query['native_port_id'] = nativePortId;
+        }
+        if(portId){
+            query['id'] = portId;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinPortsUrl + query;
         return this.http.get(url);
     }
@@ -205,31 +209,32 @@ export class DelfinService {
 
     //get all Disks
     getAllDisks(storageId?, diskId?, nativeDiskId?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(diskId){
-            query += "?id=" + diskId;
+            query['id'] = diskId;
         }
         if(nativeDiskId){
-            query += "?native_port_id=" + nativeDiskId;
+            query['native_port_id'] = nativeDiskId;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinDisksUrl + query;
         return this.http.get(url);
     }
@@ -241,34 +246,35 @@ export class DelfinService {
 
     //get all Qtrees
     getAllQtrees(storageId?, qtreeId?, nativeFilesystemId?, id?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(qtreeId){
-            query += "?native_qtree_id=" + qtreeId;
+            query['native_qtree_id'] = qtreeId;
         }
         if(nativeFilesystemId){
-            query += "?native_filesystem_id=" + nativeFilesystemId;
-        }
-        if(name){
-            query += "?name=" + name;
+            query['native_filesystem_id'] = nativeFilesystemId;
         }
         if(id){
-            query += "?id=" + id;
+            query['id'] = id;
+        }
+        if(name){
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinQtreesUrl + query;
         return this.http.get(url);
     }
@@ -280,37 +286,38 @@ export class DelfinService {
 
     //get all Filesystems
     getAllFilesystems(storageId?, nativeFilesystemId?, nativePoolId?, securityMode?, id?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(nativeFilesystemId){
-            query += "?native_filesystem_id=" + nativeFilesystemId;
+            query['native_filesystem_id'] = nativeFilesystemId;
         }
         if(nativePoolId){
-            query += "?native_pool_id=" + nativePoolId;
+            query['native_pool_id'] = nativePoolId;
         }
         if(securityMode){
-            query += "?security_mode=" + securityMode;
+            query['security_mode'] = securityMode;
         }
         if(id){
-            query += "?id=" + id;
+            query['id'] = id;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinFilesystemsUrl + query;
         return this.http.get(url);
     }
@@ -322,34 +329,35 @@ export class DelfinService {
 
     //get all Shares
     getAllShares(storageId?, shareId?, nativeFilesystemId?, qtreeId?, protocol?, name?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
-            query += "?storage_id=" + storageId;
+            query['storage_id'] = storageId;
         }
         if(shareId){
-            query += "?native_share_id=" + shareId;
+            query['native_share_id'] = shareId;
         }
         if(nativeFilesystemId){
-            query += "?native_filesystem_id=" + nativeFilesystemId;
+            query['native_filesystem_id'] = nativeFilesystemId;
         }
         if(qtreeId){
-            query += "?qtree_id=" + qtreeId;
+            query['qtree_id'] = qtreeId;
         }
         if(protocol){
-            query += "?protocol=" + protocol;
+            query['protocol'] = protocol;
         }
-        if(name){
-            query += "?name=" + name;
+         if(name){
+            query['name'] = name;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinSharesUrl + query;
         return this.http.get(url);
     }
@@ -361,7 +369,7 @@ export class DelfinService {
 
     //get all Quotas
     getAllQuotas(storageId?, nativeFilesystemId?, nativeQtreeId?, securityMode?, id?, name?, status?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         if(storageId){
             query += "?storage_id=" + storageId;
         }
@@ -375,23 +383,24 @@ export class DelfinService {
             query += "?security_mode=" + securityMode;
         }
         if(id){
-            query += "?id=" + id;
+            query['id'] = id;
         }
         if(name){
-            query += "?name=" + name;
+            query['name'] = name;
         }
         if(status){
-            query += "?status=" + status;
+            query['status'] = status;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinQuotasUrl + query;
         return this.http.get(url);
     }
@@ -439,35 +448,36 @@ export class DelfinService {
     //Get All Masking Views
     
     getAllMaskingViews(storageId, nativeMaskingViewId?, nativeStorageHostId?, nativeStorageHostGroupId?, nativeStorageVolumeGroupId?, nativeStoragePortGroupId?, name?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         
         if(nativeMaskingViewId){
-            query += "?native_masking_view_id=" + nativeMaskingViewId;
+            query['native_masking_view_id'] = nativeMaskingViewId;
         }
         if(nativeStorageHostId){
-            query += "?native_storage_host_id=" + nativeStorageHostId;
+            query['native_storage_host_id'] = nativeStorageHostId;
         }
         if(nativeStorageHostGroupId){
-            query += "?native_storage_host_group_id=" + nativeStorageHostGroupId;
+            query['native_storage_host_group_id'] = nativeStorageHostGroupId;
         }
         if(nativeStorageVolumeGroupId){
-            query += "?native_volume_group_id=" + nativeStorageVolumeGroupId;
+            query['native_volume_group_id'] = nativeStorageVolumeGroupId;
         }
         if(nativeStoragePortGroupId){
-            query += "?native_port_group_id=" + nativeStoragePortGroupId;
+            query['native_port_group_id'] = nativeStoragePortGroupId;
         }
-        if(name){
-            query += "?name=" + name;
+         if(name){
+            query['name'] = name;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinStoragesUrl + '/' + storageId + '/masking-views' + query;
         return this.http.get(url);
     }
@@ -479,45 +489,47 @@ export class DelfinService {
     }
 
     getAllStorageHostGroups(storageId, nativeStorageHostGroupId?, name?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         
         if(nativeStorageHostGroupId){
-            query += "?native_storage_host_group_id=" + nativeStorageHostGroupId;
+            query['native_storage_host_group_id'] = nativeStorageHostGroupId;
         }
-        if(name){
-            query += "?name=" + name;
+         if(name){
+            query['name'] = name;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinStoragesUrl + '/' + storageId + '/storage-host-groups' + query;
         return this.http.get(url);
     }
 
     getAllStorageHosts(storageId, nativeStorageHostId?, name?, limit?, offset?, sort?): Observable<any> {
-        let query = "";
+        let query = {};
         
         if(nativeStorageHostId){
-            query += "?native_storage_host_id=" + nativeStorageHostId;
+            query['native_storage_host_id'] = nativeStorageHostId;
         }
-        if(name){
-            query += "?name=" + name;
+         if(name){
+            query['name'] = name;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinStoragesUrl + '/' + storageId + '/storage-hosts' + query;
         return this.http.get(url);
     }
@@ -526,20 +538,21 @@ export class DelfinService {
         let query = "";
        
         if(native_storage_host_initiator_id){
-            query += "?native_storage_host_initiator_id=" + native_storage_host_initiator_id;
+            query['native_storage_host_initiator_id'] = native_storage_host_initiator_id;
         }
-        if(name){
-            query += "?name=" + name;
+         if(name){
+            query['name'] = name;
         }
         if(limit){
-            query += "?limit=" + limit;
+            query['limit'] = limit;
         }
         if(offset){
-            query += "?offset=" + offset;
+            query['offset'] = offset;
         }
         if(sort){
-            query += "?sort=" + sort;
+            query['sort'] = sort;
         }
+        query = '?' + Utils.prePareQuery(query);
         let url =this.delfinStoragesUrl + '/' + storageId + '/storage-host-initiators' + query;
         return this.http.get(url);
     }
diff --git a/src/app/business/delfin/masking-views/masking-views.component.html b/src/app/business/delfin/masking-views/masking-views.component.html
index 4c21e318..bc299dc7 100644
--- a/src/app/business/delfin/masking-views/masking-views.component.html
+++ b/src/app/business/delfin/masking-views/masking-views.component.html
@@ -47,20 +47,14 @@
                     <a [routerLink]="" (click)="showDetailsView(maskingView.storageHost, 'storageHost')"> {{ maskingView.storageHost && maskingView.storageHost.name ? maskingView.storageHost.name : '--'}} </a>
                 </ng-template>
             </p-column>
-            <p-column header="Volumes" [style]="{'width': '10%'}">
+            <p-column header="Volume" [style]="{'width': '10%'}">
                 <ng-template pTemplate="body" let-maskingView="rowData">
-                    <a [routerLink]="" (click)="showDetailsView(maskingView.volumes, 'volumesList')"> View </a>
+                    <a [routerLink]="" (click)="showDetailsView(maskingView.volume, 'volumesList')"> View </a>
                 </ng-template>
             </p-column>
-            <p-column header="Ports" [style]="{'width': '10%'}">
+            <p-column header="Port" [style]="{'width': '10%'}">
                 <ng-template pTemplate="body" let-maskingView="rowData">
-                    <a [routerLink]="" (click)="showDetailsView(maskingView.ports, 'portsList')"> View </a>
-                </ng-template>
-            </p-column>
-            <p-column header="Storage Host Initiators" [style]="{'width': '10%'}">
-                <ng-template pTemplate="body" let-maskingView="rowData">
-                    <a *ngIf="maskingView.storage_host_initiators && maskingView.storage_host_initiators.length" [routerLink]="" (click)="showDetailsView(maskingView.storage_host_initiators, 'maskingViewInitiatorsList')"> View </a>
-                    <span *ngIf="!maskingView.storage_host_initiators" >--</span>
+                    <a [routerLink]="" (click)="showDetailsView(maskingView.port, 'portsList')"> View </a>
                 </ng-template>
             </p-column>
         </p-dataTable>
@@ -72,91 +66,343 @@
             <h1 *ngIf="showDetails" style="font-weight:normal">{{ detailsLabels.heading }}</h1>
         </div>
         <div class="right-sidebar-body">
-            <!-- Show Volumes List -->
+            <!-- Show Volume Details -->
             <div *ngIf="detailSource=='volumesList'">
-                <app-delfin-volumes [selectedStorage]="selectedStorageId" [selectedVolumes]="detailsObj"></app-delfin-volumes>
+                <div class="details-basic-info">
+                    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
+                        <div class="ui-grid-col-12">
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.name}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.name}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.status}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    <span class="storage-status-icon" [ngClass]="{normal: detailsObj.status=='normal', abnormal: detailsObj.status=='abnormal' || detailsObj.status=='offline'}"><i class="fa fa-circle"></i></span>
+                                    <span *ngIf="detailsObj.status=='normal'">Normal</span>
+                                    <span *ngIf="detailsObj.status=='abnormal'">Abnormal</span>
+                                    <span *ngIf="detailsObj.status=='offline'">Offline</span>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.wwn}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.wwn}}
+                                </div>
+                            
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.id}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.id | slice:0:20}}
+                                    <a *ngIf="detailsObj && detailsObj.id.length > 20" pTooltip="{{detailsObj.id}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.native_volume_id}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.native_volume_id | slice:0:20}}
+                                    <a *ngIf="detailsObj.native_volume_id.length > 20" pTooltip="{{detailsObj.native_volume_id}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.created_at}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.created_at ? (detailsObj.created_at | date:'long') : '--'}}
+                                </div>
+                                
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                    <div class="ui-grid-col-2">
+                                        {{volumeLabel.compressed}}
+                                    </div>
+                                    <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{detailsObj.compressed ? detailsObj.compressed : '--'}}
+                                    </div>
+                                    <div class="ui-grid-col-2">
+                                        {{volumeLabel.deduplicated}}:
+                                    </div>
+                                    <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{ detailsObj.deduplicated ? detailsObj.deduplicated : '--'}}
+                                    </div>
+                                    
+                                    <div class="ui-grid-col-2">
+                                        {{volumeLabel.updated_at}}:
+                                    </div>
+                                    <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{detailsObj.updated_at ? (detailsObj.updated_at | date:'long') : '--'}}
+                                    </div>
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.description}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{ detailsObj.description | slice:0:20 }}
+                                    <a *ngIf="detailsObj.description.length > 20" pTooltip="{{detailsObj.description}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    
+                                </div>
+                                <div class="ui-grid-col-2">
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                </div>
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-12">
+                                    <span>Capacity Summary</span>
+                                </div>
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.free_capacity}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{ detailsObj.capacity.free}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.used_capacity}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{ detailsObj.capacity.used}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{volumeLabel.total_capacity}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{ detailsObj.capacity.total}}
+                                </div>
+                            </div>
+                            
+                        </div>
+                    </div>
+                </div>
             </div>            
             
-            <!-- Show Ports List -->
+            <!-- Show Port Details -->
             <div *ngIf="detailSource=='portsList'">
-                <app-delfin-ports  [selectedStorage]="selectedStorageId" [selectedPorts]="detailsObj"></app-delfin-ports>
+                <div class="details-basic-info">
+                    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
+                        <div class="ui-grid-col-12">
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.name}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.name}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.health_status}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    <span class="storage-status-icon" [ngClass]="{normal: detailsObj.health_status=='normal', abnormal: detailsObj.health_status=='abnormal' || detailsObj.health_status=='unknown' || detailsObj.health_status=='offline'}"><i class="fa fa-circle"></i></span>
+                                    <span *ngIf="detailsObj.health_status=='normal'">Normal</span>
+                                    <span *ngIf="detailsObj.health_status=='abnormal' || detailsObj.health_status=='unknown'">Unknown</span>
+                                    <span *ngIf="detailsObj.health_status=='offline'">Offline</span>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.native_port_id}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.native_port_id | slice:0:20}}
+                                    <a *ngIf="detailsObj.native_port_id.length > 20" pTooltip="{{detailsObj.native_port_id}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                            
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.id}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.id | slice:0:20}}
+                                    <a *ngIf="detailsObj && detailsObj.id.length > 20" pTooltip="{{detailsObj.id}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.connection_status}}:
+                                    
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    <span class="storage-status-icon" [ngClass]="{normal: detailsObj.connection_status=='connected', abnormal: detailsObj.connection_status=='unknown' || detailsObj.connection_status=='disconnected'}"><i class="fa fa-circle"></i></span>
+                                    <span *ngIf="detailsObj.connection_status=='connected'">Connected</span>
+                                    <span *ngIf="detailsObj.connection_status=='disconnected'">Disconnected</span>
+                                    <span *ngIf="detailsObj.connection_status=='unknown'">Unknown</span>
+                                    
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.native_parent_id}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.native_parent_id | slice:0:20}}
+                                    <a *ngIf="detailsObj.native_parent_id.length > 20" pTooltip="{{detailsObj.native_parent_id}}" tooltipPosition="top">
+                                        ...
+                                    </a>
+                                </div>
+                                
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                    <div class="ui-grid-col-2">
+                                        {{portLabel.storage_id}}:
+                                    </div>
+                                    <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{detailsObj.storage_id | slice:0:20}}
+                                        <a *ngIf="detailsObj.storage_id.length > 20" pTooltip="{{detailsObj.storage_id}}" tooltipPosition="top">
+                                            ...
+                                        </a>
+                                    </div>
+                                    <div class="ui-grid-col-2">
+                                        {{portLabel.ipv4}} / {{portLabel.ipv4_mask}}:
+                                    </div>
+                                    <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{detailsObj.ipv4 ? detailsObj.ipv4 : '--'}} / {{detailsObj.ipv4_mask ? detailsObj.ipv4_mask : '--'}}
+                                    </div>
+                                    
+                                    <div class="ui-grid-col-2">
+                                        {{portLabel.ipv6}} / {{portLabel.ipv6_mask}}:
+                                    </div>
+                                    <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                        {{detailsObj.ipv6 ? detailsObj.ipv6 : '--'}} / {{detailsObj.ipv6_mask ? detailsObj.ipv6_mask : '--'}}
+                                    </div>
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.location}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.location ? detailsObj.location : '--'}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.mac_address}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.mac_address ? detailsObj.mac_address : '--'}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.type}} / {{portLabel.logical_type}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.type ? detailsObj.type : '--'}} / {{detailsObj.logical_type ? detailsObj.logical_type : '--'}}
+                                </div>
+                            </div>
+                            <div class="ui-grid-row details-basic-item-class">
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.speed}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.speed ? detailsObj.speed : '--'}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.max_speed}}:
+                                </div>
+                                <div class="ui-grid-col-2 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.max_speed ? detailsObj.max_speed : '--'}}
+                                </div>
+                                <div class="ui-grid-col-2">
+                                    {{portLabel.wwn}}:
+                                </div>
+                                <div class="ui-grid-col-3 details-basic-item-value-color" *ngIf="detailsObj">
+                                    {{detailsObj.wwn ? detailsObj.wwn : '--'}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>            
 
             <!-- Show Storage Host Details -->
-            <div *ngIf="detailSource=='storageHost'" class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
-                <div class="ui-grid-row volume-basic-item-class">
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.name}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.name}}
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.status}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.status? detailsObj.status : '--'}}
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.createdAt}}:
-                    </div>
-                    <div class="ui-grid-col-3 details-sidebar-value">
-                        {{detailsObj && detailsObj.createdAt ? (detailsObj.createdAt | date:'long') : '--'}}
-                    </div>
-                        
-                </div>
-                <div class="ui-grid-row volume-basic-item-class">
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.ip}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.ip_address}}
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.storage_id}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.storage_id}}
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.updatedAt}}:
-                    </div>
-                    <div class="ui-grid-col-3 details-sidebar-value">
-                        {{detailsObj && detailsObj.updatedAt ? (detailsObj.updatedAt | date:'long') : '--'}}
-                    </div>
-                    
-                </div>
-                <div class="ui-grid-row volume-basic-item-class">
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.description}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.description ? detailsObj.description : '--'}}
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.native_storage_host_id}}:
-                    </div>
-                    <div class="ui-grid-col-2 details-sidebar-value">
-                        {{detailsObj && detailsObj.native_storage_host_id}}
-                    </div>
-                    
-                    <div class="ui-grid-col-2 details-sidebar-label">
-                        {{label.osType}}:
-                    </div>
-                    <div class="ui-grid-col-3 details-sidebar-value">
-                        {{detailsObj &&detailsObj.os_type}}
+            <div *ngIf="detailSource=='storageHost'">
+                <div class="details-basic-info">
+                    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid">
+                        <div class="ui-grid-row volume-basic-item-class">
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.name}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.name}}
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.status}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.status? detailsObj.status : '--'}}
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.createdAt}}:
+                            </div>
+                            <div class="ui-grid-col-3 details-sidebar-value">
+                                {{detailsObj && detailsObj.createdAt ? (detailsObj.createdAt | date:'long') : '--'}}
+                            </div>
+                                
+                        </div>
+                        <div class="ui-grid-row volume-basic-item-class">
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.ip}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.ip_address}}
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.storage_id}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.storage_id}}
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.updatedAt}}:
+                            </div>
+                            <div class="ui-grid-col-3 details-sidebar-value">
+                                {{detailsObj && detailsObj.updatedAt ? (detailsObj.updatedAt | date:'long') : '--'}}
+                            </div>
+                            
+                        </div>
+                        <div class="ui-grid-row volume-basic-item-class">
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.description}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.description ? detailsObj.description : '--'}}
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.native_storage_host_id}}:
+                            </div>
+                            <div class="ui-grid-col-2 details-sidebar-value">
+                                {{detailsObj && detailsObj.native_storage_host_id}}
+                            </div>
+                            
+                            <div class="ui-grid-col-2 details-sidebar-label">
+                                {{hostLabel.osType}}:
+                            </div>
+                            <div class="ui-grid-col-3 details-sidebar-value">
+                                {{detailsObj &&detailsObj.os_type}}
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <!-- Show Masking view Initiators List -->
+            <!-- Show Storage host Initiators List -->
             <div *ngIf="detailSource=='storageHost'">
                 <app-delfin-storage-host-initiators [selectedStorage]="selectedStorageId" [selectedInitiators]="detailsObj.storage_host_initiators"></app-delfin-storage-host-initiators>
             </div>
-            <!-- Show Masking view Initiators List -->
-            <div *ngIf="detailSource=='maskingViewInitiatorsList'">
-                <app-delfin-storage-host-initiators [selectedStorage]="selectedStorageId" [selectedInitiators]="detailsObj"></app-delfin-storage-host-initiators>
-            </div>
         </div>
         <div class="right-sidebar-footer">
             <div style="margin-top:100px;">
diff --git a/src/app/business/delfin/masking-views/masking-views.component.ts b/src/app/business/delfin/masking-views/masking-views.component.ts
index 154dc856..28690375 100644
--- a/src/app/business/delfin/masking-views/masking-views.component.ts
+++ b/src/app/business/delfin/masking-views/masking-views.component.ts
@@ -35,7 +35,7 @@ export class MaskingViewsComponent implements OnInit {
     }
     detailSource: any;
     detailsObj: any;
-    label = {
+    hostLabel = {
         name: "Name",
         description: "Description",
         createdAt: "Created At",
@@ -50,7 +50,48 @@ export class MaskingViewsComponent implements OnInit {
         initiators: "Initiators",
         storage_id: "Storage ID",
         native_storage_host_id: "Native Host ID"
-  };
+    };
+    volumeLabel = {
+        name: this.i18n.keyID["sds_block_volume_name"],
+        description: this.i18n.keyID["sds_block_volume_descri"],
+        wwn: "WWN",
+        native_volume_id: "Native Volume ID",
+        storage_id: "Storage ID",
+        compressed: "Compressed",
+        deduplicated: "Deduplicated",
+        status: "Status",
+        created_at: "Created At",
+        updated_at: "Updated At",
+        free_capacity: "Free Capacity",
+        used_capacity: "Used Capacity",
+        total_capacity: "Total Capacity",
+        id: "Delfin ID",
+    };
+    portLabel = {
+        name: this.i18n.keyID["sds_block_volume_name"],
+        native_port_id: "Native Port ID",
+        storage_id: "Storage ID",
+        cpu_info: "CPU Info",
+        soft_version: "Software Version",
+        connection_status: "Connection Status",
+        health_status: "Health Status",
+        type: "Type",
+        logical_type: "Logical Type",
+        speed: "Speed",
+        max_speed: "Max Speed",
+        native_parent_id: "Native parent ID",
+        wwn: "WWN",
+        mac_address: "MAC Address",
+        ipv4: "IPV4",
+        ipv4_mask: "IPV4 Mask",
+        ipv6: "IPV6",
+        ipv6_mask: "IPV6 Mask",
+        created_at: "Created At",
+        updated_at: "Updated At",
+        memory_size: "Memory Size",
+        location: "Location",
+        id: "Delfin ID",
+    };
 
     constructor(
         public i18n: I18NService,
@@ -89,13 +130,31 @@ export class MaskingViewsComponent implements OnInit {
 
 
                 if(view['native_volume_group_id']){
-                } else if(view['volumes'] && view['volumes'].length){
-                    view['volumesCount'] = view['volumes'].length;
+                } else if(view['native_volume_id']){
+                    //view['volumesCount'] = view['volumes'].length;
+                    this.ds.getAllVolumes(storageId, view['native_volume_id']).subscribe((res)=>{
+                        let volume = res.json().volumes[0];
+                        //Calculate the capacities 
+                        volume['capacity'] = {};
+                        let percentUsage = Math.ceil((volume['used_capacity']/volume['total_capacity']) * 100);
+                        volume['capacity'].used = Utils.formatBytes(volume['used_capacity']);
+                        volume['capacity'].free = Utils.formatBytes(volume['free_capacity']);
+                        volume['capacity'].total = Utils.formatBytes(volume['total_capacity']);
+                        volume['capacity'].usage = percentUsage;
+                        view['volume'] = volume;
+                    }, (error)=>{   
+                        console.log("Something went wrong. Could not fetch volume details.")
+                    })
                 }
 
                 if(view['native_port_group_id']){
-                } else if(view['ports'] && view['ports'].length){
-                    view['portsCount'] = view['ports'].length;
+                } else if(view['native_port_id']){
+                    this.ds.getAllPorts(storageId, view['native_port_id']).subscribe((res)=>{
+                        let port = res.json().ports[0];
+                        view['port'] = port;
+                    }, (error)=>{   
+                        console.log("Something went wrong. Could not fetch port details.")
+                    })
                 }
             });
             this.allMaskingViews = allViews;
@@ -117,10 +176,10 @@ export class MaskingViewsComponent implements OnInit {
             case 'storageHost': this.detailsLabels.heading = "Storage Host Details";
               
               break;
-            case 'volumesList': this.detailsLabels.heading = "Volumes";
+            case 'volumesList': this.detailsLabels.heading = "Volume Details";
               
               break;
-            case 'portsList': this.detailsLabels.heading = "Ports";
+            case 'portsList': this.detailsLabels.heading = "Port Details";
               
               break;
             case 'maskingViewInitiatorsList': this.detailsLabels.heading = "Storage Host Initiators";
@@ -139,7 +198,6 @@ export class MaskingViewsComponent implements OnInit {
     }
     closeSidebar(){
       this.showDetails = false;
-      this.detailsObj = [];
       this.showRightSidebar = false;
     }
     
diff --git a/src/app/business/delfin/storages/storages.component.ts b/src/app/business/delfin/storages/storages.component.ts
index 9021348f..0b638dae 100644
--- a/src/app/business/delfin/storages/storages.component.ts
+++ b/src/app/business/delfin/storages/storages.component.ts
@@ -422,7 +422,6 @@ export class StoragesComponent implements OnInit {
                         
                         // Get all the Ports associated with the Storage device
                         this.ds.getAllPorts(element['id']).subscribe((res)=>{
-                            console.log("Ports fetched")
                             ports = res.json().ports;
                             element['ports'] = ports;
                         }, (error)=>{
diff --git a/src/app/shared/utils/utils.ts b/src/app/shared/utils/utils.ts
index 659599ce..8ff8b8b9 100644
--- a/src/app/shared/utils/utils.ts
+++ b/src/app/shared/utils/utils.ts
@@ -200,4 +200,16 @@ export class Utils {
         }
     }
 
+    /**
+     * prepare a query param string from received object
+     * 
+     */
+    static prePareQuery(object){
+        let query = ""
+        for (let item in object)
+             query += encodeURIComponent(item) + '=' + 
+                encodeURIComponent(object[item]) + '&'
+        return query.slice(0, -1)
+    }
+
 }
diff --git a/src/assets/business/css/site.scss b/src/assets/business/css/site.scss
index 63c06833..1478715c 100644
--- a/src/assets/business/css/site.scss
+++ b/src/assets/business/css/site.scss
@@ -1961,12 +1961,8 @@ a {
     .show-selected-backends, .show-selected-tenants{
         color: #fff;
     }
-    .details-sidebar-labels{
-        color: #aaa;
-        font-weight: 600;
-    }
     .details-sidebar-value{
-        color: #fff;
+        font-weight: 700;
     }
 }
 .details-sidebar-panel.ui-sidebar-lg.masking-view{