diff --git a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
index aedbecfe5..dd5f4d6e7 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html
@@ -1,26 +1,27 @@
-<h1 mat-dialog-title>Upload Client Documents</h1>
+<h1 mat-dialog-title>Upload {{ entityType }} Documents</h1>
 <div>
-    <form [formGroup]="uploadDocumentForm" fxLayout="column">
+  <form [formGroup]="uploadDocumentForm" fxLayout="column">
 
-        <mat-form-field fxFlex>
-            <mat-label>File Name</mat-label>
-            <input formControlName="fileName" required matInput />
-            <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
-                File Name is <strong>required</strong>
-            </mat-error>
-        </mat-form-field>
+    <mat-form-field fxFlex>
+      <mat-label>File Name</mat-label>
+      <input formControlName="fileName" required matInput />
+      <mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
+        File Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
 
-        <mat-form-field fxFlex *ngIf="!documentIdentifier">
-            <mat-label>Description</mat-label>
-            <input formControlName="description" matInput />
-        </mat-form-field>
+    <mat-form-field fxFlex *ngIf="!documentIdentifier">
+      <mat-label>Description</mat-label>
+      <input formControlName="description" matInput />
+    </mat-form-field>
 
-        <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
+    <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
-        <mat-dialog-actions align="end">
-            <button mat-raised-button mat-dialog-close>Cancel</button>
-            <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid" [mat-dialog-close]="uploadDocumentForm.value">Confirm</button>
-        </mat-dialog-actions>
+    <mat-dialog-actions align="end">
+      <button mat-raised-button mat-dialog-close>Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid"
+        [mat-dialog-close]="uploadDocumentForm.value">Confirm</button>
+    </mat-dialog-actions>
 
