diff --git a/index.html b/index.html
index 4b93879..4d5a72e 100644
--- a/index.html
+++ b/index.html
@@ -133,7 +133,7 @@
 
                     <!-- peer info -->
                     <div>
-                        <div>{{ selectedPeer.app_data || "Unknown" }}</div>
+                        <div class="font-semibold">{{ selectedPeer.app_data || "Unknown" }}</div>
                         <div class="text-sm">@<{{ selectedPeer.destination_hash }}></div>
                     </div>
 
@@ -154,53 +154,40 @@
 
                 <!-- chat items -->
                 <div id="messages" class="h-full overflow-y-scroll px-3 sm:px-0">
-                    <div class="max-w-xl mx-auto">
-                        <div v-if="selectedPeerChatItems.length > 0" class="flex flex-col space-y-3 py-4">
-                            <div v-for="chatItem of selectedPeerChatItems">
+                    <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 }">
 
-                                <!-- message content -->
-                                <div class="flex space-x-2 border border-gray-300 rounded-lg shadow px-2 py-1.5 bg-white">
-                                    <div>
-
-                                        <!-- user -->
-                                        <div class="bg-blue-500 text-white rounded-full p-1 shadow-md">
-                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-                                            </svg>
-                                        </div>
+                            <!-- sender name -->
+                            <div v-if="!chatItem.is_outbound" class="text-xs text-gray-500 ml-2">{{ selectedPeer.app_data || "Unknown" }}</div>
 
+                            <!-- message content -->
+                            <div class="flex space-x-2 border border-gray-300 rounded-xl shadow px-2.5 py-1 bg-white" :class="{ 'bg-[#efefef]': !chatItem.is_outbound, 'bg-[#3b82f6] text-white': chatItem.is_outbound }">
+                                <div class="w-full">
+                                    <div v-if="chatItem.lxmf_message.content" style="white-space:pre-wrap;word-wrap:break-word;font-family:inherit;">{{ chatItem.lxmf_message.content }}</div>
+                                    <div v-if="chatItem.lxmf_message.fields?.image" class="grid grid-cols-3 gap-2">
+                                        <img @click="openImage(`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`)" :src="`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
                                     </div>
-                                    <div class="w-full">
-                                        <div class="font-semibold leading-5">
-                                            <span v-if="chatItem.is_outbound">You</span>
-                                            <span v-else>{{ selectedPeer.app_data || "Unknown" }}</span>
-                                        </div>
-                                        <div v-if="chatItem.lxmf_message.content" style="white-space:pre-wrap;word-wrap:break-word;font-family:inherit;">{{ chatItem.lxmf_message.content }}</div>
-                                        <div v-if="chatItem.lxmf_message.fields?.image" class="grid grid-cols-3 gap-2">
-                                            <img @click="openImage(`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`)" :src="`data:image/${chatItem.lxmf_message.fields.image.image_type};base64,${chatItem.lxmf_message.fields.image.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
-                                        </div>
-                                        <div v-if="chatItem.lxmf_message.fields?.file_attachments">
-                                            <a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
-                                                <div class="mr-2 my-auto">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                                        <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
-                                                    </svg>
-                                                </div>
-                                                <div class="my-auto">{{ file_attachment.file_name }}</div>
-                                                <div class="ml-auto my-auto">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
-                                                    </svg>
-                                                </div>
-                                            </a>
-                                        </div>
+                                    <div v-if="chatItem.lxmf_message.fields?.file_attachments">
+                                        <a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.lxmf_message.fields?.file_attachments ?? []" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
+                                            <div class="mr-2 my-auto">
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
+                                                </svg>
+                                            </div>
+                                            <div class="my-auto">{{ file_attachment.file_name }}</div>
+                                            <div class="ml-auto my-auto">
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                                                </svg>
+                                            </div>
+                                        </a>
                                     </div>
                                 </div>
-
-                                <!-- message state -->
-                                <div v-if="chatItem.is_outbound" class="text-gray-500">{{ chatItem.lxmf_message.state }}</div>
-
                             </div>
+
+                            <!-- message state -->
+                            <div v-if="chatItem.is_outbound" class="text-gray-500 text-right">{{ chatItem.lxmf_message.state }}</div>
+
                         </div>
                     </div>
                 </div>