diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html
index 2f3e829fe..b9fbd2746 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.html
@@ -2,7 +2,7 @@
         <div fxFlex="70" align="left" style="padding: 10px !important;">
                 {{data.first_name}}
         </div>
-        <div fxFlex="30" align="end">
+        <div fxFlex="30" align="end" style="padding: 10px !important;">
                 <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
         
         </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-applicant/edit-pd-applicant.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-applicant/edit-pd-applicant.component.html
index 67687b695..beea70bd3 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-applicant/edit-pd-applicant.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-applicant/edit-pd-applicant.component.html
@@ -5,7 +5,7 @@
                     {{pageTitle}}
 
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             
             </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.html
index af3fa43c1..04d9cd3a5 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/edit-pd-master/edit-pd-master.component.html
@@ -4,7 +4,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
index 4d2e945c6..75fb27706 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.html
@@ -2,7 +2,7 @@
 <div fxFlex="70" style="padding: 10px !important;">
         {{pageTitle}}
 </div>
-<div fxFlex="30" align="end">
+<div fxFlex="30" align="end" style="padding: 10px !important;">
 <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
 
 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-requirement/pd-requirement.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-requirement/pd-requirement.component.html
index 25c364190..21e191bad 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-requirement/pd-requirement.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-requirement/pd-requirement.component.html
@@ -4,7 +4,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             
             </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
index 64fa93b5d..4ebefbf78 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
@@ -5,7 +5,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
             </div>
     </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
index e899923d3..a36067952 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
@@ -12,6 +12,9 @@
   mat-form-field {
     margin: 0 2%;
   }
