diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 6d119d0ed..ff83913e9 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -1,84 +1,139 @@
+
 <mat-card>
-  <mat-card-content>
-    <div class="mb-2">
-      <mat-card>
-        <mat-card-content style="background:#e00201;">
-          <div fxLayout="row" fxLayoutAlign="start center" class="filter-header">
-            <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs" fxFlex="45" style="color:#fff;">
-              <h4>{{master.lender_full_name}} - {{master.branch_name}}</h4>
-              <span *ngIf="master.lender_applicant_id"> {{master.lender_applicant_id}}  -  </span> {{master.pd_date_of_initiation}}
-            </div>
-            <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1" fxFlex="55" style="text-align:right;">
-              <button *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && currentPDStatus!=pdStatusCheck.QC_COMPLETED"
-                mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above"
-                (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
-              <button *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && currentPDStatus!=pdStatusCheck.QC_COMPLETED"
-                mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above"
-                (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
-              <button *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.TRIGGERED && currentPDStatus!=pdStatusCheck.DRAFT && enableStartPD"
-                mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above"
-                (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
-
-              <button *ngIf="master.pd_type_name && (currentPDStatus===pdStatusCheck.QC_COMPLETED || currentPDStatus===pdStatusCheck.COMPLETED)"
-                mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Report" matTooltipPosition="above"
-                (click)="getPDIDReport(viewID)"><mat-icon>ballot</mat-icon></button>
-
-              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above"
-                (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>
-              <br>
-              <!-- <span *ngIf="master.pd_allocated_to" style="color:red;text-align:left" class="fa-1x fa fa-user-secret" matTooltip="PD Officer" 
-                  matTooltipPosition="above"></span>       -->
-
-              <span *ngIf="master.pd_allocated_to && master.fk_pd_type==1" style="color:#fff;text-align:left"><mat-icon  class="hover-icon" matTooltip="PD Officer" matTooltipPosition="above">person</mat-icon>{{master.pd_allocated_to | titlecase}}</span>
-              <span *ngIf="master.executive_name && master.centralofficer && master.fk_pd_type==2" style="color:#fff;text-align:left"><mat-icon   class="hover-icon" matTooltip="PD Officer" matTooltipPosition="above">person</mat-icon>{{master.executive_name | titlecase}}/{{master.centralofficer | titlecase}}</span>
-              <span *ngIf="master.centralofficer && master.fk_pd_type==3" style="color:#fff;text-align:left"><mat-icon  class="hover-icon" matTooltip="PD Officer" matTooltipPosition="above">person</mat-icon>{{master.centralofficer | titlecase}}</span>              &nbsp;&nbsp;
-              <span *ngIf="master.pd_status==pdStatusCheck.SCHEDULED" style="color:#fff;text-align:left">{{master.pd_status | titlecase}} &nbsp;On&nbsp;{{master.scheduled_on}}</span>
-              <span *ngIf="master.pd_status!=pdStatusCheck.SCHEDULED && master.pd_status!=pdStatusCheck.QC_COMPLETED " style="color:#fff;text-align:left">{{master.pd_status | titlecase}}</span>
-              <span *ngIf="master.pd_status==pdStatusCheck.QC_COMPLETED " style="color:#fff;text-align:left">QC Completed</span>
-            </div>
-
-          </div>
-        </mat-card-content>
-      </mat-card>
-
-      <mat-card-content>
-        <div fxLayout="row wrap">
-
-          <div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-            <!--pd master  -->
-            <mat-card *ngFor="let master of pdMasterData" class="minheight">
-
-              <mat-card-header>
-                <!--  <img mat-card-avatar src="assets/images/avatar.jpg">
-                 <mat-card-title>{{master.lender_full_name}} -  {{master.lender_applicant_id}}
-                 </mat-card-title>-->
-                <mat-card-title *ngIf="master.state_name" class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> &nbsp;<span>{{master.city_name}} / {{master.state_name}}-{{master.pincode}}</span></mat-card-title>
-
-                <div class="cardEdit" *ngIf="currentPDStatus==pdStatusCheck.DRAFT || currentPDStatus==pdStatusCheck.TRIGGERED || currentPDStatus==pdStatusCheck.ALLOCATED || currentPDStatus==pdStatusCheck.SCHEDULED">
-                  <!--   <button  *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
-                      <button *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
-                    -->
-                  <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)"><mat-icon>edit</mat-icon></button>
+   <mat-card-content>
+      <mat-card class="p-2 mb-2" style="height: 370px !important;">
+         <div fxLayout="row" fxLayoutWrap="wrap" class="mb-3">
+            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="25" fxFlex.xl="25" class="profile-center" style="text-align:center;">
+               <!--<div class="mb-1">
+                  <img src="assets/images/userpic.jpg" width="100" height="100" alt="" class="radius-circle">
+               </div>-->
+               <mat-card style="padding: 15px;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;">
+                <div  *ngFor="let master of pdMasterData" class="ml-xs mr-xs">
+                <h4 class="ma-0">{{master.lender_short_name}}</h4>
+                <small>{{master.branch_name}}</small>
+                <div *ngIf="master.lender_applicant_id">
+                <small> {{master.lender_applicant_id}}</small> <br>
+                <small>{{master.pd_date_of_initiation}}</small><br>
+                <br>
+                <button mat-raised-button  color="primary">
+                <span *ngIf="master.pd_status==pdStatusCheck.SCHEDULED" style="text-align:left">{{master.pd_status | titlecase}}</span>
+                <span *ngIf="master.pd_status!=pdStatusCheck.SCHEDULED && master.pd_status!=pdStatusCheck.QC_COMPLETED " style="text-align:left">{{master.pd_status | titlecase}}</span>
+                <span *ngIf="master.pd_status==pdStatusCheck.QC_COMPLETED " style="text-align:left">QC Completed</span>
+                </button><br>
+                <small *ngIf="master.pd_status==pdStatusCheck.SCHEDULED">{{master.scheduled_on}}</small>
+                <small *ngIf="master.pd_allocated_to && master.fk_pd_type==1" style="text-align:left" matTooltip="PD Officer" matTooltipPosition="above">{{master.pd_allocated_to | titlecase}}</small>
+                <small *ngIf="master.executive_name && master.centralofficer && master.fk_pd_type==2" style="text-align:left" matTooltip="PD Officer" matTooltipPosition="above">{{master.executive_name | titlecase}}/{{master.centralofficer | titlecase}}</small> 
+                <small *ngIf="master.centralofficer && master.fk_pd_type==3" style="text-align:left" matTooltip="PD Officer" matTooltipPosition="above">{{master.centralofficer | titlecase}}</small>   
+               
                 </div>
-              </mat-card-header>
+              </div> 
+               </mat-card>
+              <!--< <h4>John Doe</h4>
+               <span>johndoe@johndoe.com</span>
+               p class="mt-xs mb-xs">Sr. Manager</p>
+               <a href="javascript:;" class="block mt-xs mb-xs">www.example.com</a>
+               <button mat-raised-button color="primary">Edit Profile</button>-->
+            </div>
+            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="75" fxFlex.xl="75" class="content-data">
+               <figure>
+                  <mat-card-content style="padding:0px !important;">                      
+                     <div *ngFor="let master of pdMasterData" class="ml-xs mr-xs">
+                     <div fxLayout="row">  
+                        <div fxFlex="100" style="text-align: right;">
+                                                        <button *ngIf="master.pd_type_name && currentPDStatus==pdStatusCheck.DRAFT" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Trigger" matTooltipPosition="above" (click)="editPdMaster(master)"><mat-icon>save</mat-icon></button>
 
-              <mat-card-content>
-
-                <p *ngIf="master.pd_contact_person || master.pd_contact_mobileno "><span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user-o"></i> {{master.pd_contact_person}}</span>&nbsp;&nbsp;
-                  <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone"></i> {{master.pd_contact_mobileno}}</span>
-                  <span style="font-size:13px;"> (Lender Contact Details) </span>
-                </p>
-
-                <p *ngIf="master.product_name">{{master.product_name}}<span *ngIf="master.subproduct_name"> /  {{master.subproduct_name}} </span></p>
-                <p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> <span *ngIf="master.loan_amount" class="hover-icon"> / <i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
-                <p><span>{{master.addressline1}}</span></p>
-                <p *ngIf="master.remarks"><span style="font-size:13px;"> Remarks : </span> <span style="color:red">{{master.remarks}}</span></p>
-              </mat-card-content>
-            </mat-card>
-          </div>
-          <div fxFlex.xs="100" class="m-gap p-gap" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-            <!-- applicant card  -->
-            <mat-card class="minheight">
+                              <button  *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && currentPDStatus!=pdStatusCheck.QC_COMPLETED" mat-raised-button  mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above" (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
+                              <button *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && currentPDStatus!=pdStatusCheck.QC_COMPLETED" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
+                              <button *ngIf="master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.TRIGGERED && currentPDStatus!=pdStatusCheck.DRAFT && enableStartPD" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
+                              <button *ngIf="master.pd_type_name && currentPDStatus===pdStatusCheck.QC_COMPLETED" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Report" matTooltipPosition="above" (click)="getPDIDReport(viewID)"><mat-icon>ballot</mat-icon></button>
+                              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"  type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>  
+                                </div> 
+                          </div>
+                     </div>
+                  </mat-card-content>
+                  <hr>
+            <mat-card-content>
+              <div *ngFor="let master of pdMasterData">
+                  <div fxLayout="row" fxLayoutWrap="wrap" class="mb-3">
+                        <div fxFlex="60">
+                          <div fxLayout="row">
+                          <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                             <div fxFlex="10">
+                               <span><i class="fa-1x fa fa-suitcase" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i></span>
+                             </div> 
+                             <div fxFlex="90"> 
+                                <span *ngIf="master.product_name"> {{master.product_name}}<span *ngIf="master.subproduct_name"> /  {{master.subproduct_name}} </span></span>
+                             </div>
+                          </div>
+                        </div>
+                         <div fxLayout="row">
+                          <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                           <span *ngIf="master.loan_amount"><i class="fa-1x fa fa-rupee" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>&nbsp; {{master.loan_amount}}</span>
+                          </div>
+                        </div>
+                         <div fxLayout="row">
+                          <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                          <span *ngIf="master.pd_type_name"><i class="fa-1x fa fa-check-circle" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>&nbsp; {{master.pd_type_name}}</span>
+                          </div>
+                        </div>
+                          <div fxLayout="row">
+                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                                 <div fxFlex="10">
+                                   <span><i class="fa-1x fa fa-map-marker" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i></span>
+                                 </div> 
+                                 <div fxFlex="90">                        
+                              <span *ngIf="master.state_name" class="hover-icon"> {{master.addressline1}}, {{master.city_name}},<br>{{master.state_name}}-{{master.pincode}} </span>
+                                 </div>
+                            </div>
+                          </div>    
+                      <!--<div fxLayout="row">
+                        <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                          <span><i class="fa-1x fa fa-suitcase" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>&nbsp; {{master.addressline1}}</span>
+                        </div>
+                      </div>-->
+                    </div>
+                    <div fxFlex="40">                       
+                     <div *ngIf="master.pd_contact_person || master.pd_contact_mobileno" style="background-color:#e3dbdb;padding:9px;">
+                        <h4 class="ma-0" style="font-size:13px;padding-bottom:5px;color:red;"><span>Lender Contact Details</span></h4>
+                                  
+                              <div fxLayout="row">
+                              <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                                <span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user" style="padding: 8px 13px 8px 13px;border-bottom: 2px solid red;"></i>&nbsp; {{master.pd_contact_person}}</span>
+                              </div>
+                              </div>
+                              <div fxLayout="row">
+                                <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">                                 
+                                <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone" style="padding: 8px 13px 8px 13px;border-bottom: 2px solid red;"></i>&nbsp; {{master.pd_contact_mobileno}}</span> 
+                              </div>
+                              </div>
+                         </div>
+                         <br>
+                         <div fxLayout="row" *ngIf="master.remarks" style="background-color:#e3dbdb;padding:15px;">
+                        <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
+                            <h4 class="ma-0" style="font-size:13px;padding-bottom:5px;color:red;"><span> Remarks  </span></h4>
+                            
+                             <span>{{master.remarks}}</span>
+                        </div>
+                      </div>
+                      <div fxLayout="row" class="cardEdit" *ngIf="currentPDStatus==pdStatusCheck.DRAFT || currentPDStatus==pdStatusCheck.TRIGGERED || currentPDStatus==pdStatusCheck.ALLOCATED || currentPDStatus==pdStatusCheck.SCHEDULED">
+                        <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">                                            
+                          <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)"><mat-icon>edit</mat-icon></button>                 
+                        </div>
+                       </div>
+                  </div>
+                  </div>                  
+              </div>
+            </mat-card-content>
+               </figure>
+            </div>
+         </div>
+      </mat-card>
+      <mat-card class="p-2">
+         <h4>PD Details</h4>
+         <mat-tab-group class="mt-2">
+            <mat-tab>
+               <ng-template mat-tab-label>Applicants</ng-template>
+                  <mat-card>
               <div class="cardEdit" *ngIf="currentPDStatus==pdStatusCheck.DRAFT || currentPDStatus==pdStatusCheck.TRIGGERED || currentPDStatus==pdStatusCheck.ALLOCATED || currentPDStatus==pdStatusCheck.SCHEDULED">
                 <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdApplicant(pdApplicantData)"><mat-icon>edit</mat-icon></button>
               </div>
@@ -90,19 +145,19 @@
                 <mat-list *ngFor="let applicant of pdApplicantData">
                   <mat-list-item style="height:68px !important;">
                     <p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
-                            <i class="fa-1x fa fa-user-o"></i>
+                            <i class="fa-1x fa fa-user-o" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
                             &nbsp;{{applicant.applicant_name}} 
                       </span> &nbsp;&nbsp;&nbsp;
                       <span *ngIf="applicant.mobile_no != '' && applicant.mobile_no != null" class="mb-2 text-center hover-icon">
-                            <i class="fa-1x fa fa-phone"></i>
+                            <i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
                             &nbsp;{{applicant.mobile_no}} 
                       </span> &nbsp;&nbsp;&nbsp;
                       <span *ngIf="applicant.landline != '' && applicant.landline != 'null-null' && applicant.landline != null " class="mb-2 text-center hover-icon">
-                        <i class="fa-1x fa fa-phone"></i>
+                        <i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
                         &nbsp;<span matPrefix>+91</span>{{applicant.landline}}
                       </span>
-                      <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant </span>
-                      <ng-template #codetails><span>{{applicant.relation_name}}</span></ng-template>
+                      <span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">( Main Applicant ) </span>
+                      <ng-template #codetails><span>( {{applicant.relation_name}} )</span></ng-template>
                     </p>
                   </mat-list-item>
                 </mat-list>
@@ -113,17 +168,16 @@
                 </mat-card-content>
               </ng-template>
             </mat-card>
-          </div>
-          <div fxFlex.xs="100" class="m-gap p-gap" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="100" fxFlex.xl="100">
-            <!-- applicant card  -->
-            <mat-card class="minheight">
-              <div class="cardEdit" *ngIf="currentPDStatus==pdStatusCheck.DRAFT || currentPDStatus==pdStatusCheck.TRIGGERED || currentPDStatus==pdStatusCheck.ALLOCATED || currentPDStatus==pdStatusCheck.SCHEDULED">
+            </mat-tab>
+            <mat-tab>
+               <ng-template mat-tab-label>Additional Requirements</ng-template>
+                 <mat-card>
+                <div class="cardEdit" *ngIf="currentPDStatus==pdStatusCheck.DRAFT || currentPDStatus==pdStatusCheck.TRIGGERED || currentPDStatus==pdStatusCheck.ALLOCATED || currentPDStatus==pdStatusCheck.SCHEDULED">
                 <button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editAdditionalRequirement(pdAdditionalReqData)"><mat-icon>edit</mat-icon></button>
-              </div>
-              <mat-card-header>
+              </div>             
+         <mat-card-header>
                 <mat-card-title style="color:red !important;">Additional Requirements</mat-card-title>
               </mat-card-header>
-
               <mat-card-content *ngIf="pdAdditionalReqData.length>0; else noRequirement">
                 <mat-list *ngFor="let requirement of pdAdditionalReqData">
                   <mat-list-item>
@@ -137,41 +191,30 @@
                 </mat-card-content>
               </ng-template>
             </mat-card>
-          </div>
-          <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
-            <!-- pd documents card -->
-            <mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
-              <mat-expansion-panel-header>
-                <mat-panel-title class="text-xs-left" style="color:red !important;">
-                  <h6 class="mt-0">Documents</h6>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <mat-list *ngFor="let documents of pdDocumentsData">
+            </mat-tab>
+            <mat-tab>
+               <ng-template mat-tab-label>Documents</ng-template>
+               <div *ngIf="pdDocumentsData.length>0; else nodocument">
+                <mat-list *ngFor="let documents of pdDocumentsData">
                 <mat-list-item>
                   <!--<p><span><i class="fa-1x fa fa-file"></i>  {{documents.pd_document_title}} </span></p> -->
                   <a href="{{documents.doc_url}}" target="_blank"><i class="fa-1x fa fa-file"></i> {{documents.pd_document_title}}</a>
-                  <!---- <span class="mb-2 text-center hover-icon">  &nbsp;{{documents.pd_document_name}} </span> -->
+                  <!-- <span class="mb-2 text-center hover-icon">  &nbsp;{{documents.pd_document_name}} </span> -->
                 </mat-list-item>
               </mat-list>
-            </mat-expansion-panel>
+               </div>
             <ng-template #nodocument>
               <mat-card>
                 <mat-card-content>
                   <p>No Document</p>
                 </mat-card-content>
               </mat-card>
-            </ng-template>
-          </div>
-          <div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-            <!--pd logs card  -->
-            <mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
-              <mat-expansion-panel-header>
-                <mat-panel-title class="text-xs-left" style="color:red !important;">
-                  <h6 class="mt-0"> PD History</h6>
-                </mat-panel-title>
-
-              </mat-expansion-panel-header>
-              <mat-list class="m-gap p-gap" *ngFor="let master of masterPdLogsData">
+            </ng-template>               
+            </mat-tab>
+            <mat-tab>
+               <ng-template mat-tab-label>PD History</ng-template>
+               <div *ngIf="masterPdLogsData.length>0; else nohistory">
+                <mat-list class="m-gap p-gap" *ngFor="let master of masterPdLogsData">
                 <mat-list-item>
                   <span style="font-size:15px;"><span style="color:#908f8f">{{master.time}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <span style="color:#908f8f"> <i> {{master.user}} </i>  </span><br> <span>{{master.log}}</span> </span>
@@ -179,9 +222,7 @@
                 </mat-list-item>
 
               </mat-list>
-
-            </mat-expansion-panel>
-
+                   </div>
             <ng-template #nohistory>
               <mat-card>
                 <mat-card-content>
@@ -189,10 +230,10 @@
                 </mat-card-content>
               </mat-card>
             </ng-template>
-
-          </div>
-          <div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
-            <mat-card>
+            </mat-tab>
+             <mat-tab>
+               <ng-template mat-tab-label>QC Notes</ng-template>
+                 <mat-card>
               <div style="color:red !important;">
                 <h6>QC Notes</h6>
               </div>
@@ -200,9 +241,12 @@
                 {{ pdMasterData[0]?.qc_remarks}}</p>
 
             </mat-card>
-          </div>
-          <div *ngIf="pdMasterData[0]?.pd_status === 'QC_COMPLETED'" class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50"
-            fxFlex.lg="50" fxFlex.xl="50">
+     
+            </mat-tab>
+             <mat-tab>
+               <ng-template mat-tab-label>QC Remarks</ng-template>
+                    <div *ngIf="pdMasterData[0]?.pd_status === 'QC_COMPLETED'" class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100"
+            fxFlex.lg="100" fxFlex.xl="100">
             <mat-card>
               <div style="color:red !important;">
                 <h6>QC Remarks</h6>
@@ -222,11 +266,11 @@
                 {{ pdMasterData[0]?.qc_feedback}}
               </div>
             </mat-card>
-          </div>
-        </div>
-      </mat-card-content>
-    </div>
-  </mat-card-content>
+          </div> 
+            </mat-tab>
+         </mat-tab-group>
+      </mat-card>
+   </mat-card-content>
 </mat-card>
 
-<!-- <notifier-container></notifier-container> -->
\ No newline at end of file
+
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss
index bdf8de1d6..0c83a24b0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss
@@ -8,4 +8,26 @@
 }
 ::ng-deep .body-container{
     padding: 0rem !important;
-}
\ No newline at end of file
+}
+
+
+:host {
+  margin-left: -5px;
+  margin-right: -5px;
+  margin-top: -5px;
+  display: block;
+}
+.wrapper {
+  margin: 6px;
+}
+
+.content-data{
+    h2{
+        font-size: 1.5rem;
+    }
+}
+@media(max-width:767px){
+    .profile-center{
+        text-align: center;
+    }
+}