diff --git a/src/domain/session/rightpanel/MemberDetailsViewModel.js b/src/domain/session/rightpanel/MemberDetailsViewModel.js
new file mode 100644
index 00000000..a51015b4
--- /dev/null
+++ b/src/domain/session/rightpanel/MemberDetailsViewModel.js
@@ -0,0 +1,38 @@
+import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+
+export class MemberDetailsViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._observableMember = options.observableMember;
+        this._mediaRepository = options.mediaRepository;
+        this._member = this._observableMember.get();
+        this.track(this._observableMember.subscribe( () => this._onMemberChange()));
+    }
+
+    get name() { return this._member.name; }
+    get userId() { return this._member.userId; }
+
+    get type() { return "member-details"; }
+
+    _onMemberChange() {
+        this._member = this._observableMember.get();
+        this.emitChange();
+    }
+
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this.userId)
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._member.avatarUrl, size, this.platform, this._mediaRepository);
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
+}
diff --git a/src/platform/web/ui/session/rightpanel/MemberDetailsView.js b/src/platform/web/ui/session/rightpanel/MemberDetailsView.js
new file mode 100644
index 00000000..125f938c
--- /dev/null
+++ b/src/platform/web/ui/session/rightpanel/MemberDetailsView.js
@@ -0,0 +1,12 @@
+import {AvatarView} from "../../AvatarView.js";
+import {TemplateView} from "../../general/TemplateView.js";
+
+export class MemberDetailsView extends TemplateView {
+    render(t, vm) {
+        return t.div({ className: "MemberDetailsView" },
+            [   t.view(new AvatarView(vm, 128)),
+                t.div({ className: "MemberDetailsView_name" }, vm.name),
+                t.div({ className: "MemberDetailsView_userId" }, vm.userId)
+            ]);
+    }
+}