diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js
index 4f259d8e..42eb96f1 100644
--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@@ -108,13 +108,7 @@ const styles = (theme) =>
 			'& .fab' :
 			{
 				margin        : theme.spacing(1),
-				pointerEvents : 'auto',
-				'&.smallest'  : {
-					width     : 30,
-					height    : 30,
-					minHeight : 'auto',
-					margin    : theme.spacing(0.5)
-				}
+				pointerEvents : 'auto'
 			}
 		},
 		ptt :
@@ -174,89 +168,124 @@ const Me = (props) =>
 		hasScreenPermission,
 		transports,
 		noiseVolume,
-		classes
+		classes,
+		theme
 	} = props;
 
 	// const width = style.width;
 
 	const height = style.height;
 
-	const [ buttonSize, setButtonSize ] = useState('large');
-
 	const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
-
 		{
-			flexDirection : 'row'
+			style : {},
+			btn   : {
+				style : {},
+				size  : ''
+			}
 		}
 	);
 
-	const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(
-		{
-			fontSize : '1.5vh'
-		}
-	);
+	const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(null);
 
+	// Dinamic properties/style values
 	useEffect(() =>
 	{
-		if (height > 0 && height <= 190)
+		if (height > 0)
 		{
-			setButtonSize('small');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'row',
-				alignItems    : 'flex-start'
+				style : {
+					flexDirection : 'row',
+					alignItems    : 'flex-start'
+				},
+				btn : {
+					style : {
+						width     : 30,
+						height    : 30,
+						minHeight : 'auto',
+						margin    : theme.spacing(0.5)
+					},
+					size : 'small'
+				}
 			});
 
 			setMeTagAdditionalStyles({
 				fontSize : '0em'
 			});
-
 		}
 
-		else if (height > 190 && height <= 320)
+		if (height > 170)
 		{
-
-			setButtonSize('small');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'column'
+				style : {
+					flexDirection : 'row',
+					alignItems    : 'flex-start'
+				},
+				btn : {
+					style : {},
+					size  : 'small'
+				}
 			});
 
 			setMeTagAdditionalStyles({
-				fontSize : '2.0em'
+				'style' : {
+					fontSize : '2.0em'
+				}
 			});
-
 		}
 
-		else if (height > 320 && height <= 400)
+		if (height > 190)
 		{
-			setButtonSize('medium');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'column'
-			});
-
-			setMeTagAdditionalStyles({
-				fontSize : '2.5em'
-			});
-
-		}
-
-		else if (height > 400)
-		{
-			setButtonSize('large');
-
-			setControlsAdditionalStyles({
-				flexDirection : 'column'
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'small'
+				}
 			});
 
 			setMeTagAdditionalStyles({
 				fontSize : '3.0em'
 			});
-
 		}
 
-	}, [ height ]);
+		if (height > 320)
+		{
+			setControlsAdditionalStyles({
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'medium'
+				}
+			});
+
+			setMeTagAdditionalStyles({
+				fontSize : '4em'
+			});
+		}
+
+		if (height > 400)
+		{
+			setControlsAdditionalStyles({
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'large'
+				}
+			});
+
+			setMeTagAdditionalStyles({
+				fontSize : '5.0em'
+			});
+		}
+
+	}, [ height, theme ]);
 
 	const videoVisible = (
 		Boolean(webcamProducer) &&
@@ -520,7 +549,7 @@ const Me = (props) =>
 					{/* CONTROLS BUTTONS (inside) */}
 					{ !settings.buttonControlBar &&
 						<div
-							style={{ ...controlsAdditionalStyles }}
+							style={{ ...controlsAdditionalStyles.style }}
 							className={classnames(
 								classes.controls,
 								settings.hiddenControls ? 'hide' : null,
@@ -558,10 +587,8 @@ const Me = (props) =>
 												id             : 'device.muteAudio',
 												defaultMessage : 'Mute audio'
 											})}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
 											disabled={
 												!me.canSendMic ||
 													!hasAudioPermission ||
@@ -574,7 +601,7 @@ const Me = (props) =>
 												: 'secondary'
 											}
 
-											size={buttonSize}
+											size={controlsAdditionalStyles.btn.size}
 											onClick={() =>
 											{
 												if (micState === 'off')
@@ -630,17 +657,15 @@ const Me = (props) =>
 												id             : 'device.startVideo',
 												defaultMessage : 'Start video'
 											})}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
 											disabled={
 												!me.canSendWebcam ||
 													!hasVideoPermission ||
 													me.webcamInProgress
 											}
 											color={webcamState === 'on' ? 'default' : 'secondary'}
-											size={buttonSize}
+											size={controlsAdditionalStyles.btn.size}
 
 											onClick={() =>
 											{
@@ -673,17 +698,15 @@ const Me = (props) =>
 													id             : 'device.startScreenSharing',
 													defaultMessage : 'Start screen sharing'
 												})}
