diff --git a/app/static/css/style.css b/app/static/css/style.css
index ebbb26d..fadfd11 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -80,6 +80,8 @@ main {
 
 .message-avatar.emoji {
     font-size: 1.25rem;
+    background-color: transparent !important;
+    border: 2.5px solid;
 }
 
 /* Message container - holds sender row + bubble + actions */
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 326a7b5..d61d5f2 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -687,8 +687,12 @@ function createMessageElement(msg) {
         // Other messages: left-aligned with avatar
         const avatar = generateAvatar(msg.sender);
 
+        const avatarStyle = avatar.isEmoji
+            ? `border-color: ${avatar.color};`
+            : `background-color: ${avatar.color};`;
+
         wrapper.innerHTML = `
-            <div class="message-avatar${avatar.isEmoji ? ' emoji' : ''}" style="background-color: ${avatar.color};">
+            <div class="message-avatar${avatar.isEmoji ? ' emoji' : ''}" style="${avatarStyle}">
                 ${avatar.content}
             </div>
             <div class="message-container">