-    </form>
-</div>
\ No newline at end of file
+  </form>
+</div>
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
index 99eebf847..a82378531 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
+++ b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
@@ -15,6 +15,8 @@ export class UploadDocumentDialogComponent implements OnInit {
   uploadDocumentData: any = [];
   /** Triggers description field */
   documentIdentifier = false;
+  /** Entity Type */
+  entityType: string;
 
   /**
    * @param {MatDialogRef} dialogRef Dialog reference element
@@ -25,6 +27,7 @@ export class UploadDocumentDialogComponent implements OnInit {
               private formBuilder: FormBuilder,
               @Inject(MAT_DIALOG_DATA) public data: any) {
     this.documentIdentifier = data.documentIdentifier;
+    this.entityType = data.entityType;
   }
 
   ngOnInit() {
diff --git a/src/app/clients/clients-view/documents-tab/documents-tab.component.html b/src/app/clients/clients-view/documents-tab/documents-tab.component.html
index abc7a111e..0c12226c4 100644
--- a/src/app/clients/clients-view/documents-tab/documents-tab.component.html
+++ b/src/app/clients/clients-view/documents-tab/documents-tab.component.html
@@ -1,47 +1,47 @@
 <div class="tab-container mat-typography">
 
-    <!-- Documents Table -->
+  <!-- Documents Table -->
 
-    <h3>Documents</h3>
+  <h3>Documents</h3>
 
-    <button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()" *mifosxHasPermission="'CREATE_DOCUMENT'">
-    <fa-icon icon="plus"></fa-icon>
-    &nbsp;&nbsp; Add
+  <button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()"
+    *mifosxHasPermission="'CREATE_DOCUMENT'">
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
   </button>
 
-    <table mat-table #documentsTable [dataSource]="clientDocuments">
+  <table mat-table #documentsTable [dataSource]="clientDocuments" matSort>
 
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> Name </th>
-            <td mat-cell *matCellDef="let document">
-                {{document.name}} </td>
-        </ng-container>
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let document"> {{document.name}} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef> Description </th>
-            <td mat-cell *matCellDef="let document"> {{document.description}} </td>
-        </ng-container>
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let document"> {{document.description}} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="fileName">
-            <th mat-header-cell *matHeaderCellDef> File Name </th>
-            <td mat-cell *matCellDef="let document"> {{document.fileName}}
-            </td>
-        </ng-container>
+    <ng-container matColumnDef="fileName">
+      <th mat-header-cell *matHeaderCellDef> File Name </th>
+      <td mat-cell *matCellDef="let document"> {{document.fileName}} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let document; let i = index">
-                <button class="document-action-button" mat-raised-button color="primary" (click)="download(document.parentEntityId,document.id)">
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let document; let i = index">
+        <button class="document-action-button" mat-raised-button color="primary"
+          (click)="download(document.parentEntityId,document.id)">
           <fa-icon icon="cloud-download-alt"></fa-icon>
         </button>
-                <button class="document-action-button" mat-raised-button color="warn" (click)="deleteDocument(document.parentEntityId,document.id,i)">
+        <button class="document-action-button" mat-raised-button color="warn"
+          (click)="deleteDocument(document.parentEntityId,document.id,i)">
           <fa-icon icon="times"></fa-icon>
         </button>
-            </td>
-        </ng-container>
+      </td>
+    </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="documentsColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: documentsColumns;"></tr>
-    </table>
+    <tr mat-header-row *matHeaderRowDef="documentsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: documentsColumns;"></tr>
+  </table>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/clients/clients-view/documents-tab/documents-tab.component.ts b/src/app/clients/clients-view/documents-tab/documents-tab.component.ts
index 8a32523f0..3974aa67b 100644
--- a/src/app/clients/clients-view/documents-tab/documents-tab.component.ts
+++ b/src/app/clients/clients-view/documents-tab/documents-tab.component.ts
@@ -28,8 +28,6 @@ export class DocumentsTabComponent implements OnInit {
     public dialog: MatDialog) {
     this.route.data.subscribe((data: { clientDocuments: any }) => {
       this.clientDocuments = data.clientDocuments;
-      console.log(this.clientDocuments);
-
     });
     this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
   }
@@ -60,10 +58,9 @@ export class DocumentsTabComponent implements OnInit {
 
   uploadDocument() {
     const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
-      data: { documentIdentifier: false }
+      data: { documentIdentifier: false, entityType: 'Client' }
     });
     uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
-      console.log(dialogResponse);
       if (dialogResponse) {
         const formData: FormData = new FormData;
         formData.append('name', dialogResponse.fileName);
@@ -79,7 +76,6 @@ export class DocumentsTabComponent implements OnInit {
             fileName: dialogResponse.file.name
           });
           this.documentsTable.renderRows();
-          console.log('document Uploaded');
         });
       }
     });
diff --git a/src/app/groups/groups-view/groups-view.component.html b/src/app/groups/groups-view/groups-view.component.html
index c03d6e45d..ca061f7d3 100644
--- a/src/app/groups/groups-view/groups-view.component.html
+++ b/src/app/groups/groups-view/groups-view.component.html
@@ -6,92 +6,134 @@
 
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
-            src="assets/images/group_placeholder.png">
+          <img mat-card-md-image class="profile-image" src="assets/images/group_placeholder.png">
         </div>
       </div>
 
       <div class="mat-typography group-card-title">
         <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="groupViewData.status.code|statusLookup" [matTooltip]="groupViewData.status.value"></i>
+          <h3 fxFlex="95%">
+            <i class="fa fa-stop" [ngClass]="groupViewData.status.code|statusLookup"
+              [matTooltip]="groupViewData.status.value"></i>
             Group Name : {{groupViewData.name}}
           </h3>
+
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="Group actions" yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
+
         <mat-card-subtitle>
-          <p>
-            Group #: {{groupViewData.id}} | Center Name: {{groupViewData.centerName}} | Staff: {{groupViewData.staffName || 'Unassigned'}}<br/>
-            Office Name: {{groupViewData.officeName}}<br/>
-            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate  | dateFormat) :'Not Activated'}}<br/>
+          <div fxFlex="45%">
+            <b>Group :</b> {{groupViewData.name}} | <b>Center Name:</b> {{groupViewData.centerName}} | <b>Staff:</b>
+            {{groupViewData.staffName || 'Unassigned'}}<br />
+            <b>Office Name :</b> {{groupViewData.officeName}}<br />
+            <b>Activation Date :</b> {{(groupViewData.activationDate)?(groupViewData.activationDate | dateFormat) :'Not Activated'}}<br />
             <span *ngIf="!groupViewData.active">
-             Closure Date: {{groupViewData.timeline.closedOnDate  | dateFormat}}
+              <b>Closure Date :</b> {{groupViewData.timeline.closedOnDate | dateFormat}}
             </span>
-          </p>
+          </div>
+          <div  fxFlex="45%" class="group-meeting" fxLayoutAlign="start start">
+            <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
+              <p>
+                Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | dateFormat}}
+                <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br />
+                Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+              </p>
+            </div>
+            <ng-template #unassigned>
+              <div>
+                <p>
+                  Next Meeting on: Unassigned
+                  <i class="fa fa-calendar"></i><br />
+                  Meeting Frequency: N/A
+                </p>
+              </div>
+            </ng-template>
+          </div>
         </mat-card-subtitle>
       </div>
 
-      <div class="group-meeting" fxLayoutAlign="start start">
-        <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
-          <p>
-             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
-             <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br/>
-             Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
-          </p>
-        </div>
-        <ng-template #unassigned>
-          <div>
-            <p>
-              Next Meeting on: Unassigned
-              <i class="fa fa-calendar"></i><br/>
-              Meeting Frequency: N/A
-          </p>
-        </div>
-        </ng-template>
-      </div>
-
-    </mat-card-title-group>
-
-    <mat-card-actions class="group-actions" *ngIf="!(groupViewData.status.value==='Closed')">
+      <mat-menu #groupMenu="matMenu">
 
         <span *ngIf="!(groupViewData.status.value==='Active')">
-          <button mat-raised-button  *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Activate')">
-            <i class="fa fa-check-sign"></i>Activate</button>
+          <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Activate')">
+            <mat-icon matListIcon>
+              <fa-icon icon="checkSign" size="sm"></fa-icon>
+            </mat-icon>
+            <span>Activate</span>
+          </button>
         </span>
-        <button mat-raised-button *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Edit')">
-          <i class="fa fa-edit"></i>Edit</button>
-        <button mat-raised-button *mifosxHasPermission="'CREATE_CLIENT'">
-          <i class="fa fa-plus"></i>Add Clients</button>
-        <button mat-raised-button *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'" (click)="doAction('Transfer Clients')">
-          <i class="fa fa-exchange"></i>Transfer Clients</button>
-        <button mat-raised-button *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'" (click)="doAction('Manage Members')">
-          <i class="fa fa-user"></i>Manage Members</button>
+        <button mat-menu-item *mifosxHasPermission="'UPDATE_GROUP'" (click)="doAction('Edit')">
+          <mat-icon matListIcon>
+            <fa-icon icon="edit" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Edit</span>
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_CLIENT'">
+          <mat-icon matListIcon>
+            <fa-icon icon="plus" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Add Clients</span>
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'"
+          (click)="doAction('Transfer Clients')">
+          <mat-icon matListIcon>
+            <fa-icon icon="users" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Transfer Clients</span>
+        </button>
+        <button mat-menu-item *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'" (click)="doAction('Manage Members')">
+          <mat-icon matListIcon>
+            <fa-icon icon="user" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Manage Members</span>
+        </button>
+
+        <button mat-menu-item *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
+          <mat-icon matListIcon>
+            <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Applications</span>
+        </button>
 
-        <button mat-raised-button *ngIf="groupViewData.active" [matMenuTriggerFor]="AccountApplications">
-          <i class="fa fa-file"></i>Applications</button>
         <mat-menu #AccountApplications="matMenu">
           <span *ngIf="groupViewData.clientMembers">
             <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Bulk JLG Loan Application</button></span>
-          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">Group Saving Application</button>
-          <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">Group Loan Application</button>
-          <button mat-menu-item  [routerLink]="['loans-accounts', 'glim-account', 'create']">GLIM Loan Application</button>
-          <button mat-menu-item  [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> GSIM Application </button>
+          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+            [routerLink]="['savings-accounts', 'create']">Group Saving Application</button>
+          <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">Group
+            Loan Application</button>
+          <button mat-menu-item [routerLink]="['loans-accounts', 'glim-account', 'create']">GLIM Loan
+            Application</button>
+          <button mat-menu-item [routerLink]="['savings-accounts', 'gsim-account' , 'create']"> GSIM Application
+          </button>
         </mat-menu>
 
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">More</button>
         <mat-menu #More="matMenu">
           <span *ngIf="groupViewData.collectionMeetingCalendar">
-            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'" (click)="doAction('Attendance')">Attendance</button></span>
+            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'"
+              (click)="doAction('Attendance')">Attendance</button></span>
           <span *ngIf="!groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">Assign Staff</button></span>
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'" (click)="doAction('Assign Staff')">Assign
+              Staff</button></span>
           <span *ngIf="groupViewData.staffId">
-            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'" (click)="doAction('Unassign Staff')">Unassign Staff</button></span>
-          <span *ngIf="!(groupViewData.centerId || groupViewData.collectionMeetingCalendar) && groupViewData.status.value==='Active'">
-            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">Attach Meeting</button></span>
+            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'"
+              (click)="doAction('Unassign Staff')">Unassign Staff</button></span>
+          <span
+            *ngIf="!(groupViewData.centerId || groupViewData.collectionMeetingCalendar) && groupViewData.status.value==='Active'">
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'" (click)="doAction('Attach Meeting')">Attach
+              Meeting</button></span>
           <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'" (click)="doAction('Close')">Close</button>
           <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'" (click)="doAction('Delete')">Delete</button>
         </mat-menu>
-
-    </mat-card-actions>
+      </mat-menu>
+    </mat-card-title-group>
 
   </mat-card-header>
 
@@ -99,21 +141,21 @@
 
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
-      [active]="general.isActive">
+        [active]="general.isActive">
         General
       </a>
-      <a mat-tab-link [routerLink]="['./notes']" *mifosxHasPermission="'READ_GROUPNOTE'" routerLinkActive #notes="routerLinkActive"
-      [active]="notes.isActive">
+      <a mat-tab-link [routerLink]="['./notes']" *mifosxHasPermission="'READ_GROUPNOTE'" routerLinkActive
+        #notes="routerLinkActive" [active]="notes.isActive">
         Notes
       </a>
       <a mat-tab-link [routerLink]="['./committee']" routerLinkActive #committee="routerLinkActive"
-      [active]="committee.isActive">
+        [active]="committee.isActive">
         Committee
       </a>
       <span *ngFor="let groupDatatable of groupDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + groupDatatable.registeredTableName"
-          [routerLink]="['./datatables',groupDatatable.registeredTableName]"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+          [routerLink]="['./datatables',groupDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
           {{groupDatatable.registeredTableName}}
         </a>
       </span>
diff --git a/src/app/groups/groups-view/groups-view.component.scss b/src/app/groups/groups-view/groups-view.component.scss
index 35c51f1fa..d9de4c468 100644
--- a/src/app/groups/groups-view/groups-view.component.scss
+++ b/src/app/groups/groups-view/groups-view.component.scss
@@ -9,7 +9,7 @@
       .group-card-title {
         color: white;
         width: 90%;
-        p {
+        mat-card-subtitle {
           color: white;
         }
       }
@@ -24,7 +24,6 @@
     .group-meeting {
       align-self: flex-end;
       width: 300px;
-      height: 140px;
       div, ng-template > div {
         background-color: #0a6aac;
         p {
diff --git a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.html b/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.html
deleted file mode 100644
index ec2f548b1..000000000
--- a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<h1 mat-dialog-title>Load Loan Document</h1>
-
-<div>
-  <form [formGroup]="uploadDocumentForm" fxLayout="column">
-
-    <mat-form-field fxFlex>
-      <mat-label>File Name</mat-label>
-      <input formControlName="name" required matInput />
-      <mat-error *ngIf="uploadDocumentForm.controls.name.hasError('required')">
-        File Name is <strong>required</strong>
-      </mat-error>
-    </mat-form-field>
-
-    <mat-form-field fxFlex>
-      <mat-label>Description</mat-label>
-      <input formControlName="description" matInput />
-    </mat-form-field>
-
-    <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
-
-    <mat-dialog-actions align="end">
-      <button mat-raised-button mat-dialog-close>Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!uploadDocumentForm.valid" *mifosxHasPermission="'CREATE_DOCUMENT'"
-        [mat-dialog-close]="{data: {name: uploadDocumentForm.value.name, description: uploadDocumentForm.value.description, file: uploadDocumentForm.value.file} }">Confirm</button>
-    </mat-dialog-actions>
-
-  </form>
-</div>
diff --git a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.scss b/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.spec.ts b/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.spec.ts
deleted file mode 100644
index 2c4e23bb8..000000000
--- a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoanAccountLoadDocumentsDialogComponent } from './loan-account-load-documents-dialog.component';
-
-describe('LoanAccountLoadDocumentsDialogComponent', () => {
-  let component: LoanAccountLoadDocumentsDialogComponent;
-  let fixture: ComponentFixture<LoanAccountLoadDocumentsDialogComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LoanAccountLoadDocumentsDialogComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoanAccountLoadDocumentsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.ts b/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.ts
deleted file mode 100644
index 5d821deb0..000000000
--- a/src/app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'mifosx-loan-account-load-documents-dialog',
-  templateUrl: './loan-account-load-documents-dialog.component.html',
-  styleUrls: ['./loan-account-load-documents-dialog.component.scss']
-})
-export class LoanAccountLoadDocumentsDialogComponent implements OnInit {
-
-  /** Upload Document form. */
-  uploadDocumentForm: FormGroup;
-
-  /**
-   * @param {MatDialogRef} dialogRef Dialog reference element
-   * @param {FormBuilder} formBuilder Form Builder
-   * @param {any} data Dialog Data
-   */
-  constructor(public dialogRef: MatDialogRef<LoanAccountLoadDocumentsDialogComponent>,
-    private formBuilder: FormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any) {
-  }
-
-  ngOnInit() {
-    this.createUploadDocumentForm();
-  }
-
-  /**
-   * Creates the upload Document form.
-   */
-  createUploadDocumentForm() {
-    this.uploadDocumentForm = this.formBuilder.group({
-      'name': ['', Validators.required],
-      'description': [''],
-      'file': ['']
-    });
-  }
-
-  /**
-   * Sets file form control value.
-   * @param {any} $event file change event.
-   */
-  onFileSelect($event: any) {
-    if ($event.target.files.length > 0) {
-      const file = $event.target.files[0];
-      this.uploadDocumentForm.get('file').setValue(file);
-    }
-  }
-
-}
diff --git a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
index e6c772ffa..a3c366a7b 100644
--- a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
+++ b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.html
@@ -1,59 +1,52 @@
 <div class="tab-container mat-typography">
 
