diff --git a/src/app/savings/common-resolvers/transaction-datatable.resolver.ts b/src/app/savings/common-resolvers/transaction-datatable.resolver.ts
new file mode 100644
index 000000000..a4b30a777
--- /dev/null
+++ b/src/app/savings/common-resolvers/transaction-datatable.resolver.ts
@@ -0,0 +1,28 @@
+// Angular Imports
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+// rxjs Imports 
+import { Observable, of } from 'rxjs';
+
+// Custom Service
+import { SavingsService } from '../savings.service';
+
+@Injectable()
+export class TransactionDatatableResolver implements Resolve<Object> {
+  /**
+   * 
+   * @param {SavingsService} savingsService 
+   */
+  constructor(private savingsService: SavingsService) { }
+  /**
+   * Returns the Transactions Account's Datatable data.
+   * @returns {Observable<any>}
+   */
+
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const accountId = route.parent.parent.paramMap.get('id');
+    const datatableName = route.paramMap.get('datatableName');
+    return this.savingsService.getSavingsTransactionDatatable(accountId, datatableName);
+  }
+}
\ No newline at end of file
diff --git a/src/app/savings/common-resolvers/transaction-datatables.resolver.ts b/src/app/savings/common-resolvers/transaction-datatables.resolver.ts
new file mode 100644
index 000000000..6d818696b
--- /dev/null
+++ b/src/app/savings/common-resolvers/transaction-datatables.resolver.ts
@@ -0,0 +1,27 @@
+// Angular Imports
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+// rxjs Imports 
+import { Observable, of } from 'rxjs';
+
+// Custom Service
+import { SavingsService } from '../savings.service';
+
+@Injectable()
+export class TransactionDatatablesResolver implements Resolve<Object> {
+
+  /**
+   * 
+   * @param savingsService Savings Service
+   */
+  constructor(private savingsService: SavingsService) { }
+  /**
+   * 
+   * @param route 
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    return this.savingsService.getSavingsTransactionDatatables();
+  }
+}
\ No newline at end of file
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html
new file mode 100644
index 000000000..fb1897f12
--- /dev/null
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.html
@@ -0,0 +1,9 @@
+<div class="tab-container mat-typography">
+  <mifosx-entity-datatable-tab
+    entityType="Saving Account Transaction"
+    [entityId]="entityId"
+    [multiRowDatatableFlag]="multiRowDatatableFlag"
+    [entityDatatable]="entityDatatable"
+  >
+  </mifosx-entity-datatable-tab>
+</div>
\ No newline at end of file
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.scss b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.spec.ts b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.spec.ts
new file mode 100644
index 000000000..2b5510c21
--- /dev/null
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableTransactionTabComponent } from './datatable-transaction-tab.component';
+
+describe('DatatableTransactionTabComponent', () => {
+  let component: DatatableTransactionTabComponent;
+  let fixture: ComponentFixture<DatatableTransactionTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableTransactionTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableTransactionTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts
new file mode 100644
index 000000000..c2043227b
--- /dev/null
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-datatable-transaction-tab',
+  templateUrl: './datatable-transaction-tab.component.html',
+  styleUrls: ['./datatable-transaction-tab.component.scss']
+})
+
+export class DatatableTransactionTabComponent {
+  /** Transaction Id */
+  entityId: string;
+  /** Savings Datatable */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
+  constructor(private route: ActivatedRoute) {
+    this.entityId = this.route.parent.parent.snapshot.paramMap.get('id');
+    this.route.data.subscribe((data: { transactionDatatable: any }) => {
+      this.entityDatatable = data.transactionDatatable;
+      this.multiRowDatatableFlag = this.entityDatatable.columnHeaders[0].columnName === 'id' ? true : false;
+    });
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
index a0e02afd2..e578a8d57 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html
@@ -1,140 +1,110 @@
-<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%"
-  *ngIf="!(transactionData.interestedPostedAsOn === false && (transactionData.transactionType.id === 17 || transactionData.transactionType.id === 3))">
-  <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
-    <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true'
-        || transactionData.transactionType.id==3 || transactionData.transactionType.id==17" [routerLink]="'edit'">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
-    </button>
-  </span>
-  <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
-    <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
-      (click)="releaseAmount()">
-      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Release Amount
-    </button>
-  </span>
-  <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
-    (click)="undoTransaction()" [disabled]="transactionData.reversed">
-    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
-  </button>
-</div>
-
-<div class="container">
-
-  <mat-card>
-
-    <mat-card-content>
-
-      <div fxLayout="row wrap" class="content">
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Transaction Id
+<mat-card class="savings-account-card">
+  <!-- Header -->
+  <mat-card-header fxLayout="column" class="header">
+    <mat-card-title-group class="header-title-group">
+      <div class="profile-image-container">
+        <div>
+          <img mat-card-md-image class="profile-image" matTooltip="Savings Account"
+            [src]="'assets/images/savings_account_placeholder.png'">
         </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.id }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Type
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.transactionType.value }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Transaction Date
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.date | dateFormat }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Currency
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.currency.name }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Amount
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.amount | currency }} {{ transactionData.currency.code }}
-        </div>
-
-        <div fxFlex="50%" class="mat-body-strong">
-          Note
-        </div>
-
-        <div fxFlex="50%">
-          {{ transactionData.note }}
-        </div>
-
-        <mat-divider *ngIf="transactionData.paymentDetailData" [inset]="true"></mat-divider>
-
-        <ng-container *ngIf="transactionData.paymentDetailData">
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
-            {{ 'Payment Type' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
-            {{ transactionData.paymentDetailData.paymentType.name }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Account No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.accountNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Cheque Number' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.checkNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
-            {{ 'Routing Code' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
-            {{ transactionData.paymentDetailData.routingCode }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Receipt No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.receiptNumber }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
-            {{ 'Bank No.' | translate }}
-          </div>
-
-          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
-            {{ transactionData.paymentDetailData.bankNumber }}
-          </div>
-
-        </ng-container>
-
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      <div class="mat-typography account-card-title">
+        <mat-card-title fxLayout="row" fxLayout.lt-md="column">
+          <h3 fxFlex="95%">
+            Transaction Id : {{transactionData.id}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{transactionData.id}}"></mifosx-account-number>
+            </span>
+          </h3>
+          <div fxFlex="15%">
+            <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+              (click)="undoTransaction()" [disabled]="transactionData.reversed">
+              <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+            </button>
+          </div>
+          <span *mifosxHasPermission="'ADJUSTTRANSACTION_SAVINGSACCOUNT'">
+            <button mat-raised-button color="primary" *ngIf="transactionData.transactionType.value === 'Transfer' || transactionData.reversed === 'true'
+                || transactionData.transactionType.id===3 || transactionData.transactionType.id===17" [routerLink]="'edit'">
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+            </button>
+          </span>
+          <span *ngIf="!transactionData.reversed && transactionData.transactionType.amountHold">
+            <button mat-raised-button color="primary" *mifosxHasPermission="'RELEASEAMOUNT_SAVINGSACCOUNT'"
+              (click)="releaseAmount()">
+              <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Release Amount
+            </button>
+          </span>
+        </mat-card-title>
       </div>
-    </mat-card-content>
 
-  </mat-card>
+    </mat-card-title-group>
+  </mat-card-header>
 
-</div>
+  <!-- Content -->
+  <mat-card-content class="content">
+    <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
+      <div fxFlex="96%">
+        <h4 class="table-headers">Transaction Summary</h4>
+        <table>
+          <tbody>
+            <tr *ngIf="transactionData.transactionType.value">
+              <td>Transaction Type</td>
+              <td>{{transactionData.transactionType.value}}</td>
+            </tr>
+            <tr *ngIf="transactionData.date">
+              <td>Transaction Date</td>
+              <td>{{transactionData.date | dateFormat}}</td>
+            </tr>
+            <tr *ngIf="transactionData.currency.name">
+              <td>Currency</td>
+              <td>{{transactionData.currency.name}}</td>
+            </tr>
+            <tr *ngIf="transactionData.amount">
+              <td>Amount</td>
+              <td>{{transactionData.amount | currency}}</td>
+            </tr>
+            <tr *ngIf="transactionData.note">
+              <td>Note</td>
+              <td>{{transactionData.note}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.paymentType">
+              <td>{{ 'Payment Type' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.paymentType.name}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.accountNumber">
+              <td>{{ 'Account Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.accountNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.checkNumber">
+              <td>{{ 'Cheque Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.checkNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.routingCode">
+              <td>{{ 'Routing Code' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.routingCode}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.receiptNumber">
+              <td>{{ 'Receipt Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.receiptNumber}}</td>
+            </tr>
+            <tr *ngIf="transactionData.paymentDetailData.bankNumber">
+              <td>{{ 'Bank Number' | translate }}</td>
+              <td>{{transactionData.paymentDetailData.bankNumber}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <nav mat-tab-nav-bar class="navigation-tabs">
+      <ng-container *ngFor="let transactionDatatable of entityDatatable">
+        <a mat-tab-link *mifosxHasPermission="'READ_' + transactionDatatable.registeredTableName"
+        [routerLink]="['./datatables',transactionDatatable.registeredTableName]" routerLinkActive #datatable="routerLinkActive"
+         [active]="datatable.isActive">
+          {{transactionDatatable.registeredTableName}}
+        </a>
+      </ng-container>
+    </nav>
+    <router-outlet></router-outlet>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss
index 56668f14f..aa80d96ba 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss
@@ -1,10 +1,54 @@
-.container {
-  max-width: 37rem;
-  
-  .content {
-    div {
-      margin: 1rem 0;
-      word-wrap: break-word;
+.savings-account-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
+    padding: 1%;
+    background-color:rgb(16, 116, 185);
+    .header-title-group {
+      .account-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
+    .account-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+      i {
+        margin-bottom: 2px;
+        margin-right: 4px;
+      }
     }
   }
-}
+  .navigation-tabs {
+    background-color: #f2f2f2;
+    overflow: auto;
+  }
+  .content {
+    .savings-account-tables {
+      padding: 1%;
+      margin: 1%;
+      .table-headers {
+        margin: 0;
+        padding: 6px;
+      }
+      td {
+        padding: 3px;
+      }
+    } 
+  }
+  i, img:hover {
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
index a1d3da200..5e15e46cc 100644
--- a/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
+++ b/src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.ts
@@ -26,7 +26,12 @@ export class ViewTransactionComponent {
   /** Transaction data. */
   transactionData: any;
 
-  accountId: string;
+  accountId: any;
+  /** Transaction Data Tables */
+  entityDatatable: any;
+  /** Multi Row Datatable Flag */
+  multiRowDatatableFlag: boolean;
+  isActive:false;
 
   /**
    * Retrieves the Transaction data from `resolve`.
@@ -43,10 +48,11 @@ export class ViewTransactionComponent {
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
-    this.route.data.subscribe((data: { savingsAccountTransaction: any }) => {
-      this.accountId = this.route.snapshot.params['savingAccountId'];
-      this.transactionData = data.savingsAccountTransaction;
-    });
+            this.route.data.subscribe((data: { savingsAccountTransaction: any,transactionDatatables:any}) => {
+                  this.accountId = this.route.snapshot.params['savingAccountId'];
+                  this.transactionData = data.savingsAccountTransaction;
+                  this.entityDatatable = data.transactionDatatables;
+                });
   }
 
   /**
diff --git a/src/app/savings/savings-routing.module.ts b/src/app/savings/savings-routing.module.ts
index b450c58d2..457fefb1e 100644
--- a/src/app/savings/savings-routing.module.ts
+++ b/src/app/savings/savings-routing.module.ts
@@ -8,6 +8,7 @@ import { extract } from '../core/i18n/i18n.service';
 /** Custom Components */
 import { SavingsAccountViewComponent } from './savings-account-view/savings-account-view.component';
 import { TransactionsTabComponent } from './savings-account-view/transactions-tab/transactions-tab.component';
+import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 import { SavingAccountActionsComponent } from './saving-account-actions/saving-account-actions.component';
 import { ChargesTabComponent } from './savings-account-view/charges-tab/charges-tab.component';
 import { StandingInstructionsTabComponent } from './savings-account-view/standing-instructions-tab/standing-instructions-tab.component';
@@ -26,6 +27,8 @@ import { GsimAccountComponent } from './gsim-account/gsim-account.component';
 import { SavingsAccountViewResolver } from './common-resolvers/savings-account-view.resolver';
 import { SavingsDatatableResolver } from './common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from './common-resolvers/savings-datatables.resolver';
+import { TransactionDatatableResolver } from './common-resolvers/transaction-datatable.resolver';
+import { TransactionDatatablesResolver } from './common-resolvers/transaction-datatables.resolver';
 import { SavingsAccountTemplateResolver } from './common-resolvers/savings-account-template.resolver';
 import { SavingsAccountAndTemplateResolver } from './common-resolvers/savings-account-and-template.resolver';
 import { SavingsAccountTransactionResolver } from './common-resolvers/savings-account-transaction.resolver';
@@ -141,8 +144,24 @@ const routes: Routes = [
             path: '',
             component: ViewTransactionComponent,
             resolve: {
-              savingsAccountTransaction: SavingsAccountTransactionResolver
-            }
+              savingsAccountTransaction: SavingsAccountTransactionResolver,
+              transactionDatatables: TransactionDatatablesResolver
+            },
+            children: [
+              {
+                path: 'datatables',
+                children: [{
+                  path: ':datatableName',
+                  component: DatatableTransactionTabComponent,
+                  data: { title: extract('View Data table'), routeParamBreadcrumb: 'datatableName' },
+                  resolve: {
+                    transactionDatatable: TransactionDatatableResolver
+                  }
+                }
+                ]
+
+              }
+            ]
           },
           {
             path: 'edit',
@@ -232,6 +251,8 @@ const routes: Routes = [
   providers: [SavingsAccountViewResolver,
     SavingsDatatablesResolver,
     SavingsDatatableResolver,
+    TransactionDatatableResolver,
+    TransactionDatatablesResolver,
     SavingsAccountTemplateResolver,
     SavingsAccountAndTemplateResolver,
     SavingsAccountTransactionResolver,
diff --git a/src/app/savings/savings.module.ts b/src/app/savings/savings.module.ts
index c29808803..57bb31459 100644
--- a/src/app/savings/savings.module.ts
+++ b/src/app/savings/savings.module.ts
@@ -49,6 +49,7 @@ import { ManageSavingsAccountComponent } from './saving-account-actions/manage-s
 import { ReleaseAmountDialogComponent } from './savings-account-view/custom-dialogs/release-amount-dialog/release-amount-dialog.component';
 import { SavingsDocumentsTabComponent } from './savings-account-view/savings-documents-tab/savings-documents-tab.component';
 import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.component';
+import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 
 
 /**
@@ -104,7 +105,8 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
     ManageSavingsAccountComponent,
     ReleaseAmountDialogComponent,
     SavingsDocumentsTabComponent,
-    NotesTabComponent
+    NotesTabComponent,
+    DatatableTransactionTabComponent
   ],
   providers: [ ]
 })
diff --git a/src/app/savings/savings.service.ts b/src/app/savings/savings.service.ts
index 3d1cda9d8..eec8bc4fe 100644
--- a/src/app/savings/savings.service.ts
+++ b/src/app/savings/savings.service.ts
@@ -107,6 +107,24 @@ export class SavingsService {
     return this.http.get(`/datatables/${datatableName}/${accountId}`, { params: httpParams });
   }
 
+  /**
+   * @returns {Observable<any>}
+   */
+  getSavingsTransactionDatatables(): Observable<any> {
+    const httpParams = new HttpParams().set('apptable', 'm_savings_account_transaction');
+    return this.http.get(`/datatables`, { params: httpParams });
+  }
+
+  /**
+   * @param accountId account Id of savings account to get datatable for.
+   * @param datatableName Data table name.
+   * @returns {Observable<any>}
+   */
+  getSavingsTransactionDatatable(transactionId: string, datatableName: string): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${transactionId}`, { params: httpParams });
+  }
+  
   /**
    * @param accountId account Id of savings account to get add datatable entry for.
    * @param datatableName Data Table name.
diff --git a/src/app/system/manage-data-tables/app-table-data.ts b/src/app/system/manage-data-tables/app-table-data.ts
index 88f051502..dd20012e5 100644
--- a/src/app/system/manage-data-tables/app-table-data.ts
+++ b/src/app/system/manage-data-tables/app-table-data.ts
@@ -1,22 +1,23 @@
 export const appTableData: { displayValue: string, value: string }[] = [
-    { displayValue: 'Client', value: 'm_client' },
-    { displayValue: 'Group', value: 'm_group' },
-    { displayValue: 'Center', value: 'm_center' },
-    { displayValue: 'Office', value: 'm_office' },
-    { displayValue: 'Loan Account', value: 'm_loan' },
-    { displayValue: 'Saving Account', value: 'm_savings_account' },
-    { displayValue: 'Loan Product', value: 'm_product_loan' },
-    { displayValue: 'Savings Product', value: 'm_savings_product' },
-    { displayValue: 'Share Product', value: 'm_share_product' }
-  ];
+  { displayValue: 'Client', value: 'm_client' },
+  { displayValue: 'Group', value: 'm_group' },
+  { displayValue: 'Center', value: 'm_center' },
+  { displayValue: 'Office', value: 'm_office' },
+  { displayValue: 'Loan Account', value: 'm_loan' },
+  { displayValue: 'Saving Account', value: 'm_savings_account' },
+  { displayValue: 'Loan Product', value: 'm_product_loan' },
+  { displayValue: 'Saving Account Transaction', value: 'm_savings_account_transaction' },
+  { displayValue: 'Savings Product', value: 'm_savings_product' },
+  { displayValue: 'Share Product', value: 'm_share_product' }
+];
 
 export const entitySubTypeData: { displayValue: string, value: string }[] = [
-    { displayValue: 'Person', value: 'Person' },
-    { displayValue: 'Entity', value: 'Entity' },
-  ];
+  { displayValue: 'Person', value: 'Person' },
+  { displayValue: 'Entity', value: 'Entity' },
+];
 
 export const savingsSubTypeData: { displayValue: string, value: string }[] = [
-    { displayValue: 'Savings Product', value: 'Savings Product' },
-    { displayValue: 'Fixed Deposit', value: 'Fixed Deposit' },
-    { displayValue: 'Recurring Deposit', value: 'Recurring Deposit' },
-  ];
+  { displayValue: 'Savings Product', value: 'Savings Product' },
+  { displayValue: 'Fixed Deposit', value: 'Fixed Deposit' },
+  { displayValue: 'Recurring Deposit', value: 'Recurring Deposit' },
+];