diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue
index 01aa263..6b7a1aa 100644
--- a/client/src/components/Chat.vue
+++ b/client/src/components/Chat.vue
@@ -42,15 +42,21 @@ onMounted(async () => {
 <template>
   <main>
     <div class="overflow-auto position-relative pb-5">
+      <!--
       <div v-for="msg in msgs" class="card m-3 text-bg-secondary">
         <div class="card-body">{{ msg.username }}: {{ msg.message }}</div>
       </div>
-      <!--
       <div v-for="msg in msgs" class="input-group">
         <div class="alert alert-primary">{{ msg.username }}</div>
         <div class="alert alert-secondary">{{ msg.message }}</div>
       </div>
         -->
+      <div v-for="msg in msgs" class="d-flex text-body-secondary pt-2 px-3 border-bottom">
+        <p class="pb-2 mb-0 small lh-sm">
+          <strong class="d-block text-gray-dark">{{ msg.username }}</strong>
+          {{ msg.message }}
+        </p>
+      </div>
       <form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">
         <div class="input-group">
           <input v-model="input" type="text" class="form-control text-bg-secondary" placeholder="Type message here"