diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 20450b8..e4d8aee 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -28,6 +28,7 @@
 
     .message-content {
         color: var(--foreground-color-2);
+        white-space: pre-wrap;
     }
 
     .pending {
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index b27ef33..9809d47 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -44,10 +44,14 @@
     };
 
     const onKeydown = async (e) => {
-        if (e.code !== "Enter")
-            return;
-
-        await sendMessage();
+        if (e.code === "Enter") {
+            if (e.shiftKey) {
+                return;
+            } else {
+                e.preventDefault();
+                await sendMessage();
+            }
+        }
     };
 </script>
 
@@ -82,13 +86,13 @@
 </style>
 
 <div class="message-input-container">
-    <input
+    <textarea
         placeholder={`Send something interesting to #${channel.name}`}
         type="text"
         class="message-input"
         on:keydown={ onKeydown }
         bind:value={ messageInput }
-    >
+    />
     {#if $smallViewport}
         <button class="icon-button send-button" on:click="{ sendMessage }">
             <SendIcon />