From 79595f6a1c28a9c85a44138655bbc24c76516e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Alberto=20Hern=C3=A1ndez?=
 <44206706+josehernandezfintecheandomx@users.noreply.github.com>
Date: Sun, 26 Nov 2023 20:00:42 -0600
Subject: [PATCH] Recurring Deposit view account homologation (#1910)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
---
 .../clients-view.component-theme.scss         |  13 -
 .../clients-view/clients-view.component.html  |   4 +-
 .../clients-view/clients-view.component.scss  |  35 +-
 .../general-tab/general-tab.component.html    |  12 +-
 ...-deposit-account-view.component-theme.scss |  16 -
 .../fixed-deposit-account-view.component.html | 195 ++------
 .../fixed-deposit-account-view.component.scss |  53 ---
 .../fixed-deposit-account-view.component.ts   |   5 +-
 .../general-tab/general-tab.component.html    | 122 +++++
 .../general-tab/general-tab.component.scss    |   3 +
 .../general-tab/general-tab.component.spec.ts |  23 +
 .../general-tab/general-tab.component.ts      |  34 ++
 .../transactions-tab.component.html           |  14 +
 .../view-transaction.component.html           |   8 +
 .../view-transaction.component.ts             |  46 +-
 .../fixed-deposits-routing.module.ts          |   8 +-
 .../fixed-deposits/fixed-deposits.module.ts   |   4 +-
 ...-recurring-deposits-account.component.html |  26 +-
 ...-recurring-deposits-account.component.scss |   8 +
 ...it-recurring-deposits-account.component.ts |  32 +-
 ...ng-deposits-account-actions.component.html |   4 +-
 ...ring-deposits-account-actions.component.ts |  14 +-
 .../general-tab/general-tab.component.html    | 286 ++++++++++++
 .../general-tab/general-tab.component.scss    |   3 +
 .../general-tab/general-tab.component.spec.ts |  23 +
 .../general-tab/general-tab.component.ts      |  35 ++
 ...deposits-account-view.component-theme.scss |  16 -
 ...rring-deposits-account-view.component.html | 440 ++++--------------
 ...rring-deposits-account-view.component.scss |  53 ---
 ...curring-deposits-account-view.component.ts |  24 +-
 .../recurring-deposits-buttons.config.ts      |  63 ++-
 .../recurring-deposits-routing.module.ts      |  22 +-
 .../recurring-deposits.module.ts              |   4 +-
 .../loans-account-details-step.component.html |   2 +-
 ...loans-account-schedule-step.component.html |   6 +-
 .../loans-account-schedule-step.component.ts  |  18 +-
 .../loans-view.component-theme.scss           |  13 -
 .../loans-view/loans-view.component.html      |  46 +-
 .../loans/loans-view/loans-view.component.ts  |   3 +
 .../loan-product-summary.component.html       |  12 +-
 .../loan-product-details-step.component.html  |   4 +-
 .../loan-product-settings-step.component.html |   5 +-
 .../loan-product-settings-step.component.ts   |  26 +-
 .../general-tab/general-tab.component.html    | 224 +++++++++
 .../general-tab/general-tab.component.scss    |   0
 .../general-tab/general-tab.component.spec.ts |  23 +
 .../general-tab/general-tab.component.ts      |  39 ++
 .../savings-account-view.component-theme.scss |  16 -
 .../savings-account-view.component.html       | 289 ++----------
 .../savings-account-view.component.scss       |  53 ---
 .../savings-account-view.component.ts         |   5 +-
 .../transactions-tab.component.html           |   8 +-
 .../view-transaction.component.scss           |   2 +-
 src/app/savings/savings-routing.module.ts     |  13 +-
 src/app/savings/savings.module.ts             |   4 +-
 ...w-journal-entry-transaction.component.html | 129 ++---
 ...iew-journal-entry-transaction.component.ts |   9 +-
 src/app/shared/icons.module.ts                |   7 +-
 src/assets/translations/cs-CS.json            |  10 +
 src/assets/translations/de-DE.json            |  10 +
 src/assets/translations/en-US.json            |  10 +
 src/assets/translations/es-MX.json            |  12 +-
 src/assets/translations/fr-FR.json            |  12 +-
 src/assets/translations/it-IT.json            |  10 +
 src/assets/translations/ko-KO.json            |  10 +
 src/assets/translations/lt-LT.json            |  10 +
 src/assets/translations/lv-LV.json            |  10 +
 src/assets/translations/ne-NE.json            |  10 +
 src/assets/translations/pt-PT.json            |  10 +
 src/assets/translations/sw-SW.json            |  10 +
 src/theme/_content.scss                       |  77 +++
 src/theme/mifosx-theme.scss                   |  12 +-
 72 files changed, 1591 insertions(+), 1226 deletions(-)
 delete mode 100644 src/app/clients/clients-view/clients-view.component-theme.scss
 delete mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss
 create mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
 create mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.scss
 create mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.spec.ts
 create mode 100644 src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.ts
 create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
 create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.scss
 create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.spec.ts
 create mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts
 delete mode 100644 src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss
 delete mode 100644 src/app/loans/loans-view/loans-view.component-theme.scss
 create mode 100644 src/app/savings/savings-account-view/general-tab/general-tab.component.html
 create mode 100644 src/app/savings/savings-account-view/general-tab/general-tab.component.scss
 create mode 100644 src/app/savings/savings-account-view/general-tab/general-tab.component.spec.ts
 create mode 100644 src/app/savings/savings-account-view/general-tab/general-tab.component.ts
 delete mode 100644 src/app/savings/savings-account-view/savings-account-view.component-theme.scss
 create mode 100644 src/theme/_content.scss

diff --git a/src/app/clients/clients-view/clients-view.component-theme.scss b/src/app/clients/clients-view/clients-view.component-theme.scss
deleted file mode 100644
index 6d275cf09..000000000
--- a/src/app/clients/clients-view/clients-view.component-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin clients-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-
-  mifosx-clients-view {
-    .client-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-    }
-  }
-}
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 4a55f1f2c..df60525ed 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -1,4 +1,4 @@
-<mat-card class="client-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -27,7 +27,7 @@
         <p (click)="doAction('View Signature')" class="signature">{{"labels.inputs.View Signature" | translate}}</p>
       </div>
 
-      <div class="mat-typography client-card-title">
+      <div class="mat-typography account-card-title">
 
         <mat-card-title fxLayout="row wrap" class="content">
           <h3 fxFlex="95%">
diff --git a/src/app/clients/clients-view/clients-view.component.scss b/src/app/clients/clients-view/clients-view.component.scss
index 859eb5de2..c248d019a 100644
--- a/src/app/clients/clients-view/clients-view.component.scss
+++ b/src/app/clients/clients-view/clients-view.component.scss
@@ -1,25 +1,6 @@
-.client-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
+.account-card {
   .header {
-    padding: 1%;
-    .header-title-group {
-      .client-card-title {
-        color: white;
-        width: 90%;
-        p {
-          color: white;
-        }
-      }
-    }
     .profile-image-container {
-      margin: 4px;
-      .profile-image {
-        object-fit: cover;
-        border-radius: 20px;
-      }
       .client-image-button {
         min-width: 26px;
         padding: 0 6px;
@@ -37,19 +18,5 @@
         }
       }
     }
-    .client-actions {
-      align-self: flex-end;
-      margin: 0 1%;
-      i {
-        margin-bottom: 2px;
-        margin-right: 4px;
-      }
-    }
-  }
-  .navigation-tabs {
-    overflow: auto;
-  }
-  i:hover {
-    cursor: pointer;
   }
 }
diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index 0720e44d0..73dc41b30 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -303,7 +303,7 @@
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
+      [routerLink]="['../', 'savings-accounts', row.id, 'general']"></tr>
 
   </table>
 
@@ -329,7 +329,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'general']"></tr>
 
   </table>
 
@@ -397,7 +397,7 @@
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'interest-rate-chart']"></tr>
+      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"></tr>
 
   </table>
 
@@ -425,7 +425,7 @@
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"
-      [routerLink]="['../', 'fixed-deposits-account', row.id]"></tr>
+      [routerLink]="['../', 'fixed-deposits-accounts', row.id, 'general']"></tr>
 
   </table>
 
@@ -498,7 +498,7 @@
 
     <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"
-      [routerLink]="['../', 'recurringdeposits', row.id, 'interest-rate-chart']" class="select-row"></tr>
+      [routerLink]="['../', 'recurringdeposits', row.id, 'general']" class="select-row"></tr>
 
   </table>
 