-  <div>
-    <div fxLayout="column" fxFlex="100%">
-      <div fxLayout="row" fxLayoutAlign="flex-end">
-        <button mat-raised-button color="primary" (click)="uploadDocument()" *ngIf="choice">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Upload
+  <h3>Documents</h3>
+
+  <button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()"
+    *mifosxHasPermission="'CREATE_DOCUMENT'">
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+  </button>
+
+  <table mat-table #documentsTable [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
+      <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="filename">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name </th>
+      <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+      <td mat-cell *matCellDef="let document; let index">
+        <button class="document-action-button" mat-raised-button color="primary">
+          <fa-icon icon="cloud-download-alt"></fa-icon>
         </button>
-      </div>
-    </div>
-  </div>
 
-  <ng-container *ngIf="loanDocuments.length > 0">
+        <button class="document-action-button" mat-raised-button color="primary" *ngIf="document.fileIsImage">
+          <i class="fa fa-eye"></i>
+        </button>
 
-    <table mat-table #documentsTable [dataSource]="dataSource" matSort>
+        <button class="document-action-button" mat-raised-button color="warn"
+          (click)="deleteDocument(document.id, index)">
+          <fa-icon icon="times"></fa-icon>
+        </button>
 
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
-      </ng-container>
+      </td>
+    </ng-container>
 
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
-        <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
-      </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
 
