diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e843125..d3b8714 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "chatapp",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "identifier": "com.strawberries.chatapp",
   "build": {
     "beforeDevCommand": "yarn dev",
diff --git a/src/assets/default-avatar.png b/src/assets/default-avatar.png
new file mode 100644
index 0000000..9d76539
Binary files /dev/null and b/src/assets/default-avatar.png differ
diff --git a/src/base.css b/src/base.css
index 5d7b302..d9e856e 100644
--- a/src/base.css
+++ b/src/base.css
@@ -19,6 +19,7 @@ body,
 :root {
   --bg: #0f1116;
   --panel: #171922;
+  --panel-accent: #12141B;
   --text: #e6e6eb;
   --muted: #9aa0aa;
   --accent: #f27aa3;
diff --git a/src/components/ChatWindow.vue b/src/components/ChatWindow.vue
index 87f37e1..5267643 100644
--- a/src/components/ChatWindow.vue
+++ b/src/components/ChatWindow.vue
@@ -1,29 +1,29 @@
 <template>
-  <InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
+    <InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
 
-  <div v-if="uuid === 'none'" class="no-room">
-    <div class="empty-state">
-      <i class="fa-solid fa-comments"></i>
-      <p>{{ $t('chat-no-room') }}</p>
-    </div>
-  </div>
-
-  <div v-else class="chat-container">
-    <!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
-
-    <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
-      <MessageList :messages="messages" />
+    <div v-if="uuid === 'none'" class="no-room">
+        <div class="empty-state">
+            <i class="fa-solid fa-comments"></i>
+            <p>{{ $t('chat-no-room') }}</p>
+        </div>
     </div>
 
-    <div class="input-container">
-      <button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
-        :title="$t('chat-invite-title')">
-        <i class="fa-solid fa-users"></i>
-      </button>
+    <div v-else class="chat-container">
+        <h2 class="room-name">{{ currentRoom?.name }}</h2>
 
-      <MessageInput ref="messageInputRef" @send="onSend" />
+        <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
+            <MessageList :messages="messages" />
+        </div>
+
+        <div class="input-container">
+            <button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
+                :title="$t('chat-invite-title')">
+                <i class="fa-solid fa-users"></i>
+            </button>
+
+            <MessageInput ref="messageInputRef" @send="onSend" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,220 +52,222 @@ const showInviteModal = ref(false);
 let socket: WebSocket | null = null;
 
 const isOwner = computed(() => {
-  if (!currentUser.value || !currentRoom.value) return false;
-  return currentUser.value.uuid === currentRoom.value.owner_uuid;
+    if (!currentUser.value || !currentRoom.value) return false;
+    return currentUser.value.uuid === currentRoom.value.owner_uuid;
 });
 
 async function initializeRoom() {
-  if (socket) { await socket.disconnect(); socket = null; }
+    if (socket) { await socket.disconnect(); socket = null; }
 
-  messages.value = [];
-  hasMore.value = true;
-  currentRoom.value = null;
+    messages.value = [];
+    hasMore.value = true;
+    currentRoom.value = null;
 
-  if (props.uuid === 'none') return;
+    if (props.uuid === 'none') return;
 
-  try {
-    const [msgs, roomInfo, auth] = await Promise.all([
-      fetchMessages(props.uuid, undefined, 40), // Load first 40
-      fetchRoomInfo(props.uuid),
-      getAuthData()
-    ]);
+    try {
+        const [msgs, roomInfo, auth] = await Promise.all([
+            fetchMessages(props.uuid, undefined, 40), // Load first 40
+            fetchRoomInfo(props.uuid),
+            getAuthData()
+        ]);
 
-    messages.value = msgs;
-    currentRoom.value = roomInfo;
-    currentUser.value = auth.user;
-    if (msgs.length < 40) hasMore.value = false;
+        console.log("First message payload:", msgs[0]);
 
-    await nextTick();
-    scrollToBottom();
+        messages.value = msgs;
+        currentRoom.value = roomInfo;
+        currentUser.value = auth.user;
+        if (msgs.length < 40) hasMore.value = false;
 
-    const wsToken = await getWsToken(props.uuid);
-    const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
-    socket = await WebSocket.connect(url);
+        await nextTick();
+        scrollToBottom();
 
-    socket.addListener((msg) => {
-      if (msg.type === 'Text') {
-        const data: Message = JSON.parse(msg.data);
-        if (!messages.value.some(m => m.uuid === data.uuid)) {
-          messages.value.push(data);
-          nextTick().then(scrollToBottomIfAtEnd);
-        }
-      }
-    });
-  } catch (err) {
-    console.error("Room initialization failed:", err);
-  }
+        const wsToken = await getWsToken(props.uuid);
+        const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
+        socket = await WebSocket.connect(url);
+
+        socket.addListener((msg) => {
+            if (msg.type === 'Text') {
+                const data: Message = JSON.parse(msg.data);
+                if (!messages.value.some(m => m.uuid === data.uuid)) {
+                    messages.value.push(data);
+                    nextTick().then(scrollToBottomIfAtEnd);
+                }
+            }
+        });
+    } catch (err) {
+        console.error("Room initialization failed:", err);
+    }
 }
 
 async function handleScroll() {
-  const el = messageListRef.value;
-  if (!el) return;
+    const el = messageListRef.value;
+    if (!el) return;
 
-  // If user scrolls to the top, is not already loading, and there's more data
-  if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
-    await loadMore();
-  }
+    // If user scrolls to the top, is not already loading, and there's more data
+    if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
+        await loadMore();
+    }
 }
 
 async function loadMore() {
-  if (messages.value.length === 0) return;
+    if (messages.value.length === 0) return;
 
-  isLoadingMore.value = true;
-  const oldestMsgUuid = messages.value[0].uuid;
+    isLoadingMore.value = true;
+    const oldestMsgUuid = messages.value[0].uuid;
 
-  try {
-    const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
+    try {
+        const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
 
-    if (olderMsgs.length === 0) {
-      hasMore.value = false;
-      return;
+        if (olderMsgs.length === 0) {
+            hasMore.value = false;
+            return;
+        }
+
+        // Capture height before adding messages to maintain scroll position
+        const el = messageListRef.value;
+        const previousScrollHeight = el?.scrollHeight || 0;
+
+        messages.value = [...olderMsgs, ...messages.value];
+
+        await nextTick();
+
+        // Restore scroll position so the view doesn't jump
+        if (el) {
+            el.scrollTop = el.scrollHeight - previousScrollHeight;
+        }
+
+        if (olderMsgs.length < 30) hasMore.value = false;
+    } catch (err) {
+        console.error("Failed to load more messages:", err);
+    } finally {
+        isLoadingMore.value = false;
     }
-
-    // Capture height before adding messages to maintain scroll position
-    const el = messageListRef.value;
-    const previousScrollHeight = el?.scrollHeight || 0;
-
-    messages.value = [...olderMsgs, ...messages.value];
-
-    await nextTick();
-
-    // Restore scroll position so the view doesn't jump
-    if (el) {
-      el.scrollTop = el.scrollHeight - previousScrollHeight;
-    }
-
-    if (olderMsgs.length < 30) hasMore.value = false;
-  } catch (err) {
-    console.error("Failed to load more messages:", err);
-  } finally {
-    isLoadingMore.value = false;
-  }
 }
 
 function scrollToBottom() {
-  if (messageListRef.value) {
-    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
-  }
+    if (messageListRef.value) {
+        messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+    }
 }
 
 // Only scroll to bottom for new messages if the user is already near the bottom
 function scrollToBottomIfAtEnd() {
-  const el = messageListRef.value;
-  if (!el) return;
-  const threshold = 150;
-  const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
-  if (isAtBottom) scrollToBottom();
+    const el = messageListRef.value;
+    if (!el) return;
+    const threshold = 150;
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    if (isAtBottom) scrollToBottom();
 }
 
 
 
 const handleGlobalKeyDown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    const active = document.activeElement?.tagName.toLowerCase();
-    const isTyping = active === 'input' || active === 'textarea';
-    if (!isTyping && messageInputRef.value) {
-      event.preventDefault();
-      messageInputRef.value.focus();
+    if (event.key === 'Enter') {
+        const active = document.activeElement?.tagName.toLowerCase();
+        const isTyping = active === 'input' || active === 'textarea';
+        if (!isTyping && messageInputRef.value) {
+            event.preventDefault();
+            messageInputRef.value.focus();
+        }
     }
-  }
 };
 
 async function onSend(content: string) {
-  if (props.uuid === 'none') return;
-  await sendMessage(props.uuid, content);
+    if (props.uuid === 'none') return;
+    await sendMessage(props.uuid, content);
 }
 
 watch(() => props.uuid, () => {
-  initializeRoom();
+    initializeRoom();
 });
 
 onMounted(() => {
-  initializeRoom();
-  window.addEventListener('keydown', handleGlobalKeyDown);
+    initializeRoom();
+    window.addEventListener('keydown', handleGlobalKeyDown);
 });
 
 onUnmounted(async () => {
-  if (socket) {
-    await socket.disconnect();
-  }
-  window.removeEventListener('keydown', handleGlobalKeyDown);
+    if (socket) {
+        await socket.disconnect();
+    }
+    window.removeEventListener('keydown', handleGlobalKeyDown);
 });
 </script>
 
 <style scoped>
 .chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .messages-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  scroll-behavior: auto;
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    scroll-behavior: auto;
 }
 
 .input-container {
-  display: flex;
-  gap: 10px;
-  align-items: flex-end;
-  padding: 10px;
-  border-top: 1px solid var(--border);
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+    padding: 10px;
+    border-top: 1px solid var(--border);
 }
 
 /* Ensure the MessageInput component expands to fill the width */
 :deep(.input-container > *:last-child) {
-  flex: 1;
+    flex: 1;
 }
 
