diff --git a/src/app.scss b/src/app.scss
index 82d8384..714c325 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -21,6 +21,18 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
+.user-message { 
+  max-width: 90%;
+  margin-right: 0;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.assistant-message {
+  max-width: 90%;
+  width: fit-content;
+}
+
 /* Show the edit button on hover of the user message */
 .user-message:hover .editbutton {
   /* TODO: add when ready: display: block !important; */
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 58941a0..af5a364 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -148,10 +148,7 @@
 
 {#each chat.messages as message}
   {#if message.role === "user"}
-    <article
-      class="message is-info user-message"
-      class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
-    >
+    <article class="message is-info user-message">
       <div class="message-body">
         <a
           href={"#"}
@@ -173,7 +170,7 @@
       </div>
     </article>
   {:else if message.role === "system"}
-    <article class="message is-danger">
+    <article class="message is-danger assistant-message">
       <SvelteMarkdown
         source={message.content}
         options={markedownOptions}
@@ -183,7 +180,7 @@
       />
     </article>
   {:else}
-    <article class="message is-success">
+    <article class="message is-success assistant-message">
       <div class="message-body">
         <SvelteMarkdown
           source={message.content}