diff --git a/package-lock.json b/package-lock.json
index d492e27..dd676c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@ui5/webcomponents": "^1.11.0",
         "@ui5/webcomponents-icons": "^1.11.0",
+        "highcharts": "^10.3.3",
         "moment": "^2.29.4"
       },
       "devDependencies": {
@@ -519,6 +520,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/highcharts": {
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-10.3.3.tgz",
+      "integrity": "sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw=="
+    },
     "node_modules/is-core-module": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
diff --git a/package.json b/package.json
index 7d0bd1c..4249df2 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --host"
   },
   "devDependencies": {
     "vite": "^4.1.0"
@@ -14,6 +14,7 @@
   "dependencies": {
     "@ui5/webcomponents": "^1.11.0",
     "@ui5/webcomponents-icons": "^1.11.0",
+    "highcharts": "^10.3.3",
     "moment": "^2.29.4"
   }
 }
diff --git a/src/css/style.css b/src/css/style.css
index 1e66fdb..5108052 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -95,16 +95,18 @@ ui5-table#extraPaymentsTable {
 }
 
 div#lineChart {
+  height: 400px;
   flex-grow: 1;
   flex-shrink: 1;
 }
 
 div#pieChart {
+  height: 400px;
   flex-grow: 1;
   flex-shrink: 1;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 800px) {
   body {
     margin: 0;
     display: flex;
diff --git a/src/js/calcLoan.js b/src/js/calcLoan.js
index f038f3c..8db59c2 100644
--- a/src/js/calcLoan.js
+++ b/src/js/calcLoan.js
@@ -2,8 +2,10 @@ import { validInput, validateAdditionalPayments } from "./validateInput";
 import { renderMonthTableStart, renderMonthTableRow, renderMonthTableEnd } from "./monthTable";
 import { gatherAdditionalPayments } from "./extraPayment";
 import { drawLineChart, drawPieChart } from "./charts";
+import { drawLineChartH, drawPieChartH } from "./chartsH";
 import { loanData } from "./loadData";
 
+
 import moment from 'moment';
 
 export function setUpCalc(element) {
@@ -127,6 +129,7 @@ export function setUpCalc(element) {
             }
 
             // Line chart data
+            // Google chards data
             includeAddPayments && loanData.addLineChartData([
                 index,
                 remainingPrincipal,
@@ -210,11 +213,11 @@ export function setUpCalc(element) {
         const data = new loanData(startDate.format("DD/MM/YYYY"), loanAmount, interestRate, loanTerm, fixedPrincipal);
         data.additionalPayments = additionalPayments;
         data.lineChartData = [
-            ["Month", "Principal", "Interest"],
+            //["Month", "Principal", "Interest"],
             [0, loanAmount, 0],
         ];
         data.pieChartData = [
-            ["Principal", "Interest"]
+            //["Principal", "Interest"]
         ];
 
         additionalPayments.length && calcLoanData(data, false);
@@ -230,8 +233,8 @@ export function setUpCalc(element) {
         tableDiv.innerHTML = tableHtml;
 
         // Charts
-        drawLineChart(data.lineChartData);
-        drawPieChart(data.pieChartData);
+        drawLineChartH(data.lineChartData);
+        drawPieChartH(data.pieChartData);
 
         data.destroy();
     }
diff --git a/src/js/charts.js b/src/js/charts.js
index 201d7a5..3d49536 100644
--- a/src/js/charts.js
+++ b/src/js/charts.js
@@ -10,7 +10,7 @@ const drawLineChart = lineChartData => {
         },
         hAxis: { title: "Month" },
         vAxis: { title: "Amount" },
-        //width: 600
+        width: "100%"
     };
 
     var chart = new google.visualization.LineChart(
@@ -28,8 +28,8 @@ const drawPieChart = pieChartData => {
             position: "right",
             alignment: "center"
         },
-        //width: 500,
-        pieSliceText: 'value'
+        pieSliceText: 'value',
+        width: "100%"
     };
 
     var chart = new google.visualization.PieChart(
diff --git a/src/js/chartsH.js b/src/js/chartsH.js
new file mode 100644
index 0000000..f0da925
--- /dev/null
+++ b/src/js/chartsH.js
@@ -0,0 +1,108 @@
+import HighCharts from 'highcharts';
+
+const extractToLineChartSeries = (data, seriesName, index) => {
+    const seriesData = data.map(dataPoint => ({
+        x: dataPoint[0],
+        y: dataPoint[index]
+    }));
+    return {
+        name: seriesName,
+        data: seriesData
+    }
+};
+
+const drawLineChartH = lineChartData => {
+    const remainingPrincipal = extractToLineChartSeries(lineChartData, "Principal", 1);
+    const totalInterest = extractToLineChartSeries(lineChartData, "Interest", 2);
+
+    console.log(remainingPrincipal);
+    console.log(totalInterest);
+
+    remainingPrincipal.color = '#0070f2';
+    totalInterest.color = '#aa0808';
+
+    const options = {
+        title: {
+            text: 'Loan Payment Schedule'
+        },
+        xAxis: {
+            title: {
+                text: 'Month'
+            }
+        },
+        yAxis: {
+            title: {
+                text: 'Amount'
+            }
+        },
+        series: [
+            remainingPrincipal,
+            totalInterest
+        ],
+        legend: {
+            align: 'center',
+            verticalAlign: 'bottom'
+        },
+        tooltip: {
+            shared: true,
+            useHTML: true,
+            headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
+            pointFormat:
+                '<tr><td style="color: {series.color}">{series.name} </td>' +
+                '<td style="text-align: right"><b>{point.y}</b></td></tr>',
+            footerFormat: '</table>',
+            valueDecimals: 2
+        }
+    };
+
+    HighCharts.chart('lineChart', options);
+};
+
+const drawPieChartH = pieChartData => {
+    console.log(pieChartData)
+    const options = {
+        title: {
+            text: 'Loan Payment'
+        },
+        colors: [
+            '#ff0000',
+            '#0d233a'
+        ],
+        series: [{
+            type: 'pie',
+            data: [
+                {
+                    name: pieChartData[0][0],
+                    color: '#0070f2',
+                    y: pieChartData[0][1]
+                },
+                {
+                    name: pieChartData[1][0],
+                    color: '#aa0808',
+                    y: pieChartData[1][1]
+                }
+            ]
+        }],
+        legend: {
+            align: 'right',
+            verticalAlign: 'middle'
+        },
+        tooltip: {
+            useHTML: true,
+            headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
+            pointFormat:
+                '<tr><td> {point.y} </td></tr>' +
+                '<tr><td style="text-align: right"><b>{point.percentage:.2f} %</b></td></tr>',
+            footerFormat: '</table>',
+            valueDecimals: 2
+            //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        }
+    };
+
+    HighCharts.chart('pieChart', options);
+};
+
+export {
+    drawLineChartH,
+    drawPieChartH
+};
diff --git a/src/js/main.js b/src/js/main.js
index 49a63fa..0fd6ca9 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -40,3 +40,9 @@ startDate.setAttribute('value', moment().format('DD/MM/YYYY'));
 
 setUpExtraPayments(document.getElementById('addExtraPayment'));
 setUpCalc(document.getElementById('calcBtn'));
+
+// window.onresize = doALoadOfStuff;
+
+// function doALoadOfStuff() {
+//     //do a load of stuff
+// }