diff --git a/radicale/web/internal_data/fn.js b/radicale/web/internal_data/fn.js
index 5ddbbde..6ba9df0 100644
--- a/radicale/web/internal_data/fn.js
+++ b/radicale/web/internal_data/fn.js
@@ -506,7 +506,7 @@ function LoginScene() {
             if (user) {
                 error = "";
                 // setup logout
-                logout_view.style.display = "block";
+                logout_view.classList.remove("hidden");
                 logout_btn.onclick = onlogout;
                 logout_user_form.textContent = user;
                 // Fetch principal
@@ -560,7 +560,7 @@ function LoginScene() {
     }
 
     function remove_logout() {
-        logout_view.style.display = "none";
+        logout_view.classList.add("hidden");
         logout_btn.onclick = null;
         logout_user_form.textContent = "";
     }
@@ -569,7 +569,7 @@ function LoginScene() {
         remove_logout();
         fill_form();
         form.onsubmit = onlogin;
-        html_scene.style.display = "block";
+        html_scene.classList.remove("hidden");
         let direct_login = false;
         if (typeof(sessionStorage) !== "undefined") {
             // Try direct login when scene is shown for the first time and credentials are stored
@@ -591,7 +591,7 @@ function LoginScene() {
     };
     this.hide = function() {
         read_form();
-        html_scene.style.display = "none";
+        html_scene.classList.add("hidden");
         form.onsubmit = null;
     };
     this.release = function() {
@@ -612,10 +612,10 @@ function LoginScene() {
 function LoadingScene() {
     let html_scene = document.getElementById("loadingscene");
     this.show = function() {
-        html_scene.style.display = "block";
+        html_scene.classList.remove("hidden");
     };
     this.hide = function() {
-        html_scene.style.display = "none";
+        html_scene.classList.add("hidden");
     };
     this.release = function() {};
 }
@@ -636,7 +636,6 @@ function CollectionsScene(user, password, collection, onerror) {
     let upload_btn = html_scene.querySelector("[name=upload]");
 
     /** @type {?number} */ let scene_index = null;
-    let saved_template_display = null;
     /** @type {?XMLHttpRequest} */ let collections_req = null;
     /** @type {?Array<Collection>} */ let collections = null;
     /** @type {Array<Node>} */ let nodes = [];
@@ -698,6 +697,7 @@ function CollectionsScene(user, password, collection, onerror) {
     function show_collections(collections) {
         collections.forEach(function (collection) {
             let node = template.cloneNode(true);
+            node.classList.remove("hidden");
             let title_form = node.querySelector("[name=title]");
             let description_form = node.querySelector("[name=description]");
             let url_form = node.querySelector("[name=url]");
@@ -707,7 +707,7 @@ function CollectionsScene(user, password, collection, onerror) {
             if (collection.color) {
                 color_form.style.color = collection.color;
             } else {
-                color_form.style.display = "none";
+                color_form.classList.add("hidden");
             }
             let possible_types = [CollectionType.ADDRESSBOOK];
             [CollectionType.CALENDAR, ""].forEach(function(e) {
@@ -721,7 +721,7 @@ function CollectionsScene(user, password, collection, onerror) {
             });
             possible_types.forEach(function(e) {
                 if (e !== collection.type) {
-                    node.querySelector("[name=" + e + "]").style.display = "none";
+                    node.querySelector("[name=" + e + "]").classList.add("hidden");
                 }
             });
             title_form.textContent = collection.displayname || collection.href;
@@ -731,7 +731,7 @@ function CollectionsScene(user, password, collection, onerror) {
             url_form.textContent = href;
             delete_btn.onclick = function(ev) {return ondelete(collection);};
             edit_btn.onclick = function(ev) {return onedit(collection);};
-            node.style.display = saved_template_display;
+            node.classList.remove("hidden");
             nodes.push(node);
             template.parentNode.insertBefore(node, template);
         });
@@ -756,9 +756,7 @@ function CollectionsScene(user, password, collection, onerror) {
     }
 
     this.show = function() {
-        saved_template_display = template.style.display;
-        template.style.display = "none";
-        html_scene.style.display = "block";
+        html_scene.classList.remove("hidden");
         new_btn.onclick = onnew;
         upload_btn.onclick = onupload;
         filesInputForm.reset();
@@ -771,8 +769,7 @@ function CollectionsScene(user, password, collection, onerror) {
         }
     };
     this.hide = function() {
-        html_scene.style.display = "none";
-        template.style.display = saved_template_display;
+        html_scene.classList.add("hidden");
         scene_index = scene_stack.length - 1;
         new_btn.onclick = null;
         upload_btn.onclick = null;
@@ -780,7 +777,7 @@ function CollectionsScene(user, password, collection, onerror) {
         collections = null;
         // remove collection
         nodes.forEach(function(node) {
-            template.parentNode.removeChild(node);
+            node.parentNode.removeChild(node);
         });
         nodes = [];
     };
@@ -806,12 +803,7 @@ function CollectionsScene(user, password, collection, onerror) {
 function UploadCollectionScene(user, password, collection, files) {
     let html_scene = document.getElementById("uploadcollectionscene");
     let template = html_scene.querySelector("[name=filetemplate]");
-    let template_pending_form = template.querySelector("[name=pending]");
-    let template_success_form = template.querySelector("[name=success]");
-    let template_error_form = template.querySelector("[name=error]");
-    let saved_template_display = null;
     let close_btn = html_scene.querySelector("[name=close]");
-    let saved_close_btn_display = null;
 
     /** @type {?number} */ let scene_index = null;
     /** @type {?XMLHttpRequest} */ let upload_req = null;
@@ -824,7 +816,7 @@ function UploadCollectionScene(user, password, collection, files) {
                 if (errors.every(error => error === null)) {
                     pop_scene(scene_index - 1);
                 } else {
-                    close_btn.style.display = saved_close_btn_display;
+                    close_btn.classList.remove("hidden");
                 }
             } else {
                 let file = files[errors.length];
@@ -862,41 +854,39 @@ function UploadCollectionScene(user, password, collection, files) {
         let success_form = nodes[i].querySelector("[name=success]");
         let error_form = nodes[i].querySelector("[name=error]");
         if (errors.length > i) {
-            pending_form.style.display = "none";
+            pending_form.classList.add("hidden");
             if (errors[i]) {
-                success_form.style.display = "none";
+                success_form.classList.add("hidden");
                 error_form.textContent = "Error: " + errors[i];
-                error_form.style.display = template_error_form.style.display;
+                error_form.classList.remove("hidden");
             } else {
-              success_form.style.display = template_success_form.style.display;
-              error_form.style.display = "none";
+              success_form.classList.remove("hidden");
+              error_form.classList.add("hidden");
             }
         } else {
-            pending_form.style.display = template_pending_form.style.display;
-            success_form.style.display = "none";
-            error_form.style.display = "none";
+            pending_form.classList.remove("hidden");
+            success_form.classList.add("hidden");
+            error_form.classList.add("hidden");
         }
     }
 
     this.show = function() {
-        saved_template_display = template.style.display;
-        template.style.display = "none";
-        html_scene.style.display = "block";
-        saved_close_btn_display = close_btn.style.display;
+        html_scene.classList.remove("hidden");
         if (errors.length < files.length) {
-            close_btn.style.display = "none";
+            close_btn.classList.add("hidden");
         }
         close_btn.onclick = onclose;
         nodes = [];
         for (let i = 0; i < files.length; i++) {
             let file = files[i];
             let node = template.cloneNode(true);
+            node.classList.remove("hidden");
             let name_form = node.querySelector("[name=name]");
             name_form.textContent = file.name;
-            node.style.display = saved_template_display;
+            node.classList.remove("hidden");
             nodes.push(node);
             updateFileStatus(i);
-            template.parentNode.insertBefore(node,template);
+            template.parentNode.insertBefore(node, template);
         }
         if (scene_index === null) {
             scene_index = scene_stack.length - 1;
@@ -905,12 +895,11 @@ function UploadCollectionScene(user, password, collection, files) {
     };
 
     this.hide = function() {
-        html_scene.style.display = "none";
-        template.style.display = saved_template_display;
-        close_btn.style.display = saved_close_btn_display;
+        html_scene.classList.add("hidden");
+        close_btn.classList.remove("hidden");
         close_btn.onclick = null;
         nodes.forEach(function(node) {
-            template.parentNode.removeChild(node);
+            node.parentNode.removeChild(node);
         });
         nodes = null;
     };
@@ -976,14 +965,14 @@ function DeleteCollectionScene(user, password, collection) {
     this.show = function() {
         this.release();
         scene_index = scene_stack.length - 1;
-        html_scene.style.display = "block";
+        html_scene.classList.remove("hidden");
         title_form.textContent = collection.displayname || collection.href;
         error_form.textContent = error ? "Error: " + error : "";
         delete_btn.onclick = ondelete;
         cancel_btn.onclick = oncancel;
     };
     this.hide = function() {
-        html_scene.style.display = "none";
+        html_scene.classList.add("hidden");
         cancel_btn.onclick = null;
         delete_btn.onclick = null;
     };
@@ -1125,7 +1114,7 @@ function CreateEditCollectionScene(user, password, collection) {
         type_form = type_form.cloneNode(true);
         saved_type_form.parentNode.replaceChild(type_form, saved_type_form);
         remove_invalid_types();
-        html_scene.style.display = "block";
+        html_scene.classList.remove("hidden");
         if (edit) {
             title_form.textContent = collection.displayname || collection.href;
         }
@@ -1135,7 +1124,7 @@ function CreateEditCollectionScene(user, password, collection) {
     };
     this.hide = function() {
         read_form();
-        html_scene.style.display = "none";
+        html_scene.classList.add("hidden");
         // restore type_form
         type_form.parentNode.replaceChild(saved_type_form, type_form);
         type_form = saved_type_form;
diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 2d582e5..7a1a74a 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -8,14 +8,17 @@
 <title>Web interface for Radicale</title>
 <link href="css/main.css" media="screen" rel="stylesheet">
 <link href="css/icon.png" type="image/png" rel="shortcut icon">
+<style>
+    .hidden {display:none;}
+</style>
 
 <nav>
     <ul>
-        <li id="logoutview" style="display: none;"><a href="" name="link">Logout [<span name="user" style="word-wrap:break-word;"></span>]</a></li>
+        <li id="logoutview" class="hidden"><a href="" name="link">Logout [<span name="user" style="word-wrap:break-word;"></span>]</a></li>
     </ul>
 </nav>
 
-<section id="loginscene" style="display: none;">
+<section id="loginscene" class="hidden">
     <h1>Login</h1>
     <form name="form">
         <input name="user" type="text" placeholder="Username"><br>
@@ -25,18 +28,18 @@
     </form>
 </section>
 
-<section id="loadingscene" style="display: none;">
+<section id="loadingscene" class="hidden">
     <h1>Loading</h1>
     Please wait...
 </section>
 
-<section id="collectionsscene" style="display: none;">
+<section id="collectionsscene" class="hidden">
     <h1>Collections</h1>
     <ul>
         <li><a href="" name="new">Create new addressbook or calendar</a></li>
         <li><a href="" name="upload">Upload addressbook or calendar</a></li>
     </ul>
-    <article name="collectiontemplate">
+    <article name="collectiontemplate" class="hidden">
         <h2><span name="color">█ </span><span name="title" style="word-wrap:break-word;">Title</span> <small>[<span name="ADDRESSBOOK">addressbook</span><span name="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</span><span name="CALENDAR_JOURNAL">calendar and journal</span><span name="CALENDAR_TASKS">calendar and tasks</span><span name="JOURNAL_TASKS">journal and tasks</span><span name="CALENDAR">calendar</span><span name="JOURNAL">journal</span><span name="TASKS">tasks</span>]</small></h2>
         <span name="description" style="word-wrap:break-word;">Description</span>
         <ul>
@@ -47,7 +50,7 @@
     </article>
 </section>
 
-<section id="editcollectionscene" style="display: none;">
+<section id="editcollectionscene" class="hidden">
     <h1>Edit collection</h1>
     <h2>Edit <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>:</h2>
     <form>
@@ -74,7 +77,7 @@
     </form>
 </section>
 
-<section id="createcollectionscene" style="display: none;">
+<section id="createcollectionscene" class="hidden">
     <h1>Create new collection</h1>
     <form>
         Title:<br>
@@ -100,10 +103,10 @@
     </form>
 </section>
 
-<section id="uploadcollectionscene" style="display: none;">
+<section id="uploadcollectionscene" class="hidden">
     <h1>Upload collection</h1>
     <ul>
-        <li name="filetemplate">
+        <li name="filetemplate" class="hidden">
                 Upload <span name="name" style="word-wrap:break-word;font-weight:bold;">name</span>:<br>
                 <span name="pending">Please wait...</span>
                 <span style="color: #00A400;" name="success">Finished</span>
@@ -115,7 +118,7 @@
     </form>
 </section>
 
-<section id="deletecollectionscene" style="display: none;">
+<section id="deletecollectionscene" class="hidden">
     <h1>Delete collection</h1>
     <h2>Delete <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>?</h2>
     <span style="color: #A40000;" name="error"></span><br>