-												className={classnames(
-													'fab',
-													height <= 170 ? 'smallest': null
-												)}
+												style={{ ...controlsAdditionalStyles.btn.style }}
+												className={classnames('fab')}
 												disabled={
 													!hasScreenPermission ||
 														!me.canShareScreen ||
 														me.screenShareInProgress
 												}
 												color={screenState === 'on' ? 'primary' : 'default'}
-												size={buttonSize}
+												size={controlsAdditionalStyles.btn.size}
 
 												onClick={() =>
 												{
@@ -715,11 +738,9 @@ const Me = (props) =>
 												id             : 'device.options',
 												defaultMessage : 'Options'
 											})}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
-											size={buttonSize}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
+											size={controlsAdditionalStyles.btn.size}
 
 											onClick={handleMenuOpen}
 										>
@@ -864,12 +885,10 @@ const Me = (props) =>
 												id             : 'device.stopVideo',
 												defaultMessage : 'Stop video'
 											})}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
 											disabled={!me.canSendWebcam || me.webcamInProgress}
-											size={buttonSize}
+											size={controlsAdditionalStyles.btn.size}
 											onClick={() =>
 											{
 												roomClient.disableExtraVideo(producer.id);
diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js
index 9273e4bd..2882abb9 100644
--- a/app/src/components/Containers/Peer.js
+++ b/app/src/components/Containers/Peer.js
@@ -155,7 +155,8 @@ const Peer = (props) =>
 		classes,
 		enableLayersSwitch,
 		isSelected,
-		mode
+		mode,
+		theme
 	} = props;
 
 	const micEnabled = (
@@ -186,80 +187,116 @@ const Peer = (props) =>
 
 	const height = style.height;
 
-	const [ buttonSize, setButtonSize ] = useState('large');
-
 	const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
 		{
-			flexDirection : 'row'
+			style : {},
+			btn   : {
+				style : {},
+				size  : ''
+			}
 		}
 	);
 
-	const [ videoInfoAdditionalStyles, setVideoInfoAdditionalStyles ] = useState(
-		{
-			fontSize : '1.5vh'
-		}
-	);
+	const [ videoInfoAdditionalStyles, setVideoInfoAdditionalStyles ] = useState();
 
+	// Dinamic properties/style values
 	useEffect(() =>
 	{
-		if (height > 0 && height <= 190)
+		if (height > 0)
 		{
-			setButtonSize('small');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'row',
-				alignItems    : 'flex-start'
+				style : {
+					flexDirection : 'row',
+					alignItems    : 'flex-start'
+				},
+				btn : {
+					style : {
+						width     : 30,
+						height    : 30,
+						minHeight : 'auto',
+						margin    : theme.spacing(0.5)
+					},
+					size : 'small'
+				}
 			});
 
 			setVideoInfoAdditionalStyles({
 				fontSize : '0em'
 			});
-
 		}
 
-		else if (height > 190 && height <= 320)
+		if (height > 170)
 		{
-			setButtonSize('small');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'column'
+				style : {
+					flexDirection : 'row',
+					alignItems    : 'flex-start'
+				},
+				btn : {
+					style : {},
+					size  : 'small'
+				}
 			});
 
 			setVideoInfoAdditionalStyles({
-				fontSize : '1.2em'
+				'style' : {
+					fontSize : '2.0em'
+				}
 			});
-
 		}
 
-		else if (height > 320 && height <= 400)
+		if (height > 190)
 		{
-			setButtonSize('medium');
-
 			setControlsAdditionalStyles({
-				flexDirection : 'column'
-			});
-
-			setVideoInfoAdditionalStyles({
-				fontSize : '2.0em'
-			});
-
-		}
-
-		else if (height > 400)
-		{
-			setButtonSize('large');
-
-			setControlsAdditionalStyles({
-				flexDirection : 'column'
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'small'
+				}
 			});
 
 			setVideoInfoAdditionalStyles({
 				fontSize : '3.0em'
 			});
-
 		}
 
-	}, [ height ]);
+		if (height > 320)
+		{
+			setControlsAdditionalStyles({
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'medium'
+				}
+			});
+
+			setVideoInfoAdditionalStyles({
+				fontSize : '4em'
+			});
+		}
+
+		if (height > 400)
+		{
+			setControlsAdditionalStyles({
+				style : {
+					flexDirection : 'column'
+				},
+				btn : {
+					style : {},
+					size  : 'large'
+				}
+			});
+
+			setVideoInfoAdditionalStyles({
+				fontSize : '5.0em'
+			});
+		}
+
+	}, [ height, theme ]);
 
 	if (peer.picture)
 	{
@@ -369,7 +406,7 @@ const Peer = (props) =>
 							classes.controls, hover ? 'hover' : null,
 							height <= 170 ? 'smallest': null
 						)}