-/* .room-name { */
-/*   margin: 15px 0; */
-/*   text-align: center; */
-/* } */
+.room-name {
+    margin: 15px 0;
+    text-align: center;
+}
 
 .loading-more {
-  text-align: center;
-  padding: 10px;
-  font-size: 0.8rem;
-  color: var(--muted);
+    text-align: center;
+    padding: 10px;
+    font-size: 0.8rem;
+    color: var(--muted);
 }
 
 .invite-btn {
-  margin: 0;
-  padding: 18px;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius);
-  border: none;
-  background: transparent;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    margin: 0;
+    padding: 18px;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    border: none;
+    background: transparent;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 
 .no-room {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
 }
 
 .empty-state {
-  text-align: center;
-  font-size: 1.2rem;
-  user-select: none;
-  -webkit-user-select: none;
+    text-align: center;
+    font-size: 1.2rem;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .empty-state i {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.3;
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.3;
 }
 </style>
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
index abc6ff0..dd3559b 100644
--- a/src/components/MessageList.vue
+++ b/src/components/MessageList.vue
@@ -1,49 +1,125 @@
+<template>
+    <ul>
+        <li v-for="(m, i) in messages" :key="i" class="message" :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
+            <div class="sender-info">
+                <img :src="getAvatar(m.sender_uuid)" @error="handleAvatarError" class="sender-avatar" />
+                <div class="sender">{{ m.sender }}</div>
+                <span class="timestamp">{{ m.sent_at }}</span>
+            </div>
+            <div class="message-content">{{ m.content }}</div>
+        </li>
+    </ul>
+</template>
+
+
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import type { Message } from '../types'
+import { getAvatar } from '../api/account.ts'
+import defaultAvatar from '../assets/default-avatar.png'
+import { getAuthData } from '../authStore';
+
 defineProps<{ messages: Message[] }>()
+
+const currentUserUuid = ref<string | null>(null)
+
+onMounted(async () => {
+    const auth = await getAuthData()
+    if (auth.user) {
+        currentUserUuid.value = auth.user.uuid
+    }
+})
+
+const handleAvatarError = (event: Event) => {
+    const img = event.target as HTMLImageElement;
+    img.src = defaultAvatar;
+};
 </script>
 
-<template>
-  <ul>
-    <li v-for="(m, i) in messages" :key="i" class="message">
-      <div class="sender">{{ m.sender }} <span class="timestamp">{{ m.sent_at }}</span></div>
-      <div class="message-content">{{ m.content }}</div>
-    </li>
-  </ul>
-</template>
+
 
 <style scoped>
 ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
 }
 
 .message {
-  margin-bottom: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.2);
-  padding: 10px;
-  border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    /* gap: 0.5rem; */
+    background: var(--panel-accent);
+    padding: 0;
+    max-width: 80%;
+    width: fit-content;
+    align-self: flex-start;
+    /* border: 1px solid var(--border); */
+    border-radius: var(--radius);
+}
+
+.sender-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.7rem;
+    /* border: 1px solid var(--border); */
+    border-bottom: 1px solid var(--border);
+    /* border-radius: var(--radius) var(--radius) 0 0; */
+    /* background-color: rgba(255, 255, 255, 0.02); */
+    width: 100%;
+    padding: 5px 10px;
+}
+
+.sender-avatar {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.message.is-me {
+    align-self: flex-end;
+    align-items: flex-end;
+}
+
+.message.is-me .sender-info {
+    flex-direction: row-reverse;
+    text-align: right;
+}
+
+.message.is-me .message-content {
+    text-align: right;
+    padding-right: 1rem;
+    padding-left: 10px;
 }
 
 .sender {
-  font-weight: bold;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
+    font-weight: bold;
+    font-size: 1.1rem;
+    /* flex: 1; */
 }
 
-.sender .timestamp {
-  font-weight: normal;
-  opacity: 0.7;
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
+.timestamp {
+    font-weight: normal;
+    opacity: 0.7;
+    font-size: 0.7rem;
 }
 
 .message-content {
-  padding-left: 1rem;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-width: 100%;
-  display: block;
+    padding: 10px;
+    padding-left: 1rem;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-width: 100%;
+    display: block;
 }
 </style>
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index de26347..e28ad3a 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="room-list">
-    <header class="rooms-header">
-      <h2>{{ $t('chat-room-list-title') }}</h2>
-      <button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
-        <i class="fa-solid fa-plus"></i>
-      </button>
-    </header>
+    <div class="room-list">
+        <header class="rooms-header">
+            <h2>{{ $t('chat-room-list-title') }}</h2>
+            <button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
+                <i class="fa-solid fa-plus"></i>
+            </button>
+        </header>
 
-    <Teleport to="body">
-      <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
-    </Teleport>
+        <Teleport to="body">
+            <CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
+        </Teleport>
 
-    <div class="scroll-area">
-      <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
-        :class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
-        <div class="room-info">
-          <span class="room-name">{{ room.name }}</span>
-          <span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
+        <div class="scroll-area">
+            <router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
+                :class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
+                <div class="room-info">
+                    <span class="room-name">{{ room.name }}</span>
+                    <span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
+                </div>
+            </router-link>
         </div>
-      </router-link>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,93 +37,94 @@ const rooms = ref<Room[]>([]);
 const emit = defineEmits(['select-room']);
 
 onMounted(async () => {
-  rooms.value = await fetchRooms();
+    rooms.value = await fetchRooms();
 });
 </script>
 
 <style scoped>
 .room-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  user-select: none;
-  -webkit-user-select: none;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .rooms-header {
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--border);
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border);
 }
 
 .rooms-header h2 {
-  font-size: 1.1rem;
-  margin: 0;
-  margin-left: 38px;
+    /* font-size: 1rem; */
+    margin: 0;
+    margin-left: 45px;
 }
 
 .scroll-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem;
 }
 
 .room-item {
-  display: block;
-  padding: 0.75rem 1rem;
-  margin-bottom: 0.25rem;
-  border-radius: 8px;
-  text-decoration: none;
-  color: var(--muted);
-  transition: all 0.2s;
+    display: block;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.25rem;
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--muted);
+    transition: all 0.2s;
 }
 
 .room-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text);
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text);
 }
 
 .room-item.active {
-  background: var(--accent);
-  color: rgba(0, 0, 0, 0.8);
+    /* border: 1px solid var(--border); */
+    background: var(--panel-accent);
+    color: var(--accent);
 }
 
 .room-item.active .room-owner {
-  color: rgba(0, 0, 0, 1);
+    color: var(--text);
 }
 
 .room-info {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .room-name {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .room-owner {
-  font-size: 0.75rem;
-  opacity: 0.6;
+    font-size: 0.75rem;
+    opacity: 0.6;
 }
 
 .create-btn {
-  margin: 0;
-  padding: 18px;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius);
-  border: none;
-  background: transparent;
-  color: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    margin: 0;
+    padding: 18px;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius);
+    border: none;
+    background: transparent;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .create-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.05);
 }
 </style>
