diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html
index b479efb8a..d8c8c098f 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.html
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html
@@ -1,6 +1,6 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ getTranslate(breadcrumbs[breadcrumbs.length - 1].label) }}</span>
+    <span #breadcrumb class="breadcrumb-title">{{ getTranslate(breadcrumbs[breadcrumbs?.length - 1].label) }}</span>
     <span *ngIf="breadcrumbs.length - 1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.ts b/src/app/core/shell/breadcrumb/breadcrumb.component.ts
index db22f199e..052ce4f3b 100644
--- a/src/app/core/shell/breadcrumb/breadcrumb.component.ts
+++ b/src/app/core/shell/breadcrumb/breadcrumb.component.ts
@@ -117,20 +117,20 @@ export class BreadcrumbComponent implements AfterViewInit {
               breadcrumbLabel = route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb]);
               const routeData: Data = route.snapshot.data;
               if (routeData.breadcrumb === 'Clients') {
-                breadcrumbLabel = routeData.clientViewData.displayName;
+                breadcrumbLabel = this.printableValue(routeData.clientViewData.displayName);
                 currentUrl += `/general`;
               } else if (routeData.breadcrumb === 'Groups') {
                 breadcrumbLabel = routeData.groupViewData.name;
               } else if (routeData.breadcrumb === 'Centers') {
                 breadcrumbLabel = routeData.centerViewData.name;
               } else if (routeData.breadcrumb === 'Loans') {
-                breadcrumbLabel = routeData.loanDetailsData.loanProductName + ' (' + routeData.loanDetailsData.accountNo + ')';
+                breadcrumbLabel = this.printableValue(routeData.loanDetailsData.loanProductName) + ' (' + routeData.loanDetailsData.accountNo + ')';
               } else if (routeData.breadcrumb === 'Savings') {
-                breadcrumbLabel = routeData.savingsAccountData.savingsProductName + ' (' + routeData.savingsAccountData.accountNo + ')';
+                breadcrumbLabel = this.printableValue(routeData.savingsAccountData.savingsProductName) + ' (' + routeData.savingsAccountData.accountNo + ')';
               } else if (routeData.breadcrumb === 'Fixed Deposits') {
-                breadcrumbLabel = routeData.fixedDepositsAccountData.depositProductName + ' (' + routeData.fixedDepositsAccountData.accountNo + ')';
+                breadcrumbLabel = this.printableValue(routeData.fixedDepositsAccountData.depositProductName) + ' (' + routeData.fixedDepositsAccountData.accountNo + ')';
               } else if (routeData.breadcrumb === 'Loan Products') {
-                breadcrumbLabel = routeData.loanProduct.name;
+                breadcrumbLabel = this.printableValue(routeData.loanProduct.name);
               } else if (routeData.breadcrumb === 'Charges') {
                 breadcrumbLabel = routeData.loansAccountCharge.name;
               } else if (routeData.breadcrumb === 'Saving Products') {
@@ -183,6 +183,13 @@ export class BreadcrumbComponent implements AfterViewInit {
     });
   }
 
