diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 562bc29a1..1b0e84062 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -28,6 +28,7 @@ import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-char
 import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resolver';
 import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolver';
 import { LoanActionButtonResolver } from './common-resolvers/loan-action-button.resolver';
+import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
 
 const routes: Routes = [
   {
@@ -91,6 +92,14 @@ const routes: Routes = [
             loanDetailsData: LoanDetailsGeneralResolver
           }
         },
+        {
+          path: 'floating-interest-rates',
+          component: FloatingInterestRatesComponent,
+          data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+          resolve: {
+            loanDetailsAssociationData: LoanDetailsChargesResolver
+          }
+        },
         {
           path: 'charges',
           component: ChargesTabComponent,
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
new file mode 100644
index 000000000..2ad3200cc
--- /dev/null
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html
@@ -0,0 +1,19 @@
+<div class="container">
+
+  <table mat-table [dataSource]="interestRateData">
+
+    <ng-container matColumnDef="fromDate">
+      <th mat-header-cell *matHeaderCellDef> From Date </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.fromDate | date}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interestRate">
+      <th mat-header-cell *matHeaderCellDef> Interest Rate </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.effectiveInterestRate }} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+</div>
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.scss b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.scss
new file mode 100644
index 000000000..9524b93f4
--- /dev/null
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.scss
@@ -0,0 +1,8 @@
+table {
+  width: 100%;
+  margin: 3% 0%;
+}
+
+.container {
+  padding-bottom: 2%;
+}
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.spec.ts b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.spec.ts
new file mode 100644
index 000000000..286b81c7a
--- /dev/null
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FloatingInterestRatesComponent } from './floating-interest-rates.component';
+
+describe('FloatingInterestRatesComponent', () => {
+  let component: FloatingInterestRatesComponent;
+  let fixture: ComponentFixture<FloatingInterestRatesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FloatingInterestRatesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FloatingInterestRatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.ts b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.ts
new file mode 100644
index 000000000..c3519536e
--- /dev/null
+++ b/src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-floating-interest-rates',
+  templateUrl: './floating-interest-rates.component.html',
+  styleUrls: ['./floating-interest-rates.component.scss']
+})
+export class FloatingInterestRatesComponent implements OnInit {
+
+  /** Loan Details */
+  loanDetails: any;
+  /** Interest Rate Data */
+  interestRateData: any;
+  /** Columns to be displayed in charges table. */
+  displayedColumns: string[] = ['fromDate', 'interestRate'];
+
+  /**
+   * Retrieves the loans data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { loanDetailsAssociationData: any }) => {
+      this.loanDetails = data.loanDetailsAssociationData;
+    });
+  }
+
+  ngOnInit() {
+    this.interestRateData = this.loanDetails.interestRatesPeriods;
+  }
+
+}
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index fcc18dcae..d1e45b44b 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -76,6 +76,11 @@
 			Overdue Charges
 		</a>
 	  </ng-container>
+	  <ng-container *ngIf="loanDetailsData.isLoanProductLinkedToFloatingRate">
+		<a mat-tab-link [routerLink]="['./floating-interest-rates']" routerLinkActive #floatingInterestRates="routerLinkActive" [active]="floatingInterestRates.isActive">
+			Floating Interest Rates
+		</a>
+	  </ng-container>
 	  <ng-container *ngIf="loanDetailsData.charges">
 		<a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive" [active]="charges.isActive">
 		  Charges
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index 5eb120545..8cd3a7a69 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -30,6 +30,7 @@ import { ForeclosureComponent } from './loans-view/loan-account-actions/foreclos
 import { PrepayLoanComponent } from './loans-view/loan-account-actions/prepay-loan/prepay-loan.component';
 import { MakeRepaymentComponent } from './loans-view/loan-account-actions/make-repayment/make-repayment.component';
 import { WaiveInterestComponent } from './loans-view/loan-account-actions/waive-interest/waive-interest.component';
+import { FloatingInterestRatesComponent } from './loans-view/floating-interest-rates/floating-interest-rates.component';
 
 /**
  * Loans Module
@@ -60,6 +61,7 @@ import { WaiveInterestComponent } from './loans-view/loan-account-actions/waive-
     PrepayLoanComponent,
     MakeRepaymentComponent,
     WaiveInterestComponent,
+    FloatingInterestRatesComponent,
   ],
   providers: [DatePipe],
 })