diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js
index 951f10c0..a2b7eaf4 100644
--- a/src/domain/session/rightpanel/RoomInfoViewModel.js
+++ b/src/domain/session/rightpanel/RoomInfoViewModel.js
@@ -1,4 +1,5 @@
 import { ViewModel } from "../../ViewModel.js";
+import { avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl } from "../../avatar.js";
 
 export class RoomInfoViewModel extends ViewModel {
     constructor(options) {
@@ -22,4 +23,20 @@ export class RoomInfoViewModel extends ViewModel {
     get memberCount() {
         return this._roomSummary.joinCount;
     }
+
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this.roomId)
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._room.avatarUrl, size, this.platform, this._room.mediaRepository);
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
 }
diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js
index 226b6c5e..fc09d5c6 100644
--- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js
+++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js
@@ -1,9 +1,11 @@
 import { TemplateView } from "../../general/TemplateView.js";
 import { text } from "../../general/html.js";
+import { AvatarView } from "../../avatar.js";
 
 export class RoomInfoView extends TemplateView {
     render(t, vm) {
         return t.div({ className: "RoomInfo" }, [
+            t.div({ className: "RoomAvatar" }, [t.view(new AvatarView(vm, 50))]),
             t.div({ className: "RoomName" }, [text(vm.name)]),
             t.div({ className: "RoomId" }, [text(vm.roomId)]),
             t.div({ className: "RoomMemberCount" }, [text(vm.memberCount)]),