diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 41f8419..7847de6 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -59,6 +59,9 @@ body {
       }
     }
   }
+  .chat-header-avatar {
+    border-radius: 10px;
+  }
   .room-title-row {
     display: flex;
     align-items: center;
@@ -901,7 +904,6 @@ body {
     height: 64px !important;
     margin-bottom: 20px;
     cursor: default;
-
     .headline {
       font-size: 70 * $chat-text-size !important;
     }
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 80f6e7c..fa109f1 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -1,6 +1,17 @@
 <template>
   <v-container fluid v-if="room">
     <v-row class="chat-header-row flex-nowrap">
+      <v-col
+        cols="auto"
+        class="chat-header-members text-start ma-0 pa-0"
+      >
+        <v-avatar size="40" class="clickable me-2 chat-header-avatar" color="grey" @click.stop="onAvatarClicked">
+          <v-img v-if="roomAvatar" :src="roomAvatar" />
+          <span v-else class="white--text headline">{{
+            room.name.substring(0, 1).toUpperCase()
+          }}</span>
+        </v-avatar>
+      </v-col>
       <v-col class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-nowrap" @click.stop="onHeaderClicked">
         <div class="room-title-row">
           <div class="room-name-inline text-truncate" :title="room.name">
@@ -170,6 +181,25 @@ export default {
       });
       return items;
     },
+    roomAvatar() {
+      const room = this.room;
+      if (this.$matrix.isDirectRoom(room)) {
+        if (room.avatar) {
+          return room.avatar;
+        }
+        const membersNotMe = room.getMembers().filter(m => m.userId != this.$matrix.currentUserId);
+        if (membersNotMe && membersNotMe.length == 1) {
+          return membersNotMe[0].getAvatarUrl(
+            this.$matrix.matrixClient.getHomeserverUrl(),
+            40,
+            40,
+            "scale",
+            true
+          );
+        }
+      }
+      return room.avatar;
+    },
   },
   watch: {
     room: {
@@ -201,6 +231,10 @@ export default {
       this.$emit("header-click", { event: this.event });
     },
 
+    onAvatarClicked() {
+      this.$emit("view-room-details", { event: this.event });
+    },
+
     updateMemberCount() {
       if (!this.room) {
         this.memberCount = 0;