diff --git a/app/assets/styles/blink/_ConferenceMatrixParticipant.scss b/app/assets/styles/blink/_ConferenceMatrixParticipant.scss
index b83a4e5..84ee3aa 100644
--- a/app/assets/styles/blink/_ConferenceMatrixParticipant.scss
+++ b/app/assets/styles/blink/_ConferenceMatrixParticipant.scss
@@ -1,21 +1,42 @@
 .container {
     flex: 1;
 }
 
 .soloContainer {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }
 
 .videoContainer {
     height: 100%;
     width: 100%;
 }
 
 .video {
     height: 100%;
     width: 100%;
-}
\ No newline at end of file
+}
+
+.controlsTop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    max-height: 50px;
+    min-height: 50px;
+    padding-left: 20px;
+}
+
+.badge {
+    background-color: #5cb85c;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 500;
+}
diff --git a/app/components/ConferenceMatrixParticipant.js b/app/components/ConferenceMatrixParticipant.js
index 41c8b63..904daa5 100644
--- a/app/components/ConferenceMatrixParticipant.js
+++ b/app/components/ConferenceMatrixParticipant.js
@@ -1,138 +1,138 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 // const hark              = require('hark');
 import classNames from 'classnames';
 import autoBind from 'auto-bind';
-import { Paragraph } from 'react-native-paper';
+import { Paragraph, Badge } from 'react-native-paper';
 import { RTCView } from 'react-native-webrtc';
 import { View } from 'react-native';
 
 import styles from '../assets/styles/blink/_ConferenceMatrixParticipant.scss';
 
 class ConferenceMatrixParticipant extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
         this.state = {
             active: false,
             hasVideo: false,
             sharesScreen: false,
             audioMuted: false,
             stream: null
         }
         this.speechEvents = null;
 
         this.videoElement = React.createRef();
 
         if (!props.isLocal) {
             props.participant.on('stateChanged', this.onParticipantStateChanged);
         }
 
     }
 
     componentDidMount() {
         this.maybeAttachStream();
         // this.videoElement.current.oncontextmenu = (e) => {
         //     // disable right click for video elements
         //     e.preventDefault();
         // };
         // this.videoElement.current.onresize = (event) => {
         //     this.handleResize(event);
         // };
     }
 
     componentWillUnmount() {
         if (!this.props.isLocal) {
             this.props.participant.removeListener('stateChanged', this.onParticipantStateChanged);
         }
         // if (this.speechEvents !== null) {
         //     this.speechEvents.stop();
         //     this.speechEvents = null;
         // }
     }
 
     onParticipantStateChanged(oldState, newState) {
         if (newState === 'established') {
             this.maybeAttachStream();
         }
     }
 
     handleResize(event) {
         // console.log(event.srcElement.videoWidth);
         const resolutions = ['1280x720', '960x540', '640x480', '640x360', '480x270', '320x180'];
         if (this.state.hasVideo) {
             const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
             if (resolutions.indexOf(videoResolution) === -1) {
                 this.setState({sharesScreen: true});
             } else {
                 this.setState({sharesScreen: false});
             }
         }
     }
 
     maybeAttachStream() {
         const streams = this.props.participant.streams;
         console.log(this.props.participant);
         if (streams.length > 0) {
             this.setState({stream: streams[0], hasVideo: streams[0].getVideoTracks().length > 0});
             // const options = {
             //     interval: 150,
             //     play: false
             // };
             // this.speechEvents = hark(streams[0], options);
             // this.speechEvents.on('speaking', () => {
             //     this.setState({active: true});
             // });
             // this.speechEvents.on('stopped_speaking', () => {
             //     this.setState({active: false});
             // });
         }
     }
 
     render() {
         // const classes = classNames({
         //     'poster' : !this.state.hasVideo,
         //     'fit'    : this.state.sharesScreen
         // });
         // const remoteVideoClasses = classNames({
         //     'remote-video'      : true,
         //     'large'             : this.props.large,
         //     'conference-active' : this.state.active
         // });
 
         const participantInfo = (
             <View className="controls">
                 <Paragraph className="lead">{this.props.participant.identity.displayName || this.props.participant.identity.uri}</Paragraph>
             </View>
         );
 
         let activeIcon;
 
         if (this.props.isLocal) {
             activeIcon = (
-                <View className="controls-top">
-                    <Paragraph className="lead">Speaker</Paragraph>
+                <View style={styles.controlsTop}>
+                    <Badge style={styles.badge}>Speaker</Badge>
                 </View>
             );
         }
 
         return (
             <View style={[styles.container, this.props.large ? styles.soloContainer : null]}>
                 {activeIcon}
                 {/* {participantInfo} */}
                 <View style={styles.videoContainer}>
                     <RTCView objectFit="cover" style={styles.video} poster="assets/images/transparent-1px.png" ref={this.videoElement} streamURL={this.state.stream ? this.state.stream.toURL() : null} />
                 </View>
             </View>
         );
     }
 }
 
 ConferenceMatrixParticipant.propTypes = {
     participant: PropTypes.object.isRequired,
     large: PropTypes.bool,
     isLocal: PropTypes.bool
 };
 
 export default ConferenceMatrixParticipant;