diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 1accb64..cfbda7f 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script>
     import { ArrowUpIcon } from "svelte-feather-icons";
     import request from "../request";
-    import { apiRoute } from "../storage";
+    import { apiRoute, getItem } from "../storage";
     import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores";
 
     export let channel;
@@ -173,9 +173,9 @@
             on:input={ onInput }
             bind:value={ messageInput }
             bind:this={ messageTextarea }
-            class:small={ $smallViewport }
+            class:small={ $smallViewport || getItem("ui:alwaysUseMobileChatBar") }
         />
-        {#if $smallViewport}
+        {#if $smallViewport || getItem("ui:alwaysUseMobileChatBar")}
             <button class="icon-button send-button" on:click="{ sendMessage }">
                 <ArrowUpIcon />
             </button>
diff --git a/frontend/src/storage.js b/frontend/src/storage.js
index fe0c9f8..ed32924 100644
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@@ -9,6 +9,7 @@ const defaults = {
     "log:Store": false,
     "ui:stateful:presistSelectedChannel": true,
     "ui:showSidebarToggle": false,
+    "ui:alwaysUseMobileChatBar": false,
     "ui:online:processRemoteTypingEvents": true,
     "ui:online:processRemotePresenceEvents": true,
     "ui:online:loadMessageHistory": true,