diff --git a/themes/hugo-theme-flat/layouts/partials/side-calendar.html b/themes/hugo-theme-flat/layouts/partials/side-calendar.html
index 38fcd69..c6e84e4 100644
--- a/themes/hugo-theme-flat/layouts/partials/side-calendar.html
+++ b/themes/hugo-theme-flat/layouts/partials/side-calendar.html
@@ -1,6 +1,6 @@
 <div class="side-calendar">
     <h2>Termine</h2>
-    <ul id="calendar">
+    <ul id="calendar" class="loading">
         <br>
         <a href="https://cloud.c3re.de/apps/calendar/p/RLKKkdjNYgXH8yEz/dayGridMonth/now">Zum Kalender</a>
         <br>
diff --git a/themes/hugo-theme-flat/static/css/style.css b/themes/hugo-theme-flat/static/css/style.css
index c3b89eb..a8302dc 100644
--- a/themes/hugo-theme-flat/static/css/style.css
+++ b/themes/hugo-theme-flat/static/css/style.css
@@ -212,6 +212,10 @@ a.external:after {
   margin-bottom: 0;
 }
 
+#calendar.loading{
+  height: 100em;
+}
+
 #calendar .row {
   display: block;
 }
diff --git a/themes/hugo-theme-flat/static/js/calendar.js b/themes/hugo-theme-flat/static/js/calendar.js
index a407574..4fd0987 100644
--- a/themes/hugo-theme-flat/static/js/calendar.js
+++ b/themes/hugo-theme-flat/static/js/calendar.js
@@ -13,6 +13,8 @@ document.addEventListener("DOMContentLoaded", function () {
       let cal = JSON.parse(xmlHttp.responseText);
       let $ = jQuery;
       let box = $("#calendar");
+      
+        box.removeClass("loading");
       for (let item of cal) {
         let li = $("<li/>");
         //li.text(item.summary)