diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d4b3e47..fd505ab 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,7 @@
         "antd": "^4.19.5",
         "axios": "^0.26.1",
         "react": "^17.0.2",
-        "react-chat-engine-advanced": "^0.1.7",
+        "react-chat-engine-advanced": "^0.1.9",
         "react-dom": "^17.0.2",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
@@ -13976,9 +13976,9 @@
       }
     },
     "node_modules/react-chat-engine-advanced": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/react-chat-engine-advanced/-/react-chat-engine-advanced-0.1.7.tgz",
-      "integrity": "sha512-J7MfoPU8kn76inNLgDuKH/koxPng4POE+FsYWyBAA2L0wgzkOW0RMPtOy0Slzi6L5lKYMgFjdiZgRuopZlxMXA==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/react-chat-engine-advanced/-/react-chat-engine-advanced-0.1.9.tgz",
+      "integrity": "sha512-h1uw5vUROTtwoIm5vzYwXTW6jdP/TfTbrsbq0KsFxwHVVbVZi1BwUOTU/BB3MmhHCecPKHCPNSUH5VRhDQoTPA==",
       "dependencies": {
         "@types/react-scroll": "^1.8.3",
         "axios": "^0.24.0",
@@ -27017,9 +27017,9 @@
       }
     },
     "react-chat-engine-advanced": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/react-chat-engine-advanced/-/react-chat-engine-advanced-0.1.7.tgz",
-      "integrity": "sha512-J7MfoPU8kn76inNLgDuKH/koxPng4POE+FsYWyBAA2L0wgzkOW0RMPtOy0Slzi6L5lKYMgFjdiZgRuopZlxMXA==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/react-chat-engine-advanced/-/react-chat-engine-advanced-0.1.9.tgz",
+      "integrity": "sha512-h1uw5vUROTtwoIm5vzYwXTW6jdP/TfTbrsbq0KsFxwHVVbVZi1BwUOTU/BB3MmhHCecPKHCPNSUH5VRhDQoTPA==",
       "requires": {
         "@types/react-scroll": "^1.8.3",
         "axios": "^0.24.0",
diff --git a/frontend/package.json b/frontend/package.json
index 6359635..f57251e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,7 @@
     "antd": "^4.19.5",
     "axios": "^0.26.1",
     "react": "^17.0.2",
-    "react-chat-engine-advanced": "^0.1.7",
+    "react-chat-engine-advanced": "^0.1.9",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7ade3fa..7dd414a 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -81,6 +81,7 @@
   border: none;
   margin: 6px 12px 6px 12px;
   outline: none;
+  width: calc(100% - 24px);
 }
 .search-bar::placeholder {
   color: white;
diff --git a/frontend/src/pages/chats/ChatList/index.js b/frontend/src/pages/chats/ChatList/index.js
index 9458b8a..e794a2f 100644
--- a/frontend/src/pages/chats/ChatList/index.js
+++ b/frontend/src/pages/chats/ChatList/index.js
@@ -52,6 +52,8 @@ const ChatList = (props) => {
           hasNotification={user.username !== chat.last_message.sender_username}
           style={{ margin: "6px 12px 6px 12px" }}
           onClick={() => props.onChatCardClick(chat.id)}
+          avatarUsername={chat.last_message.sender_username}
+          avatarUrl={chat.last_message.sender?.avatar}
         />
       );
     });
@@ -72,6 +74,8 @@ const ChatList = (props) => {
             title={`${otherUser.first_name} ${otherUser.last_name}`}
             description={otherUser.username}
             style={{ margin: "6px 12px 6px 12px" }}
+            avatarUsername={otherUser.username}
+            avatarUrl={otherUser.avatar}
             onClick={() =>
               getOrCreateChat(
                 user,