diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 4498fb1817..ace310ee5b 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -349,3 +349,8 @@ limitations under the License.
 .mx_GroupView_changeDelayWarning {
     padding: 40px 20px;
 }
+
+.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
+    padding-left: 16px;
+    padding-right: 16px;
+}
diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js
index aa40f1c8b3..42cd47f11f 100644
--- a/src/components/views/groups/GroupMemberInfo.js
+++ b/src/components/views/groups/GroupMemberInfo.js
@@ -166,17 +166,15 @@ module.exports = React.createClass({
             }
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.props.groupMember.avatarUrl,
-            36, 36, 'crop',
-        );
 
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatar = (
-            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
-                url={avatarUrl}
-            />
-        );
+        const avatarUrl = this.props.groupMember.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = <div className="mx_MemberInfo_avatar">
+                <img src={httpUrl} />
+            </div>
+        }
 
         const groupMemberName = (
             this.props.groupMember.displayname || this.props.groupMember.userId
@@ -190,10 +188,7 @@ module.exports = React.createClass({
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
-
+                    { avatarElement }
                     <EmojiText element="h2">{ groupMemberName }</EmojiText>
 
                     <div className="mx_MemberInfo_profile">
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index 05c6b9cfd4..47c9033766 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -204,22 +204,23 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.state.groupRoom.avatarUrl,
-            36, 36, 'crop',
-        );
+        const avatarUrl = this.state.groupRoom.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = <div className="mx_MemberInfo_avatar">
+                <img src={httpUrl} />
+            </div>
+        }
 
         const groupRoomName = this.state.groupRoom.displayname;
-        const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
         return (
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
+                    { avatarElement }
 
                     <EmojiText element="h2">{ groupRoomName }</EmojiText>