-						style={{ ...controlsAdditionalStyles }}
+						style={{ ...controlsAdditionalStyles.style }}
 						onMouseOver={() => setHover(true)}
 						onMouseOut={() => setHover(false)}
 						onTouchStart={() =>
@@ -405,13 +442,11 @@ const Peer = (props) =>
 										defaultMessage : 'Mute audio'
 									})}
 									// className={classes.fab}
-									className={classnames(
-										'fab',
-										height <= 170 ? 'smallest': null
-									)}
+									style={{ ...controlsAdditionalStyles.btn.style }}
+									className={classnames('fab')}
 									disabled={!micConsumer}
 									color={micEnabled ? 'default' : 'secondary'}
-									size={buttonSize}
+									size={controlsAdditionalStyles.btn.size}
 									onClick={() =>
 									{
 										micEnabled ?
@@ -443,12 +478,9 @@ const Peer = (props) =>
 											id             : 'label.newWindow',
 											defaultMessage : 'New window'
 										})}
-										// className={classes.fab}
-										className={classnames(
-											'fab',
-											height <= 170 ? 'smallest': null
-										)}
-										size={buttonSize}
+										style={{ ...controlsAdditionalStyles.btn.style }}
+										className={classnames('fab')}
+										size={controlsAdditionalStyles.btn.size}
 										onClick={() =>
 										{
 											toggleConsumerWindow(webcamConsumer);
@@ -475,12 +507,10 @@ const Peer = (props) =>
 											defaultMessage : 'Fullscreen'
 										})}
 										// className={classes.fab}
-										className={classnames(
-											'fab',
-											height <= 170 ? 'smallest': null
-										)}
+										style={{ ...controlsAdditionalStyles.btn.style }}
+										className={classnames('fab')}
 										disabled={!videoVisible}
-										size={buttonSize}
+										size={controlsAdditionalStyles.btn.size}
 										onClick={() =>
 										{
 											toggleConsumerFullscreen(webcamConsumer);
@@ -521,11 +551,9 @@ const Peer = (props) =>
 											})
 										}
 										// className={classes.fab}
-										className={classnames(
-											'fab',
-											height <= 170 ? 'smallest': null
-										)}
-										size={buttonSize}
+										style={{ ...controlsAdditionalStyles.btn.style }}
+										className={classnames('fab')}
+										size={controlsAdditionalStyles.btn.size}
 										onClick={() =>
 										{
 											isSelected ?
@@ -560,12 +588,9 @@ const Peer = (props) =>
 											id             : 'device.options',
 											defaultMessage : 'Options'
 										})}
-										// className={classes.fab}
-										className={classnames(
-											'fab',
-											height <= 170 ? 'smallest': null
-										)}
-										size={buttonSize}
+										style={{ ...controlsAdditionalStyles.btn.style }}
+										className={classnames('fab')}
+										size={controlsAdditionalStyles.btn.size}
 										onClick={handleMenuOpen}
 									>
 										<MoreHorizIcon />
@@ -720,15 +745,13 @@ const Peer = (props) =>
 													defaultMessage : 'New window'
 												})}
 												// className={classes.fab}
-												className={classnames(
-													'fab',
-													height <= 170 ? 'smallest': null
-												)}
+												style={{ ...controlsAdditionalStyles.btn.style }}
+												className={classnames('fab')}
 												disabled={
 													!videoVisible ||
 													(windowConsumer === consumer.id)
 												}
-												size={buttonSize}
+												size={controlsAdditionalStyles.btn.size}
 												onClick={() =>
 												{
 													toggleConsumerWindow(consumer);
@@ -754,12 +777,10 @@ const Peer = (props) =>
 												defaultMessage : 'Fullscreen'
 											})}
 											// className={classes.fab}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
 											disabled={!videoVisible}
-											size={buttonSize}
+											size={controlsAdditionalStyles.btn.size}
 											onClick={() =>
 											{
 												toggleConsumerFullscreen(consumer);
@@ -883,15 +904,13 @@ const Peer = (props) =>
 												id             : 'label.newWindow',
 												defaultMessage : 'New window'
 											})}
-											className={classnames(
-												'fab',
-												height <= 170 ? 'smallest': null
-											)}
+											style={{ ...controlsAdditionalStyles.btn.style }}
+											className={classnames('fab')}
 											disabled={
 												!screenVisible ||
 											(windowConsumer === screenConsumer.id)
 											}
-											size={buttonSize}
+											size={controlsAdditionalStyles.btn.size}
 											onClick={() =>
 											{
 												toggleConsumerWindow(screenConsumer);
@@ -924,7 +943,7 @@ const Peer = (props) =>
 											height <= 170 ? 'smallest': null
 										)}
 										disabled={!screenVisible}
-										size={buttonSize}
+										size={controlsAdditionalStyles.btn.size}
 										onClick={() =>
 										{
 											toggleConsumerFullscreen(screenConsumer);