diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index cd8821a7d2792b3c36efaa1b13cc754cd5cf571f..7bd909a6e0820696af8b528818d3b3052d7ff951 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -24,24 +24,24 @@
 
 .videoList {
   display: grid;
-  border-radius: 5px;
 
   grid-auto-flow: dense;
-  grid-gap: 5px;
+  grid-gap: 1px;
 
   align-items: center;
   justify-content: center;
 
   @include mq($medium-up) {
-    grid-gap: 10px;
+    grid-gap: 2px;
   }
 }
 
+
 .videoListItem {
   display: flex;
   overflow: hidden;
   width: 100%;
-  max-height: 100%;
+  height: 100%;
 
   &.focused {
     grid-column: 1 / span 2;
@@ -57,7 +57,6 @@
   position: relative;
   display: flex;
   min-width: 100%;
-  border-radius: 5px;
 
   &::after {
     content: "";
@@ -66,8 +65,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border: 5px solid var(--color-white-with-transparency);
-    border-radius: 5px;
+    border: 5px solid var(--color-primary);
     opacity: 0;
     pointer-events: none;
 
@@ -77,7 +75,7 @@
   }
 
   &.talking::after {
-    opacity: 1;
+    opacity: 0.7;
   }
 }
 
@@ -86,7 +84,6 @@
   height: 100%;
   width: 100%;
   object-fit: contain;
-  border-radius: 5px;
 }
 
 .cursorGrab{
@@ -114,41 +111,30 @@
 
 .connecting {
   @extend %media-area;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
-  color: var(--color-white-with-transparency);
   font-size: 2.5rem;
-  text-align: center;
   white-space: nowrap;
   z-index: 1;
+  height: 100%;
+  vertical-align: middle;
+  margin: 0 -0.25em 0 0;
 
-
-  &::after {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    margin: 0 -0.25em 0 0;
-
-    [dir="rtl"] & {
-      margin: 0 0 0 -0.25em
-    }
+  [dir="rtl"] & {
+    margin: 0 0 0 -0.25em
   }
 
-  &::before {
-    content: "\e949";
-    /* ascii code for the ellipsis character */
-    font-family: 'bbb-icons' !important;
-    display: inline-block;
-
-    :global(.animationsEnabled) & {
-      animation: spin 4s infinite linear;
-    }
-  }
+  background-color: var(--color-black);
+  border-radius: 1px;
+  opacity: 1;
+  color: var(--color-white);
+  font-size: 100%;
 }
 
 .media {
-  @extend %media-area;
-  background-color: var(--color-gray);
+  @extend %media-area; background-color: var(--color-black);
 }
 
 .info {
@@ -185,12 +171,12 @@
 .userName {
   @extend %text-elipsis;
   position: relative;
-  background-color: var(--color-black);
-  opacity: .5;
-  color: var(--color-white);
-  font-size: 80%;
-  border-radius: 15px;
+  // Keep the background with 0.5 opacity, but leave the text with 1
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 1px;
+  color: var(--color-off-white);
   padding: 0 1rem 0 .5rem !important;
+  font-size: 80%;
 }
 
 .noMenu {
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
index 86e7e76b3a106e1240290e7843e5ba9e333c8dc9..e655d696e540fb4802ff6e7d4a905586d07ea915 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
@@ -160,8 +160,10 @@ class VideoListItem extends Component {
       })}
       >
         {
-          !videoIsReady
-          && <div className={styles.connecting} />
+          !videoIsReady &&
+            <div className={styles.connecting}>
+              <span>{name}</span>
+            </div>
         }
         <div
           className={styles.videoContainer}
@@ -183,7 +185,8 @@ class VideoListItem extends Component {
           />
           {videoIsReady && this.renderFullscreenButton()}
         </div>
-        <div className={styles.info}>
+        { videoIsReady &&
+          <div className={styles.info}>
           {enableVideoMenu && availableActions.length >= 3
             ? (
               <Dropdown className={isFirefox ? styles.dropdownFireFox : styles.dropdown}>
@@ -214,6 +217,7 @@ class VideoListItem extends Component {
           {voiceUser.muted && !voiceUser.listenOnly ? <Icon className={styles.muted} iconName="unmute_filled" /> : null}
           {voiceUser.listenOnly ? <Icon className={styles.voice} iconName="listen" /> : null}
         </div>
+        }
       </div>
     );
   }