+   .cdk-global-overlay-wrapper{
+        justify-content: center !important;
+}
   $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
 $product-bg-color-hover: rgba(103, 58, 183, 0.7);
 .p-list-main {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
index e339717a8..012c0ad57 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
@@ -1,7 +1,7 @@
 import {
     Component,OnInit,
     Inject, Output,
-    Input, ElementRef
+    Input, ElementRef, ViewEncapsulation
 } from '@angular/core';
 
 import {
@@ -24,7 +24,9 @@ import {ActivatedRoute, Router} from "@angular/router";
 @Component({
     selector: 'app-address',
     templateUrl: './address.component.html',
-    styleUrls: ['./address.component.scss']
+    styleUrls: ['./address.component.scss'],
+        encapsulation: ViewEncapsulation.None
+
 })
 
 export class AddressComponent implements OnInit {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
index 5f071b389..91eced0f1 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
@@ -4,7 +4,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
index a3e0feed8..092096a10 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
@@ -4,7 +4,7 @@
         <div fxFlex="70" align="left" style="padding: 10px !important;">
                 {{pageTitle}}
         </div>
-        <div fxFlex="30" align="end">
+        <div fxFlex="30" align="end" style="padding: 10px !important;">
                 <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
         
         </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
index 65381d8f6..bcdace6ad 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
@@ -69,10 +69,11 @@
 <!--=======-->
 <form [formGroup]="bankingForm" class="bankForm">
 <h2 mat-dialog-title class="paragraph_change">
-    <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-    <div fxFlex="30" align="end">
-                        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
-                                
+    <div fxFlex="70" align="left" style="padding: 10px !important;">
+        {{pageTitle}}
+    </div>
+    <div fxFlex="30" align="end" style="padding: 10px !important;">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>                          
     </div>
 </h2>
 <mat-dialog-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
index 2efcff73a..a4205fc9c 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
@@ -2,7 +2,7 @@
 
     <h2 mat-dialog-title class="paragraph_change">
         <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-        <div fxFlex="30" align="end">
+        <div fxFlex="30" align="end" style="padding: 10px !important;">
                 <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                         
         </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
index 23a199f3d..1c5b4410b 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
@@ -2,7 +2,7 @@
 
     <h2 mat-dialog-title class="paragraph_change">
             <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             
             </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
index 42c95060c..13baa7d37 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
@@ -2,7 +2,7 @@
 
         <h2 mat-dialog-title class="paragraph_change">
                 <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
index da9d3a8da..85afc2099 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
@@ -3,7 +3,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
                 </div>
         </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
index 06ed67ddf..98a1ddd7e 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
@@ -3,7 +3,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>            
             </div>
     </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
index 17f436913..3dcb3ce04 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
@@ -5,7 +5,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             
             </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
index 0b3e3fc52..495143ec5 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/general-info/general-info.component.html
@@ -4,7 +4,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
            </div>
     </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
index 7867a8508..da870e697 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
@@ -3,7 +3,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
index 16887c9b9..e8d72e1a7 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
@@ -3,7 +3,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
@@ -17,11 +17,11 @@
                         <div fxLayout="row wrap">
                                 <div fxFlex="100">
                                     <mat-card>
-                                        <mat-form-field>
-                                            <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required >
+                                        <mat-form-field style="width: 25%">
+                                            <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" (change)="loanCalc()" required>
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
                                         </mat-form-field>
-                                        <mat-form-field>
+                                        <mat-form-field style="width: 25%">
                                             <mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
                                                 <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
                                             </mat-select>
@@ -37,66 +37,74 @@
                                                 <mat-option value="other">Other purpose</mat-option>
                                             </mat-select>-->
                                         </mat-form-field>
-                                        <mat-form-field *ngIf="isOtherPurpose">
+                                        <mat-form-field *ngIf="isOtherPurpose" style="width: 25%">
                                             <input matInput placeholder="Specify End Use" formControlName="end_use_other">
                                         </mat-form-field>
-                                        <mat-form-field>
+                                        <mat-form-field style="width: 30%">
                                             <mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
-                                                        formControlName="is_transfer" required>
+                                                        formControlName="is_transfer" required >
                                                 <mat-option value="yes">Yes</mat-option>
                                                 <mat-option value="no">No</mat-option>
                                             </mat-select>
                                         </mat-form-field>
-                                        
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
-                                                <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
+                                        <div *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_transfer'].value != ''">
+                                        <mat-form-field  style="width: 50%">
+                                                <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)" (change)="loanCalc()">
                                                 <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
                                             </mat-form-field>
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
+                                        <mat-form-field style="width:20%">
                                             <mat-select  placeholder="Is there a Top Up"
                                                         formControlName="is_topup" required>
                                                 <mat-option value="yes">Yes</mat-option>
                                                 <mat-option value="no">No</mat-option>
                                             </mat-select>
                                         </mat-form-field>
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
+                                        <mat-form-field  style="width: 50%">
                                                 <mat-select placeholder="Lender from where balance transfer done" 
                                                 formControlName="lender">
-                                        <mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
-                                        
-                                    </mat-select>
+                                                    <mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
+                                                </mat-select>
                                         </mat-form-field>
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
+                                        
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3" style="width: 25%">
                                                 <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
                                         </mat-form-field>
-                                        <mat-form-field  *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
-                                            <input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
+                                    
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' "  style="width: 20%">
+                                            <input matInput placeholder="Top Up Amount" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
                                         </mat-form-field>
+                                    </div>
+                                    <div *ngIf="loanDetailsForm.controls['is_transfer'].value != 'yes' && loanDetailsForm.controls['is_transfer'].value != '' ">
                                         
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value != 'yes'">
+                                        <mat-form-field style="width: 35%">
                                             <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
                                             <mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
                                         </mat-form-field>
 
-                                        <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value != 'yes'">
+                                        <mat-form-field style="width: 35%">
                                             <mat-select placeholder="Source" formControlName="source" required>
                                                 <mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option>
                                             </mat-select>
 
-        <!--<mat-select placeholder="Source"
-                    formControlName="source">
-            <mat-option value="borrowed">Borrowed from Relatives & Friends</mat-option>
-            <mat-option value="own_money">Own money</mat-option>
-            <mat-option value="other">Loan from another lender</mat-option>
-        </mat-select>-->
-    </mat-form-field>
-    <mat-form-field *ngIf="loanDetailsForm.controls['source'].value =='other'">
-        <input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type">
-    </mat-form-field>
-    <mat-form-field>
-        <input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required>
-    </mat-form-field>
+                                            <!--<mat-select placeholder="Source"
+                                                        formControlName="source">
+                                                <mat-option value="borrowed">Borrowed from Relatives & Friends</mat-option>
+                                                <mat-option value="own_money">Own money</mat-option>
+                                                <mat-option value="other">Loan from another lender</mat-option>
+                                            </mat-select>-->
+                                        
+                                        </mat-form-field>
+                                        <mat-form-field *ngIf="loanDetailsForm.controls['source'].value =='other'"  style="width: 35%">
+                                            <input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type">
+                                        </mat-form-field>
+
+                                    </div>
+
+    
+                                    <mat-form-field  style="width: 50%">
+                                        <input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required>
+                                    </mat-form-field>
 <!-- <div *ngIf="productAbbr === 'HL' || productAbbr === 'LL' || productAbbr === 'LAP' "> -->
     <mat-card *ngIf="mortageCardAccess">
         <mat-card-header><p>Mortgage</p></mat-card-header>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
index 1b5a1cf33..eade414cb 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
@@ -491,4 +491,21 @@ getM_sourceofamount() {
      
   }
 
+  /**
+   * LoanCalculation 
+   */
+  loanCalc()
+  {
+   let BtAmount =  this.loanDetailsForm.value.balance_transfer_amount;
+   let loanAmount = this.loanDetailsForm.value.loan_amount;
+   let topupAmt ;
+      if(BtAmount !=null && BtAmount !=''  && loanAmount !=null && loanAmount!='')
+      {
+            topupAmt = loanAmount - BtAmount;
+            //topUpAmtInWords
+      }
+      this.loanDetailsForm.controls['topup_amount'].setValue(topupAmt);
+      this.topUpAmtInWords = this._pd.convertNumberToWords(topupAmt); 
+  }
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
index ebd7ad237..ce783b7b2 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.html
@@ -10,7 +10,7 @@
                       </div>
 
           </div>
-          <div fxFlex="30" align="end">
+          <div fxFlex="30" align="end" style="padding: 10px !important;">
                   <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
          </div>
   </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-applicant-details/other-applicant-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-applicant-details/other-applicant-details.component.html
index ab04d54a4..6433832c0 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-applicant-details/other-applicant-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-applicant-details/other-applicant-details.component.html
@@ -4,7 +4,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" (click)="closeDialogue()"><mat-icon>close</mat-icon></button>
            </div>
     </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
index 7249bed24..45b0df9b9 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
@@ -4,7 +4,7 @@
             <div fxFlex="70" align="left" style="padding: 10px !important;">
                     {{pageTitle}}
             </div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             </div>
     </h2>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
index 144a5ab5e..a1c0fc84f 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
@@ -4,7 +4,7 @@
         <div fxFlex="70" align="left" style="padding: 10px !important;">
                 {{pageTitle}}
         </div>
-        <div fxFlex="30" align="end">
+        <div fxFlex="30" align="end" style="padding: 10px !important;">
                 <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
         
         </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
index 586607736..e6a766540 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
@@ -4,7 +4,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
index 291abc847..1df3ba854 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
@@ -3,7 +3,7 @@
                 <div fxFlex="70" align="left" style="padding: 10px !important;">
                         {{pageTitle}}
                 </div>
-                <div fxFlex="30" align="end">
+                <div fxFlex="30" align="end" style="padding: 10px !important;">
                         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
                 
                 </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index d35c324bd..01198a3f5 100755
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
@@ -3,7 +3,7 @@
 
     <h2 mat-dialog-title class="paragraph_change">
             <div fxFlex="70" align="left" style="padding: 10px !important;">{{pageTitle}}</div>
-            <div fxFlex="30" align="end">
+            <div fxFlex="30" align="end" style="padding: 10px !important;">
                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
             
             </div>