diff --git a/index.html b/index.html
index 0364f0343..693d0771a 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,9 @@ <h1>Mortgage Calculator</h1>
         </div>
     </div>
     <h2>Monthly Payment: <span id="monthlyPayment" class="currency"></span></h2>
+    <h3>Monthly Rate: <span id="monthlyRate"></span></h3>
+    <h4>Amortization: <span id="amortization"></span></h4>
 </div>
-<script src="js/main.js"></script>
+<script src="build/main.bundle.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 6565a8969..ed6b0237f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,15 +1,30 @@
-var calculateMonthlyPayment = function (principal, years, rate) {
-    if (rate) {
-        var monthlyRate = rate / 100 / 12;
-    }
-    var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12)));
-    return monthlyPayment;
-};
+import Mortgage from './mortgage2'
 
-document.getElementById('calcBtn').addEventListener('click', function () {
-    var principal = document.getElementById("principal").value;
-    var years = document.getElementById("years").value;
-    var rate = document.getElementById("rate").value;
-    var monthlyPayment = calculateMonthlyPayment(principal, years, rate);
-    document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2);
+document.getElementById('calcBtn').addEventListener('click', () => {
+    let principal = document.getElementById("principal").value;
+    let years = document.getElementById("years").value;
+    let rate = document.getElementById("rate").value;
+    let mortgage = new Mortgage(principal, years, rate);
+    document.getElementById("monthlyPayment").innerHTML = mortgage.monthlyPayment.toFixed(2);
+    document.getElementById("monthlyRate").innerHTML = (rate / 12).toFixed(2);
+    let html = "";
+    mortgage.amortization.forEach((year, index) => html += `
+        <tr>
+            <td>${index + 1}</td>
+            <td class="currency">${Math.round(year.principalY)}</td>
+            <td class="stretch">
+                <div class="flex">
+                    <div class="bar principal"
+                         style="flex:${year.principalY};-webkit-flex:${year.principalY}">
+                    </div>
+                    <div class="bar interest"
+                         style="flex:${year.interestY};-webkit-flex:${year.interestY}">
+                    </div>
+                </div>
+            </td>
+            <td class="currency left">${Math.round(year.interestY)}</td>
+            <td class="currency">${Math.round(year.balance)}</td>
+        </tr>
+    `);
+    document.getElementById("amortization").innerHTML = html;
 });
\ No newline at end of file
diff --git a/js/mortgage.js b/js/mortgage.js
new file mode 100644
index 000000000..d8c3acf43
--- /dev/null
+++ b/js/mortgage.js
@@ -0,0 +1,27 @@
+export let calculateMonthlyPayment = (principal, years, rate) => {
+    let monthlyRate = 0;
+    if (rate) {
+        monthlyRate = rate / 100 / 12;
+    }
+    let monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12)));
+    return {principal, years, rate, monthlyPayment, monthlyRate};
+};
+
+export let calculateAmortization = (principal, years, rate) => {
+    let {monthlyRate, monthlyPayment} = calculateMonthlyPayment(principal, years, rate);
+    let balance = principal;
+    let amortization = [];
+    for (let y=0; y<years; y++) {
+        let interestY = 0;  //Interest payment for year y
+        let principalY = 0; //Principal payment for year y
+        for (let m=0; m<12; m++) {
+            let interestM = balance * monthlyRate;       //Interest payment for month m
+            let principalM = monthlyPayment - interestM; //Principal payment for month m
+            interestY = interestY + interestM;
+            principalY = principalY + principalM;
+            balance = balance - principalM;
+        }
+        amortization.push({principalY, interestY, balance});
+    }
+    return {monthlyPayment, monthlyRate, amortization};
+};
\ No newline at end of file
diff --git a/js/mortgage2.js b/js/mortgage2.js
new file mode 100644
index 000000000..80c238c88
--- /dev/null
+++ b/js/mortgage2.js
@@ -0,0 +1,35 @@
+export default class Mortgage {
+    
+    constructor(principal, years, rate) {
+        this.principal = principal;
+        this.years = years;
+        this.rate = rate;
+    }
+    
+    get monthlyPayment() {
+        let monthlyRate = this.rate / 100 / 12;
+        return this.principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate),
+                    this.years * 12)));
+    }
+    
+    get amortization() {
+        let monthlyPayment = this.monthlyPayment;
+        let monthlyRate = this.rate / 100 / 12;
+        let balance = this.principal;
+        let amortization = [];
+        for (let y=0; y<this.years; y++) {
+            let interestY = 0;
+            let principalY = 0;
+            for (let m=0; m<12; m++) {
+                let interestM = balance * monthlyRate;
+                let principalM = monthlyPayment - interestM;
+                interestY = interestY + interestM;
+                principalY = principalY + principalM;
+                balance = balance - principalM;
+            }
+            amortization.push({principalY, interestY, balance});
+        }
+        return amortization;
+    }
+    
+}
\ No newline at end of file
diff --git a/js/rate-service-mock.js b/js/rate-service-mock.js
new file mode 100644
index 000000000..18fdadecb
--- /dev/null
+++ b/js/rate-service-mock.js
@@ -0,0 +1,20 @@
+let rates = [
+    {
+        "name": "30 years fixed",
+        "rate": "13",
+        "years": "30"
+    },
+    {
+        "name": "20 years fixed",
+        "rate": "2.8",
+        "years": "20"
+    }
+];
+
+export let findAll = () => new Promise((resolve, reject) => {
+    if (rates) {
+        resolve(rates);
+    } else {
+        reject("No rates");
+    }
+});
\ No newline at end of file
diff --git a/js/ratefinder.js b/js/ratefinder.js
new file mode 100644
index 000000000..bda613556
--- /dev/null
+++ b/js/ratefinder.js
@@ -0,0 +1,9 @@
+import * as service from './rate-service-mock';
+    
+service.findAll()
+    .then(rates => {
+        let html = '';
+        rates.forEach(rate => html += `<tr><td>${rate.name}</td><td>${rate.years}</td><td>${rate.rate}%</td></tr>`);
+        document.getElementById("rates").innerHTML = html;
+    })
+    .catch(e => console.log(e));
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..321b2c478
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "es6-tutorial",
+  "version": "1.0.0",
+  "description": "After reading the notes below, start the tutorial [here](http://ccoenraets.github.io/es6-tutorial).",
+  "main": "index.js",
+  "scripts": {
+    "start": "http-server",
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maismin/es6-tutorial.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/maismin/es6-tutorial/issues"
+  },
+  "homepage": "https://github.com/maismin/es6-tutorial#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "http-server": "^0.10.0",
+    "webpack": "^3.5.5"
+  }
+}
diff --git a/ratefinder.html b/ratefinder.html
new file mode 100644
index 000000000..ae60d5f8a
--- /dev/null
+++ b/ratefinder.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+</head>
+<body>
+    <table id="rates"></table>
+    <script src="build/ratefinder.bundle.js"></script>
+</body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..d01b75ba7
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,28 @@
+ var path = require('path');
+ var webpack = require('webpack');
+
+ module.exports = {
+    entry: {
+    app: './js/main.js',
+    ratefinder: './js/ratefinder.js'
+    },
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: '[name].bundle.js'
+    },
+     module: {
+         loaders: [
+             {
+                 test: /\.js$/,
+                 loader: 'babel-loader',
+                 query: {
+                     presets: ['es2015']
+                 }
+             }
+         ]
+     },
+     stats: {
+         colors: true
+     },
+     devtool: 'source-map'
+ };
\ No newline at end of file