diff --git a/src/pages/ChatPage.vue b/src/pages/ChatPage.vue
index dd0bc4f..ca993ee 100644
--- a/src/pages/ChatPage.vue
+++ b/src/pages/ChatPage.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="chat-layout">
-    <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }" @click="isSidebarOpen = !isSidebarOpen">
-      <i class="fa-solid fa-bars"></i>
-    </button>
+    <div class="chat-layout">
+        <button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }"
+            @click="isSidebarOpen = !isSidebarOpen">
+            <i class="fa-solid fa-bars"></i>
+        </button>
 
-    <aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
-      <div class="sidebar-content">
-        <RoomList @select-room="handleRoomSelection" />
-      </div>
-    </aside>
+        <aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
+            <div class="sidebar-content">
+                <RoomList @select-room="handleRoomSelection" />
+            </div>
+        </aside>
 
-    <div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
+        <div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
 
-    <main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
-      <ChatWindow :uuid="uuid" />
-    </main>
-  </div>
+        <main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
+            <ChatWindow :uuid="uuid" />
+        </main>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -27,117 +28,117 @@ defineProps<{ uuid: string }>();
 const isSidebarOpen = ref(true);
 
 const handleRoomSelection = () => {
-  if (window.innerWidth <= 720) {
-    isSidebarOpen.value = false;
-  }
+    if (window.innerWidth <= 720) {
+        isSidebarOpen.value = false;
+    }
 };
 </script>
 
 <style scoped>
 .chat-layout {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  max-width: 1200px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: 1200px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
 }
 
 .sidebar {
-  width: 300px;
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  background: var(--panel);
-  transition: width 0.3s ease, transform 0.3s ease;
-  z-index: 20;
-  overflow: hidden;
+    width: 300px;
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    background: var(--panel);
+    transition: width 0.3s ease, transform 0.3s ease;
+    z-index: 20;
+    overflow: hidden;
 }
 
 .sidebar:not(.is-open) {
-  width: 0;
-  border-right: none;
+    width: 0;
+    border-right: none;
 }
 
 .sidebar-content {
-  width: 300px;
-  height: 100%;
+    width: 300px;
+    height: 100%;
 }
 
 .chat-window-container {
-  flex: 1;
-  padding-left: 38px;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition: all 0.3s ease;
+    flex: 1;
+    /* padding-left: 38px; */
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    transition: all 0.3s ease;
 }
 
 .menu-toggle {
-  position: absolute;
-  top: 24px;
-  left: 15px;
-  z-index: 30;
-  background: var(--panel);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: left 0.3s ease;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 30;
+    background: var(--panel);
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: left 0.3s ease;
 }
 
 .menu-toggle.sidebar-closed {
-  left: 15px;
+    left: 15px;
 }
 
 .menu-toggle i {
-  font-size: 1.6rem;
+    font-size: 1.6rem;
 }
 
 @media (min-width: 721px) {
-  .chat-window-container.sidebar-is-open {
-    padding-left: 0;
-  }
+    .chat-window-container.sidebar-is-open {
+        padding-left: 0;
+    }
 }
 
 @media (max-width: 720px) {
-  .sidebar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 280px;
-    transform: translateX(-100%);
-  }
+    .sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 280px;
+        transform: translateX(-100%);
+    }
 