+  printableValue(value: string): string {
+    if (value.length <= 30) {
+      return value;
+    }
+    return value.substring(0, 30) + '...';
+  }
+
   /**
    * Popover function
    * @param template TemplateRef<any>.
diff --git a/src/app/loans/common-resolvers/loan-term-variations.resolver.ts b/src/app/loans/common-resolvers/loan-term-variations.resolver.ts
new file mode 100644
index 000000000..b0c153493
--- /dev/null
+++ b/src/app/loans/common-resolvers/loan-term-variations.resolver.ts
@@ -0,0 +1,33 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { LoansService } from '../loans.service';
+
+/**
+ * Clients data resolver.
+ */
+@Injectable()
+export class LoanTermVariationsResolver implements Resolve<Object> {
+
+    /**
+     * @param {LoansService} LoansService Loans service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the Loans with Association data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+      const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+      if (!isNaN(+loanId)) {
+        return this.loansService.getInterestPausesOfLoan(loanId);
+      }
+    }
+
+}
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 1fe82ff30..fed307232 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -61,6 +61,7 @@ import { LoanCollateralsResolver } from './common-resolvers/loan-collaterals.res
 import { LoanDelinquencyDataResolver } from './common-resolvers/loan-delinquency-data.resolver';
 import { LoanDelinquencyActionsResolver } from './common-resolvers/loan-delinquency-actions.resolver';
 import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variations-tab/loan-term-variations-tab.component';
+import { LoanTermVariationsResolver } from './common-resolvers/loan-term-variations.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -171,7 +172,7 @@ const routes: Routes = [
             component: LoanTermVariationsTabComponent,
             data: { title: 'Loan Term Variations', breadcrumb: 'Loan Term Variations', routeParamBreadcrumb: false },
             resolve: {
-              loanDetailsData: LoanDetailsResolver
+              loanTermVariationsData: LoanTermVariationsResolver
             },
           },
           {
@@ -377,7 +378,8 @@ const routes: Routes = [
     GSIMAccountsResolver,
     GLIMLoanTemplateResolver,
     ExternalAssetOwnerResolver,
-    LoanDelinquencyDataResolver
+    LoanDelinquencyDataResolver,
+    LoanTermVariationsResolver
   ]
 })
 
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html
new file mode 100644
index 000000000..6e7e0932f
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html
@@ -0,0 +1,44 @@
+<div class="container mat-elevation-z8">
+    <mat-card>
+        <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
+            <mat-card-content>
+                <div fxLayout="column">
+                    <mat-form-field (click)="startDatePicker.open()">
+                        <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
+                        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker"
+                            required formControlName="startDate" />
+                        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+                        <mat-datepicker #startDatePicker></mat-datepicker>
+                        <mat-error *ngIf="interestPauseLoanForm.controls.startDate.hasError('required')">
+                            {{ 'labels.inputs.Start Date' | translate
+                            }}<strong>{{ 'labels.commons.required' | translate }}</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    
+                    <mat-form-field (click)="endDatePicker.open()">
+                        <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
+                        <input matInput [min]="interestPauseLoanForm.value.startDate" [max]="maxDate" [matDatepicker]="endDatePicker"
+                            required formControlName="endDate" />
+                        <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+                        <mat-datepicker #endDatePicker></mat-datepicker>
+                        <mat-error *ngIf="interestPauseLoanForm.controls.endDate.hasError('required')">
+                            {{ 'labels.inputs.End Date' | translate
+                            }}<strong>{{ 'labels.commons.required' | translate }}</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                </div>
+
+                <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+                    <button type="button" mat-raised-button [routerLink]="['../../general']">
+                        {{ 'labels.buttons.Cancel' | translate }}
+                    </button>
+                    <button mat-raised-button color="primary" [disabled]="!interestPauseLoanForm.valid"
+                        *mifosxHasPermission="'DISBURSE_LOAN'">
+                        {{ 'labels.buttons.Submit' | translate }}
+                    </button>
+                </mat-card-actions>
+            </mat-card-content>
+        </form>
+    </mat-card>
+</div>
\ No newline at end of file
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss
new file mode 100644
index 000000000..d9fcadfce
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.scss
@@ -0,0 +1,8 @@
+.expandcollapsebutton {
+    margin-top: -7px;
+  }
+  
+  .container {
+    max-width: 37rem;
+  }
+  
\ No newline at end of file
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.spec.ts
new file mode 100644
index 000000000..7f11ccc01
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddInterestPauseComponent } from './add-interest-pause.component';
+
+describe('AddInterestPauseComponent', () => {
+  let component: AddInterestPauseComponent;
+  let fixture: ComponentFixture<AddInterestPauseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddInterestPauseComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddInterestPauseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.ts b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.ts
new file mode 100644
index 000000000..4d82884b7
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.ts
@@ -0,0 +1,96 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-add-interest-pause',
+  templateUrl: './add-interest-pause.component.html',
+  styleUrls: ['./add-interest-pause.component.scss']
+})
+export class AddInterestPauseComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  /** Payment Type Options */
+  paymentTypes: any;
+  /** Show payment details */
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  startDate = new Date();
+  /** Interest Pause Loan Form */
+  interestPauseLoanForm: UntypedFormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loanService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: UntypedFormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private dateUtils: Dates,
+    private settingsService: SettingsService) {
+      
+    this.loanId = this.route.snapshot.params['loanId'];
+  }
+
+  /**
+   * Creates the Interest Pause loan form
+   * and initialize with the required values
+   */
+  ngOnInit() {
+    this.maxDate = new Date(this.dataObject.timeline.expectedMaturityDate);
+    this.startDate = new Date(this.settingsService.businessDate);
+    if (this.startDate < this.maxDate) {
+      this.maxDate = this.startDate;
+    } else {
+      this.startDate = this.maxDate;
+    }
+    this.createInterestPauseLoanForm();
+  }
+
+  /**
+   * Creates the Interest Pause loan form.
+   */
+  createInterestPauseLoanForm() {
+    this.interestPauseLoanForm = this.formBuilder.group({
+      'startDate': [this.startDate, Validators.required],
+      'endDate': [this.startDate, Validators.required]
+    });
+  }
+
+  /** Submits the Interest Pause form */
+  submit() {
+    const interestPauseLoanFormData = this.interestPauseLoanForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const startDate: Date = this.interestPauseLoanForm.value.startDate;
+    if (interestPauseLoanFormData.startDate instanceof Date) {
+      interestPauseLoanFormData.startDate = this.dateUtils.formatDate(startDate, dateFormat);
+    }
+    const endDate: Date = this.interestPauseLoanForm.value.endDate;
+    if (interestPauseLoanFormData.endDate instanceof Date) {
+      interestPauseLoanFormData.endDate = this.dateUtils.formatDate(endDate, dateFormat);
+    }
+    const data = {
+      ...interestPauseLoanFormData,
+      dateFormat,
+      locale
+    };
+    this.loanService.addInterestPauseToLoan(this.loanId, data )
+      .subscribe((response: any) => {
+        this.router.navigate(['../../term-variations'], { relativeTo: this.route });
+      });
+  }
+
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
index d0c61b9f1..2ea093c31 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -57,3 +57,4 @@
 <mifosx-asset-transfer-loan *ngIf="actions['Sell Loan'] || actions['Buy Back Loan']"></mifosx-asset-transfer-loan>
 <mifosx-loan-reaging [dataObject]="actionButtonData" *ngIf="actions['Re-Age']"></mifosx-loan-reaging>
 <mifosx-loan-reamortize [dataObject]="actionButtonData" *ngIf="actions['Re-Amortize']"></mifosx-loan-reamortize>
