diff --git a/react/features/speaker-stats/components/native/SpeakerStats.js b/react/features/speaker-stats/components/native/SpeakerStats.js
index b12b66e30..76a0bf705 100644
--- a/react/features/speaker-stats/components/native/SpeakerStats.js
+++ b/react/features/speaker-stats/components/native/SpeakerStats.js
@@ -4,7 +4,6 @@ import React from 'react';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 
-import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import style from './styles';
 
@@ -16,7 +15,6 @@ import style from './styles';
 const SpeakerStats = () => (
     <JitsiScreen
         style = { style.speakerStatsContainer }>
-        <SpeakerStatsLabels />
         <SpeakerStatsList />
     </JitsiScreen>
 );
diff --git a/react/features/speaker-stats/components/native/SpeakerStatsItem.js b/react/features/speaker-stats/components/native/SpeakerStatsItem.js
index 8aa7b10cd..8f8ae5b35 100644
--- a/react/features/speaker-stats/components/native/SpeakerStatsItem.js
+++ b/react/features/speaker-stats/components/native/SpeakerStatsItem.js
@@ -3,7 +3,8 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 
-import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import { Avatar, StatelessAvatar } from '../../../base/avatar';
+import { getInitials } from '../../../base/avatar/functions';
 
 import TimeElapsed from './TimeElapsed';
 import style from './styles';
@@ -36,32 +37,42 @@ type Props = {
     isDominantSpeaker: boolean
 };
 
-const SpeakerStatsItem = (props: Props) => {
-    /**
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    const dotColor = props.isDominantSpeaker
-        ? BaseTheme.palette.icon05 : BaseTheme.palette.icon03;
-
-    return (
+const SpeakerStatsItem = (props: Props) =>
+    (
         <View
             key = { props.participantId }
             style = { style.speakerStatsItemContainer }>
-            <View style = { style.speakerStatsItemStatus }>
-                <View style = { [ style.speakerStatsItemStatusDot, { backgroundColor: dotColor } ] } />
+            <View style = { style.speakerStatsAvatar }>
+                {
+                    props.hasLeft ? (
+                        <StatelessAvatar
+                            className = 'userAvatar'
+                            color = { '#525252' }
+                            id = 'avatar'
+                            initials = { getInitials(props.displayName) }
+                            size = { 32 } />
+                    ) : (
+                        <Avatar
+                            className = 'userAvatar'
+                            participantId = { props.participantId }
+                            size = { 32 } />
+                    )
+                }
             </View>
-            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemName ] }>
-                <Text>
-                    { props.displayName }
+            <View style = { style.speakerStatsNameTime } >
+                <Text style = { style.speakerStatsText }>
+                    {props.displayName}
                 </Text>
-            </View>
-            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemTime ] }>
                 <TimeElapsed
+                    style = { [
+                        style.speakerStatsText,
+                        style.speakerStatsTime,
+                        props.isDominantSpeaker && style.speakerStatsDominant
+                    ] }
                     time = { props.dominantSpeakerTime } />
             </View>
         </View>
-    );
-};
+    )
+;
 
 export default SpeakerStatsItem;
diff --git a/react/features/speaker-stats/components/native/SpeakerStatsLabels.js b/react/features/speaker-stats/components/native/SpeakerStatsLabels.js
deleted file mode 100644
index d1f8fc54a..000000000
--- a/react/features/speaker-stats/components/native/SpeakerStatsLabels.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Text, View } from 'react-native';
-
-import style from './styles';
-
-/**
- * React component for labeling speaker stats column items.
- *
- * @returns {void}
- */
-const SpeakerStatsLabels = () => {
-
-    const { t } = useTranslation();
-
-    return (
-        <View style = { style.speakerStatsLabelContainer } >
-            <View style = { style.dummyElement } />
-            <View style = { style.speakerName }>
-                <Text>
-                    { t('speakerStats.name') }
-                </Text>
-            </View>
-            <View style = { style.speakerTime }>
-                <Text>
-                    { t('speakerStats.speakerTime') }
-                </Text>
-            </View>
-        </View>
-    );
-};
-
-export default SpeakerStatsLabels;
diff --git a/react/features/speaker-stats/components/native/TimeElapsed.js b/react/features/speaker-stats/components/native/TimeElapsed.js
index 56f79c3d6..94d23ca99 100644
--- a/react/features/speaker-stats/components/native/TimeElapsed.js
+++ b/react/features/speaker-stats/components/native/TimeElapsed.js
@@ -11,6 +11,11 @@ import { createLocalizedTime } from '../timeFunctions';
  */
 type Props = {
 
+    /**
+     * Style for text.
+     */
+    style: Object,
+
     /**
      * The function to translate human-readable text.
      */
@@ -37,11 +42,11 @@ class TimeElapsed extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { time, t } = this.props;
+        const { style, time, t } = this.props;
         const timeElapsed = createLocalizedTime(time, t);
 
         return (
-            <Text>
+            <Text style = { style }>
                 { timeElapsed }
             </Text>
         );
diff --git a/react/features/speaker-stats/components/native/styles.js b/react/features/speaker-stats/components/native/styles.js
index ce840e3f1..7d785d7ef 100644
--- a/react/features/speaker-stats/components/native/styles.js
+++ b/react/features/speaker-stats/components/native/styles.js
@@ -4,50 +4,39 @@ export default {
     speakerStatsContainer: {
         flexDirection: 'column',
         flex: 1,
-        height: 'auto'
+        height: 'auto',
+        paddingHorizontal: 16,
+        backgroundColor: BaseTheme.palette.ui02
     },
     speakerStatsItemContainer: {
         flexDirection: 'row',
         alignSelf: 'stretch',
-        height: 24
+        height: 64,
+        alignItems: 'center'
     },
-    speakerStatsItemStatus: {
+    speakerStatsAvatar: {
+        width: 32,
+        height: 32,
+        marginRight: 16
+    },
+    speakerStatsNameTime: {
+        flexDirection: 'row',
         flex: 1,
-        alignSelf: 'stretch'
+        justifyContent: 'space-between',
+        alignItems: 'center'
     },
-    speakerStatsItemStatusDot: {
-        width: 5,
-        height: 5,
-        marginLeft: 7,
-        marginTop: 8,
-        padding: 3,
-        borderRadius: 10,
-        borderWidth: 0
+    speakerStatsText: {
+        fontSize: 16,
+        fontWeight: '400',
+        color: BaseTheme.palette.text01
     },
-    speakerStatsItemName: {
-        flex: 8,
-        alignSelf: 'stretch'
+    speakerStatsTime: {
+        paddingHorizontal: 4,
+        paddingVertical: 2,
+        borderRadius: 4
     },
-    speakerStatsItemTime: {
-        flex: 12,
-        alignSelf: 'stretch'
-    },
-    speakerStatsLabelContainer: {
-        marginTop: BaseTheme.spacing[2],
-        marginBottom: BaseTheme.spacing[1],
-        flexDirection: 'row'
-    },
-    dummyElement: {
-        flex: 1,
-        alignSelf: 'stretch'
-    },
-    speakerName: {
-        flex: 8,
-        alignSelf: 'stretch'
-    },
-    speakerTime: {
-        flex: 12,
-        alignSelf: 'stretch'
+    speakerStatsDominant: {
+        backgroundColor: BaseTheme.palette.success02
     }