diff --git a/controllers/total/templates/total.pug b/controllers/total/templates/total.pug
index 06da3ea..3e8068c 100644
--- a/controllers/total/templates/total.pug
+++ b/controllers/total/templates/total.pug
@@ -1,26 +1,46 @@
 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
+        .center
+            .loader
+            div Loading your calendar, please wait...
+
+    #error(style="display:none;")
+        .row
+            .col-2
+            .col-8
+                .alert.alert-danger
+                    .row
+                        .col-8
+                            .center.btn
+                                <strong>Error:</strong> could not connect to calendar
+                        .col-4
+                            button#tryAgain.btn.btn-primary Click here to try again
+            .col-2
+    #result
+
+block extracss
+    style.
+        .center {
+            text-align: center;
+        }
+
+        .loader {
+            display: inline-block;
+            text-align: center;
+            border: 16px solid #f3f3f3; /* Light grey */
+            border-top: 16px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+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..bb918d1 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 = result.total;
+        render('totalTable.pug');
     });
 }
diff --git a/static/js/totalTable.js b/static/js/totalTable.js
new file mode 100644
index 0000000..11f2bf3
--- /dev/null
+++ b/static/js/totalTable.js
@@ -0,0 +1,38 @@
+let loadingDiv = document.getElementById('loading');
+let errorDiv = document.getElementById('error');
+let resultDiv = document.getElementById('result');
+const timeout = 10000;
+
+function getTable() {
+    // Send XHR to totalTable
+    loadingDiv.style.display = "";
+    errorDiv.style.display = "none";
+
+    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();
+}
+
+function setData(text) {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "none";
+    resultDiv.innerHTML = text;
+}
+
+function setError() {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "";
+}
+
+document.getElementById('tryAgain').addEventListener('click', getTable);
+getTable();
diff --git a/templates/base.pug b/templates/base.pug
index 39fcf9b..d924a78 100644
--- a/templates/base.pug
+++ b/templates/base.pug
@@ -12,6 +12,7 @@ html
                 body {
                     padding-top: 65px;
                 }
+        block extracss
         title ADEjs
     body
         nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top