+<mifosx-add-interest-pause [dataObject]="navigationData" *ngIf="actions['Add Interest Pause']"></mifosx-add-interest-pause>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
index 8505d92d7..65c4e0ae8 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
@@ -1,6 +1,6 @@
 /** Angular Imports. */
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Loan Account Actions component.
@@ -12,73 +12,83 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class LoanAccountActionsComponent {
 
+  /** Loan Details Data */
+  navigationData: any;
+
   /** flag object to store possible actions and render appropriate UI to the user */
-  actions: { 'Close': boolean,
-            'Undo Approval': boolean,
-            'Write Off': boolean,
-            'Add Collateral': boolean,
-            'Assign Loan Officer': boolean,
-            'Foreclosure': boolean,
-            'Prepay Loan': boolean,
-            'Reject': boolean,
-            'Disburse to Savings': boolean,
-            'Make Repayment': boolean,
-            'Waive Interest': boolean,
-            'Close (as Rescheduled)': boolean,
-            'Reschedule': boolean,
-            'Recovery Payment': boolean,
-            'View Guarantors': boolean,
-            'Create Guarantor': boolean,
-            'Disburse': boolean,
-            'Withdrawn by Client': boolean,
-            'Undo Disbursal': boolean,
-            'Undo Last Disbursal': boolean,
-            'Loan Screen Reports': boolean,
-            'Approve': boolean,
-            'Add Loan Charge': boolean,
-            'Goodwill Credit': boolean,
-            'Merchant Issued Refund': boolean,
-            'Payout Refund': boolean,
-            'Credit Balance Refund': boolean,
-            'Edit Repayment Schedule': boolean,
-            'Charge-Off': boolean,
-            'Sell Loan': boolean,
-            'Buy Back Loan': boolean,
-            'Re-Age': boolean
-         } = {
-              'Close': false,
-              'Undo Approval': false,
-              'Write Off':  false,
-              'Add Collateral':  false,
-              'Assign Loan Officer':  false,
-              'Foreclosure':  false,
-              'Prepay Loan':  false,
-              'Reject':  false,
-              'Disburse to Savings':  false,
-              'Make Repayment':  false,
-              'Waive Interest':  false,
-              'Close (as Rescheduled)':  false,
-              'Reschedule':  false,
-              'Recovery Payment':  false,
-              'View Guarantors':  false,
-              'Create Guarantor':  false,
-              'Disburse':  false,
-              'Withdrawn by Client':  false,
-              'Undo Disbursal':  false,
-              'Undo Last Disbursal':  false,
-              'Loan Screen Reports':  false,
-              'Approve':  false,
-              'Add Loan Charge':  false,
-              'Goodwill Credit': false,
-              'Merchant Issued Refund': false,
-              'Payout Refund': false,
-              'Credit Balance Refund': false,
-              'Edit Repayment Schedule': false,
-              'Charge-Off': false,
-              'Sell Loan': false,
-              'Buy Back Loan': false,
-              'Re-Age': false
-          };
+  actions: {
+    'Close': boolean,
+    'Undo Approval': boolean,
+    'Write Off': boolean,
+    'Add Collateral': boolean,
+    'Assign Loan Officer': boolean,
+    'Foreclosure': boolean,
+    'Prepay Loan': boolean,
+    'Reject': boolean,
+    'Disburse to Savings': boolean,
+    'Make Repayment': boolean,
+    'Waive Interest': boolean,
+    'Close (as Rescheduled)': boolean,
+    'Reschedule': boolean,
+    'Recovery Payment': boolean,
+    'View Guarantors': boolean,
+    'Create Guarantor': boolean,
+    'Disburse': boolean,
+    'Withdrawn by Client': boolean,
+    'Undo Disbursal': boolean,
+    'Undo Last Disbursal': boolean,
+    'Loan Screen Reports': boolean,
+    'Approve': boolean,
+    'Add Loan Charge': boolean,
+    'Goodwill Credit': boolean,
+    'Merchant Issued Refund': boolean,
+    'Payout Refund': boolean,
+    'Credit Balance Refund': boolean,
+    'Edit Repayment Schedule': boolean,
+    'Charge-Off': boolean,
+    'Sell Loan': boolean,
+    'Buy Back Loan': boolean,
+    'Re-Age': boolean,
+    'Re-Amortize': boolean,
+    'Interest Payment Waiver': boolean,
+    'Add Interest Pause': boolean
+  } = {
+      'Close': false,
+      'Undo Approval': false,
+      'Write Off': false,
+      'Add Collateral': false,
+      'Assign Loan Officer': false,
+      'Foreclosure': false,
+      'Prepay Loan': false,
+      'Reject': false,
+      'Disburse to Savings': false,
+      'Make Repayment': false,
+      'Waive Interest': false,
+      'Close (as Rescheduled)': false,
+      'Reschedule': false,
+      'Recovery Payment': false,
+      'View Guarantors': false,
+      'Create Guarantor': false,
+      'Disburse': false,
+      'Withdrawn by Client': false,
+      'Undo Disbursal': false,
+      'Undo Last Disbursal': false,
+      'Loan Screen Reports': false,
+      'Approve': false,
+      'Add Loan Charge': false,
+      'Goodwill Credit': false,
+      'Merchant Issued Refund': false,
+      'Payout Refund': false,
+      'Credit Balance Refund': false,
+      'Edit Repayment Schedule': false,
+      'Charge-Off': false,
+      'Sell Loan': false,
+      'Buy Back Loan': false,
+      'Re-Age': false,
+      'Re-Amortize': false,
+      'Interest Payment Waiver': false,
+      'Add Interest Pause': false
+    };
 
   actionButtonData: any;
   actionName: any;
@@ -86,10 +96,13 @@ export class LoanAccountActionsComponent {
   /**
    * @param route Activated Route.
    */
-  constructor(private route: ActivatedRoute) {
-      this.route.data.subscribe(( data: { actionButtonData: any }) => {
-        this.actionButtonData = data.actionButtonData;
-      });
+  constructor(private route: ActivatedRoute,
+    private router: Router
+  ) {
+    this.navigationData = this.router.getCurrentNavigation().extras.state.data;
+    this.route.data.subscribe((data: { actionButtonData: any }) => {
+      this.actionButtonData = data.actionButtonData;
+    });
 
     this.route.params.subscribe(params => {
       this.actionName = params['action'];
diff --git a/src/app/loans/loans-view/loan-accounts-button-config.ts b/src/app/loans/loans-view/loan-accounts-button-config.ts
index 9e9a39855..3cd91f19b 100644
--- a/src/app/loans/loans-view/loan-accounts-button-config.ts
+++ b/src/app/loans/loans-view/loan-accounts-button-config.ts
@@ -159,6 +159,10 @@ export class LoansAccountButtonConfiguration {
     switch (status) {
       case 'Active':
         this.optionArray = [
+          {
+            name: 'Add Interest Pause',
+            taskPermissionName: 'CREATE_INTEREST_PAUSE',
+          },
           {
             name: 'Waive Interest',
             taskPermissionName: 'WAIVEINTERESTPORTION_LOAN',
diff --git a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
index 63cad5006..4f8e2c720 100644
--- a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
+++ b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html
@@ -1,27 +1,34 @@
 <div class="container">
   <h3>{{ 'labels.heading.Term Variations' | translate }}</h3>
-  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData.length > 0">
-    <ng-container matColumnDef="termType">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-      <td mat-cell *matCellDef="let item">{{ item.termType.value | translate }}</td>
+  <table mat-table [dataSource]="loanTermVariationsData" *ngIf="loanTermVariationsData?.length > 0">
+    <ng-container matColumnDef="row">
+      <th mat-header-cell *matHeaderCellDef>#</th>
+      <td mat-cell *matCellDef="let item; let idx = index">{{ idx + 1 }}</td>
     </ng-container>
 
-    <ng-container matColumnDef="applicableFrom">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Added On' | translate }}</th>
-      <td mat-cell *matCellDef="let item">{{ item.termVariationApplicableFrom | dateFormat }}</td>
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Id' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.id }}</td>
     </ng-container>
 
-    <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Value' | translate }}</th>
-      <td mat-cell *matCellDef="let item">{{ item.decimalValue | formatNumber }}</td>
+    <ng-container matColumnDef="startDate">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Start Date' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.startDate | dateFormat }}</td>
     </ng-container>
 
-    <ng-container matColumnDef="specificToInstallment">
-      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Specific to Installment' | translate }}</th>
-      <td mat-cell *matCellDef="let item">{{ item.isSpecificToInstallment | yesNo }}</td>
+    <ng-container matColumnDef="endDate">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.End Date' | translate }}</th>
+      <td mat-cell *matCellDef="let item">{{ item.endDate | dateFormat }}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="loanDTermVariationsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns"></tr>
+    <tr mat-header-row *matHeaderRowDef="loanTermVariationsColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanTermVariationsColumns"></tr>
   </table>
+
+  <div class="alert" [hidden]="loanTermVariationsData?.length > 0">
+    <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/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts
index 7e8fc7e59..93a5f786c 100644
--- a/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts
+++ b/src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts
@@ -8,17 +8,14 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class LoanTermVariationsTabComponent {
 
-  /** Loan Details Data */
+  /** Loan Term Variation Data */
   loanTermVariationsData: any[] = [];
-
-  loanId: number;
-
-  loanDTermVariationsColumns: string[] = ['termType', 'applicableFrom', 'value', 'specificToInstallment'];
+  loanTermVariationsColumns: string[] = ['row', 'id', 'startDate', 'endDate'];
 
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
-      this.loanTermVariationsData = data.loanDetailsData.loanTermVariations;
+    this.loanTermVariationsData = [];
+    this.route.data.subscribe((data: { loanTermVariationsData: any, }) => {
+      this.loanTermVariationsData = data.loanTermVariationsData;
     });
-    this.loanId = this.route.parent.parent.snapshot.params['loanId'];
   }
 }
diff --git a/src/app/loans/loans-view/loans-view.component.scss b/src/app/loans/loans-view/loans-view.component.scss
index 630e1e7ee..177f12134 100644
--- a/src/app/loans/loans-view/loans-view.component.scss
+++ b/src/app/loans/loans-view/loans-view.component.scss
@@ -3,6 +3,6 @@
 }
 
 .account-overview {
-  min-width: 60%;
+  min-width: 80%;
   font-weight: 400;
 }
diff --git a/src/app/loans/loans-view/loans-view.component.ts b/src/app/loans/loans-view/loans-view.component.ts
index bf69c016b..23d4465a4 100644
--- a/src/app/loans/loans-view/loans-view.component.ts
+++ b/src/app/loans/loans-view/loans-view.component.ts
@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -236,7 +236,13 @@ export class LoansViewComponent implements OnInit {
         this.undoLoanAction(actionName);
         break;
       default:
-        this.router.navigate(['actions', actionName], { relativeTo: this.route });
+        const navigationExtras: NavigationExtras = {
+          relativeTo: this.route,
+          state: {
+            data: this.loanDetailsData
+          }
+        };
+        this.router.navigate(['actions', actionName], navigationExtras);
         break;
     }
   }
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index ac3a9a381..99e59db85 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -83,6 +83,7 @@ import { LoanDelinquencyActionDialogComponent } from './custom-dialog/loan-delin
 import { LoanReagingComponent } from './loans-view/loan-account-actions/loan-reaging/loan-reaging.component';
 import { LoanReamortizeComponent } from './loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component';
 import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variations-tab/loan-term-variations-tab.component';
+import { AddInterestPauseComponent } from './loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component';
 
 /**
  * Loans Module
@@ -169,7 +170,8 @@ import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variation
     LoanDelinquencyActionDialogComponent,
     LoanReagingComponent,
     LoanReamortizeComponent,
-    LoanTermVariationsTabComponent
+    LoanTermVariationsTabComponent,
+    AddInterestPauseComponent
   ],
   providers: [ ],
 })
diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts
index a2508a58d..f7be0892b 100644
--- a/src/app/loans/loans.service.ts
+++ b/src/app/loans/loans.service.ts
@@ -277,6 +277,14 @@ export class LoansService {
     return this.http.post(`/loans/${loanId}`, data, { params: httpParams });
   }
 
+  addInterestPauseToLoan(loanId: any, data?: any): Observable<any> {
+    return this.http.post(`/loans/${loanId}/interest-pauses`, data);
+  }
+
+  getInterestPausesOfLoan(loanId: any): Observable<any> {
+    return this.http.get(`/loans/${loanId}/interest-pauses`);
+  }
+
   /**
    * @param {string|number} loanId Loan Id.
    * @param {any} foreclosuredata ForeClosure Data
diff --git a/src/app/notifications/notifications.resolver.ts b/src/app/notifications/notifications.resolver.ts
index 8ec659d87..253528df5 100644
--- a/src/app/notifications/notifications.resolver.ts
+++ b/src/app/notifications/notifications.resolver.ts
@@ -24,7 +24,7 @@ export class NotificationsResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(): Observable<any> {
-    return this.notificationsService.getNotifications(true);
+    return this.notificationsService.getNotifications(true, 50);
   }
 
 }
diff --git a/src/app/notifications/notifications.service.ts b/src/app/notifications/notifications.service.ts
index 9f837c55d..073281c63 100644
--- a/src/app/notifications/notifications.service.ts
+++ b/src/app/notifications/notifications.service.ts
@@ -21,8 +21,8 @@ export class NotificationsService {
   /**
    * @returns {Observable<any>} Notifications.
    */
-  getNotifications(isRead: boolean): Observable<any> {
-    const httpParams = new HttpParams().set('isRead', isRead.toString());
+  getNotifications(isRead: boolean, limit: number): Observable<any> {
+    const httpParams = new HttpParams().set('isRead', isRead.toString()).set('limit', limit);
     return this.http.get('/notifications', { params: httpParams });
   }
 
diff --git a/src/app/shared/external-identifier/external-identifier.component.html b/src/app/shared/external-identifier/external-identifier.component.html
index 0f0fbd6f8..8eb86eced 100644
--- a/src/app/shared/external-identifier/external-identifier.component.html
+++ b/src/app/shared/external-identifier/external-identifier.component.html
@@ -2,12 +2,12 @@
   <span (click)="copyValue()" *ngIf="displayL && iconVisible"
     ><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon
   ></span>
-  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"
+  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()" (click)="showValue()"
     ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
   ></span>
-  <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
-  <span class="m-l-5" *ngIf="completed">{{ externalId }}</span>
-  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"
+  <span class="m-l-5" *ngIf="!completed" (click)="showValue()">{{ externalId | externalIdentifier }}</span>
+  <span class="m-l-5" *ngIf="completed" (click)="showValue()">{{ externalId }}</span>
+  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()" (click)="showValue()"
     ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
   ></span>
   <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"
diff --git a/src/app/shared/external-identifier/external-identifier.component.ts b/src/app/shared/external-identifier/external-identifier.component.ts
index fbd37be51..485880b81 100644
--- a/src/app/shared/external-identifier/external-identifier.component.ts
+++ b/src/app/shared/external-identifier/external-identifier.component.ts
@@ -33,6 +33,10 @@ export class ExternalIdentifierComponent implements OnInit {
     return (this.externalId.length > 15);
   }
 
+  showValue() {
+    this.completed = !this.completed;
+  }
+
   copyValue(): void {
     this.clipboard.copy(this.externalId);
     this.alertService.alert({ type: 'Clipboard', message: 'Copied: ' + this.externalId });
diff --git a/src/app/shared/long-text/long-text.component.html b/src/app/shared/long-text/long-text.component.html
index 68b7deef5..a8de75c1d 100644
--- a/src/app/shared/long-text/long-text.component.html
+++ b/src/app/shared/long-text/long-text.component.html
@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-  <span class="m-l-3" *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
-  <span class="m-l-5" *ngIf="isLongValue()">{{ textValue | truncateText: chars }}...</span>
-  <span class="m-l-5" *ngIf="!isLongValue()">{{ textValue }}</span>
+  <span class="m-l-3" *ngIf="isLongValue()" (click)="showValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
+  <span class="m-l-5" *ngIf="isLongValue()" (click)="showValue()">{{ textValue | truncateText: printChars }}...</span>
+  <span class="m-l-5" *ngIf="!isLongValue()" (click)="showValue()">{{ textValue }}</span>
 </span>
diff --git a/src/app/shared/long-text/long-text.component.ts b/src/app/shared/long-text/long-text.component.ts
index 1bfa9e438..8015c9a8c 100644
--- a/src/app/shared/long-text/long-text.component.ts
+++ b/src/app/shared/long-text/long-text.component.ts
@@ -14,10 +14,13 @@ export class LongTextComponent implements OnInit {
   displayR = true;
   emptyValue = false;
 
+  printChars = 30;
+
   constructor() { }
 
   ngOnInit(): void {
     this.emptyValue = (!this.textValue || this.textValue === '');
+    this.printChars = this.chars;
   }
 
   isLongValue(): boolean {
@@ -27,6 +30,14 @@ export class LongTextComponent implements OnInit {
     return (this.textValue.length > 25);
   }
 
+  showValue() {
+    if (this.printChars == 30) {
+      this.printChars = 1000;
+    } else {
+      this.printChars = 30;
+    }
+  }
+
   mouseEnter() {
     this.iconVisible = true;
   }
diff --git a/src/app/shared/notifications-tray/notifications-tray.component.ts b/src/app/shared/notifications-tray/notifications-tray.component.ts
index c1170d142..37529d621 100644
--- a/src/app/shared/notifications-tray/notifications-tray.component.ts
+++ b/src/app/shared/notifications-tray/notifications-tray.component.ts
@@ -50,7 +50,7 @@ export class NotificationsTrayComponent implements OnInit, OnDestroy {
    * @param {NotificationsService} notificationsService Notifications Service
    */
   constructor(public notificationsService: NotificationsService) {
-    forkJoin([this.notificationsService.getNotifications(true), this.notificationsService.getNotifications(false)])
+    forkJoin([this.notificationsService.getNotifications(true, 9), this.notificationsService.getNotifications(false, 9)])
     .subscribe((response: any[]) => {
       this.readNotifications = response[0].pageItems;
       this.unreadNotifications = response[1].pageItems;
@@ -78,7 +78,7 @@ export class NotificationsTrayComponent implements OnInit, OnDestroy {
    * Recursively fetch unread notifications.
    */
   fetchUnreadNotifications() {
-    this.notificationsService.getNotifications(false).subscribe((response: any) => {
+    this.notificationsService.getNotifications(false, 9).subscribe((response: any) => {
       this.unreadNotifications = this.unreadNotifications.concat(response.pageItems);
       this.setNotifications();
     });
diff --git a/src/assets/env.js b/src/assets/env.js
index 334e1c240..cb564c1b9 100644
--- a/src/assets/env.js
+++ b/src/assets/env.js
@@ -2,14 +2,14 @@
   window["env"] = window["env"] || {};
 
   // BackEnd Environment variables
-  window["env"]["fineractApiUrls"] = '';
-  window["env"]["fineractApiUrl"]  = '';
+  window["env"]["fineractApiUrls"] = 'https://ps-test.dev.alluvial.cloud';
+  window["env"]["fineractApiUrl"]  = 'https://ps-test.dev.alluvial.cloud';
 
   window["env"]["apiProvider"] = '';
   window["env"]["apiVersion"]  = '';
 
-  window["env"]["fineractPlatformTenantId"]  = '';
-  window["env"]["fineractPlatformTenantIds"]  = '';
+  window["env"]["fineractPlatformTenantId"]  = 'pstest';
+  window["env"]["fineractPlatformTenantIds"]  = 'pstest';
 
   // Language Environment variables
   window["env"]["defaultLanguage"] = '';
diff --git a/src/assets/translations/cs-CS.json b/src/assets/translations/cs-CS.json
index 5ad99d889..06c56d67a 100644
--- a/src/assets/translations/cs-CS.json
+++ b/src/assets/translations/cs-CS.json
@@ -2453,6 +2453,7 @@
       "Activate": "aktivovat",
       "Add Charge": "Přidat poplatek",
       "Add Collateral": "Přidat kolaterál",
+      "Add Interest Pause": "Přidat zájmovou pauzu",
       "Add Loan Charge": "Přidejte poplatek za půjčku",
       "Admin": "Admin",
       "All": "Všechno",
diff --git a/src/assets/translations/de-DE.json b/src/assets/translations/de-DE.json
index cee900d79..0a8d27f56 100644
--- a/src/assets/translations/de-DE.json
+++ b/src/assets/translations/de-DE.json
@@ -2453,6 +2453,7 @@
       "Activate": "aktivieren Sie",
       "Add Charge": "Gebühr hinzufügen",
       "Add Collateral": "Sicherheiten hinzufügen",
+      "Add Interest Pause": "Interessenpause hinzufügen",
       "Add Loan Charge": "Kreditgebühr hinzufügen",
       "Admin": "Administrator",
       "All": "Alle",
diff --git a/src/assets/translations/en-US.json b/src/assets/translations/en-US.json
index 9910ff0f7..56b3ffb99 100644
--- a/src/assets/translations/en-US.json
+++ b/src/assets/translations/en-US.json
@@ -2454,6 +2454,7 @@
       "Activate": "Activate",
       "Add Charge": "Add Charge",
       "Add Collateral": "Add Collateral",
+      "Add Interest Pause": "Add Interest Pause",
       "Add Loan Charge": "Add Loan Charge",
       "Admin": "Admin",
       "All": "All",
diff --git a/src/assets/translations/es-MX.json b/src/assets/translations/es-MX.json
index 68527d1f9..cf752e502 100644
--- a/src/assets/translations/es-MX.json
+++ b/src/assets/translations/es-MX.json
@@ -2453,6 +2453,7 @@
       "Activate": "Activar",
       "Add Charge": "Agregar cargo",
       "Add Collateral": "Agregar garantía",
+      "Add Interest Pause": "Agregar pausa de interés",
       "Add Loan Charge": "Agregar cargo de Crédito",
       "Admin": "Administración",
       "All": "Todo",
diff --git a/src/assets/translations/fr-FR.json b/src/assets/translations/fr-FR.json
index e1ed2c87f..9a05ae130 100644
--- a/src/assets/translations/fr-FR.json
+++ b/src/assets/translations/fr-FR.json
@@ -2453,6 +2453,7 @@
       "Activate": "Activer",
       "Add Charge": "Ajouter des frais",
       "Add Collateral": "Ajouter une garantie",
+      "Add Interest Pause": "Ajouter une pause d'intérêt",
       "Add Loan Charge": "Ajouter des frais de prêt",
       "Admin": "Administrateur",
       "All": "Tous",
diff --git a/src/assets/translations/it-IT.json b/src/assets/translations/it-IT.json
index dd056c34c..6a1d651c2 100644
--- a/src/assets/translations/it-IT.json
+++ b/src/assets/translations/it-IT.json
@@ -2453,6 +2453,7 @@
       "Activate": "Attivare",
       "Add Charge": "Aggiungi addebito",
       "Add Collateral": "Aggiungi garanzia",
+      "Add Interest Pause": "Aggiungi pausa di interesse",
       "Add Loan Charge": "Aggiungi addebito sul prestito",
       "Admin": "Ammin",
       "All": "Tutto",
diff --git a/src/assets/translations/ko-KO.json b/src/assets/translations/ko-KO.json
index 34701388d..6da6b44e6 100644
--- a/src/assets/translations/ko-KO.json
+++ b/src/assets/translations/ko-KO.json
@@ -2454,6 +2454,7 @@
       "Activate": "활성화",
       "Add Charge": "요금 추가",
       "Add Collateral": "담보 추가",
+      "Add Interest Pause": "관심 일시 정지 추가",
       "Add Loan Charge": "대출 수수료 추가",
       "Admin": "관리자",
       "All": "모두",
diff --git a/src/assets/translations/lt-LT.json b/src/assets/translations/lt-LT.json
index 6ae55e9ca..d6d396054 100644
--- a/src/assets/translations/lt-LT.json
+++ b/src/assets/translations/lt-LT.json
@@ -2453,6 +2453,7 @@
       "Activate": "Suaktyvinti",
       "Add Charge": "Pridėti mokestį",
       "Add Collateral": "Pridėti užstatą",
+      "Add Interest Pause": "Pridėti susidomėjimo pauzę",
       "Add Loan Charge": "Pridėti paskolos mokestį",
       "Admin": "Admin",
       "All": "Visi",
diff --git a/src/assets/translations/lv-LV.json b/src/assets/translations/lv-LV.json
index a8709f2b5..a1ff25627 100644
--- a/src/assets/translations/lv-LV.json
+++ b/src/assets/translations/lv-LV.json
@@ -2453,6 +2453,7 @@
       "Activate": "Aktivizēt",
       "Add Charge": "Pievienot maksu",
       "Add Collateral": "Pievienot nodrošinājumu",
+      "Add Interest Pause": "Pievienot interešu pauzi",
       "Add Loan Charge": "Pievienot aizdevuma maksu",
       "Admin": "Administrators",
       "All": "Visi",
diff --git a/src/assets/translations/ne-NE.json b/src/assets/translations/ne-NE.json
index 72e67eeea..b09615824 100644
--- a/src/assets/translations/ne-NE.json
+++ b/src/assets/translations/ne-NE.json
@@ -2453,6 +2453,7 @@
       "Activate": "अलग गर्नु",
       "Add Charge": "चार्ज थप्नुहोस्",
       "Add Collateral": "संपार्श्विक थप्नुहोस्",
+      "Add Interest Pause": "ब्याज पज थप्नुहोस्",
       "Add Loan Charge": "ऋण शुल्क थप्नुहोस्",
       "Admin": "व्यवस्थापक",
       "All": "सबै",
diff --git a/src/assets/translations/pt-PT.json b/src/assets/translations/pt-PT.json
index 3a84f8d69..a50198862 100644
--- a/src/assets/translations/pt-PT.json
+++ b/src/assets/translations/pt-PT.json
@@ -2453,6 +2453,7 @@
       "Activate": "Ativar",
       "Add Charge": "Adicionar cobrança",
       "Add Collateral": "Adicionar garantia",
+      "Add Interest Pause": "Adicionar pausa de interesse",
       "Add Loan Charge": "Adicionar taxa de empréstimo",
       "Admin": "Administrador",
       "All": "Todos",
diff --git a/src/assets/translations/sw-SW.json b/src/assets/translations/sw-SW.json
index 19f7a738d..d6aeb18b9 100644
--- a/src/assets/translations/sw-SW.json
+++ b/src/assets/translations/sw-SW.json
@@ -2453,6 +2453,7 @@
       "Activate": "Amilisha",
       "Add Charge": "Ongeza Malipo",
       "Add Collateral": "Ongeza Dhamana",
+      "Add Interest Pause": "Ongeza Kinachovutia Sitisha",
       "Add Loan Charge": "Ongeza Malipo ya Mkopo",
       "Admin": "Msimamizi",
       "All": "Wote",