@@ -525,7 +525,7 @@
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"
-    [routerLink]="['../', 'recurringdeposits', row.id, 'interest-rate-chart']" class="select-row"></tr>
+    [routerLink]="['../', 'recurringdeposits', row.id, 'general']" class="select-row"></tr>
   </table>
 
   <!-- Shares overview Table -->
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss
deleted file mode 100644
index f3159415a..000000000
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin fixed-deposits-account-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  mifosx-fixed-deposit-account-view {
-    .fixed-deposits-account-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-      .table-headers {
-        background-color: mat.get-color-from-palette($primary, 500);
-        color: mat.get-contrast-color-from-palette($primary, 500);
-      }
-    }
-  }
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
index 9cd4c7a01..2208b37ff 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html
@@ -1,4 +1,4 @@
-<mat-card class="fixed-deposits-account-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -14,12 +14,42 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-            {{"labels.inputs.Account Name" | translate }} : {{fixedDepositsAccountData.depositProductName}}
-          </h3>
+
+          <div fxFlex="60%">
+            <h3>
+              <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
+              {{"labels.inputs.Fixed Deposit Product" | translate }} : {{fixedDepositsAccountData.depositProductName}}
+              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number>
+            </h3>
+            <span class="account-overview">
+              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{fixedDepositsAccountData.clientName ||
+              fixedDepositsAccountData.groupName}}
+              <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
+                <mifosx-account-number accountNo="{{fixedDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+              </span>
+            </span>
+          </div>
+
+          <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <table class="account-overview">
+              <tbody>
+                <tr>
+                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                  <td class="r-amount">{{fixedDepositsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Deposit Amount" | translate }}</td>
+                  <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <span fxFlex="auto"></span>
+
           <div fxFlex="5%">
-            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Fixed Deposit account actions"
               yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -27,15 +57,6 @@
             </button>
           </div>
         </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{"labels.inputs.Account" | translate }} #: {{fixedDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}: {{fixedDepositsAccountData.clientName}}<br/>
-            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
-              {{"labels.inputs.Current Balance" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
-              {{"labels.inputs.Deposit Amount" | translate }}: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
-            </span>
-          </p>
-        </mat-card-subtitle>
       </div>
 
       <mat-menu #accountMenu="matMenu">
@@ -56,151 +77,15 @@
 
     </mat-card-title-group>
 
-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-
-    </mat-card-actions>
-
   </mat-card-header>
 
   <mat-card-content class="content">
 
-    <div class="fixed-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
-
-        <div>
-          <h4 class="table-headers">{{"labels.heading.Fixed Deposit Details" | translate }}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{"labels.inputs.Activated On" | translate }}</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
-                <td>{{"labels.inputs.Closed On" | translate }}</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Field Officer" | translate }}</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Deposit Period" | translate }}</td>
-                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.withHoldTax">
-                <td>{{"labels.inputs.Tax Group" | translate }}</td>
-                <td>{{fixedDepositsAccountData.taxGroup.name}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div>
-          <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-                <td>{{fixedDepositsAccountData.nominalAnnualInterestRate}}%</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-                <td>{{fixedDepositsAccountData.interestCompoundingPeriodType.value}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-                <td>{{fixedDepositsAccountData.interestPostingPeriodType.value}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Interest Calculated Using" | translate }}</td>
-                <td>{{fixedDepositsAccountData.interestCalculationType.value}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.No. of Days in Year" | translate }}</td>
-                <td>{{fixedDepositsAccountData.interestCalculationDaysInYearType.value}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
-                <td>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-      </div>
-
-      <div fxFlex="49%">
-
-        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
-          <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
-              </tr>
-              <tr>
-                <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
-                <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
-                <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
-              </tr>
-              <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
-                <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <ng-template #otherDetails>
-          <div>
-            <h4 class="table-headers">{{"labels.heading.Other Details" | translate }}</h4>
-            <table>
-              <tbody>
-                <tr>
-                  <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
-                </tr>
-                <tr>
-                  <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </ng-template>
-
-      </div>
-
-    </div>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+      [active]="general.isActive">
+      {{"labels.inputs.General" | translate }}
+      </a>
       <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
       [active]="IRC.isActive">
       {{"labels.inputs.Interest Rate Chart" | translate }}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.scss
index 53af5797a..e69de29bb 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.scss
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.scss
@@ -1,53 +0,0 @@
-.fixed-deposits-account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-  .header {
-    padding: 1%;
-    .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 {
-    .fixed-deposits-account-tables {
-      padding: 1%;
-      margin: 1%;
-      .table-headers {
-        margin: 0;
-        padding: 6px;
-      }
-      td {
-        padding: 3px;
-      }
-    } 
-  }
-  i, img:hover {
-    cursor: pointer;
-  }
-}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts
index c4f2edacc..c4b04a109 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts
@@ -15,6 +15,7 @@ import { FixedDepositsButtonsConfiguration } from './fixed-deposits-buttons.conf
 /** Custom Services */
 import { FixedDepositsService } from '../fixed-deposits.service';
 import { SavingsService } from 'app/savings/savings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Fixed Deposits Account View Component
@@ -34,7 +35,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
   buttonConfig: FixedDepositsButtonsConfiguration;
   /** Entity Type */
   entityType: string;
-  currencyCode: string;
+  currency: Currency;
 
   /**
    * Fetches fixed deposits account data from `resolve`
@@ -52,7 +53,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
     this.route.data.subscribe((data: { fixedDepositsAccountData: any, savingsDatatables: any  }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.savingsDatatables = data.savingsDatatables;
-      this.currencyCode = this.fixedDepositsAccountData.currency.code;
+      this.currency = this.fixedDepositsAccountData.currency;
     });
     if (this.router.url.includes('clients')) {
       this.entityType = 'Client';
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
new file mode 100644
index 000000000..12c3a0f81
--- /dev/null
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html
@@ -0,0 +1,122 @@
+
+<div class="fixed-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+
+  <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
+
+    <div>
+      <h4 class="table-headers">{{"labels.heading.Fixed Deposit Details" | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{"labels.inputs.Activated On" | translate }}</td>
+            <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
+            <td>{{"labels.inputs.Closed On" | translate }}</td>
+            <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Field Officer" | translate }}</td>
+            <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+            <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Deposit Period" | translate }}</td>
+            <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.withHoldTax">
+            <td>{{"labels.inputs.Tax Group" | translate }}</td>
+            <td>{{fixedDepositsAccountData.taxGroup.name}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{"labels.inputs.Interest Rate" | translate }}</td>
+            <td>{{fixedDepositsAccountData.nominalAnnualInterestRate}}%</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
+            <td>{{fixedDepositsAccountData.interestCompoundingPeriodType.value}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
+            <td>{{fixedDepositsAccountData.interestPostingPeriodType.value}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Interest Calculated Using" | translate }}</td>
+            <td>{{fixedDepositsAccountData.interestCalculationType.value}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.No. of Days in Year" | translate }}</td>
+            <td>{{fixedDepositsAccountData.interestCalculationDaysInYearType.value}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
+            <td>{{"labels.inputs.Pre-cloure Penal" | translate }}</td>
+            <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </div>
+
+  <div fxFlex="49%">
+
+    <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+      <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+            <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr>
+            <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+            <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
+            <td>{{"labels.inputs.Total Deposits" | translate }}</td>
+            <td class="r-amount">{{fixedDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
+            <td>{{"labels.inputs.Total Withdrawals" | translate }}</td>
+            <td class="r-amount">{{fixedDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
+            <td>{{"labels.inputs.Total Interest Earned" | translate }}</td>
+            <td class="r-amount">{{fixedDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <ng-template #otherDetails>
+      <div>
+        <h4 class="table-headers">{{"labels.heading.Other Details" | translate }}</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+              <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            </tr>
+            <tr>
+              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+              <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ng-template>
+
+  </div>
+
+</div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.scss
new file mode 100644
index 000000000..c0b4d0645
--- /dev/null
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.scss
@@ -0,0 +1,3 @@
+.fixed-deposits-account-tables {
+  padding: 1%;
+}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.spec.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.spec.ts
new file mode 100644
index 000000000..23d4dfb2b
--- /dev/null
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.ts
new file mode 100644
index 000000000..5f37519de
--- /dev/null
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+
+  fixedDepositsAccountData: any;
+  entityType: string;
+  currency: Currency;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router) {
+    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
+      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
+      this.currency = this.fixedDepositsAccountData.currency;
+    });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
index 7e6886354..433d6960c 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html
@@ -40,6 +40,20 @@
         <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
+        <td mat-cell class="center" *matCellDef="let transaction">
+          <button class="account-action-button" mat-raised-button color="primary" (click)="routeEdit($event)" [routerLink]="[transaction.id, 'reciept']">
+            <i class="fa fa-file" matTooltip="View Reciept"></i>
+          </button>
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
+            matTooltipPosition="left" (click)="routeEdit($event)"
+            [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <i class="fa fa-arrow-circle-right"></i>
+          </button>
+        </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" (click)="showTransactions(row)"></tr>
 
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
index f9636b6ec..c91024773 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html
@@ -1,3 +1,11 @@
+<div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
+  <span *ngIf="allowUndo()">
+    <button mat-raised-button color="warn" *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
+      (click)="undoTransaction()">
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
+    </button>
+  </span>
+</div>
 <div class="container">
 
   <mat-card>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts
index 17b9447d3..5b950a489 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts
@@ -1,7 +1,11 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { UndoTransactionDialogComponent } from 'app/savings/savings-account-view/custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
+import { Dates } from 'app/core/utils/dates';
+import { SavingsService } from 'app/savings/savings.service';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * View Transaction Component.
@@ -12,18 +16,23 @@ import { MatDialog } from '@angular/material/dialog';
   styleUrls: ['./view-transaction.component.scss']
 })
 export class ViewTransactionComponent {
-
+  accountId: string;
+  transactionId: string;
   /** Transaction data. */
   transactionData: any;
 
   /**
-   * Retrieves the Transaction data from `resolve`.
-   * @param {ActivatedRoute} route Activated Route.
-   * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(private route: ActivatedRoute,
-              public dialog: MatDialog) {
+  constructor(private savingsService: SavingsService,
+      private route: ActivatedRoute,
+      private dateUtils: Dates,
+      private router: Router,
+      public dialog: MatDialog,
+      private settingsService: SettingsService) {
     this.route.data.subscribe((data: { fixedDepositsAccountTransaction: any }) => {
+      console.log(this.route.parent.snapshot.params);
+      this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
+
       this.transactionData = data.fixedDepositsAccountTransaction;
     });
   }
@@ -35,4 +44,27 @@ export class ViewTransactionComponent {
     return 'active';
   }
 
+  allowUndo(): boolean {
+    return false;
+  }
+
+  undoTransaction(): void {
+    const undoTransactionAccountDialogRef = this.dialog.open(UndoTransactionDialogComponent);
+    undoTransactionAccountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.confirm) {
+        const locale = this.settingsService.language.code;
+        const dateFormat = this.settingsService.dateFormat;
+        const data = {
+          transactionDate: this.dateUtils.formatDate(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
+          transactionAmount: 0,
+          dateFormat,
+          locale
+        };
+        this.savingsService.executeSavingsAccountTransactionsCommand(this.accountId, 'undo', data, this.transactionData.id).subscribe(() => {
+          this.router.navigate(['../'], { relativeTo: this.route });
+        });
+      }
+    });
+  }
+
 }
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts b/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
index aca23ce6e..e306a8cc8 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts
@@ -22,6 +22,7 @@ import { FixedDepositsAccountTransactionResolver } from './common-resolvers/fixe
 import { FixedDepositsAccountActionsResolver } from './common-resolvers/fixed-deposit-account-actions.resolver';
 import { FixedDepositsAccountTemplateResolver } from './common-resolvers/fixed-deposit-account-template.resolver';
 import { FixedDepositsAccountAndTemplateResolver } from './common-resolvers/fixed-deposit-account-and-template.resolver';
+import { GeneralTabComponent } from './fixed-deposit-account-view/general-tab/general-tab.component';
 
 const routes: Routes = [
   {
@@ -53,9 +54,14 @@ const routes: Routes = [
             children: [
               {
                 path: '',
-                redirectTo: 'transactions',
+                redirectTo: 'general',
                 pathMatch: 'full'
               },
+              {
+                path: 'general',
+                component: GeneralTabComponent,
+                data: { title: 'Fixed Deposit Account Details', breadcrumb: 'General', routeParamBreadcrumb: false },
+              },
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits.module.ts b/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
index 606a041d6..d42ed3c0e 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposits.module.ts
@@ -38,6 +38,7 @@ import { FixedDepositAccountInterestRateChartStepComponent } from './fixed-depos
 import { FixedDepositAccountPreviewStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
 import { FixedDepositAccountCurrencyStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component';
 import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/edit-fixed-deposit-account.component';
+import { GeneralTabComponent } from './fixed-deposit-account-view/general-tab/general-tab.component';
 
 /**
  * Fixed Deposits Module
@@ -75,7 +76,8 @@ import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/e
     FixedDepositAccountInterestRateChartStepComponent,
     FixedDepositAccountPreviewStepComponent,
     FixedDepositAccountCurrencyStepComponent,
-    EditFixedDepositAccountComponent
+    EditFixedDepositAccountComponent,
+    GeneralTabComponent
   ],
   imports: [
     SharedModule,
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
index 81a3b5825..c1a30f51e 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html
@@ -19,11 +19,13 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate }}</mat-label>
-            <input matInput required formControlName="transactionAmount">
+          <mat-form-field appearance="fill">
+            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
+            <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+            <span fxFlex="auto"></span>
+            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
             <mat-error *ngIf="depositRecurringDepositForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
+              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -40,14 +42,12 @@
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">{{"labels.inputs.Show Payment Details" | translate }}</span>
-            <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle>
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">{{"labels.inputs.Show Payment Details" | translate}}</span>
+                </div>
+              </mat-slide-toggle>
             </span>
           </div>
 
@@ -59,7 +59,7 @@
 
             <mat-form-field>
               <mat-label>{{"labels.inputs.Cheque" | translate }} #</mat-label>
-              <input matInput formControlName="chequeNumber">
+              <input matInput formControlName="checkNumber">
             </mat-form-field>
 
             <mat-form-field>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss
index e5e6a71a3..6c683c599 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss
@@ -6,3 +6,11 @@
     margin-top: -7px;
     margin-left: 2%;
 }
+
+.right-input {
+  text-align: right;
+}
+
+.right-label {
+  padding-right: 25px !important;
+}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts
index de06dcab2..637077751 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts
@@ -1,12 +1,13 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Deposits Recurring Deposits Account Component
@@ -18,6 +19,8 @@ import { Dates } from 'app/core/utils/dates';
 })
 export class DepositRecurringDepositsAccountComponent implements OnInit {
 
+  @Input() currency: Currency;
+
   /** Transactions Amount */
   transactionAmount: any;
   /** Outstanding Charge Amount */
@@ -75,15 +78,30 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
       'transactionDate': [new Date(), Validators.required],
       'transactionAmount': [this.transactionAmount, Validators.required],
       'paymentTypeId': ['', Validators.required],
-      'accountNumber': '',
-      'chequeNumber': '',
-      'routingCode': '',
-      'receiptNumber': '',
-      'bankNumber': '',
       'note': ''
     });
   }
 
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.depositRecurringDepositForm.addControl('accountNumber', new UntypedFormControl(''));
+      this.depositRecurringDepositForm.addControl('checkNumber', new UntypedFormControl(''));
+      this.depositRecurringDepositForm.addControl('routingCode', new UntypedFormControl(''));
+      this.depositRecurringDepositForm.addControl('receiptNumber', new UntypedFormControl(''));
+      this.depositRecurringDepositForm.addControl('bankNumber', new UntypedFormControl(''));
+    } else {
+      this.depositRecurringDepositForm.removeControl('accountNumber');
+      this.depositRecurringDepositForm.removeControl('checkNumber');
+      this.depositRecurringDepositForm.removeControl('routingCode');
+      this.depositRecurringDepositForm.removeControl('receiptNumber');
+      this.depositRecurringDepositForm.removeControl('bankNumber');
+    }
+  }
+
   /**
    * Toggles the display of payment details
    */
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
index cd80325ac..374b673c0 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.html
@@ -2,8 +2,8 @@
 <mifosx-undo-approval-recurring-deposits-account *ngIf="actions['Undo Approval']"></mifosx-undo-approval-recurring-deposits-account>
 <mifosx-approve-recurring-deposits-account *ngIf="actions['Approve']"></mifosx-approve-recurring-deposits-account>
 <mifosx-reject-recurring-deposits-account *ngIf="actions['Reject']"></mifosx-reject-recurring-deposits-account>
-<mifosx-withdraw-by-client-recurring-deposits-account *ngIf="actions['Withdraw By Client']"></mifosx-withdraw-by-client-recurring-deposits-account>
+<mifosx-withdraw-by-client-recurring-deposits-account *ngIf="actions['Withdrawn by client']"></mifosx-withdraw-by-client-recurring-deposits-account>
 <mifosx-add-charge-recurring-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-recurring-deposits-account>
 <mifosx-premature-close-recurring-deposit-account *ngIf="actions['Premature Close']"></mifosx-premature-close-recurring-deposit-account>
 <mifosx-close-recurring-deposits-account *ngIf="actions['Close']"></mifosx-close-recurring-deposits-account>
-<mifosx-deposit-recurring-deposits-account *ngIf="actions['Deposit']"></mifosx-deposit-recurring-deposits-account>
+<mifosx-deposit-recurring-deposits-account [currency]="currency" *ngIf="actions['Deposit']"></mifosx-deposit-recurring-deposits-account>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts
index ff5c015c2..6e986f590 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/recurring-deposits-account-actions.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-recurring-deposits-account-actions',
@@ -14,7 +15,7 @@ export class RecurringDepositsAccountActionsComponent {
     'Undo Approval': boolean
     'Approve': boolean
     'Reject': boolean
-    'Withdraw By Client': boolean
+    'Withdrawn by client': boolean
     'Add Charge': boolean
     'Premature Close': boolean
     'Close': boolean
@@ -24,17 +25,24 @@ export class RecurringDepositsAccountActionsComponent {
       'Undo Approval': false,
       'Approve': false,
       'Reject': false,
-      'Withdraw By Client': false,
+      'Withdrawn by client': false,
       'Add Charge': false,
       'Premature Close': false,
       'Close': false,
       'Deposit': false
     };
 
+    currency: Currency;
+
   /**
    * @param {ActivatedRoute} route Activated Route
    */
   constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { recurringDepositsAccountActionData: any }) => {
+      if (data.recurringDepositsAccountActionData) {
+        this.currency = data.recurringDepositsAccountActionData.currency;
+      }
+    });
     const name = this.route.snapshot.params['name'];
     this.actions[name] = true;
   }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
