diff --git a/src/Message.css b/src/Message.css
index 7b60fd8..6283c59 100644
--- a/src/Message.css
+++ b/src/Message.css
@@ -10,12 +10,21 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 10px;
 }
+
+.MessageAvatar {
+    width: 48px;
+    border-radius: 32px;
+    margin-left: 16px;
+}
+
 .MessageBody{
     margin-left: 24px;
     margin-top: 6px;
     margin-bottom: 8px;
     min-width: 0;
+    flex: min-content;
 }
 
 .moreCommentsButton {
diff --git a/src/Message.js b/src/Message.js
index e7be76b..cd83222 100644
--- a/src/Message.js
+++ b/src/Message.js
@@ -26,6 +26,7 @@ class Message extends React.Component {
             hidden: false,
             uploadFile: null,
             displayname: null,
+            avatarUrl: null,
             noReply: this.props.noReply,
         };
     }
@@ -36,8 +37,10 @@ class Message extends React.Component {
         }
         try {
             const profile = await this.context.client.getProfile(this.props.event.sender);
+            const avatarUrl = profile.avatar_url && this.context.client.thumbnailLink(profile.avatar_url, 'scale', 48, 48);
             this.setState({
                 displayname: profile.displayname,
+                avatarUrl,
             });
         } catch (ex) {
             console.debug(`Failed to fetch profile for user ${this.props.event.sender}:`, ex);
@@ -81,6 +84,7 @@ class Message extends React.Component {
                 const profile = await this.context.client.getProfile(this.props.event.sender);
                 this.setState({
                     displayname: profile.displayname,
+                    avatarUrl: profile.avatar_url && this.context.client.thumbnailLink(profile.avatar_url, 'scale', 48, 48),
                 });
             } catch (ex) {
                 console.debug(`Failed to fetch profile for user ${this.props.event.sender}:`, ex);
@@ -375,6 +379,7 @@ class Message extends React.Component {
         return (
             <div className="Message">
                 {modal}
+                <img alt="" className="MessageAvatar" src={this.state.avatarUrl}></img>
                 {this.renderEvent()}
                 <div className="MessageButtons">
                     <span className="moreCommentsButton">{replies}</span>
diff --git a/src/UserPage.css b/src/UserPage.css
index fa2c2ae..5219250 100644
--- a/src/UserPage.css
+++ b/src/UserPage.css
@@ -92,8 +92,8 @@
 
 .userAvatar{
     margin-right: 1em;
-    max-width: 64px;
-    max-height: 64px;
+    width: 64px;
+    border-radius: 64px;
 }
 
 .userSection {
diff --git a/src/UserPage.js b/src/UserPage.js
index 86638b7..353ec6f 100644
--- a/src/UserPage.js
+++ b/src/UserPage.js
@@ -83,8 +83,11 @@ class UserPage extends React.Component {
             const userProfile = await this.props.client.getProfile(
                 this.props.userId
             );
+            let profile = {
+                displayname: userProfile.displayname,
+            }
             if (userProfile.avatar_url) {
-                userProfile.avatar_url = this.props.client.thumbnailLink(
+                profile.avatar_url = this.props.client.thumbnailLink(
                     userProfile.avatar_url,
                     "scale",
                     64,
@@ -92,7 +95,7 @@ class UserPage extends React.Component {
                 );
             }
             this.setState({
-                userProfile,
+                userProfile: profile,
             });
         } catch (ex) {
             console.warn(