diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
index 5b8d6514181a..b7492b0b57d0 100644
--- a/client/stylesheets/base.less
+++ b/client/stylesheets/base.less
@@ -1563,6 +1563,25 @@ a.github-fork {
 			.transform(translateX(0));
 		}
 	}
+	&.layout1 {
+		.calc(width, ~'100% - ' @rooms-box-width + @flex-tab-webrtc-width);
+		margin-right: 420px;
+		.flex-tab {
+			max-width: @flex-tab-webrtc-width;
+			.transform(translateX(0));
+
+		}
+
+	}
+	&.layout2 {
+		.calc(width, ~'100% - ' @rooms-box-width + @flex-tab-webrtc-2-width);
+		margin-right: 420px;
+		.flex-tab {
+			max-width: @flex-tab-webrtc-2-width;
+			.transform(translateX(0));
+		}
+
+	}
 	.container-fluid {
 		padding-top: 0;
 	}
@@ -2125,7 +2144,7 @@ a.github-fork {
 						}
 					}
 				}
-			}
+			}	
 		}
 		.search-form {
 			padding: 0 4px 0 0;
diff --git a/client/stylesheets/global/_variables.less b/client/stylesheets/global/_variables.less
index 86a41bf8adba..ddadf7606b91 100644
--- a/client/stylesheets/global/_variables.less
+++ b/client/stylesheets/global/_variables.less
@@ -3,6 +3,8 @@
 
 @rooms-box-width: 260px;
 @flex-tab-width: 400px;
+@flex-tab-webrtc-width: 400px;
+@flex-tab-webrtc-2-width: 850px;
 
 // Colors
 // --------------
diff --git a/client/views/app/layout.coffee b/client/views/app/layout.coffee
index c212cc65de1e..0dd5380bda5b 100644
--- a/client/views/app/layout.coffee
+++ b/client/views/app/layout.coffee
@@ -1,7 +1,17 @@
 Template.appLayout.helpers
 	flexOpened: ->
+		console.log 'layout.helpers flexOpened' if window.rocketDebug
 		return 'flex-opened' if Session.equals('flexOpened', true)
 
+	flexOpenedRTC1: ->
+		console.log 'layout.helpers flexOpenedRTC1' if window.rocketDebug
+		return 'layout1' if Session.equals('flexOpenedRTC1', true)
+
+	flexOpenedRTC2: ->
+		console.log 'layout.helpers flexOpenedRTC2' if window.rocketDebug
+		return 'layout2' if Session.equals('flexOpenedRTC2', true)
+
+
 Template.appLayout.rendered = ->
 	$('html').addClass("noscroll").removeClass "scroll"
 	
diff --git a/client/views/app/layout.html b/client/views/app/layout.html
index de6f0bedff49..bb3973aedfd3 100644
--- a/client/views/app/layout.html
+++ b/client/views/app/layout.html
@@ -4,7 +4,7 @@
 		<div class="connection-status">
 			{{> status}}
 		</div>
-		<main class="main-content {{flexOpened}}">
+		<main class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">
 			{{> yield}}
 		</main>
 		{{> sideNav }}
diff --git a/client/views/app/room.coffee b/client/views/app/room.coffee
index cde0d46e0089..71bc13491f2c 100644
--- a/client/views/app/room.coffee
+++ b/client/views/app/room.coffee
@@ -196,6 +196,15 @@ Template.room.helpers
 		console.log 'room.helpers flexOpened' if window.rocketDebug
 		return 'opened' if Session.equals('flexOpened', true)
 
+	flexOpenedRTC1: ->
+		console.log 'room.helpers flexOpenedRTC1' if window.rocketDebug
+		return 'layout1' if Session.equals('flexOpenedRTC1', true)
+
+	flexOpenedRTC2: ->
+		console.log 'room.helpers flexOpenedRTC2' if window.rocketDebug
+		return 'layout2' if Session.equals('flexOpenedRTC2', true)
+
+
 	arrowPosition: ->
 		console.log 'room.helpers arrowPosition' if window.rocketDebug
 		return 'left' unless Session.equals('flexOpened', true)
@@ -267,12 +276,24 @@ Template.room.helpers
 	selfVideoUrl: ->
 		return Session.get('selfVideoUrl')
 
+	rtcLayout1: ->
+		return Session.get('flexOpenedRTC1');
+
+	rtcLayout2: ->
+		return Session.get('flexOpenedRTC2');
+
 
 Template.room.events
 
 	"click .flex-tab .more": (event) ->
 		console.log 'room click .flex-tab .more' if window.rocketDebug
-		Session.set('flexOpened', !Session.get('flexOpened'))
+		if (Session.get('flexOpened')) 
+			Session.set('flexOpenedRTC2', false);
+			Session.set('flexOpenedRTC1', false);
+			Session.set('flexOpened',false);
+		else 
+			Session.set('flexOpened', !Session.get('flexOpened'))
+		
 
 	'click .chat-new-messages': (event) ->
 		console.log 'room click .chat-new-messages' if window.rocketDebug
@@ -358,6 +379,22 @@ Template.room.events
 		Session.set('flexOpened', true)
 		Session.set('showUserInfo', $(e.currentTarget).data('username'))
 
+	"click .flex-tab  .video-remote" : (e) ->
+		console.log 'room click .flex-tab .avatar-image' if window.rocketDebug
+		if (Session.get('flexOpenedRTC2'))
+			console.log 'resetting both flexOpenedRTC1 and flexOpenedRTC2 to false' if window.rocketDebug
+			Session.set('flexOpenedRTC1', false)
+			Session.set('flexOpenedRTC2', false)
+		else			
+			if (Session.get('flexOpenedRTC1'))
+				console.log 'flexOpenedRTC2 set to true' if window.rocketDebug
+				Session.set('flexOpenedRTC2', true)
+			else
+				if (Session.get('flexOpened'))
+					console.log 'flexOpenedRTC1 set to true' if window.rocketDebug
+					Session.set('flexOpenedRTC1', true)
+
+
 	'click .user-card-message': (e) ->
 		console.log 'room click .user-card-message' if window.rocketDebug
 		roomData = Session.get('roomData' + this._arguments[1].rid)
diff --git a/client/views/app/room.html b/client/views/app/room.html
index 3cb241ffbc5e..4f324597eedc 100644
--- a/client/views/app/room.html
+++ b/client/views/app/room.html
@@ -162,12 +162,28 @@ <h3>{{username}}</h3>
 						<div class="user-view">
 							{{#with userData}}
 								<div class="about cf_">
-									<div>
+									
 										{{#if selfVideoUrl}}
-											<video class="video-remote" src="{{remoteVideoUrl}}" style="width: 100%; margin-bottom: 10px; background-color: #000;" autoplay></video>
-											<video class="video-self" src="{{selfVideoUrl}}" style="width: 100px; position: absolute; top: 21px; right: 21px; border: 1px solid #FFF; background-color: #000;" autoplay muted></video>
+											{{#if rtcLayout2}}
+											<div style="display: flex; flex-direction: row; align-items: center; width: 800px; height: 350px">
+												<video class="video-remote" src="{{remoteVideoUrl}}" style="flex: 1 0; width: 480px; margin: 10px; background-color: #000;"  autoplay></video>
+												<video class="video-self" src="{{selfVideoUrl}}" style="flex: 1 0;  width: 480px; margin: 10px; background-color: #000;" autoplay muted></video>
+											</div>
+											{{else}}
+											  {{#if rtcLayout1}}
+											  <div style="display: flex; flex-direction: column; align-items: center; width: 360px; height: 500px">	
+												<video class="video-remote" src="{{remoteVideoUrl}}" style="flex: 1 1;  width: 320px; margin: 10px; background-color: #000;" autoplay></video>
+												<video class="video-self" src="{{selfVideoUrl}}" style="flex: 1 1; width: 320px; margin: 10px; background-color: #000;" autoplay muted></video>
+											  </div>
+											  {{else}}
+											  <div>
+												<video class="video-remote" src="{{remoteVideoUrl}}" style="width: 100%; align-items: center; margin-bottom: 10px; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay></video>
+												<video class="video-self" src="{{selfVideoUrl}}" style="width: 100px; position: absolute; top: 21px; right: 21px; border: 1px solid #FFF; background-color: #000; transition: width 2s, height 2s, top 2s, left 2s, transform 2s;" autoplay muted></video>
+											  </div>
+											  {{/if}}
+											{{/if}}
 										{{/if}}
-									</div>
+									
 									<div class="thumb">
 										{{> avatar username=username}}
 									</div>