new file mode 100644
index 000000000..5749e2b76
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html
@@ -0,0 +1,286 @@
+
+<div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Account Details" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Field Officer" | translate }}</td>
+          <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
+              *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Activation date" | translate }}</td>
+          <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+        </tr>
+        <tr
+          *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
+          <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
+            {{"labels.inputs.Closed on Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
+        </tr>
+        <tr>
+        </tr>
+        <tr>
+          <td><span>{{recurringDepositsAccountData.recurringFrequency}}
+              &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
+            </span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
+          <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
+          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
+          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
+          <td>{{"labels.inputs.Interest Earned" | translate }}</td>
+          <td class="r-amount"><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
+          <td>
+            <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
+              <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            </span>
+            <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
+              <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Period" | translate }}</td>
+          <td>
+            <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.maturityDate">
+          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Total Deposits" | translate }}</td>
+          <td class="r-amount">
+            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr >
+          <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
+          <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}</td>
+        </tr>
+        <tr>
+          <td> {{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td class="r-amount">
+            {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
+          <td> {{"labels.inputs.Interests Earned" | translate }} </td>
+          <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
+          <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td class="r-amount">
+            <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
+          <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }} </td>
+          <td class="r-amount">
+            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
+          <td>
+            <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.maturityDate">
+          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td class="r-amount">
+            <span
+              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
+          <td> {{"labels.inputs.Closed on Date" | translate }} </td>
+          <td>
+            {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
+          </td>
+        </tr>
+        <tr>
+          <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
+          <td>
+            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
+          <td> {{"labels.inputs.Interests Posted" | translate }} </td>
+          <td class="r-amount">
+            <span
+              *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Interest Rate" | translate }}</td>
+          <td class="r-amount">{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+        </tr>
+        <tr>
+          <td># {{"labels.inputs.Days in Year" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
+          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+        </tr>
+        <tr>
+          <td># {{"labels.inputs.Days in Year" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
+          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
+          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
+          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.scss
new file mode 100644
index 000000000..0f4425f09
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.scss
@@ -0,0 +1,3 @@
+.recurring-deposits-account-tables {
+  padding: 1%;
+}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.spec.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.spec.ts
new file mode 100644
index 000000000..23d4dfb2b
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts
new file mode 100644
index 000000000..2ba1c0685
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+
+  recurringDepositsAccountData: any;
+  isprematureAllowed = false;
+  entityType: string;
+  currency: Currency;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router) {
+    this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
+      this.recurringDepositsAccountData = data.recurringDepositsAccountData;
+      this.currency = this.recurringDepositsAccountData.currency;
+      this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
+      if (this.router.url.includes('clients')) {
+        this.entityType = 'Client';
+      } else if (this.router.url.includes('groups')) {
+        this.entityType = 'Group';
+      } else if (this.router.url.includes('centers')) {
+        this.entityType = 'Center';
+      }
+    });
+  }
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss
deleted file mode 100644
index c39ddd40a..000000000
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin recurring-deposits-account-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  mifosx-recurring-deposits-account-view {
-    .recurringDeposits-account-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-      .table-headers {
-        background-color: mat.get-color-from-palette($primary, 500);
-        color: mat.get-contrast-color-from-palette($primary, 500);
-      }
-    }
-  }
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
index 273dd7d12..2ab03c61a 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html
@@ -1,4 +1,4 @@
-<mat-card class="recurring-deposits-account-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,11 +13,49 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
-              [matTooltip]="recurringDepositsAccountData.status.value"></i>
-              {{"labels.inputs.Account Name" | translate }} : {{recurringDepositsAccountData.depositProductName}}
-          </h3>
+          <div fxFlex="60%">
+            <h3>
+              <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
+                [matTooltip]="recurringDepositsAccountData.status.value"></i>
+              {{"labels.inputs.Recurring Deposit" | translate }} : {{recurringDepositsAccountData.depositProductName}}
+              <mifosx-account-number accountNo="{{recurringDepositsAccountData.accountNo}}"></mifosx-account-number>
+            </h3>
+            <span class="account-overview">
+              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}:
+              {{recurringDepositsAccountData.clientName ||
+              recurringDepositsAccountData.groupName}}
+              <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
+                <mifosx-account-number
+                  accountNo="{{recurringDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+              </span>
+            </span>
+          </div>
+
+          <div
+            *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <table class="account-overview">
+              <tbody>
+                <tr>
+                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                  <td class="r-amount">{{recurringDepositsAccountData.summary.accountBalance |
+                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Deposit Amount" | translate }}</td>
+                  <td class="r-amount">{{recurringDepositsAccountData.depositAmount |
+                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Deposit Period" | translate }}</td>
+                  <td class="r-amount">{{recurringDepositsAccountData.depositPeriod | number}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <span fxFlex="auto"></span>
+
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
               yPosition="below">
@@ -27,33 +65,26 @@
             </button>
           </div>
         </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{"labels.inputs.Account" | translate }} #: {{recurringDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}:
-            {{recurringDepositsAccountData.clientName}}<br />
-            <span
-              *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-              {{"labels.inputs.Current Balance" | translate }}:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
-              {{"labels.inputs.Available Balance" | translate }}:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
-            </span>
-          </p>
-        </mat-card-subtitle>
+
       </div>
 
       <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let button of buttonConfig.singleButtons">
-          <button mat-raised-button (click)="doAction(button.name)">
-            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+        <ng-container *ngFor="let item of buttonConfig.singleButtons">
+          <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
+            <mat-icon matListIcon>
+              <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+            </mat-icon>
+            <span> {{'labels.menus.' + item.name | translate}} </span>
+          </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-          <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
           <mat-menu #More="matMenu">
-          <span *ngFor="let option of buttonConfig.options">
-            <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-          </span>
+            <span *ngFor="let option of buttonConfig.options">
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
+                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+            </span>
           </mat-menu>
         </ng-container>
 
@@ -61,341 +92,42 @@
 
     </mat-card-title-group>
 
-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-
-    </mat-card-actions>
-
   </mat-card-header>
 
   <mat-card-content class="content">
 
-    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Savings Details" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Field Officer" | translate }}</td>
-              <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
-                  *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Activation date" | translate }}</td>
-              <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
-            </tr>
-            <tr
-              *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
-              <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-                {{"labels.inputs.Closed on Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
-            </tr>
-            <tr>
-            </tr>
-            <tr>
-              <td><span>{{recurringDepositsAccountData.recurringFrequency}}
-                  &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
-                </span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-              <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
-              <td >{{"labels.inputs.Interest Earned" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
-              </td>
-            </tr>
-
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
-              <td>
-                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
-                </span>
-                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Period" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-              <td>
-                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr >
-              <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
-              <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}</td>
-            </tr>
-            <tr>
-              <td> {{"labels.inputs.Recurring Deposits Amount" | translate }}</td>
-              <td>
-                {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> {{"labels.inputs.Interests Earned" | translate }} </td>
-              <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
-              <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
-              <td>
-                <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }} </td>
-              <td>
-                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td>
-                <span>{{ recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
-              <td>
-                <span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-              <td> {{"labels.inputs.Closed on Date" | translate }} </td>
-              <td>
-                {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
-              </td>
-            </tr>
-            <tr>
-              <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
-              <td>
-                {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> {{"labels.inputs.Interests Posted" | translate }} </td>
-              <td>
-                <span
-                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Compounding period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
-            </tr>
-            <tr>
-              <td># {{"labels.inputs.Days in Year" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-                  {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
-            </tr>
-            <tr>
-              <td># {{"labels.inputs.Days in Year" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-                  {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-              <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-    </div>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-        <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-          [active]="IRC.isActive">
-          {{"labels.inputs.Interest Rate Chart" | translate }}
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        {{"labels.inputs.General" | translate }}
+      </a>
+      <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
+        [active]="IRC.isActive">
+        {{"labels.inputs.Interest Rate Chart" | translate }}
+      </a>
+      <ng-container *ngIf="recurringDepositsAccountData.transactions">
+        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
+          [active]="transactions.isActive">
+          {{"labels.inputs.Transactions" | translate }}
         </a>
-        <ng-container *ngIf="recurringDepositsAccountData.transactions">
-          <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-            [active]="transactions.isActive">
-            {{"labels.inputs.Transactions" | translate }}
-          </a>
-        </ng-container>
-        <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive" [active]="charges.isActive">
-          {{"labels.inputs.Charges" | translate }}
+      </ng-container>
+      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
+        [active]="charges.isActive">
+        {{"labels.inputs.Charges" | translate }}
+      </a>
+      <ng-container *ngIf="recurringDepositsAccountData.clientId">
+        <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive
+          #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive">
+          {{"labels.inputs.Standing Instructions" | translate }}
         </a>
-        <ng-container *ngIf="recurringDepositsAccountData.clientId">
-          <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive #standingInstructions="routerLinkActive"
-            [active]="standingInstructions.isActive">
-            {{"labels.inputs.Standing Instructions" | translate }}
-          </a>
-        </ng-container>
-        <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-          <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-            [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive #datatable="routerLinkActive"
-            [active]="datatable.isActive">
-            {{savingsDatatable.registeredTableName}}
-          </a>
-        </ng-container>
+      </ng-container>
+      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
+        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
+          {{savingsDatatable.registeredTableName}}
+        </a>
+      </ng-container>
     </nav>
 
     <router-outlet></router-outlet>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss
index ad0222429..e69de29bb 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss
@@ -1,53 +0,0 @@
-.recurring-deposits-account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-  .header {
-    padding: 1%;
-    .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 {
-    .recurringDeposits-account-tables {
-      padding: 1%;
-      margin: 1%;
-      .table-headers {
-        margin: 0;
-        padding: 6px;
-      }
-      td {
-        padding: 3px;
-      }
-    }
-  }
-  i, img:hover {
-    cursor: pointer;
-  }
-}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
index 1e2bfc183..ccfc8c835 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
@@ -13,6 +13,7 @@ import { RecurringDepositsButtonsConfiguration } from './recurring-deposits-butt
 /** Custom Dialogs */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { RecurringDepositConfirmationDialogComponent } from './custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { Currency } from 'app/shared/models/general.model';
 
 
 /**
@@ -35,7 +36,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Is Prematured Allowed */
   isprematureAllowed: any;
-  currencyCode: string;
+  entityType: string;
+  currency: Currency;
   /**
    * Fetches recurringDeposits account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -51,8 +53,15 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.charges = this.recurringDepositsAccountData.charges;
       this.savingsDatatables = data.savingsDatatables;
-      this.currencyCode = this.recurringDepositsAccountData.currency.code;
+      this.currency = this.recurringDepositsAccountData.currency;
       this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
+      if (this.router.url.includes('clients')) {
+        this.entityType = 'Client';
+      } else if (this.router.url.includes('groups')) {
+        this.entityType = 'Group';
+      } else if (this.router.url.includes('centers')) {
+        this.entityType = 'Center';
+      }
     });
   }
 
@@ -69,6 +78,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     if (this.recurringDepositsAccountData.clientId && this.recurringDepositsAccountData.status.value === 'Matured') {
       this.buttonConfig.addOption({
         name: 'Transfer Funds',
+        taskPermissionName: 'CREATE_ACCOUNTTRANSFER'
       });
     }
 
@@ -77,6 +87,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
         if (element.name === 'Annual fee - INR') {
           this.buttonConfig.addOption({
             name: 'Apply Annual Fees',
+            taskPermissionName: 'APPLYANNUALFEE_SAVINGSACCOUNT'
           });
         }
       });
@@ -85,7 +96,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     if (this.recurringDepositsAccountData.clientId && this.recurringDepositsAccountData.status.value === 'Active') {
       if (this.recurringDepositsAccountData.allowWithdrawal === true) {
         this.buttonConfig.addOption({
-          name: 'Withdraw'
+          name: 'Withdraw',
+          taskPermissionName: 'WITHDRAW_RECURRINGDEPOSITACCOUNT'
         });
       }
       if (this.recurringDepositsAccountData.charges) {
@@ -93,6 +105,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
           if (element.name === 'Annual fee - INR') {
             this.buttonConfig.addOption({
               name: 'Apply Annual Fees',
+              taskPermissionName: 'APPLYANNUALFEE_SAVINGSACCOUNT'
             });
           }
         });
@@ -101,7 +114,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       if (!this.isprematureAllowed) {
         this.buttonConfig.addButton({
           name: 'Close',
-          icon: 'fa fa-arrow-right'
+          icon: 'arrow-right',
+          taskPermissionName: 'CLOSE_RECURRINGDEPOSITACCOUNT'
         });
       }
 
@@ -144,7 +158,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       case 'Reject':
       case 'Undo Approval':
       case 'Add Charge':
-      case 'Withdraw By Client':
+      case 'Withdrawn by client':
       case 'Premature Close':
       case 'Close':
       case 'Deposit':
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts
index 71c7baa57..f9f2d6f2d 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts
@@ -3,13 +3,14 @@ export class RecurringDepositsButtonsConfiguration {
 
   optionArray: {
     name: string,
-    taskPermissionName?: string,
+    icon?: string,
+    taskPermissionName: string,
   }[];
 
   buttonsArray: {
     name: string,
     icon: string,
-    taskPermissionName?: string,
+    taskPermissionName: string,
   }[];
 
   constructor(status: string) {
@@ -31,15 +32,18 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Deposit',
-            icon: 'fa fa-arrow-up'
+            icon: 'arrow-up',
+            taskPermissionName: 'DEPOSIT_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Premature Close',
-            icon: 'fa fa-arrow-left'
+            icon: 'arrow-left',
+            taskPermissionName: 'PREMATURECLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'fa fa-table',
+            icon: 'calculator',
+            taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -47,11 +51,13 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Modify Application',
-            icon: 'fa fa-pencil ',
+            icon: 'edit',
+            taskPermissionName: 'UPDATE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Approve',
-            icon: 'fa fa-check'
+            icon: 'check',
+            taskPermissionName: 'APPROVE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -59,11 +65,13 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Undo Approval',
-            icon: 'fa fa-undo'
+            icon: 'undo',
+            taskPermissionName: 'APPROVALUNDO_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Activate',
-            icon: 'fa fa-check'
+            icon: 'check',
+            taskPermissionName: 'ACTIVATE_RECURRINGDEPOSITACCOUNT'
           }
         ];
       break;
@@ -71,15 +79,18 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Close',
-            icon: 'fa fa-arrow-right'
+            icon: 'arrow-right',
+            taskPermissionName: 'CLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'fa fa-table'
+            icon: 'calculator',
+            taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Post Interest',
-            icon: 'fa fa-table'
+            icon: 'money',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
       break;
@@ -94,32 +105,46 @@ export class RecurringDepositsButtonsConfiguration {
         this.optionArray = [
           {
             name: 'Post Interest',
+            icon: 'table',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
       case 'Submitted and pending approval':
         this.optionArray = [
           {
-            name: 'Reject'
+            name: 'Reject',
+            icon: 'ban',
+            taskPermissionName: 'REJECT_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Withdraw By Client'
+            name: 'Withdrawn by client',
+            icon: 'arrow-down',
+            taskPermissionName: 'WITHDRAW_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Add Charge'
+            name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'ADDCHARGE_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Delete'
+            name: 'Delete',
+            icon: 'trash',
+            taskPermissionName: 'DELETE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
       case 'Matured':
         this.optionArray = [
           {
-            name: 'Add Charge'
+            name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'ADDCHARGE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -129,11 +154,11 @@ export class RecurringDepositsButtonsConfiguration {
     }
   }
 
-  addOption(option: {name: string, icon?: string, taskPermissionName?: string}) {
+  addOption(option: {name: string, icon?: string, taskPermissionName: string}) {
     this.optionArray.push(option);
   }
 
-  addButton(option: { name: string, icon: string, taskPermissionName?: string }) {
+  addButton(option: { name: string, icon: string, taskPermissionName: string }) {
     this.buttonsArray.push(option);
   }
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
index 87fdcd292..dd9cdea52 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
@@ -25,6 +25,7 @@ import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-a
 import { RecurringDepositsAccountAndTemplateResolver } from './common-resolvers/recurring-deposit-account-and-template.resolver';
 import { RecurringDepositsAccountTransactionResolver } from './common-resolvers/recurring-deposit-account-transaction.resolver';
 import { RecurringDepositsAccountTransactionTemplateResolver } from './common-resolvers/recurring-deposit-account-transaction-template.resolver';
+import { GeneralTabComponent } from './recurring-deposits-account-view/general-tab/general-tab.component';
 
 const routes: Routes = [
   {
@@ -47,25 +48,29 @@ const routes: Routes = [
             path: '',
             component: RecurringDepositsAccountViewComponent,
             resolve: {
-              recurringDepositsAccountData: RecurringDepositsAccountViewResolver,
+              recurringDepositsAccountData: RecurringDepositsAccountDataResolver,
               savingsDatatables: SavingsDatatablesResolver
             },
             children: [
+              {
+                path: '',
+                redirectTo: 'general',
+                pathMatch: 'full'
+              },
+              {
+                path: 'general',
+                component: GeneralTabComponent,
+                data: { title: 'Recurring Deposit Account Details', breadcrumb: 'General', routeParamBreadcrumb: false },
+              },
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,
                 data: { title: 'Recurring Deposit Account Interest Rate Chart', breadcrumb: 'Interest Rate Chart', routeParamBreadcrumb: false },
-                resolve: {
-                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
-                }
               },
               {
                 path: 'transactions',
                 component: TransactionsTabComponent,
                 data: { title: 'Recurring Deposit Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-                resolve: {
-                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
-                }
               },
               {
                 path: 'charges',
@@ -76,9 +81,6 @@ const routes: Routes = [
                 path: 'standing-instructions-tab',
                 component: StandingInstructionsTabComponent,
                 data: { title: 'Recurring Deposit Account Standing Instructions', breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
-                resolve: {
-                  recurringDepositsAccountData: RecurringDepositsAccountDataResolver
-                }
               },
               {
                 path: 'datatables',
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
index d4a06463c..3fa1bf42f 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
@@ -38,6 +38,7 @@ import { EditTransactionComponent } from './recurring-deposits-account-view/tran
 
 /* Dialog Components */
 import { RecurringDepositConfirmationDialogComponent } from './recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { GeneralTabComponent } from './recurring-deposits-account-view/general-tab/general-tab.component';
 
 /**
  * RecurringDeposits Module
@@ -79,7 +80,8 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     CloseRecurringDepositsAccountComponent,
     DepositRecurringDepositsAccountComponent,
     ViewTransactionComponent,
-    EditTransactionComponent
+    EditTransactionComponent,
+    GeneralTabComponent
   ],
   providers: [ ]
 })
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
index 6538c813e..1184b551e 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
@@ -27,7 +27,7 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Loan purpose" | translate}}</mat-label>
+      <mat-label>{{"labels.inputs.Loan Purpose" | translate}}</mat-label>
       <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate}}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
           {{ loanPurpose.name }}
diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
index 88a308b46..53e6177bf 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
@@ -1,8 +1,8 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <a mat-button (click)="showRepaymentInfo()">
-    {{"labels.inputs.Repayment Info" | translate}}
-  </a>
+  <button mat-stroked-button color="primary" (click)="showRepaymentInfo()">
+    <fa-icon icon="calendar" class="m-r-10"></fa-icon>{{"labels.inputs.Generate Repayment Schedule" | translate}}
+  </button>
 
   <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"
     [currencyCode]="currencyCode">
diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
index 58e8415b2..cd2068ed1 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
@@ -19,7 +19,6 @@ export class LoansAccountScheduleStepComponent implements OnInit {
   /** Loans Account Data */
   @Input() loansAccount: any;
 
-  showRepayment = false;
   repaymentScheduleDetails: any = {periods: []};
 
   loanId: any = null;
@@ -34,16 +33,13 @@ export class LoansAccountScheduleStepComponent implements OnInit {
 
   showRepaymentInfo(): void {
     this.repaymentScheduleDetails = {periods: []};
-    this.showRepayment = !this.showRepayment;
-    if (this.showRepayment) {
-      const locale = this.settingsService.language.code;
-      const dateFormat = this.settingsService.dateFormat;
-      const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
-        this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
+      this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
 
-      this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
-        this.repaymentScheduleDetails = response;
-      });
-    }
+    this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
+      this.repaymentScheduleDetails = response;
+    });
   }
 }
diff --git a/src/app/loans/loans-view/loans-view.component-theme.scss b/src/app/loans/loans-view/loans-view.component-theme.scss
deleted file mode 100644
index 6471d749a..000000000
--- a/src/app/loans/loans-view/loans-view.component-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin loans-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-
-  mifosx-loans-view {
-    .loan-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-    }
-  }
-}
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index 54ca3e9eb..97a04510a 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -1,4 +1,4 @@
-<mat-card class="loan-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="mat-typography loan-card-title">
+      <div class="mat-typography account-card-title">
         <mat-card-title>
           <div fxLayout="row" fxLayout.lt-md="column">
 
@@ -46,24 +46,30 @@
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
-              <h3> {{"labels.heading.Loan Account OverView" | translate}} </h3>
-              <span>{{"labels.inputs.Current Balance" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
-              <div *ngIf="loanDisplayArrearsDelinquency < 2">
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears By" | translate}}:
-                  {{loanDetailsData.summary.totalOverdue | currency:currencyCode:'symbol-narrow':'1.2-2' }}
-                  <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate
-                    }}</span>
-                </span><br>
-                <span *ngIf="loanDetailsData.inArrears">{{"labels.inputs.Arrears Since" | translate}}:
-                  {{loanDetailsData.summary.overdueSinceDate |
-                  dateFormat}}
-                </span>
-                <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                  {{"labels.inputs.Overpaid By" | translate}}: {{loanDetailsData.currency.displaySymbol}}
-                  {{loanDetailsData.totalOverpaid | formatNumber }}
-                </span>
-              </div>
+              <h3> {{"labels.heading.Account OverView" | translate}} </h3>
+              <table class="account-overview">
+                <tbody>
+                  <tr>
+                    <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.summary.totalOutstanding | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                  </tr>
+                  <tr *ngIf="loanDisplayArrearsDelinquency < 2">
+                    <td>{{"labels.inputs.Arrears By" | translate }}</td>
+                    <td class="r-amount" *ngIf="loanDetailsData.summary.totalOverdue >= 0">
+                      {{loanDetailsData.summary.totalOverdue | currency:currency.code:'symbol-narrow':'1.2-2'}}
+                    </td>
+                    <td *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">{{"labels.inputs.Not Provided" | translate}}</td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.inArrears">
+                    <td>{{"labels.inputs.Arrears Since" | translate }}</td>
+                    <td> {{loanDetailsData.summary.overdueSinceDate | dateFormat}} </td>
+                  </tr>
+                  <tr *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
+                    <td>{{"labels.inputs.Overpaid By" | translate }}</td>
+                    <td class="r-amount">{{loanDetailsData.totalOverpaid | currency:currency.code:'symbol-narrow':'1.2-2'}} </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
 
             <span fxFlex="auto"></span>
diff --git a/src/app/loans/loans-view/loans-view.component.ts b/src/app/loans/loans-view/loans-view.component.ts
index ec818027e..8faff5b1b 100644
--- a/src/app/loans/loans-view/loans-view.component.ts
+++ b/src/app/loans/loans-view/loans-view.component.ts
@@ -13,6 +13,7 @@ import { LoansAccountButtonConfiguration } from './loan-accounts-button-config';
 import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { LoanStatus } from '../models/loan-status.model';
+import { Currency } from 'app/shared/models/general.model';
 
 @Component({
   selector: 'mifosx-loans-view',
@@ -42,6 +43,7 @@ export class LoansViewComponent implements OnInit {
   disburseTransactionNo = 0;
 
   loanStatus: LoanStatus;
+  currency: Currency;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -52,6 +54,7 @@ export class LoansViewComponent implements OnInit {
       this.loanDatatables = data.loanDatatables;
       this.loanDisplayArrearsDelinquency = data.loanArrearsDelinquencyConfig.value || 0;
       this.loanStatus = this.loanDetailsData.status;
+      this.currency = this.loanDetailsData.currency;
     });
     this.loanId = this.route.snapshot.params['loanId'];
     this.clientId = this.loanDetailsData.clientId;
diff --git a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
index 78286ed56..36c7e49e6 100644
--- a/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
+++ b/src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html
@@ -329,6 +329,11 @@
 
   <mat-divider [inset]="true"></mat-divider>
 
+  <div fxFlexFill>
+    <span fxFlex="47%">Loan Schedule Type:</span>
+    <span  fxFlex="53%">{{ loanProduct.loanScheduleType.value }}</span>
+  </div>
+
   <div fxFlexFill>
     <span fxFlex="47%">Repayment Strategy:</span>
     <span  fxFlex="53%" class="repayment-strategy">{{ loanProduct.transactionProcessingStrategyName }}</span>
@@ -346,12 +351,7 @@
     </span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="47%">Loan Schedule Type:</span>
-    <span  fxFlex="53%">{{ loanProduct.loanScheduleType.value }}</span>
-  </div>
-
-  <div fxFlexFill *ngIf="loanProduct.loanScheduleProcessingType">
+  <div fxFlexFill *ngIf="isAdvancedPaymentAllocationStrategy()">
     <span fxFlex="47%">Loan Schedule Processing Type:</span>
     <span  fxFlex="53%">{{ loanProduct.loanScheduleProcessingType.value }}</span>
   </div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
index 7e0b49cc4..64bb03506 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="72%">
       <mat-label>Product Name</mat-label>
       <input matInput formControlName="name" matTooltip="The product name is a unique identifier for the lending product." required>
       <mat-error>
@@ -10,7 +10,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="24%">
       <mat-label>Short Name</mat-label>
       <input matInput formControlName="shortName" maxlength="4" matTooltip="The short name is a unique identifier for the lending product." required>
       <mat-error>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
index c1e301bf1..c068dbd81 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
@@ -65,7 +65,8 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Repayment strategy</mat-label>
-      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid." required>
+      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid."
+        required [disabled]="advancedTransactionProcessingStrategyDisabled">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData" [value]="transactionProcessingStrategy.code">
           {{ transactionProcessingStrategy.name }}
         </mat-option>
@@ -75,7 +76,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="isAdvancedTransactionProcessingStrategy">
       <mat-label>Loan Schedule Processing Type</mat-label>
       <mat-select formControlName="loanScheduleProcessingType" required>
         <mat-option *ngFor="let loanScheduleProcessingType of loanScheduleProcessingTypeData" [value]="loanScheduleProcessingType.code">
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
index 7a5f6cad8..3dc5b82e6 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
@@ -40,6 +40,8 @@ export class LoanProductSettingsStepComponent implements OnInit {
   delinquencyBucketData: any;
   loanScheduleTypeData: OptionData[] = [];
   loanScheduleProcessingTypeData: OptionData[] = [];
+  isAdvancedTransactionProcessingStrategy = false;
+  advancedTransactionProcessingStrategyDisabled = true;
 
   /** Values to Days for Repayments */
   defaultConfigValues: GlobalConfiguration[] = [];
@@ -78,13 +80,14 @@ export class LoanProductSettingsStepComponent implements OnInit {
     this.loanScheduleTypeData = this.loanProductsTemplate.loanScheduleTypeOptions;
     this.loanScheduleProcessingTypeData = this.loanProductsTemplate.loanScheduleProcessingTypeOptions;
 
+    const transactionProcessingStrategyCode: string = this.loanProductsTemplate.transactionProcessingStrategyCode || this.transactionProcessingStrategyData[0].code;
     this.loanProductSettingsForm.patchValue({
       'amortizationType': this.loanProductsTemplate.amortizationType.id,
       'interestType': this.loanProductsTemplate.interestType.id,
       'isEqualAmortization': this.loanProductsTemplate.isEqualAmortization,
       'interestCalculationPeriodType': this.loanProductsTemplate.interestCalculationPeriodType.id,
       'allowPartialPeriodInterestCalcualtion': this.loanProductsTemplate.allowPartialPeriodInterestCalcualtion,
-      'transactionProcessingStrategyCode': this.loanProductsTemplate.transactionProcessingStrategyCode || this.transactionProcessingStrategyData[0].code,
+      'transactionProcessingStrategyCode': transactionProcessingStrategyCode,
       'graceOnPrincipalPayment': this.loanProductsTemplate.graceOnPrincipalPayment,
       'graceOnInterestPayment': this.loanProductsTemplate.graceOnInterestPayment,
       'graceOnInterestCharged': this.loanProductsTemplate.graceOnInterestCharged,
@@ -109,9 +112,15 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'enableDownPayment': this.loanProductsTemplate.enableDownPayment,
       'enableInstallmentLevelDelinquency': this.loanProductsTemplate.enableInstallmentLevelDelinquency,
       'loanScheduleType': this.loanProductsTemplate.loanScheduleType.code,
-      'loanScheduleProcessingType': this.loanProductsTemplate.loanScheduleProcessingType.code
     });
 
+    this.isAdvancedTransactionProcessingStrategy = LoanProducts.isAdvancedPaymentAllocationStrategy(transactionProcessingStrategyCode);
+    if (this.isAdvancedTransactionProcessingStrategy) {
+      this.loanProductSettingsForm.addControl('loanScheduleProcessingType', new UntypedFormControl(
+        this.loanProductsTemplate.loanScheduleProcessingType.code || LoanProducts.LOAN_SCHEDULE_PROCESSING_TYPE_HORIZONTAL,
+        [Validators.required ]));
+    }
+
     if (this.loanProductsTemplate.dueDaysForRepaymentEvent != null &&
       this.loanProductsTemplate.overDueDaysForRepaymentEvent != null) {
         this.loanProductSettingsForm.patchValue({
@@ -234,7 +243,6 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'dueDaysForRepaymentEvent': [''],
       'overDueDaysForRepaymentEvent': [''],
       'loanScheduleType': [LoanProducts.LOAN_SCHEDULE_TYPE_CUMULATIVE, Validators.required],
-      'loanScheduleProcessingType': [LoanProducts.LOAN_SCHEDULE_PROCESSING_TYPE_HORIZONTAL, Validators.required]
     });
   }
 
@@ -395,6 +403,13 @@ export class LoanProductSettingsStepComponent implements OnInit {
     this.loanProductSettingsForm.get('transactionProcessingStrategyCode').valueChanges
       .subscribe((transactionProcessingStrategyCode: string) => {
         this.advancePaymentStrategy.emit(transactionProcessingStrategyCode);
+        this.isAdvancedTransactionProcessingStrategy =  LoanProducts.isAdvancedPaymentAllocationStrategy(transactionProcessingStrategyCode);
+        if (this.isAdvancedTransactionProcessingStrategy) {
+          this.loanProductSettingsForm.addControl('loanScheduleProcessingType', new UntypedFormControl(
+              LoanProducts.LOAN_SCHEDULE_PROCESSING_TYPE_HORIZONTAL, [Validators.required]));
+        } else {
+          this.loanProductSettingsForm.removeControl('loanScheduleProcessingType');
+        }
       });
 
     this.loanProductSettingsForm.get('allowAttributeConfiguration').valueChanges
@@ -452,6 +467,7 @@ export class LoanProductSettingsStepComponent implements OnInit {
             'transactionProcessingStrategyCode': this.transactionProcessingStrategyData[0].code
           });
         }
+        this.advancedTransactionProcessingStrategyDisabled = false;
       } else {
         // Only Advanced Payment Allocation Strategy
         this.transactionProcessingStrategyDataBase.some(
@@ -460,6 +476,10 @@ export class LoanProductSettingsStepComponent implements OnInit {
             this.transactionProcessingStrategyData.push(cn);
           }
         });
+        this.advancedTransactionProcessingStrategyDisabled = true;
+        this.loanProductSettingsForm.patchValue({
+          'transactionProcessingStrategyCode': this.transactionProcessingStrategyData[0].code
+        });
       }
     });
   }
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.html b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
new file mode 100644
index 000000000..7e0653b80
--- /dev/null
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
@@ -0,0 +1,224 @@
+
+<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+
+<div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
+
+  <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
+    <div
+      *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
+      <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{'labels.inputs.Activated On' | translate}}</td>
+            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
+              dateFormat) : 'Not Activated'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Field Officer' | translate}}</td>
+            <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
+          <tr>
+            <td>{{'labels.inputs.Currency' | translate}}</td>
+            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <ng-template #alternateDetails>
+      <div>
+        <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>{{'labels.inputs.Field Officer' | translate}}</td>
+              <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+            </tr>
+            <tr>
+              <td>{{'labels.inputs.Balance' | translate}}</td>
+              <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ng-template>
+
+    <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
+      <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr *ngIf="savingsAccountData.summary.totalDeposits">
+            <td>{{'labels.inputs.Total Deposits' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
+            <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="isActive; else alternateSummary">
+    <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+    <table>
+      <tbody>
+        <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
+          <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
+          <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawalFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
+          <td>{{'labels.inputs.Annual Fees' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalAnnualFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
+          <td>{{'labels.inputs.Interest Earned' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
+          <td>{{'labels.inputs.Interest Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
+          <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
+          <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
+          <td class="r-amount">
+            {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
+          <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
+          <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
+          <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
+          <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
+          <td>{{savingsAccountData.interestCalculationType.value}}</td>
+        </tr>
+        <tr>
+          <td># {{'labels.inputs.Days in Year' | translate}}</td>
+          <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.withdrawalFee">
+          <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.withdrawalFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
+          <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
+          <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
+        </tr>
+        <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
+          <td>{{'labels.inputs.Substatus' | translate}}</td>
+          <td>{{savingsAccountData.subStatus.value}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToInactive">
+          <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
+          <td>{{savingsAccountData.daysToInactive}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToDormancy">
+          <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
+          <td>{{savingsAccountData.daysToDormancy}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToEscheat">
+          <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
+          <td>{{savingsAccountData.daysToEscheat}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.annualFee">
+          <td>{{'labels.inputs.Annual Fee' | translate}}</td>
+          <td class="r-amount">
+            {{savingsAccountData.annualFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+          </td>
+        </tr>
+        <tr *ngIf="savingsAccountData.allowOverdraft">
+          <td>{{'labels.inputs.Over Draft Limit' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.overdraftLimit | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.allowOverdraft">
+          <td>{{'labels.inputs.Min Overdraft Required for Interest Calculation' | translate}}</td>
+          <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
+          <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
+          <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.minRequiredBalance">
+          <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
+          <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
+          <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
+          <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
+          <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
+          <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.onHoldFunds">
+          <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
+          <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currency.code:'symbol-narrow':'1.2-2'}}</a></td>
+        </tr>
+        <tr *ngIf="savingsAccountData.withHoldTax">
+          <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
+          <td>{{savingsAccountData.taxGroup.name}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <ng-template #alternateSummary>
+    <div fxFlex="49%">
+      <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{'labels.inputs.Activated On' | translate}}</td>
+            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
+              dateFormat) : 'Not Activated'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Currency' | translate}}</td>
+            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </ng-template>
+
+</div>
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.spec.ts b/src/app/savings/savings-account-view/general-tab/general-tab.component.spec.ts
new file mode 100644
index 000000000..23d4dfb2b
--- /dev/null
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.ts b/src/app/savings/savings-account-view/general-tab/general-tab.component.ts
new file mode 100644
index 000000000..d9a084bc9
--- /dev/null
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+  isLoading = true;
+  isActive = false;
+  entityType: string;
+
+  savingsAccountData: any;
+  currency: Currency;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router) {
+    this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
+      this.savingsAccountData = data.savingsAccountData;
+      this.currency = this.savingsAccountData.currency;
+      this.isLoading = false;
+      const status = this.savingsAccountData.status.value;
+      this.isActive = (status === 'Active');
+    });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/savings/savings-account-view/savings-account-view.component-theme.scss b/src/app/savings/savings-account-view/savings-account-view.component-theme.scss
deleted file mode 100644
index f730852e0..000000000
--- a/src/app/savings/savings-account-view/savings-account-view.component-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin savings-account-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  mifosx-savings-account-view {
-    .savings-account-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-      .table-headers {
-        background-color: mat.get-color-from-palette($primary, 500);
-        color: mat.get-contrast-color-from-palette($primary, 500);
-      }
-    }
-  }
-}
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html
index 02b6dc97f..d933ea6f4 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.html
+++ b/src/app/savings/savings-account-view/savings-account-view.component.html
@@ -1,4 +1,4 @@
-<mat-card class="savings-account-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,14 +13,42 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title fxLayout="row" fxLayout.lt-md="column">
-          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
-              [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
-            <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
-              [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-              {{'labels.inputs.Savings Product' | translate}} : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
-              <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
-          </h3>
+          <div fxFlex="60%">
+            <h3>
+              <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
+                [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
+              <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+                [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
+                {{'labels.inputs.Savings Product' | translate}} : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
+                <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
+            </h3>
+            <span class="account-overview">
+              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{savingsAccountData.clientName ||
+              savingsAccountData.groupName}}
+              <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">
+                <mifosx-account-number accountNo="{{savingsAccountData.clientAccountNo}}"></mifosx-account-number>
+              </span>
+            </span>
+          </div>
+
+          <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
+            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <table class="account-overview">
+              <tbody>
+                <tr>
+                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                  <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Available Balance" | translate }}</td>
+                  <td class="r-amount">{{savingsAccountData.summary.availableBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <span fxFlex="auto"></span>
+
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
               yPosition="below">
@@ -30,20 +58,6 @@
             </button>
           </div>
         </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{entityType}} {{'labels.inputs.name' | translate}}: {{savingsAccountData.clientName || savingsAccountData.groupName}}
-            <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">({{savingsAccountData.clientAccountNo}})</span><br />
-            <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-              {{'labels.inputs.Current Balances' | translate}}  :
-              {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.accountBalance |
-              number}}</span><br />
-              {{'labels.inputs.Available Balance' | translate}} :
-              {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.availableBalance |
-              number}}</span>
-            </span>
-          </p>
-        </mat-card-subtitle>
       </div>
 
       <mat-menu #accountMenu="matMenu">
@@ -73,232 +87,11 @@
 
   <mat-card-content class="content">
 
-    <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%"
-        *ngIf="isActive; else alternateSummary">
-        <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-        <table>
-          <tbody>
-            <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-              <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-              <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalWithdrawalFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-              <td>{{'labels.inputs.Annual Fees' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalAnnualFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-              <td>{{'labels.inputs.Interest Earned' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-              <td>{{'labels.inputs.Interest Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-              <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-              <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
-              <td>
-                {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-              <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-              <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-              <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
-              <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
-              <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
-              <td>{{savingsAccountData.interestCalculationType.value}}</td>
-            </tr>
-            <tr>
-              <td># {{'labels.inputs.Days in Year' | translate}}</td>
-              <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.withdrawalFee">
-              <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
-              <td>{{savingsAccountData.withdrawalFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-              <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
-              <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
-            </tr>
-            <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-              <td>{{'labels.inputs.Substatus' | translate}}</td>
-              <td>{{savingsAccountData.subStatus.value}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToInactive">
-              <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
-              <td>{{savingsAccountData.daysToInactive}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToDormancy">
-              <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
-              <td>{{savingsAccountData.daysToDormancy}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToEscheat">
-              <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
-              <td>{{savingsAccountData.daysToEscheat}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.annualFee">
-              <td>{{'labels.inputs.Annual Fee' | translate}}</td>
-              <td>{{savingsAccountData.annualFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-              </td>
-            </tr>
-            <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>{{'labels.inputs.Over Draft Limit' | translate}}</td>
-              <td>{{savingsAccountData.overdraftLimit | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>{{'labels.inputs.Min Overdraft Required for Interest Calculation' | translate}}</td>
-              <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-              <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
-              <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.minRequiredBalance">
-              <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
-              <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-              <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
-              <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-              <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
-              <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.onHoldFunds">
-              <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
-              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currencyCode:'symbol-narrow':'1.2-2'}}</a></td>
-            </tr>
-            <tr *ngIf="savingsAccountData.withHoldTax">
-              <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
-              <td>{{savingsAccountData.taxGroup.name}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <ng-template #alternateSummary>
-        <div fxFlex="49%">
-          <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{'labels.inputs.Activated On' | translate}}</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-                  dateFormat) : 'Not Activated'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Currency' | translate}}</td>
-                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.External Id' | translate}}</td>
-                <td *ngIf="savingsAccountData.externalId">
-                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-                </td>
-                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-
-      <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
-
-        <div
-          *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
-          <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{'labels.inputs.Activated On' | translate}}</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-                  dateFormat) : 'Not Activated'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Field Officer' | translate}}</td>
-                <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.External Id' | translate}}</td>
-                <td *ngIf="savingsAccountData.externalId">
-                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-                </td>
-                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
-              <tr>
-                <td>{{'labels.inputs.Currency' | translate}}</td>
-                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-                <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <ng-template #alternateDetails>
-          <div>
-            <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
-            <table>
-              <tbody>
-                <tr>
-                  <td>{{'labels.inputs.Field Officer' | translate}}</td>
-                  <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-                </tr>
-                <tr>
-                  <td>{{'labels.inputs.Balance' | translate}}</td>
-                  <td>{{savingsAccountData.summary.accountBalance}}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </ng-template>
-
-        <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-          <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr *ngIf="savingsAccountData.summary.totalDeposits">
-                <td>{{'labels.inputs.Total Deposits' | translate}}</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits |
-                  number}}</td>
-              </tr>
-              <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-                <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned
-                  | formatNumber}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-      </div>
-
-    </div>
-
     <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        {{'labels.inputs.General' | translate}}
+      </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
         [active]="transactions.isActive">
         {{'labels.inputs.Transactions' | translate}}
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.scss b/src/app/savings/savings-account-view/savings-account-view.component.scss
index 56beb2cfc..e69de29bb 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.scss
+++ b/src/app/savings/savings-account-view/savings-account-view.component.scss
@@ -1,53 +0,0 @@
-.savings-account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-  .header {
-    padding: 1%;
-    .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;
-  }
-}
diff --git a/src/app/savings/savings-account-view/savings-account-view.component.ts b/src/app/savings/savings-account-view/savings-account-view.component.ts
index 02d340414..9d5f1b471 100644
--- a/src/app/savings/savings-account-view/savings-account-view.component.ts
+++ b/src/app/savings/savings-account-view/savings-account-view.component.ts
@@ -13,6 +13,7 @@ import { ToggleWithholdTaxDialogComponent } from './custom-dialogs/toggle-withho
 import { SavingsButtonsConfiguration } from './savings-buttons.config';
 import { SavingsService } from '../savings.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Savings Account View Component
@@ -34,7 +35,7 @@ export class SavingsAccountViewComponent implements OnInit {
   entityType: string;
 
   isActive = false;
-  currencyCode: string;
+  currency: Currency;
 
   /**
    * Fetches savings account data from `resolve`
@@ -48,7 +49,7 @@ export class SavingsAccountViewComponent implements OnInit {
               public dialog: MatDialog) {
     this.route.data.subscribe((data: { savingsAccountData: any, savingsDatatables: any }) => {
       this.savingsAccountData = data.savingsAccountData;
-      this.currencyCode = this.savingsAccountData.currency.code;
+      this.currency = this.savingsAccountData.currency;
       this.savingsDatatables = data.savingsDatatables;
     });
     if (this.router.url.includes('clients')) {
diff --git a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
index 2264a55b7..e86155adf 100644
--- a/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html
@@ -51,10 +51,10 @@
             <i class="fa fa-file" matTooltip="View Reciept"></i>
           </button>
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
-          matTooltipPosition="left" (click)="routeEdit($event)"
-          [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
-          <i class="fa fa-arrow-circle-right"></i>
-        </button>
+            matTooltipPosition="left" (click)="routeEdit($event)"
+            [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <i class="fa fa-arrow-circle-right"></i>
+          </button>
         </td>
       </ng-container>
 
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 84dbc3b18..4ae4e0869 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,5 +1,5 @@
 .container {
-  max-width: 50rem;
+  max-width: 37rem;
   .content {
     div {
       margin: 1rem 0;
diff --git a/src/app/savings/savings-routing.module.ts b/src/app/savings/savings-routing.module.ts
index 8a26ae2e5..5bdb908e0 100644
--- a/src/app/savings/savings-routing.module.ts
+++ b/src/app/savings/savings-routing.module.ts
@@ -42,6 +42,7 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
 import { SavingNotesResolver } from './common-resolvers/saving-notes.resolver';
 import { SavingDocumentsResolver } from './common-resolvers/saving-documents.resolver';
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
+import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
 
 /** Savings Routes */
 const routes: Routes = [
@@ -68,9 +69,19 @@ const routes: Routes = [
         children: [
           {
             path: '',
-            redirectTo: 'transactions',
+            redirectTo: 'general',
             pathMatch: 'full'
           },
+          {
+            path: 'general',
+            data: { title: 'Savings Account Details', breadcrumb: 'General', routeParamBreadcrumb: false },
+            children: [
+              {
+                path: '',
+                component: GeneralTabComponent
+              }
+            ]
+          },
           {
             path: 'transactions',
             data: { title: 'Savings Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },
diff --git a/src/app/savings/savings.module.ts b/src/app/savings/savings.module.ts
index 1e3f94eb0..c454edf4d 100644
--- a/src/app/savings/savings.module.ts
+++ b/src/app/savings/savings.module.ts
@@ -52,6 +52,7 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
 import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
 import { SavingsTransactionDatatableTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component';
+import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
 
 
 /**
@@ -110,7 +111,8 @@ import { SavingsTransactionDatatableTabComponent } from './savings-account-view/
     NotesTabComponent,
     DatatableTransactionTabComponent,
     SavingsTransactionGeneralTabComponent,
-    SavingsTransactionDatatableTabComponent
+    SavingsTransactionDatatableTabComponent,
+    GeneralTabComponent
   ],
   providers: [ ]
 })
diff --git a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
index 4b0335a7e..3c40e4c36 100644
--- a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
+++ b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html
@@ -1,13 +1,16 @@
-<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
-  <button mat-raised-button color="primary" (click)="revertTransaction()" *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
-    <span *ngIf="!dataSource.data[0].reversed">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
-    </span>
-    <span *ngIf="dataSource.data[0].reversed">{{ 'labels.buttons.Transaction Reverted' | translate }}</span>
-  </button>
-</div>
+<div *ngIf="isJournalEntryLoaded">
 
-<div class="container m-b-20" *ngIf="isViewTransaction()">
+  <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
+    <button mat-raised-button color="primary" (click)="revertTransaction()"
+      *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
+      <span *ngIf="!dataSource.data[0].reversed">
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
+      </span>
+      <span *ngIf="dataSource.data[0].reversed">{{ 'labels.buttons.Transaction Reverted' | translate }}</span>
+    </button>
+  </div>
+
+  <div class="container m-b-20" *ngIf="isViewTransaction()">
 
     <mat-card class="mat-elevation-z8" *ngIf="dataSource">
 
@@ -53,49 +56,71 @@
 
     </mat-card>
 
-</div>
-
-<div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
-
-  <table mat-table [dataSource]="dataSource" matSort>
-
-    <ng-container matColumnDef="id">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Code' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Name' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="debit">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
-    </ng-container>
-
-    <ng-container matColumnDef="credit">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }} </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
-
-  </table>
-
-  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate }}</button>
   </div>
 
+  <div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="glAccountType">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="glAccountCode">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Code' |
+          translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="glAccountName">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Name' |
+          translate }} </th>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="debit">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{
+            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
+          </span></td>
+      </ng-container>
+
+      <ng-container matColumnDef="credit">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{
+            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
+          </span></td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row">
+      </tr>
+
+    </table>
+
+    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
+        }}</button>
+    </div>
+
+  </div>
+</div>
+
+<div class="container m-b-20" *ngIf="!isJournalEntryLoaded">
+  <div class="alert">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      {{"labels.text.No data found" | translate}}
+    </div>
+  </div>
 </div>
diff --git a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts
index 4a457e214..8d019dd74 100644
--- a/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts
+++ b/src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts
@@ -32,6 +32,8 @@ export class ViewJournalEntryTransactionComponent implements OnInit {
   /** Sorter for transaction table. */
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
+  isJournalEntryLoaded = false;
+
   /**
    * @param {AccountingService} accountingService Accounting Service.
    * @param {ActivatedRoute} route Activated Route.
@@ -50,11 +52,16 @@ export class ViewJournalEntryTransactionComponent implements OnInit {
   ngOnInit() {
     this.route.data.subscribe((data: { title: string, transaction: any, transferJournalEntryData: any }) => {
       this.title = data.title;
+      this.isJournalEntryLoaded = false;
       if (this.isViewTransaction()) {
         this.transaction = data.transaction;
-        this.transactionId = data.transaction.pageItems[0].transactionId;
+        if (data.transaction.pageItems.length > 0) {
+          this.isJournalEntryLoaded = true;
+          this.transactionId = data.transaction.pageItems[0].transactionId;
+        }
       } else if (this.isViewTransfer()) {
         this.journalEntriesData = data.transferJournalEntryData.journalEntryData.content;
+        this.isJournalEntryLoaded = true;
       }
       this.setTransaction();
     });
diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts
index 40dd574bc..904f8e86f 100644
--- a/src/app/shared/icons.module.ts
+++ b/src/app/shared/icons.module.ts
@@ -105,7 +105,9 @@ import {
   faCoins,
   faPiggyBank,
   faFileExcel,
-  faFileExport
+  faFileExport,
+  faCalculator,
+  faCalendarCheck
 } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -124,13 +126,16 @@ export class IconsModule {
       faArchive,
       faArrowLeft,
       faArrowRight,
+      faBan,
       faBars,
       faBell,
       faBook,
       faBriefcase,
       faBuilding,
+      faCalculator,
       faCalendar,
       faCalendarAlt,
+      faCalendarCheck,
       faChartBar,
       faCheck,
       faCheckCircle,
diff --git a/src/assets/translations/cs-CS.json b/src/assets/translations/cs-CS.json
index db167ae71..03542abac 100644
--- a/src/assets/translations/cs-CS.json
+++ b/src/assets/translations/cs-CS.json
@@ -864,6 +864,7 @@
       "Account No": "Číslo účtu.",
       "Account Number": "Číslo účtu",
       "Account Number Preferences": "Předvolby čísla účtu",
+      "Account Overview": "Přehled účtu",
       "Account Type": "Typ účtu",
       "Account Usage": "Využití účtu",
       "Account action": "Akce účtu",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Název datové tabulky",
       "Date": "datum",
       "Date Of Birth": "Datum narození",
+      "Date of Deposit": "Datum vkladu",
       "Date Type": "Typ data",
       "Date Value": "Hodnota data",
       "Date of Birth": "Datum narození",
@@ -1163,6 +1165,7 @@
       "Deposit Period Frequency": "Frekvence období vkladu",
       "Deposit Period Type": "Typ období vkladu",
       "Deposit Start Date": "Datum zahájení vkladu",
+      "Deposits till Date": "Vklady do data",
       "Deposits Frequency": "Frekvence vkladů",
       "Description": "Popis",
       "Description/Notes": "Popis/Poznámky",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Mezera mezi splátkami: (min",
       "Gender": "Rod",
       "General": "Všeobecné",
+      "Generate Repayment Schedule": "Generovat plán splácení",
       "Global Configurations": "Globální konfigurace",
       "Goodwill credit": "Úvěr dobré vůle",
       "Grace on Arrears Ageing": "Grace on Rerears Stárnutí",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Úroková sazba",
       "Interest Rate Chart": "Graf úrokových sazeb",
       "Interest Rate Differential": "Úrokový rozdíl",
+      "Interest Recalculation Date": "Datum přepočtu",
       "Interest Receivable": "Pohledávka z úroků",
       "Interest Type": "Typ úroku",
       "Interest calculated using": "Úrok vypočítaný pomocí",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Frekvence opakování",
       "Recurrence Interval": "Interval opakování",
       "Recurrence Type": "Typ opakování",
+      "Recurring Deposit": "Opakující se vklad",
       "Recurring Deposit Amount": "Částka opakovaného vkladu",
       "Recurring Deposit Product": "Produkt s opakovaným vkladem",
       "Recurring Deposit Products": "Produkty s opakovaným vkladem",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Výběr peněz ze spořicího účtu",
       "Withdrawal Date": "Datum výběru",
       "Withdrawal Fee": "Poplatek za výběr",
+      "Withdrawals Fees": "Výběry poplatků",
       "Withdrawal Reason": "Důvod stažení",
       "Withdrawn On": "Staženo na",
       "Withdrawn On Date": "Staženo k datu",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Účetnictví",
+      "Account Overview": "Přehled účtu",
+      "Activate": "aktivovat",
       "Add Charge": "Přidat poplatek",
       "Add Collateral": "Přidat kolaterál",
       "Add Loan Charge": "Přidejte poplatek za půjčku",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Vrácení platby",
       "Post Interest": "Post Interest",
       "Post Interest As On": "Post Interest As On",
+      "Premature Close": "Předčasné uzavření",
       "Prepay Loan": "Půjčka před výplatou",
       "Products": "produkty",
       "Profile": "Profil",
diff --git a/src/assets/translations/de-DE.json b/src/assets/translations/de-DE.json
index 932a4bc64..246e9fb32 100644
--- a/src/assets/translations/de-DE.json
+++ b/src/assets/translations/de-DE.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Liste der Konten, die mit verschiedenen Finanzaktivitäten verknüpft sind. Um mehr zu erfahren, klicken Sie:",
       "Account Name": "Kontoname",
       "Account Number Preferences": "Kontonummerneinstellungen",
+      "Account Overview": "Kontoübersicht",
       "Account Summary": "Kontoübersicht",
       "Accounting": "Buchhaltung",
       "Accounting Rules": "Rechnungslegungsregeln",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Name der Datentabelle",
       "Date": "Datum",
       "Date Of Birth": "Geburtsdatum",
+      "Date of Deposit": "Datum der Einzahlung",
       "Date Type": "Datumstyp",
       "Date Value": "Datumswert",
       "Date of Birth": "Geburtsdatum",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Art der Einzahlungsperiode",
       "Deposit Start Date": "Startdatum der Einzahlung",
       "Deposits Frequency": "Häufigkeit der Einzahlungen",
+      "Deposits till Date": "Einlagen bis heute",
       "Description": "Beschreibung",
       "Description/Notes": "Beschreibung/Anmerkungen",
       "Destination": "Ziel",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Abstand zwischen den Raten: (Min",
       "Gender": "Geschlecht",
       "General": "Allgemein",
+      "Generate Repayment Schedule": "Rückzahlungsplan erstellen",
       "Global Configurations": "Globale Konfigurationen",
       "Goodwill credit": "Kulanzgutschrift",
       "Grace on Arrears Ageing": "Kulanz bei Fälligkeit von Zahlungsrückständen",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Zinsrate",
       "Interest Rate Chart": "Zinsdiagramm",
       "Interest Rate Differential": "Zinsdifferenz",
+      "Interest Recalculation Date": "Interessenrekulationsdatum",
       "Interest Receivable": "Zinsforderung",
       "Interest Type": "Interessentyp",
       "Interest calculated using": "Zinsen berechnet mit",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Wiederholungshäufigkeit",
       "Recurrence Interval": "Wiederholungsintervall",
       "Recurrence Type": "Wiederholungstyp",
+      "Recurring Deposit": "Wiederkehrende Einzahlung",
       "Recurring Deposit Amount": "Wiederkehrender Einzahlungsbetrag",
       "Recurring Deposit Product": "Produkt mit wiederkehrender Einzahlung",
       "Recurring Deposit Products": "Produkte mit wiederkehrender Einzahlung",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Geld vom Sparkonto abheben",
       "Withdrawal Date": "Widerrufsdatum",
       "Withdrawal Fee": "Abhebegebühr",
+      "Withdrawals Fees": "Abhebungsgebühren",
       "Withdrawal Reason": "Widerrufsgrund",
       "Withdrawn On": "Zurückgezogen am",
       "Withdrawn On Date": "Am Datum zurückgezogen",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Buchhaltung",
+      "Account Overview": "Kontoübersicht",
+      "Activate": "aktivieren Sie",
       "Add Charge": "Gebühr hinzufügen",
       "Add Collateral": "Sicherheiten hinzufügen",
       "Add Loan Charge": "Kreditgebühr hinzufügen",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Auszahlungsrückerstattung",
       "Post Interest": "Interesse posten",
       "Post Interest As On": "Interesse posten wie am",
+      "Premature Close": "Frühgeborener",
       "Prepay Loan": "Darlehen mit Vorauszahlung",
       "Products": "Produkte",
       "Profile": "Profil",
diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json
index fef998c1d..c3c362f2a 100644
--- a/src/assets/translations/en-US.json
+++ b/src/assets/translations/en-US.json
@@ -535,6 +535,7 @@
           "Account Linked Financial": "List of accounts linked to different financial activities. To know more click:",
           "Account Name": "Account Name",
           "Account Number Preferences": "Account Number Preferences",
+          "Account Overview": "Account Overview",
           "Account Summary": "Account Summary",
           "Accounting": "Accounting",
           "Accounting Rules": "Accounting Rules",
@@ -1121,6 +1122,7 @@
           "Data Table Name": "Data Table Name",
           "Date": "Date",
           "Date Of Birth": "Date Of Birth",
+          "Date of Deposit": "Date of Deposit",
           "Date Type": "Date Type",
           "Date Value": "Date Value",
           "Date of Birth": "Date of Birth",
@@ -1164,6 +1166,7 @@
           "Deposit Period Type": "Deposit Period Type",
           "Deposit Start Date": "Deposit Start Date",
           "Deposits Frequency": "Deposits Frequency",
+          "Deposits till Date": "Deposits till Date",
           "Description": "Description",
           "Description/Notes": "Description/Notes",
           "Destination": "Destination",
@@ -1298,6 +1301,7 @@
           "Gap between Installments": "Gap between Installments:(Min",
           "Gender": "Gender",
           "General": "General",
+          "Generate Repayment Schedule": "Generate Repayment Schedule",
           "Global Configurations": "Global Configurations",
           "Goodwill credit": "Goodwill credit",
           "Grace on Arrears Ageing": "Grace on Arrears Ageing",
@@ -1372,6 +1376,7 @@
           "Interest Rate": "Interest Rate",
           "Interest Rate Chart": "Interest Rate Chart",
           "Interest Rate Differential": "Interest Rate Differential",
+          "Interest Recalculation Date": "Interest Recalculation Date",
           "Interest Receivable": "Interest Receivable",
           "Interest Type": "Interest Type",
           "Interest calculated using": "Interest calculated using",
@@ -1712,6 +1717,7 @@
           "Recurrence Frequency": "Recurrence Frequency",
           "Recurrence Interval": "Recurrence Interval",
           "Recurrence Type": "Recurrence Type",
+          "Recurring Deposit": "Recurring Deposit",
           "Recurring Deposit Amount": "Recurring Deposit Amount",
           "Recurring Deposit Product": "Recurring Deposit Product",
           "Recurring Deposit Products": "Recurring Deposit Products",
@@ -1980,6 +1986,7 @@
           "Withdraw Money From Saving Account": "Withdraw Money From Saving Account",
           "Withdrawal Date": "Withdrawal Date",
           "Withdrawal Fee": "Withdrawal Fee",
+          "Withdrawals Fees": "Withdrawals Fees",
           "Withdrawal Reason": "Withdrawal Reason",
           "Withdrawn On": "Withdrawn On",
           "Withdrawn On Date": "Withdrawn On Date",
@@ -2036,6 +2043,8 @@
       },
       "menus": {
           "Accounting": "Accounting",
+          "Account Overview": "Account Overview",
+          "Activate": "Activate",
           "Add Charge": "Add Charge",
           "Add Collateral": "Add Collateral",
           "Add Loan Charge": "Add Loan Charge",
@@ -2094,6 +2103,7 @@
           "Payout Refund": "Payout Refund",
           "Post Interest": "Post Interest",
           "Post Interest As On": "Post Interest As On",
+          "Premature Close": "Premature Close",
           "Prepay Loan": "Prepay Loan",
           "Products": "Products",
           "Profile": "Profile",
diff --git a/src/assets/translations/es-MX.json b/src/assets/translations/es-MX.json
index 6e40b610a..0e080f280 100644
--- a/src/assets/translations/es-MX.json
+++ b/src/assets/translations/es-MX.json
@@ -535,6 +535,7 @@
             "Account Linked Financial": "Listado de cuentas vinculadas a diferentes actividades financieras. Para saber más haga clic en:",
             "Account Name": "Nombre de la cuenta",
             "Account Number Preferences": "Preferencias de número de cuenta",
+            "Account Overview": "Descripción de cuenta",
             "Account Summary": "Resumen de la cuenta",
             "Accounting": "Contabilidad",
             "Accounting Rules": "Reglas de contabilidad",
@@ -1121,6 +1122,7 @@
             "Data Table Name": "Nombre de la tabla de datos",
             "Date": "Fecha",
             "Date Of Birth": "Fecha de nacimiento",
+            "Date of Deposit": "Fecha de depósito",
             "Date Type": "Tipo de fecha",
             "Date Value": "Valor de fecha",
             "Date of Birth": "Fecha de nacimiento",
@@ -1164,6 +1166,7 @@
             "Deposit Period Type": "Tipo de período de depósito",
             "Deposit Start Date": "Fecha de inicio del depósito",
             "Deposits Frequency": "Frecuencia de depósitos",
+            "Deposits till Date": "Depósitos a la fecha",
             "Description": "Descripción",
             "Description/Notes": "Descripción/Notas",
             "Destination": "Destino",
@@ -1298,6 +1301,7 @@
             "Gap between Installments": "Brecha entre Cuotas:(Mínimo",
             "Gender": "Género",
             "General": "General",
+            "Generate Repayment Schedule": "Generar Calendario de Reembolso",
             "Global Configurations": "Configuraciones globales",
             "Goodwill credit": "crédito de buena voluntad",
             "Grace on Arrears Ageing": "Gracia sobre el envejecimiento de los atrasos",
@@ -1372,6 +1376,7 @@
             "Interest Rate": "Tasa de interés",
             "Interest Rate Chart": "Gráfico de tasas de interés",
             "Interest Rate Differential": "Diferencial de tasa de interés",
+            "Interest Recalculation Date": "Fecha de recalculación de intereses",
             "Interest Receivable": "Intereses por cobrar",
             "Interest Type": "Tipo de interés",
             "Interest calculated using": "Interés calculado usando",
@@ -1711,6 +1716,7 @@
             "Recurrence Frequency": "Frecuencia de recurrencia",
             "Recurrence Interval": "Intervalo de recurrencia",
             "Recurrence Type": "Tipo de recurrencia",
+            "Recurring Deposit": "Deposito recurrente",
             "Recurring Deposit Amount": "Monto del depósito recurrente",
             "Recurring Deposit Product": "Producto de depósito recurrente",
             "Recurring Deposit Products": "Productos de depósito recurrentes",
@@ -1977,7 +1983,8 @@
             "Withdraw Balance": "Retirar saldo",
             "Withdraw Money From Saving Account": "Retirar dinero de una cuenta de ahorro",
             "Withdrawal Date": "Fecha de retiro",
-            "Withdrawal Fee": "Cargo por retiro",
+            "Withdrawal Fee": "Comisión por retiro",
+            "Withdrawals Fees": "Comisiones de retiros",
             "Withdrawal Reason": "Motivo del retiro",
             "Withdrawn On": "Retirado el",
             "Withdrawn On Date": "Retirado el día",
@@ -2034,6 +2041,8 @@
         },
         "menus": {
             "Accounting": "Contabilidad",
+            "Account Overview": "Descripción de cuenta",
+            "Activate": "Activar",
             "Add Charge": "Agregar cargo",
             "Add Collateral": "Agregar garantía",
             "Add Loan Charge": "Agregar cargo de Crédito",
@@ -2092,6 +2101,7 @@
             "Payout Refund": "Reembolso de pago",
             "Post Interest": "Publicar interés",
             "Post Interest As On": "Publicar interés como en",
+            "Premature Close": "Cierre prematuro",
             "Prepay Loan": "Crédito Prepago",
             "Products": "Productos",
             "Profile": "Perfil",
diff --git a/src/assets/translations/fr-FR.json b/src/assets/translations/fr-FR.json
index 473e9042f..3b7cd8772 100644
--- a/src/assets/translations/fr-FR.json
+++ b/src/assets/translations/fr-FR.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Liste des comptes liés aux différentes activités financières. Pour en savoir plus cliquez :",
       "Account Name": "Nom du compte",
       "Account Number Preferences": "Préférences de numéro de compte",
+      "Account Overview": "Aperçu du compte",
       "Account Summary": "Relevé de compte",
       "Accounting": "Comptabilité",
       "Accounting Rules": "Règles comptables",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Nom de la table de données",
       "Date": "Date",
       "Date Of Birth": "Date de naissance",
+      "Date of Deposit": "Date de dépôt",
       "Date Type": "Type de date",
       "Date Value": "Valeur de date",
       "Date of Birth": "Date de naissance",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Type de période de dépôt",
       "Deposit Start Date": "Date de début du dépôt",
       "Deposits Frequency": "Fréquence des dépôts",
+      "Deposits till Date": "Dépôts jusqu'à ce jour",
       "Description": "Description",
       "Description/Notes": "Description/Remarques",
       "Destination": "Destination",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Écart entre les versements :(Min",
       "Gender": "Genre",
       "General": "Général",
+      "Generate Repayment Schedule": "Générer un calendrier de remboursement",
       "Global Configurations": "Configurations globales",
       "Goodwill credit": "Crédit de bonne volonté",
       "Grace on Arrears Ageing": "Grâce au vieillissement des arriérés",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Taux d'intérêt",
       "Interest Rate Chart": "Graphique des taux d'intérêt",
       "Interest Rate Differential": "Différentiel de taux d'intérêt",
+      "Interest Recalculation Date": "Date de recalcul des intérêts",
       "Interest Receivable": "Intérêts à recevoir",
       "Interest Type": "Type d'intérêt",
       "Interest calculated using": "Intérêts calculés selon",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Fréquence de récidive",
       "Recurrence Interval": "Intervalle de récurrence",
       "Recurrence Type": "Type de récurrence",
+      "Recurring Deposit": "Dépôt récurrent",
       "Recurring Deposit Amount": "Montant du dépôt récurrent",
       "Recurring Deposit Product": "Produit de dépôt récurrent",
       "Recurring Deposit Products": "Produits de dépôt récurrents",
@@ -1977,7 +1983,8 @@
       "Withdraw Balance": "Retirer le solde",
       "Withdraw Money From Saving Account": "Retirer de l'argent d'un compte d'épargne",
       "Withdrawal Date": "Date de retrait",
-      "Withdrawal Fee": "frais de retrait",
+      "Withdrawal Fee": "Frais de retrait",
+      "Withdrawals Fees": "Frais de retrait",
       "Withdrawal Reason": "Raison du retrait",
       "Withdrawn On": "Retiré le",
       "Withdrawn On Date": "Date de retrait",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Comptabilité",
+      "Account Overview": "Aperçu du compte",
+      "Activate": "Activer",
       "Add Charge": "Ajouter des frais",
       "Add Collateral": "Ajouter une garantie",
       "Add Loan Charge": "Ajouter des frais de prêt",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Remboursement des paiements",
       "Post Interest": "Intérêt pour les publications",
       "Post Interest As On": "Publier les intérêts au fur et à mesure",
+      "Premature Close": "Close prématurée",
       "Prepay Loan": "Prêt à remboursement anticipé",
       "Products": "Des produits",
       "Profile": "Profil",
diff --git a/src/assets/translations/it-IT.json b/src/assets/translations/it-IT.json
index 7d269f9b0..02f2cca58 100644
--- a/src/assets/translations/it-IT.json
+++ b/src/assets/translations/it-IT.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Elenco dei conti collegati a diverse attività finanziarie. Per saperne di più clicca:",
       "Account Name": "Nome utente",
       "Account Number Preferences": "Preferenze numero di conto",
+      "Account Overview": "Panoramica dell'Account",
       "Account Summary": "Riepilogo account",
       "Accounting": "Contabilità",
       "Accounting Rules": "Regole contabili",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Nome della tabella dati",
       "Date": "Data",
       "Date Of Birth": "Data di nascita",
+      "Date of Deposit": "Data del deposito",
       "Date Type": "Tipo di data",
       "Date Value": "Valore data",
       "Date of Birth": "Data di nascita",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Tipo di periodo di deposito",
       "Deposit Start Date": "Data di inizio deposito",
       "Deposits Frequency": "Frequenza dei depositi",
+      "Deposits till Date": "Depositi fino ad oggi",
       "Description": "Descrizione",
       "Description/Notes": "Descrizione/Note",
       "Destination": "Destinazione",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Intervallo tra le rate: (Min",
       "Gender": "Genere",
       "General": "Generale",
+      "Generate Repayment Schedule": "Generare il programma di rimborso",
       "Global Configurations": "Configurazioni globali",
       "Goodwill credit": "Credito di buona volontà",
       "Grace on Arrears Ageing": "Grazia sull'invecchiamento arretrato",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Tasso d'interesse",
       "Interest Rate Chart": "Grafico dei tassi di interesse",
       "Interest Rate Differential": "Differenziale del tasso di interesse",
+      "Interest Recalculation Date": "Data di ricalcolo degli interessi",
       "Interest Receivable": "Interessi attivi",
       "Interest Type": "Tipo di interesse",
       "Interest calculated using": "Interesse calcolato utilizzando",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Frequenza di ricorrenza",
       "Recurrence Interval": "Intervallo di ricorrenza",
       "Recurrence Type": "Tipo di ricorrenza",
+      "Recurring Deposit": "Deposito ricorrente",
       "Recurring Deposit Amount": "Importo del deposito ricorrente",
       "Recurring Deposit Product": "Prodotto con deposito ricorrente",
       "Recurring Deposit Products": "Prodotti con deposito ricorrente",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Prelevare denaro dal conto di risparmio",
       "Withdrawal Date": "Data di ritiro",
       "Withdrawal Fee": "Commissione di prelievo",
+      "Withdrawals Fees": "Commissioni di prelievo",
       "Withdrawal Reason": "Motivo del recesso",
       "Withdrawn On": "Ritirato il",
       "Withdrawn On Date": "Ritirato in data",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Contabilità",
+      "Account Overview": "Panoramica dell'Account",
+      "Activate": "Attivare",
       "Add Charge": "Aggiungi addebito",
       "Add Collateral": "Aggiungi garanzia",
       "Add Loan Charge": "Aggiungi addebito sul prestito",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Rimborso del pagamento",
       "Post Interest": "Pubblica interesse",
       "Post Interest As On": "Pubblica interesse come attivo",
+      "Premature Close": "Close precoce",
       "Prepay Loan": "Prestito con pagamento anticipato",
       "Products": "Prodotti",
       "Profile": "Profilo",
diff --git a/src/assets/translations/ko-KO.json b/src/assets/translations/ko-KO.json
index f3ca223fd..65d79a7e7 100644
--- a/src/assets/translations/ko-KO.json
+++ b/src/assets/translations/ko-KO.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "다양한 금융 활동과 연결된 계정 목록입니다. 자세한 내용을 보려면 다음을 클릭하세요.",
       "Account Name": "계정 이름",
       "Account Number Preferences": "계좌번호 기본 설정",
+      "Account Overview": "계정 개요",
       "Account Summary": "계정 요약",
       "Accounting": "회계",
       "Accounting Rules": "회계 규칙",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "데이터 테이블 이름",
       "Date": "날짜",
       "Date Of Birth": "생일",
+      "Date of Deposit": "예금일",
       "Date Type": "날짜 유형",
       "Date Value": "날짜 값",
       "Date of Birth": "생일",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "예금기간 종류",
       "Deposit Start Date": "입금 시작일",
       "Deposits Frequency": "예금 빈도",
+      "Deposits till Date": "날짜까지 입금합니다",
       "Description": "설명",
       "Description/Notes": "설명/참고",
       "Destination": "목적지",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "할부 간 간격:(최소",
       "Gender": "성별",
       "General": "일반적인",
+      "Generate Repayment Schedule": "상환 일정을 생성합니다",
       "Global Configurations": "글로벌 구성",
       "Goodwill credit": "영업권 신용",
       "Grace on Arrears Ageing": "연체 노화에 대한 유예",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "이자율",
       "Interest Rate Chart": "금리 차트",
       "Interest Rate Differential": "금리차이",
+      "Interest Recalculation Date": "이자 재 계산 날짜",
       "Interest Receivable": "미수이자",
       "Interest Type": "관심분야 유형",
       "Interest calculated using": "다음을 사용하여 계산된 이자",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "재발 빈도",
       "Recurrence Interval": "반복 간격",
       "Recurrence Type": "반복 유형",
+      "Recurring Deposit": "반복 예금",
       "Recurring Deposit Amount": "정기입금액",
       "Recurring Deposit Product": "정기예금 상품",
       "Recurring Deposit Products": "정기예금 상품",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "저축 계좌에서 돈을 인출하세요",
       "Withdrawal Date": "탈퇴일",
       "Withdrawal Fee": "인출 수수료",
+      "Withdrawals Fees": "인출 수수료",
       "Withdrawal Reason": "탈퇴사유",
       "Withdrawn On": "철회 날짜",
       "Withdrawn On Date": "철회 날짜",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "회계",
+      "Account Overview": "계정 개요",
+      "Activate": "활성화",
       "Add Charge": "요금 추가",
       "Add Collateral": "담보 추가",
       "Add Loan Charge": "대출 수수료 추가",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "지불금 환불",
       "Post Interest": "관심 게시",
       "Post Interest As On": "이자 게시를 현재 상태로 유지",
+      "Premature Close": "조기 가까운 곳",
       "Prepay Loan": "선불대출",
       "Products": "제품",
       "Profile": "프로필",
diff --git a/src/assets/translations/lt-LT.json b/src/assets/translations/lt-LT.json
index 161083503..cdaf78f20 100644
--- a/src/assets/translations/lt-LT.json
+++ b/src/assets/translations/lt-LT.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Sąskaitų, susietų su įvairia finansine veikla, sąrašas. Norėdami sužinoti daugiau, spustelėkite:",
       "Account Name": "Paskyros vardas",
       "Account Number Preferences": "Sąskaitos numerio nuostatos",
+      "Account Overview": "Sąskaitos apžvalga",
       "Account Summary": "Sąskaitos suvestinė",
       "Accounting": "Apskaita",
       "Accounting Rules": "Buhalterinės apskaitos taisyklės",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Duomenų lentelės pavadinimas",
       "Date": "Data",
       "Date Of Birth": "Gimimo data",
+      "Date of Deposit": "Indėlio data",
       "Date Type": "Datos tipas",
       "Date Value": "Datos vertė",
       "Date of Birth": "Gimimo data",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Indėlio laikotarpio tipas",
       "Deposit Start Date": "Indėlio pradžios data",
       "Deposits Frequency": "Indėlių dažnumas",
+      "Deposits till Date": "Indėliai iki datos",
       "Description": "apibūdinimas",
       "Description/Notes": "Aprašymas/Pastabos",
       "Destination": "Kelionės tikslas",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Tarpas tarp įmokų: (min",
       "Gender": "Lytis",
       "General": "Generolas",
+      "Generate Repayment Schedule": "Generuoti grąžinimo grafiką",
       "Global Configurations": "Pasaulinės konfigūracijos",
       "Goodwill credit": "Geros valios kreditas",
       "Grace on Arrears Ageing": "Grace on Ararar Aging",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Palūkanų norma",
       "Interest Rate Chart": "Palūkanų normų diagrama",
       "Interest Rate Differential": "Palūkanų normos skirtumas",
+      "Interest Recalculation Date": "Palūkanų apskaičiavimo data",
       "Interest Receivable": "Gautinos palūkanos",
       "Interest Type": "Pomėgių tipas",
       "Interest calculated using": "Palūkanos skaičiuojamos naudojant",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Pasikartojimo dažnis",
       "Recurrence Interval": "Pasikartojimo intervalas",
       "Recurrence Type": "Pasikartojimo tipas",
+      "Recurring Deposit": "Pasikartojantis indėlis",
       "Recurring Deposit Amount": "Pasikartojanti indėlio suma",
       "Recurring Deposit Product": "Pasikartojančio indėlio produktas",
       "Recurring Deposit Products": "Pasikartojančių indėlių produktai",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Išimkite pinigus iš taupomosios sąskaitos",
       "Withdrawal Date": "Pasitraukimo data",
       "Withdrawal Fee": "Išėmimo mokestis",
+      "Withdrawals Fees": "Išėmimo mokesčiai",
       "Withdrawal Reason": "Pasitraukimo priežastis",
       "Withdrawn On": "Atšauktas Įjungtas",
       "Withdrawn On Date": "Išimta datą",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Apskaita",
+      "Account Overview": "Sąskaitos apžvalga",
+      "Activate": "Suaktyvinti",
       "Add Charge": "Pridėti mokestį",
       "Add Collateral": "Pridėti užstatą",
       "Add Loan Charge": "Pridėti paskolos mokestį",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Išmokų grąžinimas",
       "Post Interest": "Paskelbti susidomėjimą",
       "Post Interest As On": "Paskelbkite susidomėjimą",
+      "Premature Close": "Per anksti arti",
       "Prepay Loan": "Išankstinio mokėjimo paskola",
       "Products": "Produktai",
       "Profile": "Profilis",
diff --git a/src/assets/translations/lv-LV.json b/src/assets/translations/lv-LV.json
index 4614704e8..dae6bd698 100644
--- a/src/assets/translations/lv-LV.json
+++ b/src/assets/translations/lv-LV.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Ar dažādām finanšu darbībām saistīto kontu saraksts. Lai uzzinātu vairāk, noklikšķiniet:",
       "Account Name": "Konta vārds",
       "Account Number Preferences": "Konta numura preferences",
+      "Account Overview": "Konta pārskats",
       "Account Summary": "Konta kopsavilkums",
       "Accounting": "Grāmatvedība",
       "Accounting Rules": "Grāmatvedības noteikumi",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Datu tabulas nosaukums",
       "Date": "Datums",
       "Date Of Birth": "Dzimšanas datums",
+      "Date of Deposit": "Depozīta datums",
       "Date Type": "Datuma veids",
       "Date Value": "Datuma vērtība",
       "Date of Birth": "Dzimšanas datums",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Depozīta perioda veids",
       "Deposit Start Date": "Depozīta sākuma datums",
       "Deposits Frequency": "Noguldījumu biežums",
+      "Deposits till Date": "Noguldījumi līdz datumam",
       "Description": "Apraksts",
       "Description/Notes": "Apraksts/piezīmes",
       "Destination": "Galamērķis",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Starpība starp maksājumiem: (min",
       "Gender": "Dzimums",
       "General": "Ģenerālis",
+      "Generate Repayment Schedule": "Ģenerēt atmaksas grafiku",
       "Global Configurations": "Globālās konfigurācijas",
       "Goodwill credit": "Labas gribas kredīts",
       "Grace on Arrears Ageing": "Grace on Arrears Aging",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Procentu likme",
       "Interest Rate Chart": "Procentu likmju diagramma",
       "Interest Rate Differential": "Procentu likmju starpība",
+      "Interest Recalculation Date": "Procentu pārrēķināšanas datums",
       "Interest Receivable": "Saņemamie procenti",
       "Interest Type": "Interešu veids",
       "Interest calculated using": "Procenti aprēķināti izmantojot",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Atkārtošanās biežums",
       "Recurrence Interval": "Atkārtošanās intervāls",
       "Recurrence Type": "Atkārtošanās veids",
+      "Recurring Deposit": "Atkārtots depozīts",
       "Recurring Deposit Amount": "Periodiskā depozīta summa",
       "Recurring Deposit Product": "Atkārtota depozīta produkts",
       "Recurring Deposit Products": "Atkārtota depozīta produkti",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Izņemiet naudu no krājkonta",
       "Withdrawal Date": "Izstāšanās datums",
       "Withdrawal Fee": "Izņemšanas maksa",
+      "Withdrawals Fees": "Izņemšanas maksa",
       "Withdrawal Reason": "Izstāšanās iemesls",
       "Withdrawn On": "Izņemts On",
       "Withdrawn On Date": "Izņemts datumā",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Grāmatvedība",
+      "Account Overview": "Konta pārskats",
+      "Activate": "Aktivizēt",
       "Add Charge": "Pievienot maksu",
       "Add Collateral": "Pievienot nodrošinājumu",
       "Add Loan Charge": "Pievienot aizdevuma maksu",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Izmaksas atmaksa",
       "Post Interest": "Post Interese",
       "Post Interest As On": "Post Interes as On",
+      "Premature Close": "Priekšlaicīgi aizveras",
       "Prepay Loan": "Priekšapmaksas aizdevums",
       "Products": "Produkti",
       "Profile": "Profils",
diff --git a/src/assets/translations/ne-NE.json b/src/assets/translations/ne-NE.json
index ba777d7ae..d3865d4d4 100644
--- a/src/assets/translations/ne-NE.json
+++ b/src/assets/translations/ne-NE.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "विभिन्न वित्तीय गतिविधिहरु संग जोडिएको खाताहरु को सूची। थप जान्नको लागि क्लिक गर्नुहोस्:",
       "Account Name": "खाताको नाम",
       "Account Number Preferences": "खाता नम्बर प्राथमिकताहरू",
+      "Account Overview": "खाता अवलोकन",
       "Account Summary": "खाता सारांश",
       "Accounting": "लेखा",
       "Accounting Rules": "लेखा नियम",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "डाटा तालिका नाम",
       "Date": "मिति",
       "Date Of Birth": "जन्म मिति",
+      "Date of Deposit": "निक्षेपको मिति",
       "Date Type": "मिति प्रकार",
       "Date Value": "मिति मान",
       "Date of Birth": "जन्म मिति",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "जम्मा अवधि प्रकार",
       "Deposit Start Date": "जम्मा सुरु मिति",
       "Deposits Frequency": "निक्षेप आवृत्ति",
+      "Deposits till Date": "मिति सम्म निक्षेप",
       "Description": "विवरण",
       "Description/Notes": "विवरण/टिप्पणीहरू",
       "Destination": "गन्तव्य",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "किस्ताहरू बीचको अन्तर: (न्यूनतम",
       "Gender": "लिङ्ग",
       "General": "सामान्य",
+      "Generate Repayment Schedule": "भुक्तानी तालिका उत्पन्न गर्नुहोस्",
       "Global Configurations": "ग्लोबल कन्फिगरेसनहरू",
       "Goodwill credit": "सद्भावना क्रेडिट",
       "Grace on Arrears Ageing": "बकाया एजिंग मा अनुग्रह",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "ब्याजदर",
       "Interest Rate Chart": "ब्याज दर चार्ट",
       "Interest Rate Differential": "ब्याज दर भिन्नता",
+      "Interest Recalculation Date": "ब्याज पुन: गणना मिति",
       "Interest Receivable": "ब्याज प्राप्य",
       "Interest Type": "ब्याज प्रकार",
       "Interest calculated using": "प्रयोग गरेर ब्याज गणना",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "पुनरावृत्ति आवृत्ति",
       "Recurrence Interval": "पुनरावृत्ति अन्तराल",
       "Recurrence Type": "पुनरावृत्ति प्रकार",
+      "Recurring Deposit": "पुनरावलोकन निक्षेप",
       "Recurring Deposit Amount": "आवर्ती जम्मा रकम",
       "Recurring Deposit Product": "आवर्ती जम्मा उत्पादन",
       "Recurring Deposit Products": "आवर्ती जम्मा उत्पादनहरू",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "बचत खाताबाट पैसा निकाल्नुहोस्",
       "Withdrawal Date": "फिर्ता लिने मिति",
       "Withdrawal Fee": "निकासी शुल्क",
+      "Withdrawals Fees": "निकासी शुल्क",
       "Withdrawal Reason": "फिर्ता लिने कारण",
       "Withdrawn On": "मा फिर्ता गरियो",
       "Withdrawn On Date": "मितिमा फिर्ता गरियो",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "लेखा",
+      "Account Overview": "खाता अवलोकन",
+      "Activate": "अलग गर्नु",
       "Add Charge": "चार्ज थप्नुहोस्",
       "Add Collateral": "संपार्श्विक थप्नुहोस्",
       "Add Loan Charge": "ऋण शुल्क थप्नुहोस्",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "भुक्तानी फिर्ता",
       "Post Interest": "पोस्ट ब्याज",
       "Post Interest As On": "पोष्ट ब्याज यथा",
+      "Premature Close": "असामान्य नजिक",
       "Prepay Loan": "पूर्व भुक्तानी ऋण",
       "Products": "उत्पादनहरू",
       "Profile": "प्रोफाइल",
diff --git a/src/assets/translations/pt-PT.json b/src/assets/translations/pt-PT.json
index 383c94abb..6bedf3052 100644
--- a/src/assets/translations/pt-PT.json
+++ b/src/assets/translations/pt-PT.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Lista de contas vinculadas a diferentes atividades financeiras. Para saber mais clique:",
       "Account Name": "Nome da conta",
       "Account Number Preferences": "Preferências de número de conta",
+      "Account Overview": "visão geral da conta",
       "Account Summary": "Resumo da conta",
       "Accounting": "Contabilidade",
       "Accounting Rules": "Regras contábeis",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Nome da tabela de dados",
       "Date": "Data",
       "Date Of Birth": "Data de nascimento",
+      "Date of Deposit": "Data de depósito",
       "Date Type": "Tipo de data",
       "Date Value": "Valor da data",
       "Date of Birth": "Data de nascimento",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Tipo de período de depósito",
       "Deposit Start Date": "Data de início do depósito",
       "Deposits Frequency": "Frequência de Depósitos",
+      "Deposits till Date": "Depósitos até a data",
       "Description": "Descrição",
       "Description/Notes": "Descrição/Notas",
       "Destination": "Destino",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Intervalo entre as parcelas:(mín.",
       "Gender": "Gênero",
       "General": "Em geral",
+      "Generate Repayment Schedule": "Gerar cronograma de pagamento",
       "Global Configurations": "Configurações globais",
       "Goodwill credit": "Crédito de boa vontade",
       "Grace on Arrears Ageing": "Graça sobre o envelhecimento em atraso",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Taxa de juro",
       "Interest Rate Chart": "Gráfico de taxas de juros",
       "Interest Rate Differential": "Diferencial de taxa de juros",
+      "Interest Recalculation Date": "Data de recálculo de juros",
       "Interest Receivable": "Juros a receber",
       "Interest Type": "Tipo de interesse",
       "Interest calculated using": "Juros calculados usando",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Frequência de recorrência",
       "Recurrence Interval": "Intervalo de recorrência",
       "Recurrence Type": "Tipo de recorrência",
+      "Recurring Deposit": "Depósito recorrente",
       "Recurring Deposit Amount": "Valor do depósito recorrente",
       "Recurring Deposit Product": "Produto de Depósito Recorrente",
       "Recurring Deposit Products": "Produtos de Depósito Recorrente",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Retirar dinheiro da conta poupança",
       "Withdrawal Date": "Data de retirada",
       "Withdrawal Fee": "Taxa de retirada",
+      "Withdrawals Fees": "Taxas de retirada",
       "Withdrawal Reason": "Motivo da retirada",
       "Withdrawn On": "Retirado em",
       "Withdrawn On Date": "Retirado na data",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Contabilidade",
+      "Account Overview": "visão geral da conta",
+      "Activate": "Ativar",
       "Add Charge": "Adicionar cobrança",
       "Add Collateral": "Adicionar garantia",
       "Add Loan Charge": "Adicionar taxa de empréstimo",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Reembolso de pagamento",
       "Post Interest": "Publicar interesse",
       "Post Interest As On": "Publicar juros como ativado",
+      "Premature Close": "Fechamento prematuro",
       "Prepay Loan": "Empréstimo pré-pago",
       "Products": "Produtos",
       "Profile": "Perfil",
diff --git a/src/assets/translations/sw-SW.json b/src/assets/translations/sw-SW.json
index 8682c08c9..1adbfa44b 100644
--- a/src/assets/translations/sw-SW.json
+++ b/src/assets/translations/sw-SW.json
@@ -535,6 +535,7 @@
       "Account Linked Financial": "Orodha ya akaunti zilizounganishwa na shughuli tofauti za kifedha. Kujua zaidi bofya:",
       "Account Name": "Jina la Akaunti",
       "Account Number Preferences": "Mapendeleo ya Nambari ya Akaunti",
+      "Account Overview": "Muhtasari wa akaunti",
       "Account Summary": "Muhtasari wa Akaunti",
       "Accounting": "Uhasibu",
       "Accounting Rules": "Kanuni za Uhasibu",
@@ -1121,6 +1122,7 @@
       "Data Table Name": "Jina la Jedwali la Data",
       "Date": "Tarehe",
       "Date Of Birth": "Tarehe ya kuzaliwa",
+      "Date of Deposit": "Tarehe ya amana",
       "Date Type": "Aina ya Tarehe",
       "Date Value": "Thamani ya Tarehe",
       "Date of Birth": "Tarehe ya kuzaliwa",
@@ -1164,6 +1166,7 @@
       "Deposit Period Type": "Aina ya Kipindi cha Amana",
       "Deposit Start Date": "Tarehe ya Kuanza kwa Amana",
       "Deposits Frequency": "Mzunguko wa Amana",
+      "Deposits till Date": "Amana hadi leo",
       "Description": "Maelezo",
       "Description/Notes": "Maelezo/Vidokezo",
       "Destination": "Marudio",
@@ -1298,6 +1301,7 @@
       "Gap between Installments": "Pengo kati ya Mikopo:(Min",
       "Gender": "Jinsia",
       "General": "Mkuu",
+      "Generate Repayment Schedule": "Tengeneza ratiba ya ulipaji",
       "Global Configurations": "Mipangilio ya Ulimwenguni",
       "Goodwill credit": "Mikopo ya nia njema",
       "Grace on Arrears Ageing": "Grace juu ya Madeni ya Kuzeeka",
@@ -1372,6 +1376,7 @@
       "Interest Rate": "Kiwango cha Riba",
       "Interest Rate Chart": "Chati ya Kiwango cha Riba",
       "Interest Rate Differential": "Tofauti ya Kiwango cha Riba",
+      "Interest Recalculation Date": "Tarehe ya kumbukumbu ya riba",
       "Interest Receivable": "Riba Inayopatikana",
       "Interest Type": "Aina ya riba",
       "Interest calculated using": "Riba inakokotolewa kwa kutumia",
@@ -1711,6 +1716,7 @@
       "Recurrence Frequency": "Mzunguko wa Kujirudia",
       "Recurrence Interval": "Muda wa Kurudia",
       "Recurrence Type": "Aina ya Kujirudia",
+      "Recurring Deposit": "Amana inayorudiwa",
       "Recurring Deposit Amount": "Kiasi cha Amana ya Mara kwa Mara",
       "Recurring Deposit Product": "Bidhaa ya Amana ya Mara kwa Mara",
       "Recurring Deposit Products": "Bidhaa za Amana za Mara kwa Mara",
@@ -1978,6 +1984,7 @@
       "Withdraw Money From Saving Account": "Toa Pesa kwenye Akaunti ya Kuokoa",
       "Withdrawal Date": "Tarehe ya Kujitoa",
       "Withdrawal Fee": "Ada ya Kuondoa",
+      "Withdrawals Fees": "Ada ya kujiondoa",
       "Withdrawal Reason": "Sababu ya Kujitoa",
       "Withdrawn On": "Imetolewa",
       "Withdrawn On Date": "Imetolewa Tarehe",
@@ -2034,6 +2041,8 @@
     },
     "menus": {
       "Accounting": "Uhasibu",
+      "Account Overview": "Muhtasari wa akaunti",
+      "Activate": "Amilisha",
       "Add Charge": "Ongeza Malipo",
       "Add Collateral": "Ongeza Dhamana",
       "Add Loan Charge": "Ongeza Malipo ya Mkopo",
@@ -2092,6 +2101,7 @@
       "Payout Refund": "Marejesho ya Malipo",
       "Post Interest": "Chapisha Maslahi",
       "Post Interest As On": "Chapisha Maslahi Kama Imewashwa",
+      "Premature Close": "Premutoure Karibu",
       "Prepay Loan": "Lipa Mkopo",
       "Products": "Bidhaa",
       "Profile": "Wasifu",
diff --git a/src/theme/_content.scss b/src/theme/_content.scss
new file mode 100644
index 000000000..b28d79ef1
--- /dev/null
+++ b/src/theme/_content.scss
@@ -0,0 +1,77 @@
+@use "@angular/material" as mat;
+
+@mixin account-view-component-theme($theme) {
+  $primary: map-get($theme, primary);
+
+  mifosx-clients-view,
+  mifosx-fixed-deposit-account-view,
+  mifosx-loans-view,
+  mifosx-recurring-deposits-account-view,
+  mifosx-savings-account-view {
+    .account-card {
+      margin: 0 auto;
+      max-width: 80rem;
+      width: 90%;
+      padding: 0;
+      .header {
+        background-color: mat.get-color-from-palette($primary, 500);
+
+        padding: 1%;
+        .header-title-group {
+          .account-card-title {
+            color: white;
+            width: 90%;
+            p {
+              color: white;
+            }
+
+            .account-overview {
+              max-width: 240px;
+              font-size: 14px;
+
+              tr:nth-child(even) {
+                background-color: transparent;
+              }
+            }
+          }
+        }
+        .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;
+      }
+    }
+  }
+}
diff --git a/src/theme/mifosx-theme.scss b/src/theme/mifosx-theme.scss
index 4efc46dfc..82f447422 100644
--- a/src/theme/mifosx-theme.scss
+++ b/src/theme/mifosx-theme.scss
@@ -4,15 +4,11 @@
 @import 'material-palette';
 
 // Plus imports for other components in your app.
-@import '../app/clients/clients-view/clients-view.component-theme.scss';
 @import '../app/groups/groups-view/groups-view.component-theme.scss';
 @import '../app/centers/centers-view/centers-view.component-theme.scss';
 @import '../app/home/dashboard/dashboard.component-theme.scss';
-@import '../app/loans/loans-view/loans-view.component-theme.scss';
-@import '../app/savings/savings-account-view/savings-account-view.component-theme.scss';
 @import '../app/shares/shares-account-view/shares-account-view.component-theme.scss';
-@import '../app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss';
-@import '../app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss';
+@import 'content';
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -35,12 +31,8 @@ $mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accen
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include mat.all-component-themes($mifosx-app-theme);
-@include clients-view-component-theme($mifosx-app-theme);
 @include groups-view-component-theme($mifosx-app-theme);
 @include centers-view-component-theme($mifosx-app-theme);
 @include dashboard-component-theme($mifosx-app-theme);
-@include loans-view-component-theme($mifosx-app-theme);
-@include savings-account-view-component-theme($mifosx-app-theme);
 @include shares-account-view-component-theme($mifosx-app-theme);
-@include fixed-deposits-account-view-component-theme($mifosx-app-theme);
-@include recurring-deposits-account-view-component-theme($mifosx-app-theme);
+@include account-view-component-theme($mifosx-app-theme);