-      <ng-container matColumnDef="filename">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name </th>
-        <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
-        <td mat-cell *matCellDef="let document; let index">
-          <button class="loan-document-action-button" mat-raised-button color="primary">
-            <fa-icon icon="cloud-download-alt"></fa-icon>
-          </button>
-
-          <button class="loan-document-action-button" mat-raised-button color="primary" *ngIf="document.fileIsImage">
-            <i class="fa fa-eye"></i>
-          </button>
-
-          <button class="loan-document-action-button" mat-raised-button color="warn"
-            (click)="deleteDocument(document.id, index)">
-            <fa-icon icon="times"></fa-icon>
-          </button>
-
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-
-    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-
-  </ng-container>
+  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
 </div>
diff --git a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.scss b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.scss
index a833a3030..c47e14a47 100644
--- a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.scss
+++ b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.scss
@@ -1,12 +1,12 @@
 table {
 	width: 100%;
 	margin-top: 3%;
-	.account-action-button{
+  .document-action-button {
       min-width: 26px;
       padding: 0 6px;
       margin: 4px;
       line-height: 25px;
-    }
+  }
 }
 
 .tab-container {
diff --git a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts
index da8f0281b..6ffd5c156 100644
--- a/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts
+++ b/src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts
@@ -11,9 +11,9 @@ import { environment } from 'environments/environment';
 import { LoansService } from 'app/loans/loans.service';
 
 /** Dialog Components */
-import { LoanAccountLoadDocumentsDialogComponent } from 'app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
+import { UploadDocumentDialogComponent } from 'app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component';
 
 /**
  * Overdue charges tab component
@@ -24,7 +24,7 @@ import { SettingsService } from 'app/settings/settings.service';
   styleUrls: ['./loan-documents-tab.component.scss']
 })
 export class LoanDocumentsTabComponent implements OnInit {
-  @ViewChild('documentsTable') documentsTable: MatTable<Element>;
+  @ViewChild('documentsTable', { static: true }) documentsTable: MatTable<Element>;
 
   /** Stores the resolved loan documents data */
   loanDocuments: any;
@@ -91,11 +91,26 @@ export class LoanDocumentsTabComponent implements OnInit {
   }
 
   uploadDocument() {
-    const uploadLoanDocumentDialogRef = this.dialog.open(LoanAccountLoadDocumentsDialogComponent);
-    uploadLoanDocumentDialogRef.afterClosed().subscribe((data: any) => {
-      if (data) {
-        this.loansService.loadLoanDocument(this.loanDetailsData.id, data)
-          .subscribe(() => {});
+    const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
+      data: { documentIdentifier: false, entityType: 'Loan' }
+    });
+    uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
+      if (dialogResponse) {
+        const formData: FormData = new FormData;
+        formData.append('name', dialogResponse.fileName);
+        formData.append('file', dialogResponse.file);
+        formData.append('description', dialogResponse.description);
+        this.loansService.loadLoanDocument(this.loanDetailsData.id, formData).subscribe((res: any) => {
+          this.loanDocuments.push({
+            id: res.resourceId,
+            parentEntityType: 'loans',
+            parentEntityId: this.loanDetailsData.id,
+            name: dialogResponse.fileName,
+            description: dialogResponse.description,
+            fileName: dialogResponse.file.name
+          });
+          this.documentsTable.renderRows();
+        });
       }
     });
   }
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index 01c36fc3d..2952e51ed 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -68,7 +68,6 @@ import { GlimPreviewStepComponent } from './glim-account/create-glim-account/gli
 /** Dialog Components */
 import { LoansAccountViewGuarantorDetailsDialogComponent } from './custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component';
 import { LoansAccountAddCollateralDialogComponent } from './custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
-import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 import { LoanCreditBalanceRefundComponent } from './loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component';
 import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
 import { LoansAccountScheduleStepComponent } from './loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component';
@@ -126,7 +125,6 @@ import { DisburseToSavingsAccountComponent } from './loans-view/loan-account-act
     AddCollateralComponent,
     UndoDisbursalComponent,
     LoanDocumentsTabComponent,
-    LoanAccountLoadDocumentsDialogComponent,
     StandingInstructionsTabComponent,
     EditLoansAccountComponent,
     LoanScreenReportsComponent,