diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
index da5719b5de..9b724cfd15 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss
@@ -1,6 +1,7 @@
 @import "/imports/ui/components/user-list/styles.scss";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 @import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/variables/_all";
 
 .content {
   @extend %flex-column;
@@ -12,3 +13,7 @@
   @include elementFocus($list-item-bg-hover);
   @include scrollbox-vertical($user-list-bg);
 }
+
+.list {
+  margin-left: $md-padding-y;
+}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
index da9a40a837..9e6655d593 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
@@ -128,7 +128,7 @@ class UserMessages extends Component {
             component="div"
             className={cx(styles.chatsList)}
           >
-            <div ref={(ref) => { this._msgItems = ref; }}>
+            <div ref={(ref) => { this._msgItems = ref; }} className={styles.list}>
               {openChats.map(chat => (
                 <ChatListItem
                   isPublicChat={isPublicChat}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/styles.scss
index 17ac5890d0..99cd30139c 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/styles.scss
@@ -22,3 +22,7 @@
   overflow: hidden;
   flex-shrink: 1;
 }
+
+.list {
+  margin-left: $md-padding-y;
+}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
index ad40945cdc..3fc49e04a5 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
@@ -204,7 +204,7 @@ class UserParticipants extends Component {
             component="div"
             className={cx(styles.participantsList)}
           >
-            <div ref={(ref) => { this.refScrollItems = ref; }}>
+            <div ref={(ref) => { this.refScrollItems = ref; }} className={styles.list}>
               {
                 users.map(user => (
                   <UserListItem