diff --git a/packages/rocketchat-theme/client/imports/components/main-content.css b/packages/rocketchat-theme/client/imports/components/main-content.css
index 7818c70e5c2..bdcb679b18b 100644
--- a/packages/rocketchat-theme/client/imports/components/main-content.css
+++ b/packages/rocketchat-theme/client/imports/components/main-content.css
@@ -1,8 +1,8 @@
 .main-content {
-	height: auto !important;
+	height: 100vh !important;
 	width: 100% !important;
 	z-index: 0 !important;
-	position: static;
+	position: relative;
 }
 
 @media (width <= 780px) {
diff --git a/packages/rocketchat-theme/client/imports/components/modal/create-channel.css b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css
new file mode 100644
index 00000000000..dd308b743e0
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css
@@ -0,0 +1,33 @@
+:root {
+	--create-channel-gap-between-elements: 2.5rem;
+}
+
+.create-channel {
+	&__header,
+	&__switches,
+	&__inputs,
+	& .rc-input:not(:last-child) {
+		margin-bottom: var(--create-channel-gap-between-elements);
+	}
+
+	&__title {
+		color: #1f2329;
+		font-size: 1.375rem;
+		font-weight: 400;
+		padding: 0.25rem 0;
+	}
+
+	&__description {
+		font-size: 0.875rem;
+		color: #9ea2a8;
+		padding: 0.25rem 0;
+	}
+
+	&__switches {
+		display: flex;
+	}
+
+	& .rc-switch {
+		width: 50%;
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/components/modal/full-modal.css b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css
new file mode 100644
index 00000000000..97b0939bd81
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css
@@ -0,0 +1,38 @@
+:root {
+	--modal-wrapper-width: 650px;
+	--modal-wrapper-margin: 3rem;
+}
+
+.full-modal {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+
+	&__wrapper {
+		position: relative;
+		width: var(--modal-wrapper-width);
+		margin: var(--modal-wrapper-margin) 0;
+	}
+
+	&__back-button {
+		position: absolute;
+		right: 0;
+		top: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	&__back-text {
+		margin-right: 0.375rem;
+	}
+
+	&__back-icon {
+		stroke: currentColor;
+		width: 10px;
+		height: 10px;
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar.css
index a5224756ade..5b30d956212 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar.css
@@ -162,6 +162,37 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
+
+		& .rc-input {
+			&__wrapper {
+				padding: 0;
+				color: #9ea2a8;
+			}
+
+			&__element {
+				background-color: #1f2329;
+				border-color: #414852;
+				color: #ffffff;
+
+				&:focus + .rc-input__icon--right {
+					display: flex;
+				}
+			}
+
+			&__icon {
+				left: 0.5rem;
+
+				&--right {
+					display: none;
+					left: auto;
+					right: 0.5rem;
+				}
+
+				& + .rc-input__element {
+					padding: 0.5rem 1rem 0.5rem 2.25rem;
+				}
+			}
+		}
 	}
 
 	&__search-input {
@@ -181,19 +212,45 @@
 		width: 13px;
 		height: 13px;
 		stroke: currentColor;
+	}
 
-		&-search {
-			position: absolute;
-			left: 8px;
+	& .rc-input {
+		&__wrapper {
+			padding: 0;
+			color: #9ea2a8;
+		}
+
+		&__element {
+			background-color: #1f2329;
+			border-color: #414852;
+			color: #ffffff;
+
+			&:focus + .rc-input__icon--right {
+				display: flex;
+			}
+		}
+
+		&__icon {
+			left: 0.5rem;
 
 			&--right {
-				left: auto;
-				right: 8px;
-				cursor: pointer;
 				display: none;
+				left: auto;
+				right: 0.5rem;
+			}
+
+			& + .rc-input__element {
+				padding: 0.5rem 1rem 0.5rem 2.25rem;
 			}
 		}
 	}
+
+	& .rc-button {
+		background-color: #1f2329;
+		border-color: #414852;
+		color: #9ea2a8;
+		margin-left: 0.5rem;
+	}
 }
 
 /* rooms list */
diff --git a/packages/rocketchat-theme/client/imports/general/forms.css b/packages/rocketchat-theme/client/imports/general/forms.css
index 53ba17af626..32032e6331a 100644
--- a/packages/rocketchat-theme/client/imports/general/forms.css
+++ b/packages/rocketchat-theme/client/imports/general/forms.css
@@ -105,22 +105,37 @@
 
 :root {
 	--button-square-size: 36px;
+	--button-padding: 0.782rem;
+	--button-padding-small: 0.5rem;
 	--input-font-size: 0.875rem;
 }
 
-.rc-input,
 .rc-button {
 	font-size: var(--input-font-size);
-	padding: 0.563rem 0.75rem;
+	padding: var(--button-padding);
 	border-radius: 2px;
 	border-width: 1px;
 	border-style: solid;
 	background-color: transparent;
-}
-
-.rc-button {
 	cursor: pointer;
 
+	&:disabled {
+		background-color: #e1e5e8;
+		color: #ffffff;
+		border: 0;
+		cursor: default;
+	}
+
+	&--blue {
+		background-color: #1d74f5;
+		color: #ffffff;
+		border: 0;
+	}
+
+	&--small {
+		padding: var(--button-padding-small);
+	}
+
 	&--square {
 		display: flex;
 		align-items: center;
@@ -129,3 +144,163 @@
 		flex: 0 0 var(--button-square-size);
 	}
 }
+
+.rc-input {
+	&__label {
+		cursor: pointer;
+	}
+
+	&__title {
+		font-size: var(--input-font-size);
+		color: #2d343d;
+	}
+
+	&__wrapper {
+		padding: 0.5rem 0;
+		position: relative;
+		color: #2f343d;
+	}
+
+	&__icon {
+		width: 20px;
+		display: flex;
+		justify-content: center;
+		position: absolute;
+		left: 1rem;
+		top: 0;
+		height: 100%;
+		align-items: center;
+		cursor: default;
+
+		& + .rc-input__element {
+			padding: 0.75rem 1rem 0.75rem 3.25rem;
+		}
+
+		& + .rc-input__element--small {
+			padding: 0.5rem 1rem 0.5rem 3.25rem;
+		}
+
+		&--right {
+			right: 1rem;
+			left: auto;
+		}
+	}
+
+	&__icon-svg {
+		stroke: currentColor;
+
+		&--hashtag {
+			width: 14px;
+			height: 14px;
+		}
+
+		&--user {
+			width: 12px;
+			height: 13px;
+		}
+
+		&--magnifier {
+			width: 13px;
+			height: 13px;
+		}
+
+		&--cross {
+			width: 10px;
+			height: 10px;
+		}
+	}
+
+	&__element {
+		width: 100%;
+		background-color: transparent;
+		border-width: 1px;
+		border-radius: 2px;
+		border-color: #e1e5e8;
+		padding: 0.75rem 1rem;
+		font-size: var(--input-font-size);
+
+		&--small {
+			padding: 0.5rem 1rem;
+		}
+
+		&::placeholder {
+			color: #cbced1;
+		}
+	}
+
+	&__description {
+		color: #9ea2a8;
+		font-size: var(--input-font-size);
+	}
+}
+
+.rc-switch {
+	&__label {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0.5rem;
+	}
+
+	&__input {
+		display: none;
+
+		&:disabled {
+			& + .rc-switch__button {
+				cursor: default;
+				border-color: #e1e5e8;
+				background-color: #f2f3f5;
+			}
+
+			& ~ .rc-switch__text {
+				cursor: default;
+			}
+		}
+
+		&:checked {
+			& + .rc-switch__button {
+				border-color: #26d198;
+				background-color: #2de0a5;
+
+				& .rc-switch__button-inside {
+					transform: translate3d(1px, 1px, 0);
+				}
+			}
+		}
+	}
+
+	&__button {
+		display: block;
+		width: 32px;
+		height: 20px;
+		border-radius: 13px;
+		border-color: #e1364c;
+		background-color: #f5455c;
+		border-width: 1px;
+		transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
+		margin-right: 0.5rem;
+		cursor: pointer;
+	}
+
+	&__button-inside {
+		display: block;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: #ffffff;
+		border-width: 1px;
+		border-color: #f2f3f5;
+		transform: translate3d(13px, 1px, 0);
+		transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
+	}
+
+	&__text {
+		font-size: var(--input-font-size);
+		color: #2f343d;
+		cursor: pointer;
+	}
+
+	&__description {
+		font-size: var(--input-font-size);
+		color: #9ea2a8;
+	}
+}
diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css
index 4d7cf029d13..41ab21ec92a 100644
--- a/packages/rocketchat-theme/client/main.css
+++ b/packages/rocketchat-theme/client/main.css
@@ -12,3 +12,5 @@
 @import 'imports/components/badge.css';
 @import 'imports/components/popover.css';
 @import 'imports/components/tooltip.css';
+@import 'imports/components/modal/full-modal.css';
+@import 'imports/components/modal/create-channel.css';
diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
index 4914bd371df..229fbfa80b0 100644
--- a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
+++ b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
@@ -2,7 +2,6 @@
 
 Template.chatRoomItem.helpers({
 	roomData() {
-		console.log('lalala', this);
 		let name = this.name;
 		if (RocketChat.settings.get('UI_Use_Real_Name') && this.fname) {
 			name = this.fname;
diff --git a/packages/rocketchat-ui-sidenav/client/toolbar.html b/packages/rocketchat-ui-sidenav/client/toolbar.html
index 2cb675d0098..9456527925d 100644
--- a/packages/rocketchat-ui-sidenav/client/toolbar.html
+++ b/packages/rocketchat-ui-sidenav/client/toolbar.html
@@ -2,16 +2,26 @@
 	<div class="toolbar">
 		<form class="toolbar__wrapper sidebar-content-active" role="search">
 			<div class="toolbar__search">
-				<svg class="toolbar__icon toolbar__icon-search">
-					<use xlink:href="/images/icons.svg#magnifier"></use>
-				</svg>
-				<input type="text" name="toolbar-input" class="toolbar__search-input rc-input sidebar-content-active sidebar-content-active-border" placeholder="{{getPlaceholder}}" toolbar-input>
-				<svg class="toolbar__icon toolbar__icon-search toolbar__icon-search--right">
-					<use xlink:href="/images/icons.svg#cross"></use>
-				</svg>
+				<div class="rc-input">
+					<label class="rc-input__label">
+						<div class="rc-input__wrapper">
+							<div class="rc-input__icon">
+								<svg class="rc-input__icon-svg rc-input__icon-svg--magnifier">
+									<use href="/images/icons.svg#magnifier"></use>
+								</svg>
+							</div>
+							<input type="text" class="rc-input__element rc-input__element--small" placeholder="{{getPlaceholder}}">
+							<div class="rc-input__icon rc-input__icon--right">
+								<svg class="rc-input__icon-svg rc-input__icon-svg--cross">
+									<use href="/images/icons.svg#cross"></use>
+								</svg>
+							</div>
+						</div>
+					</label>
+				</div>
 			</div>
 			{{#if canCreate}}
-				<button class="toolbar__search-buttons sidebar-content-active-border rc-tooltip rc-button rc-button--square" aria-label="{{ _ 'Create_A_New_Channel' }}">
+				<button class="rc-button rc-button--square rc-tooltip" aria-label="{{ _ 'Create_A_New_Channel' }}">
 					<svg class="toolbar__icon toolbar__search-create-channel">
 						<use xlink:href="/images/icons.svg#plus"></use>
 					</svg>
diff --git a/packages/rocketchat-ui-sidenav/client/toolbar.js b/packages/rocketchat-ui-sidenav/client/toolbar.js
index b294887bc06..a3741ddc33c 100644
--- a/packages/rocketchat-ui-sidenav/client/toolbar.js
+++ b/packages/rocketchat-ui-sidenav/client/toolbar.js
@@ -228,8 +228,7 @@ Template.toolbar.events({
 
 	'click [role="search"] button, touchend [role="search"] button'(e) {
 		if (RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p'])) {
-			SideNav.setFlex('createCombinedFlex');
-			SideNav.openFlex();
+			FlowRouter.go('create-channel');
 		} else {
 			e.preventDefault();
 		}
diff --git a/packages/rocketchat-ui/client/views/app/createChannel.html b/packages/rocketchat-ui/client/views/app/createChannel.html
new file mode 100644
index 00000000000..49c49e284b3
--- /dev/null
+++ b/packages/rocketchat-ui/client/views/app/createChannel.html
@@ -0,0 +1,66 @@
+<template name="createChannel">
+	<section class="create-channel">
+		<header class="create-channel__header">
+			<h1 class="create-channel__title">New Channel</h1>
+			<p class="create-channel__description">Channels are where your team communicates.</p>
+		</header>
+		<div class="create-channel__content">
+			<div class="create-channel__switches">
+				<div class="rc-switch">
+					<label class="rc-switch__label">
+						<input type="checkbox" class="rc-switch__input">
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">
+							Public Channel
+						</span>
+					</label>
+					<span class="rc-switch__description">Everyone can access this channel</span>
+				</div>
+				<div class="rc-switch">
+					<label class="rc-switch__label">
+						<input type="checkbox" class="rc-switch__input" disabled>
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+						<span class="rc-switch__text">
+							Read only channel
+						</span>
+					</label>
+					<span class="rc-switch__description">Only admin can write new messages</span>
+				</div>
+			</div>
+			<div class="create-channel__inputs">
+				<div class="rc-input">
+					<label class="rc-input__label">
+						<div class="rc-input__title">Channel name</div>
+						<div class="rc-input__wrapper">
+							<div class="rc-input__icon">
+								<svg class="rc-input__icon-svg rc-input__icon-svg--hashtag">
+									<use href="/images/icons.svg#hashtag"></use>
+								</svg>
+							</div>
+							<input type="text" class="rc-input__element" placeholder="Type channel name">
+						</div>
+					</label>
+					<div class="rc-input__description">Names must be all lower case and shorter than 22 characters</div>
+				</div>
+				<div class="rc-input">
+					<label class="rc-input__label">
+						<div class="rc-input__title">Invite people to channel</div>
+						<div class="rc-input__wrapper">
+							<div class="rc-input__icon">
+								<svg class="rc-input__icon-svg rc-input__icon-svg--user">
+									<use href="/images/icons.svg#user"></use>
+								</svg>
+							</div>
+							<input type="text" class="rc-input__element" placeholder="Type channel name">
+						</div>
+					</label>
+				</div>
+			</div>
+			<button class="rc-button rc-button--blue">Create Channel</button>
+		</div>
+	</section>
+</template>
diff --git a/packages/rocketchat-ui/client/views/app/fullModal.html b/packages/rocketchat-ui/client/views/app/fullModal.html
new file mode 100644
index 00000000000..0b412f25101
--- /dev/null
+++ b/packages/rocketchat-ui/client/views/app/fullModal.html
@@ -0,0 +1,13 @@
+<template name="fullModal">
+	<div class="full-modal content-background">
+		<div class="full-modal__wrapper">
+			<button class="full-modal__back-button sidebar-content">
+				<span class="full-modal__back-text">{{_ "Cancel"}}</span>
+				<svg class="full-modal__back-icon">
+					<use href="/images/icons.svg#cross"></use>
+				</svg>
+			</button>
+			{{> Template.dynamic template=template}}
+		</div>
+	</div>
+</template>
diff --git a/packages/rocketchat-ui/client/views/app/fullModal.js b/packages/rocketchat-ui/client/views/app/fullModal.js
new file mode 100644
index 00000000000..50eb0528d18
--- /dev/null
+++ b/packages/rocketchat-ui/client/views/app/fullModal.js
@@ -0,0 +1,33 @@
+let oldRoute = '';
+const parent = document.querySelector('.main-content');
+
+FlowRouter.route('/create-channel', {
+	name: 'create-channel',
+
+	triggersEnter: [function() {
+		oldRoute = FlowRouter.current().oldRoute;
+	}],
+
+	action() {
+		if (parent) {
+			Blaze.renderWithData(Template.fullModal, {template: 'createChannel'}, parent);
+		} else {
+			BlazeLayout.render('main', {center: 'fullModal', template: 'createChannel'});
+		}
+	},
+
+	triggersExit: [function() {
+		Blaze.remove(Blaze.getView(document.getElementsByClassName('full-modal')[0]));
+		$('.main-content').addClass('rc-old');
+	}]
+});
+
+Template.fullModal.events({
+	'click button'() {
+		oldRoute ? history.back() : FlowRouter.go('home');
+	}
+});
+
+Template.fullModal.onRendered(function() {
+	$('.main-content').removeClass('rc-old');
+});
diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js
index 200ff32d6da..35fd7030630 100644
--- a/packages/rocketchat-ui/package.js
+++ b/packages/rocketchat-ui/package.js
@@ -80,6 +80,8 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/404/invalidSecretURL.html', 'client');
 	api.addFiles('client/views/app/audioNotification.html', 'client');
 	api.addFiles('client/views/app/burger.html', 'client');
+	api.addFiles('client/views/app/createChannel.html', 'client');
+	api.addFiles('client/views/app/fullModal.html', 'client');
 	api.addFiles('client/views/app/home.html', 'client');
 	api.addFiles('client/views/app/notAuthorized.html', 'client');
 	api.addFiles('client/views/app/pageContainer.html', 'client');
@@ -98,6 +100,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/modal.js', 'client');
 	api.addFiles('client/views/404/roomNotFound.js', 'client');
 	api.addFiles('client/views/app/burger.js', 'client');
+	api.addFiles('client/views/app/fullModal.js', 'client');
 	api.addFiles('client/views/app/home.js', 'client');
 	api.addFiles('client/views/app/mobileMessageMenu.js', 'client');
 	api.addFiles('client/views/app/privateHistory.js', 'client');