diff --git a/app/lib/lib/roomTypes/direct.js b/app/lib/lib/roomTypes/direct.js
index 98d0a5966924..60e9211086ea 100644
--- a/app/lib/lib/roomTypes/direct.js
+++ b/app/lib/lib/roomTypes/direct.js
@@ -117,7 +117,7 @@ export class DirectMessageRoomType extends RoomTypeConfig {
 	}
 
 	userDetailShowAll(/* room */) {
-		return false;
+		return true;
 	}
 
 	getUiText(context) {
diff --git a/app/theme/client/imports/forms/button.css b/app/theme/client/imports/forms/button.css
index f5c221ecbef9..f4595e11eb60 100644
--- a/app/theme/client/imports/forms/button.css
+++ b/app/theme/client/imports/forms/button.css
@@ -189,6 +189,15 @@
 			margin: 0 5px;
 		}
 
+		&--wrap {
+			margin: 5px -5px;
+			flex-wrap: wrap;
+
+			& > .rc-button {
+				margin: 5px;
+			}
+		}
+
 		&--stretch {
 			justify-content: stretch;
 
diff --git a/app/ui-flextab/client/tabs/membersList.html b/app/ui-flextab/client/tabs/membersList.html
index d9c415a73035..e9f0fc82874d 100644
--- a/app/ui-flextab/client/tabs/membersList.html
+++ b/app/ui-flextab/client/tabs/membersList.html
@@ -39,7 +39,7 @@
 									<div class="rc-member-list__status rc-member-list__status--{{status}}"></div>
 									{{ignored}} {{displayName}} {{utcOffset}}
 									</div>
-								{{> icon user=. block="rc-member-list__menu js-action" icon="menu" }}
+								{{> icon user=. block="rc-member-list__menu js-more" icon="menu" }}
 							</li>
 						{{/each}}
 					</ul>
diff --git a/app/ui-flextab/client/tabs/membersList.js b/app/ui-flextab/client/tabs/membersList.js
index e695c6a98d71..117b5d889237 100644
--- a/app/ui-flextab/client/tabs/membersList.js
+++ b/app/ui-flextab/client/tabs/membersList.js
@@ -199,7 +199,7 @@ Template.membersList.events({
 		}
 
 	},
-	'click .js-action'(e, instance) {
+	'click .js-more'(e, instance) {
 		e.currentTarget.parentElement.classList.add('active');
 		const room = Session.get(`roomData${ instance.data.rid }`);
 		const _actions = getActions({
diff --git a/app/ui-flextab/client/tabs/userInfo.js b/app/ui-flextab/client/tabs/userInfo.js
index 49581032ae3e..01016a30fc8d 100644
--- a/app/ui-flextab/client/tabs/userInfo.js
+++ b/app/ui-flextab/client/tabs/userInfo.js
@@ -17,7 +17,7 @@ const more = function() {
 	return Template.instance().actions.get()
 		.map((action) => (typeof action === 'function' ? action.call(this) : action))
 		.filter((action) => action && (!action.condition || action.condition.call(this)))
-		.slice(2);
+		.slice(3);
 };
 
 
@@ -203,6 +203,7 @@ Template.userInfo.events({
 
 		$(e.currentTarget).blur();
 		e.preventDefault();
+		e.stopPropagation();
 		const config = {
 			columns,
 			data: {
diff --git a/app/ui-utils/client/lib/popout.html b/app/ui-utils/client/lib/popout.html
index 2424ae45ffff..d2df191d967c 100644
--- a/app/ui-utils/client/lib/popout.html
+++ b/app/ui-utils/client/lib/popout.html
@@ -33,7 +33,7 @@ <h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
 				</button>
 			</header>
 
-			<main class="rc-popout__content rc-popout--{{ state }} ">
+			<section class="rc-popout__content rc-popout--{{ state }} ">
 				{{#if content}}
 					{{> Template.dynamic template=content data=data}}
 				{{/if}}
@@ -58,7 +58,7 @@ <h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
 						<span> {{ getStreamStatus }} </span>
 					</div>
 				{{/if}}
-			</main>
+			</section>
 
 		</div>
 	</div>
diff --git a/app/ui/client/views/app/videoCall/videoCall.html b/app/ui/client/views/app/videoCall/videoCall.html
index 75e7e5280fa4..17ccf7d66cfd 100644
--- a/app/ui/client/views/app/videoCall/videoCall.html
+++ b/app/ui/client/views/app/videoCall/videoCall.html
@@ -1,15 +1,19 @@
+<template name="rcVideo">
+	<video src="{{src}}" autoplay muted="{{muted}}" class="webrtc-video-element {{#if me}}{{#unless screen}}video-flip{{/unless}}{{/if}}"></video>
+</template>
+
 <template name="videoCall">
 	{{#if videoAvaliable}}
 		{{#if videoActive}}
 			<div class="webrtc-video {{#if overlay}}webrtc-video-overlay{{/if}}">
 				<div class="main-video">
-					<video src="{{mainVideoUrl}}" autoplay muted="true" class="webrtc-video-element {{#if $eq mainVideoUrl selfVideoUrl}}{{#unless screenShareEnabled}}video-flip{{/unless}}{{/if}}"></video>
+					{{> rcVideo src=mainVideoUrl muted="true" screen=screenShareEnabled me=($eq mainVideoUrl selfVideoUrl)}}
 					<div class="background-transparent-darker">{{mainVideoUsername}}</div>
 				</div>
 				<div class="videos">
 					{{#if selfVideoUrl}}
 						<div class="video-item background-transparent-darker" data-username="$self">
-							<video src="{{selfVideoUrl}}" autoplay muted="true" class="webrtc-video-element {{#unless screenShareEnabled}}video-flip{{/unless}}"></video>
+							{{> rcVideo src=selfVideoUrl me=true screen=screenShareEnabled }}
 							{{#unless audioAndVideoEnabled}}
 								<div class="video-muted-overlay background-transparent-darker">
 									{{#unless audioEnabled}}
@@ -25,35 +29,35 @@
 					{{/if}}
 					{{#each remoteVideoItems}}
 						<div class="video-item background-transparent-darker {{#unless connected}}state-overlay background-transparent-darker-before{{/unless}}" data-state-text="{{stateText}}" data-username="{{id}}">
-							<video src="{{url}}" autoplay class="webrtc-video-element"></video>
+							{{> rcVideo src=url screen=false }}
 							<div class="background-transparent-darker">{{usernameByUserId id}}</div>
 						</div>
 					{{/each}}
 				</div>
-				<div class="buttons-group">
+				<div class="rc-button__group rc-button__group--wrap rc-button__group--stretch">
 					{{#if videoActive}}
-						<button class="button stop-call"><i class="icon-stop"></i>{{_ "Stop"}}</button>
+						<button class="rc-button stop-call"><i class="icon-stop"></i>{{_ "Stop"}}</button>
 						{{#if audioEnabled}}
-							<button class="button disable-audio" title="{{_ 'Mute'}}" aria-label="{{_ 'Mute'}}"><i class="icon-mute"></i></button>
+							<button class="rc-button disable-audio" title="{{_ 'Mute'}}" aria-label="{{_ 'Mute'}}"><i class="icon-mute"></i></button>
 						{{else}}
-							<button class="button enable-audio" title="{{_ 'Unmute'}}" aria-label="{{_ 'Unmute'}}"><i class="icon-mic"></i></button>
+							<button class="rc-button enable-audio" title="{{_ 'Unmute'}}" aria-label="{{_ 'Unmute'}}"><i class="icon-mic"></i></button>
 						{{/if}}
 						{{#if videoEnabled}}
-							<button class="button disable-video"><i class="icon-eye-off"></i></button>
+							<button class="rc-button disable-video"><i class="icon-eye-off"></i></button>
 						{{else}}
-							<button class="button enable-video"><i class="icon-eye"></i></button>
+							<button class="rc-button enable-video"><i class="icon-eye"></i></button>
 						{{/if}}
 						{{#if screenShareAvailable}}
 							{{#if screenShareEnabled}}
-								<button class="button disable-screen-share"><i class="icon-desktop"></i></button>
+								<button class="rc-button disable-screen-share"><i class="icon-desktop"></i></button>
 							{{else}}
-								<button class="button enable-screen-share"><i class="icon-desktop"></i></button>
+								<button class="rc-button enable-screen-share"><i class="icon-desktop"></i></button>
 							{{/if}}
 						{{/if}}
 						{{#if overlayEnabled}}
-							<button class="button disable-overlay"><i class="icon-resize-small"></i></button>
+							<button class="rc-button disable-overlay"><i class="icon-resize-small"></i></button>
 						{{else}}
-							<button class="button enable-overlay"><i class="icon-resize-full-alt"></i></button>
+							<button class="rc-button enable-overlay"><i class="icon-resize-full-alt"></i></button>
 						{{/if}}
 					{{/if}}
 				</div>
diff --git a/app/ui/client/views/app/videoCall/videoCall.js b/app/ui/client/views/app/videoCall/videoCall.js
index c29e26d79648..84329b4ff3e8 100644
--- a/app/ui/client/views/app/videoCall/videoCall.js
+++ b/app/ui/client/views/app/videoCall/videoCall.js
@@ -133,3 +133,9 @@ Template.videoCall.events({
 		return e.currentTarget.volume = 0;
 	},
 });
+
+Template.rcVideo.onRendered(function() {
+	this.autorun(() => {
+		this.firstNode.srcObject = this.data.src;
+	});
+});
diff --git a/app/webrtc/client/WebRTCClass.js b/app/webrtc/client/WebRTCClass.js
index 4e4373a513bf..8a95e7e3fa39 100644
--- a/app/webrtc/client/WebRTCClass.js
+++ b/app/webrtc/client/WebRTCClass.js
@@ -260,7 +260,7 @@ class WebRTCClass {
 			peerConnection.getRemoteStreams().forEach((remoteStream) => {
 				const item = {
 					id,
-					url: URL.createObjectURL(remoteStream),
+					url: remoteStream,
 					state: peerConnection.iceConnectionState,
 				};
 				switch (peerConnection.iceConnectionState) {
@@ -404,7 +404,7 @@ class WebRTCClass {
 	}
 
 	_getUserMedia(media, onSuccess, onError) {
-		const onSuccessLocal = function(stream) {
+		const onSuccessLocal = (stream) => {
 			if (AudioContext && stream.getAudioTracks().length > 0) {
 				const audioContext = new AudioContext;
 				const source = audioContext.createMediaStreamSource(stream);
@@ -535,7 +535,7 @@ class WebRTCClass {
 		}
 		const onSuccess = (stream) => {
 			this.localStream = stream;
-			this.localUrl.set(URL.createObjectURL(stream));
+			this.localUrl.set(stream);
 			this.videoEnabled.set(this.media.video === true);
 			this.audioEnabled.set(this.media.audio === true);
 			const { peerConnections } = this;