diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts
index ecb155c8e..4cc6d0a27 100644
--- a/src/app/clients/clients-routing.module.ts
+++ b/src/app/clients/clients-routing.module.ts
@@ -5,11 +5,13 @@ import { extract } from '@app/core';
 import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
+import { ViewLoanComponent } from './view-loan/view-loan.component';
 
 const routes: Routes = [
   { path: 'clients', component: ClientsComponent},
   { path: 'clients/create', component: CreateClientComponent},
   { path: 'clients/view', component: ViewClientComponent},
+  { path: 'clients/viewloan', component: ViewLoanComponent}
 ];
 
 @NgModule({
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts
index ac2af83cb..b649fe181 100644
--- a/src/app/clients/clients.module.ts
+++ b/src/app/clients/clients.module.ts
@@ -1,25 +1,29 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ArchwizardModule } from 'angular-archwizard';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
 import { ClientsRoutingModule } from './clients-routing.module';
 import { CoreModule } from '../core/core.module';
 import { ViewClientComponent } from './view-client/view-client.component';
+import { ViewLoanComponent } from './view-loan/view-loan.component';
 
 @NgModule({
   imports: [
     CoreModule,
     CommonModule,
     ClientsRoutingModule,
-    ArchwizardModule
+    ArchwizardModule,
+    NgbModule
 
   ],
   declarations: [
   ClientsComponent,
   CreateClientComponent,
-  ViewClientComponent
+  ViewClientComponent,
+    ViewLoanComponent
 ],
  schemas: [
   CUSTOM_ELEMENTS_SCHEMA
diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html
index 18351e240..d412eebfc 100644
--- a/src/app/clients/create-client/create-client.component.html
+++ b/src/app/clients/create-client/create-client.component.html
@@ -1,5 +1,6 @@
 <app-header> </app-header>
 <div class="container">
+
  <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
   <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
   
diff --git a/src/app/clients/view-loan/view-loan.component.html b/src/app/clients/view-loan/view-loan.component.html
new file mode 100644
index 000000000..eb962b10c
--- /dev/null
+++ b/src/app/clients/view-loan/view-loan.component.html
@@ -0,0 +1,345 @@
+<app-header></app-header>
+
+<div class="fluid-container">
+  <div class="container">
+    <div class="col text-center">
+      <div class="card  border-secondary d-inline-block mt-5">
+
+        <button type="button" class="btn btn-flat btn-default"><b>Add Loan</b></button>
+        <button type="button" class="btn btn-flat btn-default"><b>Approve</b></button>
+        <button type="button" class="btn btn-flat btn-default"><b>Modify</b></button>
+        <button type="button" class="btn btn-flat btn-default"><b>Reject</b></button>
+        <button type="button" class="btn btn-flat btn-default"><b>More</b></button>
+
+
+      </div>
+    </div>  
+    <div class="row mt-5 mb-5">
+      <div class="col-sm-4">
+        <div class="card">
+          <table class="table table-hover table-responsive-md table-fixed">
+            <tr>
+              <th>Name:</th>
+              <td>Bill Gates</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 854</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+          </table>
+        </div>
+        <div class="card mt-4">
+          <table class="table table-hover table-responsive-md table-fixed">
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+            <tr>
+              <th>Telephone:</th>
+              <td>555 77 855</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+      <div class="col-sm-8">
+        <div class="card ml-4">
+          <table class="table table-hover table-responsive-md table-fixed">
+
+            <!--Table head-->
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Name</th>
+                <th>Surname</th>
+                <th>Country</th>
+                <th>City</th>
+                <th>Position</th>
+
+              </tr>
+            </thead>
+            <!--Table head-->
+
+            <!--Table body-->
+            <tbody>
+              <tr>
+                <th scope="row">4</th>
+                <td>Jerry</td>
+                <td>Horwitz</td>
+                <td>Italy</td>
+                <td>Bari</td>
+                <td>Editor-in-chief</td>
+
+              </tr>
+              <tr>
+                <th scope="row">5</th>
+                <td>Janis</td>
+                <td>Joplin</td>
+                <td>Poland</td>
+                <td>Warsaw</td>
+                <td>Video Maker</td>
+
+              </tr>
+              <tr>
+                <th scope="row">6</th>
+                <td>Gary</td>
+                <td>Winogrand</td>
+                <td>Germany</td>
+                <td>Berlin</td>
+                <td>Photographer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">7</th>
+                <td>Angie</td>
+                <td>Smith</td>
+                <td>USA</td>
+                <td>San Francisco</td>
+                <td>Teacher</td>
+
+              </tr>
+              <tr>
+                <th scope="row">8</th>
+                <td>John</td>
+                <td>Mattis</td>
+                <td>France</td>
+                <td>Paris</td>
+                <td>Actor</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+              <tr>
+                <th scope="row">9</th>
+                <td>Otto</td>
+                <td>Morris</td>
+                <td>Germany</td>
+                <td>Munich</td>
+                <td>Singer</td>
+
+              </tr>
+            </tbody>
+            <!--Table body-->
+
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="card bg-secondary mb-5 mt-5">
+    <ngb-tabset class="ml-3 mt-1 mr-3" >
+      <ngb-tab title="Simple">
+        
+        <ng-template ngbTabContent>
+            
+                <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+
+                    <!--Table head-->
+                    <thead>
+                      <tr>
+                        <th>#</th>
+                        <th>Name</th>
+                        <th>Surname</th>
+                        <th>Country</th>
+                        <th>City</th>
+                        <th>Position</th>
+        
+                      </tr>
+                    </thead>
+                    <!--Table head-->
+        
+                    <!--Table body-->
+                    <tbody>
+                      <tr>
+                        <th scope="row">4</th>
+                        <td>Jerry</td>
+                        <td>Horwitz</td>
+                        <td>Italy</td>
+                        <td>Bari</td>
+                        <td>Editor-in-chief</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">5</th>
+                        <td>Janis</td>
+                        <td>Joplin</td>
+                        <td>Poland</td>
+                        <td>Warsaw</td>
+                        <td>Video Maker</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">6</th>
+                        <td>Gary</td>
+                        <td>Winogrand</td>
+                        <td>Germany</td>
+                        <td>Berlin</td>
+                        <td>Photographer</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">7</th>
+                        <td>Angie</td>
+                        <td>Smith</td>
+                        <td>USA</td>
+                        <td>San Francisco</td>
+                        <td>Teacher</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">8</th>
+                        <td>John</td>
+                        <td>Mattis</td>
+                        <td>France</td>
+                        <td>Paris</td>
+                        <td>Actor</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">9</th>
+                        <td>Otto</td>
+                        <td>Morris</td>
+                        <td>Germany</td>
+                        <td>Munich</td>
+                        <td>Singer</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">9</th>
+                        <td>Otto</td>
+                        <td>Morris</td>
+                        <td>Germany</td>
+                        <td>Munich</td>
+                        <td>Singer</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">9</th>
+                        <td>Otto</td>
+                        <td>Morris</td>
+                        <td>Germany</td>
+                        <td>Munich</td>
+                        <td>Singer</td>
+        
+                      </tr>
+                      <tr>
+                        <th scope="row">9</th>
+                        <td>Otto</td>
+                        <td>Morris</td>
+                        <td>Germany</td>
+                        <td>Munich</td>
+                        <td>Singer</td>
+        
+                      </tr>
+            
+                    </tbody>
+                    <!--Table body-->
+        
+                  </table>
+        
+        </ng-template>
+     
+      </ngb-tab>
+      <ngb-tab>
+        <ng-template ngbTabTitle><b>Title</b></ng-template>
+        <ng-template ngbTabContent>  <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
+
+            <thead>
+                <tr>
+                  <th scope="col">#</th>
+                  <th scope="col">First</th>
+                  <th scope="col">Last</th>
+                  <th scope="col">Handle</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">1</th>
+                  <td>Mark</td>
+                  <td>Otto</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <th scope="row">2</th>
+                  <td>Jacob</td>
+                  <td>Thornton</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <th scope="row">3</th>
+                  <td colspan="2">Larry the Bird</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+
+          </table>
+
+        </ng-template>
+      </ngb-tab>
+      <ngb-tab title="Disabled">
+        <ng-template ngbTabContent>
+          <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+        </ng-template>
+      </ngb-tab>
+    </ngb-tabset>
+  </div>
+  </div>
+</div>
diff --git a/src/app/clients/view-loan/view-loan.component.scss b/src/app/clients/view-loan/view-loan.component.scss
new file mode 100644
index 000000000..eaa390c0a
--- /dev/null
+++ b/src/app/clients/view-loan/view-loan.component.scss
@@ -0,0 +1,12 @@
+.btn-flat {
+    filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false');
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    background-image:none;
+    border:0;
+}
+
+.card-color{
+    background-color:gray;
+}
\ No newline at end of file
diff --git a/src/app/clients/view-loan/view-loan.component.spec.ts b/src/app/clients/view-loan/view-loan.component.spec.ts
new file mode 100644
index 000000000..2d308be21
--- /dev/null
+++ b/src/app/clients/view-loan/view-loan.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ViewLoanComponent } from './view-loan.component';
+
+describe('ViewLoanComponent', () => {
+  let component: ViewLoanComponent;
+  let fixture: ComponentFixture<ViewLoanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewLoanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewLoanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/clients/view-loan/view-loan.component.ts b/src/app/clients/view-loan/view-loan.component.ts
new file mode 100644
index 000000000..41ba35844
--- /dev/null
+++ b/src/app/clients/view-loan/view-loan.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-view-loan',
+  templateUrl: './view-loan.component.html',
+  styleUrls: ['./view-loan.component.scss']
+})
+export class ViewLoanComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}