diff --git a/app/public/js/desktop.js b/app/public/js/desktop.js
index f349a03..3c72015 100644
--- a/app/public/js/desktop.js
+++ b/app/public/js/desktop.js
@@ -14,16 +14,16 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
   const confirmButtons = elem.parentElement.querySelectorAll(".modal-confirm");
   const steps = elem.parentElement.querySelectorAll(".js-step");
 
-  overlay.hidden = false;
-  modal.hidden = false;
+  overlay.style.display = "block";
+  modal.style.display = "block";
 
   const onClose = () => {
-    overlay.hidden = true;
-    modal.hidden = true;
+    overlay.style.display = "none";
+    modal.style.display = "none";
     steps.forEach((step) => {
-      step.hidden = true;
+      step.style.display = "none";
     });
-    if (steps[0]) steps[0].hidden = false;
+    if (steps[0]) steps[0].style.display = "block";
     if (afterClose) afterClose();
   };
 
@@ -34,11 +34,11 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
       let currentStep;
       steps.forEach((step, index) => {
         if (currentStep == index) {
-          step.hidden = false;
-        } else if (!step.hidden) {
+          step.style.display = "block";
+        } else if (step.style.display == "block") {
           currentStep = index;
           currentStep++;
-          if (currentStep < steps.length) step.hidden = true;
+          if (currentStep < steps.length) step.style.display = "none";
         }
       });
       if (currentStep == steps.length) {
@@ -88,9 +88,9 @@ composeButtons.forEach((composeButton) => {
       body += "&recipients=" + encodeURIComponent(recipients);
     }
 
-    publishButton.style.display = "none"; // hidden doesn't work on buttons
+    publishButton.style.display = "none";
     sendingMessage.innerHTML = "Loading...";
-    sendingMessage.hidden = false;
+    sendingMessage.style.display = "block";
 
     fetch(url, {
       method: "POST",
@@ -108,7 +108,7 @@ composeButtons.forEach((composeButton) => {
       modal.close();
       messageInput.value = "";
       publishButton.style.display = "block";
-      sendingMessage.hidden = true;
+      sendingMessage.style.display = "none";
     }, 1000);
   };
 
@@ -116,7 +116,7 @@ composeButtons.forEach((composeButton) => {
     sendingMessage.innerHTML = "Error";
     setTimeout(() => {
       publishButton.style.display = "block";
-      sendingMessage.hidden = true;
+      sendingMessage.style.display = "none";
     }, 1000);
   };
 
diff --git a/app/public/js/mobile.js b/app/public/js/mobile.js
index 209bf21..4308a93 100644
--- a/app/public/js/mobile.js
+++ b/app/public/js/mobile.js
@@ -22,12 +22,12 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
   const closeButton = elem.parentElement.querySelector(".js-modal-close");
   const backButtons = elem.parentElement.querySelectorAll(".js-modal-back");
 
-  overlay.hidden = false;
-  modal.hidden = false;
+  overlay.style.display = "block";
+  modal.style.display = "block";
 
   const onClose = () => {
-    overlay.hidden = true;
-    modal.hidden = true;
+    overlay.style.display = "none";
+    modal.style.display = "none";
     steps.forEach((step) => {
       step.style.display = "none";
     });
@@ -113,9 +113,9 @@ composeButtons.forEach((composeButton) => {
       body += "&recipients=" + encodeURIComponent(recipients);
     }
 
-    publishButton.style.display = "none"; // hidden doesn't work on buttons
+    publishButton.style.display = "none";
     sendingMessage.innerHTML = "Loading...";
-    sendingMessage.hidden = false;
+    sendingMessage.style.display = "block";
 
     fetch(url, {
       method: "POST",
@@ -133,7 +133,7 @@ composeButtons.forEach((composeButton) => {
       modal.close();
       messageInput.value = "";
       publishButton.style.display = "block";
-      sendingMessage.hidden = true;
+      sendingMessage.style.display = "none";
     }, 1000);
   };
 
@@ -141,7 +141,7 @@ composeButtons.forEach((composeButton) => {
     sendingMessage.innerHTML = "Error";
     setTimeout(() => {
       publishButton.style.display = "block";
-      sendingMessage.hidden = true;
+      sendingMessage.style.display = "none";
     }, 1000);
   };
 
diff --git a/app/public/mobile.css b/app/public/mobile.css
index 984f131..9cb123b 100644
--- a/app/public/mobile.css
+++ b/app/public/mobile.css
@@ -209,6 +209,9 @@ a.compose-new-button {
   padding: 0;
   height: auto;
 }
+.open-menu:hover {
+  background: none;
+}
 
 .menu-dash {
   width: 25px;
diff --git a/app/views/mobile/secrets.ejs b/app/views/mobile/secrets.ejs
index 63fdec1..5bd627c 100644
--- a/app/views/mobile/secrets.ejs
+++ b/app/views/mobile/secrets.ejs
@@ -1,5 +1,5 @@
 <div class="yellow-background <%= secretMessages.length > 0 ? "" : "no-secrets" %>">
-  <div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0;">
+  <div class="column-side-padding" style="margin: 25px 0 20px 0; <%= secretMessages.length > 0 ? "display: none" : "" %>">
     <div style="font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
       <div style="font-size: 50px">🤫</div>
       <div style="padding-top: 20px; font-size: 16px">You don't have any secret messages yet</div>
@@ -31,8 +31,8 @@
             </small>
           </div>
         </button>
-        <div class="overlay" hidden></div>
-        <div class="modal" hidden>
+        <div class="overlay" style="display: none"></div>
+        <div class="modal" style="display: none">
           <% chat.messages.reverse().map((message, index) => { %>
             <div class="modal-group js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
               <div class="modal-footer">
diff --git a/app/views/mobile/secrets/_compose_multiple.ejs b/app/views/mobile/secrets/_compose_multiple.ejs
index 5e4771b..eb7c6c2 100644
--- a/app/views/mobile/secrets/_compose_multiple.ejs
+++ b/app/views/mobile/secrets/_compose_multiple.ejs
@@ -2,8 +2,8 @@
   <button class="js-compose-secret-message compose-new-button">
     <div style="font-size: 30px">✍️</div>
   </button>
-  <div class="overlay" hidden></div>
-  <div class="modal" hidden>
+  <div class="overlay" style="display: none"></div>
+  <div class="modal" style="display: none">
     <div class="modal-group js-step">
       <div class="modal-footer">
         <a href="javascript:;" class="js-modal-close" role="button">Close</a>
@@ -19,7 +19,7 @@
       <div class="modal-footer">
         <a href="javascript:;" class="js-modal-back" role="button">⬅ Back</a>
         <button class="modal-confirm js-secret-publish">Send</button>
-        <div hidden class="js-sending-message"></div>
+        <div style="display: none" class="js-sending-message"></div>
       </div>
       <div class="modal-header">Choose the recipients</div>
       <div class="modal-body js-recipients-list">
diff --git a/app/views/mobile/secrets/_compose_single.ejs b/app/views/mobile/secrets/_compose_single.ejs
index c932d89..8f8a832 100644
--- a/app/views/mobile/secrets/_compose_single.ejs
+++ b/app/views/mobile/secrets/_compose_single.ejs
@@ -1,9 +1,9 @@
-<div class="overlay" hidden></div>
-<div class="modal" hidden>
+<div class="overlay" style="display: none"></div>
+<div class="modal" style="display: none">
   <div class="modal-footer">
     <a href="javascript:;" class="js-modal-close" role="button">Close</a>
     <button class="modal-confirm js-secret-publish">Send</button>
-    <div hidden class="js-sending-message"></div>
+    <div style="display: none" class="js-sending-message"></div>
   </div>
   <div class="modal-header">Write a secret message to <%= profile.name %></div>
   <div class="modal-body">
diff --git a/app/views/secrets/_compose_multiple.ejs b/app/views/secrets/_compose_multiple.ejs
index e1686a9..76f7c3a 100644
--- a/app/views/secrets/_compose_multiple.ejs
+++ b/app/views/secrets/_compose_multiple.ejs
@@ -2,8 +2,8 @@
   <button class="secret-button js-compose-secret-message" style="padding: 10px 14px; justify-content: center">
     ✍️ Send a Secret
   </button>
-  <div class="overlay" hidden></div>
-  <div class="modal" hidden>
+  <div class="overlay" style="display: none"></div>
+  <div class="modal" style="display: none">
     <div class="js-step">
       <div class="modal-header">Write a secret message</div>
       <div class="modal-body">
@@ -14,7 +14,7 @@
         <button class="modal-confirm">Next</button>
       </div>
     </div>
-    <div class="js-step" hidden>
+    <div class="js-step" style="display: none">
       <div class="modal-header">Choose the recipients</div>
       <div class="modal-body js-recipients-list">
         <% allFollowing = friends.friends.concat(friends.requestsSent) %>
@@ -34,7 +34,7 @@
       <div class="modal-footer">
         this message will disapear right after being read
         <button class="modal-confirm js-secret-publish">Send</button>
-        <div hidden class="js-sending-message"></div>
+        <div style="display: none" class="js-sending-message"></div>
       </div>
     </div>
   </div>
diff --git a/app/views/secrets/_compose_single.ejs b/app/views/secrets/_compose_single.ejs
index ea080a5..96d762a 100644
--- a/app/views/secrets/_compose_single.ejs
+++ b/app/views/secrets/_compose_single.ejs
@@ -1,5 +1,5 @@
-<div class="overlay" hidden></div>
-<div class="modal" hidden>
+<div class="overlay" style="display: none"></div>
+<div class="modal" style="display: none">
   <div class="modal-header">Write a secret message to <%= profile.name %></div>
   <div class="modal-body">
     <textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
@@ -7,6 +7,6 @@
   <div class="modal-footer">
     this message will disapear right after being read
     <button class="modal-confirm js-secret-publish">Send</button>
-    <div hidden class="js-sending-message"></div>
+    <div style="display: none" class="js-sending-message"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/secrets/_messages.ejs b/app/views/secrets/_messages.ejs
index 5500190..4150848 100644
--- a/app/views/secrets/_messages.ejs
+++ b/app/views/secrets/_messages.ejs
@@ -1,4 +1,4 @@
-<div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0; font-size: 14px;">
+<div class="column-side-padding" style="margin: 25px 0 20px 0; font-size: 14px; <%= secretMessages.length > 0 ? "display: none" : "" %>">
   🤫 You don't have any secret messages yet
 </div>
 <% secretMessages.map(chat => { %>
@@ -26,10 +26,10 @@
           </small>
         </div>
       </button>
-      <div class="overlay" hidden></div>
-      <div class="modal" hidden>
+      <div class="overlay" style="display:none"></div>
+      <div class="modal" style="display:none">
         <% chat.messages.reverse().map((message, index) => { %>
-          <div class="js-step" <%= index > 0 ? "hidden" : "" %>>
+          <div class="js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
             <a href="<%= profileUrl(chat.authorProfile.id) %>" class="modal-header">
               <img src="<%= profileImageUrl(chat.authorProfile) %>" class="post-profile-pic" />
               <div style="padding-left: 10px"><%= chat.authorProfile.name %></div>