-  .sidebar.is-open {
-    transform: translateX(0);
-    width: 280px;
-  }
+    .sidebar.is-open {
+        transform: translateX(0);
+        width: 280px;
+    }
 
-  .sidebar:not(.is-open) {
-    width: 280px;
-    transform: translateX(-100%);
-  }
+    .sidebar:not(.is-open) {
+        width: 280px;
+        transform: translateX(-100%);
+    }
 
-  .sidebar-content {
-    width: 280px;
-  }
+    .sidebar-content {
+        width: 280px;
+    }
 
-  .sidebar-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 15;
-  }
+    .sidebar-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 15;
+    }
 
-  .menu-toggle:hover i {
-    color: var(--muted);
-  }
+    .menu-toggle:hover i {
+        color: var(--muted);
+    }
 }
 </style>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 1484843..3f2ddf0 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,48 +1,49 @@
 <template>
-  <div class="settings-page">
-    <h1>{{ $t('settings-title') }}</h1>
+    <div class="settings-page">
+        <h1>{{ $t('settings-title') }}</h1>
 
-    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
-    <UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = false" @updated="fetchUserData" />
+        <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false"
+            @updated="fetchUserData" />
+        <UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = false" @updated="fetchUserData" />
 
-    <h2>{{ $t('settings-account') }}</h2>
-    <div v-if="user" class="info-card">
-      <div class="avatar-display">
-        <img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
+        <h2>{{ $t('settings-account') }}</h2>
+        <div v-if="user" class="info-card">
+            <div class="avatar-display">
+                <img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
 
