diff --git a/freedata_gui/src/components/chat.vue b/freedata_gui/src/components/chat.vue
index 02aeba71..580872f4 100644
--- a/freedata_gui/src/components/chat.vue
+++ b/freedata_gui/src/components/chat.vue
@@ -118,22 +118,18 @@ watch(
 </script>
 
 <template>
-  <div class="container-fluid">
-    <div class="row">
+  <div class="container-fluid d-flex">
       <!-- Chat Conversations -->
-      <div class="col-3 bg-light p-0">
+      <div class="bg-light p-0" style="width: 250px">
         <div class="container-fluid overflow-auto p-0">
           <chat_conversations />
         </div>
-        <div
-          class="list-group overflow-auto"
-          id="list-tab-chat"
-          role="tablist"
-        ></div>
+        <div class="list-group overflow-auto" id="list-tab-chat" role="tablist"></div>
       </div>
 
+
       <!-- Chat Messages -->
-      <div class="col-9 border-start p-0">
+      <div class="flex-grow-1 border-start p-0">
         <div class="d-flex flex-column">
           <!-- Top Navbar -->
           <nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
@@ -169,6 +165,5 @@ watch(
           <chat_new_message />
         </div>
       </div>
-    </div>
   </div>
 </template>
diff --git a/freedata_gui/src/components/chat_messages_broadcast_received.vue b/freedata_gui/src/components/chat_messages_broadcast_received.vue
index 7a67d96a..f2e14875 100644
--- a/freedata_gui/src/components/chat_messages_broadcast_received.vue
+++ b/freedata_gui/src/components/chat_messages_broadcast_received.vue
@@ -11,7 +11,7 @@
         </div>
 
         <div class="card-body">
-          <p class="card-text">{{ message.msg }}</p>
+          <p class="card-text text-break">{{ message.msg }}</p>
         </div>
 
         <div class="card-footer p-0 bg-light border-top-0">
diff --git a/freedata_gui/src/components/chat_messages_broadcast_sent.vue b/freedata_gui/src/components/chat_messages_broadcast_sent.vue
index 5832bd01..637a6262 100644
--- a/freedata_gui/src/components/chat_messages_broadcast_sent.vue
+++ b/freedata_gui/src/components/chat_messages_broadcast_sent.vue
@@ -25,7 +25,7 @@
         </div>
 
         <div class="card-body">
-          <p class="card-text">{{ message.msg }}</p>
+          <p class="card-text text-break">{{ message.msg }}</p>
         </div>
 
         <div class="card-footer p-0 bg-primary border-top-0">
diff --git a/freedata_gui/src/components/chat_messages_received.vue b/freedata_gui/src/components/chat_messages_received.vue
index 91d79ca6..7c63bdc8 100644
--- a/freedata_gui/src/components/chat_messages_received.vue
+++ b/freedata_gui/src/components/chat_messages_received.vue
@@ -23,7 +23,7 @@
         </div>
 
         <div class="card-body">
-          <p class="card-text">{{ message.body }}</p>
+          <p class="card-text text-break">{{ message.body }}</p>
         </div>
 
         <div class="card-footer p-0 bg-light border-top-0">
diff --git a/freedata_gui/src/components/chat_messages_sent.vue b/freedata_gui/src/components/chat_messages_sent.vue
index 1d5b201e..3a22a731 100644
--- a/freedata_gui/src/components/chat_messages_sent.vue
+++ b/freedata_gui/src/components/chat_messages_sent.vue
@@ -46,8 +46,8 @@
           </div>
         </div>
 
-        <div class="card-body w-100">
-          <p class="card-text w-100">{{ message.body }}</p>
+        <div class="card-body">
+          <p class="card-text text-break">{{ message.body }}</p>
         </div>
 
         <div class="card-footer p-0 bg-secondary border-top-0">
@@ -167,9 +167,9 @@ export default {
       if (this.message.body.length <= 50) {
         return "col-4";
       } else if (this.message.body.length <= 100) {
-        return "col-5";
+        return "col-6";
       } else {
-        return "col-5";
+        return "col-8";
       }
     },