diff --git a/src/app.scss b/src/app.scss
index 4707af2..2d41614 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -336,7 +336,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 }
 
 aside.menu.main-menu {
-  // z-index:50;
+  z-index:50;
   position: fixed;
   width: var(--sidebarWidth);
   padding-right: 20px;
@@ -610,6 +610,10 @@ aside.menu.main-menu .menu-expanse {
   border-bottom-left-radius: 0px !important;
 }
 
+.modal {
+  z-index:100;
+}
+
 .modal-card footer {
   justify-content: space-between;
 }
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 723c646..65f70c5 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -501,6 +501,43 @@
 
 </script>
 
+<ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />
+
+
+<!-- rename modal -->
+<form class="modal" bind:this={chatNameSettings} on:submit={saveChatNameSettings}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="modal-background" on:click={closeChatNameSettings} />
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Enter a new name for this chat</p>
+    </header>
+    <section class="modal-card-body">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label" for="settings-chat-name">New name:</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <input
+              class="input"
+              type="text"
+              id="settings-chat-name"
+              value={chat.name}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <input type="submit" class="button is-info" value="Save" />
+      <button class="button" on:click={closeChatNameSettings}>Cancel</button>
+    </footer>
+  </div>
+</form>
+<!-- end -->
+
+
 <div class="chat-content">
 <nav class="level chat-header">
   <div class="level-left">
@@ -581,42 +618,6 @@
   </div>
 </Footer>
 
-
-<ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />
-
-<!-- rename modal -->
-<form class="modal" bind:this={chatNameSettings} on:submit={saveChatNameSettings}>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="modal-background" on:click={closeChatNameSettings} />
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">Enter a new name for this chat</p>
-    </header>
-    <section class="modal-card-body">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label" for="settings-chat-name">New name:</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <input
-              class="input"
-              type="text"
-              id="settings-chat-name"
-              value={chat.name}
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-    <footer class="modal-card-foot">
-      <input type="submit" class="button is-info" value="Save" />
-      <button class="button" on:click={closeChatNameSettings}>Cancel</button>
-    </footer>
-  </div>
-</form>
-<!-- end -->
-
 <svelte:window
   on:keydown={(event) => {
     if (event.key === 'Escape') {