diff --git a/controllers/total/templates/total.pug b/controllers/total/templates/total.pug
index 06da3ea..0093a60 100644
--- a/controllers/total/templates/total.pug
+++ b/controllers/total/templates/total.pug
@@ -1,26 +1,8 @@
 extends ../../../templates/base.pug
 
 block content
-    table.table.table-bordered.table-striped.table-hover
-        thead
-            tr
-                th Course name
-                th Detected type
-                th Count in hours
-                th Count in TD equivalent
-        tbody
-            each course in courses
-                tr
-                    td #{course.name}
-                    td #{course.type}
-                    td #{course.time}
-                    td #{course.tdEquivalent}
-            tr.table-active
-                td
-                    strong #{total.name}
-                td
-                    strong #{total.type}
-                td
-                    strong #{total.time}
-                td
-                    strong #{total.tdEquivalent}
+    #loading Loading... please wait
+    #result
+
+block extrajs
+    script(src="/static/js/totalTable.js")
diff --git a/controllers/total/templates/totalTable.pug b/controllers/total/templates/totalTable.pug
new file mode 100644
index 0000000..608558a
--- /dev/null
+++ b/controllers/total/templates/totalTable.pug
@@ -0,0 +1,23 @@
+table.table.table-bordered.table-striped.table-hover
+    thead
+        tr
+            th Course name
+            th Detected type
+            th Count in hours
+            th Count in TD equivalent
+    tbody
+        each course in courses
+            tr
+                td #{course.name}
+                td #{course.type}
+                td #{course.time}
+                td #{course.tdEquivalent}
+        tr.table-active
+            td
+                strong #{total.name}
+            td
+                strong #{total.type}
+            td
+                strong #{total.time}
+            td
+                strong #{total.tdEquivalent}
diff --git a/controllers/total/urls.js b/controllers/total/urls.js
index 6ef5c38..a0be341 100644
--- a/controllers/total/urls.js
+++ b/controllers/total/urls.js
@@ -2,4 +2,5 @@ const url = require('create-url').url;
 
 module.exports = [
     url('/total/', 'total', 'total'),
+    url('/total-table', 'totalTable', 'totalTable'),
 ]
diff --git a/controllers/total/views.js b/controllers/total/views.js
index 7969220..1028d0b 100644
--- a/controllers/total/views.js
+++ b/controllers/total/views.js
@@ -1,7 +1,10 @@
 const cal = require('./calendar');
 
-module.exports.total = function(req, res, render) {
-    cal.getTotal(req.session.user, (table) => {
+function computeUserTable(user, callback) {
+
+    let result = {};
+
+    cal.getTotal(user, (table) => {
         let courses = [];
         let total = {
             name: "Total",
@@ -22,10 +25,22 @@ module.exports.total = function(req, res, render) {
             total.tdEquivalent += table[key].tdEquivalent;
         }
 
-        res.locals.courses = courses;
-        res.locals.total = total;
+        result.courses = courses;
+        result.total = total;
 
+        callback(result);
 
-        render('total.pug');
+    });
+}
+
+module.exports.total = function(req, res, render) {
+    render('total.pug');
+}
+
+module.exports.totalTable = function(req, res, render) {
+    computeUserTable(req.session.user, (result) => {
+        res.locals.courses = result.courses;
+        res.locals.total = total;
+        render('totalTable.pug');
     });
 }
diff --git a/static/js/totalTable.js b/static/js/totalTable.js
new file mode 100644
index 0000000..1ba5b01
--- /dev/null
+++ b/static/js/totalTable.js
@@ -0,0 +1,33 @@
+let loadingDiv = document.getElementById('loading');
+let resultDiv = document.getElementById('result');
+const timeout = 30000;
+
+function getTable() {
+    // Send XHR to totalTable
+    let xhr = new XMLHttpRequest();
+    xhr.timeout = timeout;
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                setData(xhr.responseText);
+            } else {
+                setError();
+            }
+        }
+    };
+    xhr.open('GET', '/total-table', true);
+    xhr.send();
+    window.xhr = xhr;
+}
+
+function setData(text) {
+    loadingDiv.style.display = "none";
+    resultDiv.innerHTML = text;
+}
+
+function setError() {
+    loadingDiv.style.display = "none";
+    resultDiv.innerHTML = "An error occured";
+}
+
+getTable();