diff --git a/app/assets/styles/blink/_ConferenceParticipantSelf.scss b/app/assets/styles/blink/_ConferenceParticipantSelf.scss
index e0e4e2b..98d08fe 100644
--- a/app/assets/styles/blink/_ConferenceParticipantSelf.scss
+++ b/app/assets/styles/blink/_ConferenceParticipantSelf.scss
@@ -1,14 +1,11 @@
 .container {
     flex: 1;
     width: 120px;
     height: 90px;
-    box-shadow: 0 2px 3.84px  #ccc;
-    shadowOpacity: 0.5;
-    elevation: 6;
+    elevation: 5;
 }
 
 .video {
     height:100%;
     width: 100%;
-    border: 1px solid #fff;
 }
diff --git a/app/components/ConferenceParticipant.js b/app/components/ConferenceParticipant.js
index 66ac938..d64bed7 100644
--- a/app/components/ConferenceParticipant.js
+++ b/app/components/ConferenceParticipant.js
@@ -1,134 +1,134 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // const hark              = require('hark');
 import { View } from 'react-native';
 import classNames from 'classnames';
 import autoBind from 'auto-bind';
-import { IconButton } from 'react-native-paper';
+import { IconButton, Surface } from 'react-native-paper';
 import { RTCView } from 'react-native-webrtc';
 import styles from '../assets/styles/blink/_ConferenceParticipant.scss';
 
 class ConferenceParticipant extends React.Component {
     constructor(props) {
         super(props);
         autoBind(this);
         this.state = {
             active: false,
             hasVideo: false,
             overlayVisible: false,
             audioMuted: false,
             stream: null
         }
         this.speechEvents = null;
 
         this.videoElement = React.createRef();
 
         props.participant.on('stateChanged', this.onParticipantStateChanged);
     }
 
     componentDidMount() {
         this.maybeAttachStream();
         // this.videoElement.current.oncontextmenu = (e) => {
         //     // disable right click for video elements
         //     e.preventDefault();
         // };
     }
 
     componentWillUnmount() {
         //this.videoElement.current.pause();
         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();
         }
     }
 
     onMuteAudioClicked(event) {
         event.preventDefault();
         const streams = this.props.participant.streams;
         if (streams[0].getAudioTracks().length > 0) {
             const track = streams[0].getAudioTracks()[0];
             if(this.state.audioMuted) {
                 track.enabled = true;
                 this.setState({audioMuted: false});
             } else {
                 track.enabled = false;
                 this.setState({audioMuted: true});
             }
         }
     }
 
     maybeAttachStream() {
         const streams = this.props.participant.streams;
         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});
             // });
         }
     }
 
     showOverlay() {
         this.setState({overlayVisible: true});
     }
 
     hideOverlay() {
         if (!this.state.audioMuted) {
             this.setState({overlayVisible: false});
         }
     }
 
     render() {
         // const tooltip = (
         //     <Tooltip id={this.props.participant.id}>{this.props.participant.identity.displayName || this.props.participant.identity.uri}</Tooltip>
         // );
 
         const classes = classNames({
             'poster' : !this.state.hasVideo,
             'conference-active' : this.state.active
         });
 
         let muteButton;
 
         if (this.state.overlayVisible) {
             const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
 
             muteButton = (
                 <View className="mute">
                     <IconButton icon={muteButtonIcons} onPress={this.onMuteAudioClicked} />
                 </View>
             );
         }
 
         return (
             <View style={styles.container}>
                 {muteButton}
                 {/* <OverlayTrigger placement="top" overlay={tooltip}> */}
-                    <View style={styles.videoContainer}>
+                    <Surface style={styles.videoContainer}>
                         <RTCView objectFit="cover" ref={this.videoElement} streamURL={this.state.stream ? this.state.stream.toURL() : null} poster="assets/images/transparent-1px.png" style={styles.video}/>
-                    </View>
+                    </Surface>
                 {/* </OverlayTrigger> */}
             </View>
         );
     }
 }
 
 ConferenceParticipant.propTypes = {
     participant: PropTypes.object.isRequired
 };
 
 export default ConferenceParticipant;
diff --git a/app/components/ConferenceParticipantSelf.js b/app/components/ConferenceParticipantSelf.js
index 35d8c38..a269a95 100644
--- a/app/components/ConferenceParticipantSelf.js
+++ b/app/components/ConferenceParticipantSelf.js
@@ -1,96 +1,96 @@
 import React, { Component } from 'react';
 import { View } from   'react-native';
 import PropTypes from 'prop-types';
 //const hark              = require('hark');
 import Icon from  'react-native-vector-icons/MaterialCommunityIcons';
 import { RTCView } from 'react-native-webrtc';
-import { Card } from 'react-native-paper';
+import { Surface } from 'react-native-paper';
 
 import styles from '../assets/styles/blink/_ConferenceParticipantSelf.scss';
 
 class ConferenceParticipantSelf extends Component {
     constructor(props) {
         super(props);
         this.state = {
             active: false,
             hasVideo: false,
             sharesScreen: false,
         }
         // this.speechEvents = null;
     }
 
     componentDidMount() {
         // factor it out to a function to avoid lint warning about calling setState here
         this.attachSpeechEvents();
         // this.refs.videoElement.onresize = (event) => {
         //     this.handleResize(event)
         // };
     }
 
     handleResize(event) {
         const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
         const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
         if (resolutions.indexOf(videoResolution) === -1) {
             this.setState({sharesScreen: true});
         } else {
             this.setState({sharesScreen: false});
         }
     }
 
     componentWillUnmount() {
         // if (this.speechEvents !== null) {
         //     this.speechEvents.stop();
         //     this.speechEvents = null;
         // }
     }
 
     attachSpeechEvents() {
         this.setState({hasVideo: this.props.stream.getVideoTracks().length > 0});
 
         // const options = {
         //     interval: 150,
         //     play: false
         // };
         // this.speechEvents = hark(this.props.stream, options);
         // this.speechEvents.on('speaking', () => {
         //     this.setState({active: true});
         // });
         // this.speechEvents.on('stopped_speaking', () => {
         //     this.setState({active: false});
         // });
     }
 
     render() {
         if (this.props.stream == null) {
             return false;
         }
 
         // const tooltip = (
         //     <Tooltip id="t-myself">{this.props.identity.displayName || this.props.identity.uri}</Tooltip>
         // );
 
         let muteIcon
         if (this.props.audioMuted) {
             muteIcon = (
                 <Icon name="microphone-off" />
             );
         }
 
         return (
-            <View style={styles.container}>
+            <Surface style={styles.container}>
                 {muteIcon}
                 <RTCView objectFit="cover" style={styles.video} ref="videoElement" poster="assets/images/transparent-1px.png" streamURL={this.props.stream ? this.props.stream.toURL() : null} mirror={true}/>
-            </View>
+            </Surface>
         );
     }
 }
 
 ConferenceParticipantSelf.propTypes = {
     stream: PropTypes.object.isRequired,
     identity: PropTypes.object.isRequired,
     audioMuted: PropTypes.bool.isRequired,
     generatedVideoTrack: PropTypes.bool
 };
 
 
 export default ConferenceParticipantSelf;