diff --git a/index.html b/index.html
index 1d6fd36..fec937e 100644
--- a/index.html
+++ b/index.html
@@ -164,7 +164,7 @@
                 <!-- chat items -->
                 <div id="messages" class="h-full overflow-y-scroll px-3 sm:px-0">
                     <div v-if="selectedPeerChatItems.length > 0" class="flex flex-col space-y-3 p-3">
-                        <div v-for="chatItem of selectedPeerChatItems" class="max-w-xl" :class="{ 'ml-auto pl-4 md:pl-16': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16': !chatItem.is_outbound }">
+                        <div v-for="chatItem of selectedPeerChatItems" class="flex flex-col max-w-xl" :class="{ 'ml-auto pl-4 md:pl-16 items-end': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16 items-start': !chatItem.is_outbound }">
 
                             <!-- sender name -->
                             <div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.app_data || "Unknown" }}</div>