-        <button class="update-btn" @click="showAvatarModal = true">
-          {{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
-        </button>
-      </div>
+                <button class="update-btn" @click="showAvatarModal = true">
+                    {{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
+                </button>
+            </div>
 
-      <div class="info-display">
-        <div class="left">
-          <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
-          <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
+            <div class="info-display">
+                <div class="left">
+                    <p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
+                    <p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
+                </div>
+
+                <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
+            </div>
+        </div>
+        <div v-else class="loading-state">
+            <p>{{ $t('settings-loading') }}</p>
         </div>
 
-        <button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
-      </div>
-    </div>
-    <div v-else class="loading-state">
-      <p>{{ $t('settings-loading') }}</p>
-    </div>
+        <h2>{{ $t('settings-language') }}</h2>
+        <div class="input-group">
+            <div class="lang-grid">
+                <button v-for="lang in languages" :key="lang.code" class="lang-btn"
+                    :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
+                    {{ lang.name }}
+                </button>
+            </div>
+        </div>
 
-    <h2>{{ $t('settings-language') }}</h2>
-    <div class="input-group">
-      <div class="lang-grid">
-        <button v-for="lang in languages" :key="lang.code" class="lang-btn"
-          :class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
-          {{ lang.name }}
+        <button class="logout-btn" @click="logout">
+            <i class="fa-solid fa-right-from-bracket"></i>
+            <span>{{ $t('settings-logout-btn') }}</span>
         </button>
-      </div>
     </div>
-
-    <button class="logout-btn" @click="logout">
-      <i class="fa-solid fa-right-from-bracket"></i>
-      <span>{{ $t('settings-logout-btn') }}</span>
-    </button>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -67,80 +68,80 @@ const currentLang = ref('')
 const languages = computed(() => getSupportedLanguagesMetadata())
 
 async function fetchUserData() {
-  try {
-    const auth = await getAuthData()
-    user.value = auth.user
-  } catch (err) {
-    console.error("Failed to load user data:", err)
-  }
+    try {
+        const auth = await getAuthData()
+        user.value = auth.user
+    } catch (err) {
+        console.error("Failed to load user data:", err)
+    }
 }
 
 onMounted(async () => {
-  const pref = await getLocalePreference()
-  // Synchronize the UI state with the actual active language
-  currentLang.value = pref || (navigator.language.split('-')[0])
+    const pref = await getLocalePreference()
+    // Synchronize the UI state with the actual active language
+    currentLang.value = pref || (navigator.language.split('-')[0])
 
-  fetchUserData()
+    fetchUserData()
 })
 
 async function changeLanguage(code: string) {
-  const actual = setLanguage(code)
-  currentLang.value = actual
-  await saveLocalePreference(actual)
+    const actual = setLanguage(code)
+    currentLang.value = actual
+    await saveLocalePreference(actual)
 }
 
 function logout() {
-  authLogout()
-  router.push('/login')
+    authLogout()
+    router.push('/login')
 }
 </script>
 
 <style scoped>
 .settings-page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 h2 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 .info-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 1rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 1rem;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
 }
 
 .avatar-display,
 .info-display {
-  display: flex;
-  /* border: 1px solid var(--border); */
-  /* border-radius: var(--radius); */
-  /* background-color: rgba(255, 255, 255, 0.02); */
-  /* padding: 1rem; */
-  flex-direction: row;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
+    display: flex;
+    /* border: 1px solid var(--border); */
+    /* border-radius: var(--radius); */
+    /* background-color: rgba(255, 255, 255, 0.02); */
+    /* padding: 1rem; */
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 .avatar-img {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--border);
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--border);
 }
 
 /* .update-btn { */
@@ -150,63 +151,63 @@ h2 {
 /* } */
 
 .lang-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 0.5rem;
-  margin-top: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 .lang-btn {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  color: var(--text);
-  margin: 0;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    color: var(--text);
+    margin: 0;
 }
 
 .lang-btn.active {
-  background: var(--accent);
-  color: #000;
-  border-color: var(--accent);
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
 }
 
 .logout-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 30px;
-  padding: 10px 20px;
-  color: var(--text);
-  background-color: transparent;
-  border: 1px solid var(--error);
-  border-radius: var(--radius);
-  width: fit-content;
-  transition: all 0.2s ease;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 30px;
+    padding: 10px 20px;
+    color: var(--text);
+    background-color: transparent;
+    border: 1px solid var(--error);
+    border-radius: var(--radius);
+    width: fit-content;
+    transition: all 0.2s ease;
 }
 
 .logout-btn:hover {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn:hover i {
-  color: rgba(255, 80, 80, 0.8);
+    color: rgba(255, 80, 80, 0.8);
 }
 
 .logout-btn i {
-  font-size: 1.25rem;
+    font-size: 1.25rem;
 }
 
 .loading-state {
-  padding: 2rem;
-  text-align: center;
-  color: var(--muted);
+    padding: 2rem;
+    text-align: center;
+    color: var(--muted);
 }
 
 @media screen and (max-width: 720px) {
 
-  .avatar-display,
-  .info-display {
-    justify-content: center;
-  }
+    .avatar-display,
+    .info-display {
+        justify-content: center;
+    }
 }
 </style>
diff --git a/src/types.ts b/src/types.ts
index 18e71f3..45c8d3a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,51 +1,52 @@
 export interface User {
-  uuid: string
-  username: string
-  email: string
-  avatar_url: string
+    uuid: string
+    username: string
+    email: string
+    avatar_url: string
 }
 
 export interface LoginResponse {
-  uuid: string
-  username: string
-  email: string
-  token: string
+    uuid: string
+    username: string
+    email: string
+    token: string
 }
 
 export interface UpdateUserResponse {
-  username: string
-  email: string
+    username: string
+    email: string
 }
 
 export interface Room {
-  uuid: string
-  owner_name: string
-  owner_uuid: string
-  name: string
-  global: boolean
+    uuid: string
+    owner_name: string
+    owner_uuid: string
+    name: string
+    global: boolean
 }
 
 export interface Message {
-  uuid: string
-  sender: string
-  message_type: 'text'
-  content: string
-  sent_at: string
+    uuid: string
+    sender: string
+    sender_uuid: string
+    message_type: 'text'
+    content: string
+    sent_at: string
 }
 
 export interface Friend {
-  uuid: string
-  username: string
+    uuid: string
+    username: string
 }
 
 export interface FriendRequest {
-  sender_uuid: string
-  sender_username: string
+    sender_uuid: string
+    sender_username: string
 }
 
 export interface RoomInvite {
-  room_uuid: string
-  room_name: string
-  sender_uuid: string
-  sender_username: string
+    room_uuid: string
+    room_name: string
+    sender_uuid: string
+    sender_username: string
 }