diff --git a/app/src/components/Controls/Sidebar.js b/app/src/components/Controls/Sidebar.js
index 742dd57..b696de8 100644
--- a/app/src/components/Controls/Sidebar.js
+++ b/app/src/components/Controls/Sidebar.js
@@ -34,7 +34,17 @@ const styles = (theme) =>
 		fab :
 		{
 			margin : theme.spacing.unit
-		}
+		},
+		show :
+		{
+			opacity    : 1,
+			transition : 'opacity .5s'
+		},
+		hide :
+		{
+			opacity    : 0,
+			transition : 'opacity .5s'
+		},
 	});
 
 class Sidebar extends React.PureComponent
@@ -71,9 +81,9 @@ class Sidebar extends React.PureComponent
 
 		return (
 			<div
-				className={classnames(classes.root, 'room-controls', {
-					'visible' : toolbarsVisible
-				})}
+				className={
+					classnames(classes.root, toolbarsVisible ? classes.show : classes.hide)
+				}
 			>
 				<Fab
 					aria-label='Share screen'
diff --git a/app/src/components/Room.js b/app/src/components/Room.js
index 52bd333..7f6de46 100644
--- a/app/src/components/Room.js
+++ b/app/src/components/Room.js
@@ -60,6 +60,16 @@ const styles = (theme) =>
 			margin  : 0,
 			padding : 0
 		},
+		show :
+		{
+			opacity    : 1,
+			transition : 'opacity .5s'
+		},
+		hide :
+		{
+			opacity    : 0,
+			transition : 'opacity .5s'
+		},
 		toolbar     : theme.mixins.toolbar,
 		drawerPaper :
 		{
@@ -262,6 +272,7 @@ class Room extends React.PureComponent
 
 					<AppBar
 						position='fixed'
+						className={room.toolbarsVisible ? classes.show : classes.hide}
 					>
 						<Toolbar>
 							<Badge