diff --git a/packages/rocketchat-theme/client/imports/components/header.css b/packages/rocketchat-theme/client/imports/components/header.css
index 00be50a788b08..c0d1d8523a16e 100644
--- a/packages/rocketchat-theme/client/imports/components/header.css
+++ b/packages/rocketchat-theme/client/imports/components/header.css
@@ -2,17 +2,14 @@
 	padding: 0 0.5rem;
 
 	&__wrap {
-
 		z-index: 2;
 
 		display: flex;
 
-		margin: 0 -0.5rem;
-
-
-		display: flex;
 		flex: 0 0 auto;
 
+		margin: 0 -0.5rem;
+
 		padding: var(--header-padding);
 
 		white-space: nowrap;
@@ -34,7 +31,6 @@
 	&__block {
 		display: flex;
 
-		margin: 0 0.5rem;
 		align-items: center;
 	}
 
diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index bb2b8b6f9ad78..7d3a2a0bf2c6c 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -2,114 +2,147 @@
 	display: flex;
 	flex-direction: column;
 
-	&-header {
-		display: flex;
+	padding: 0 1.5rem;
+
+	&-search {
+		width: 100%;
+
+		& .rc-icon {
+			width: 0.875rem;
+		}
 	}
 
+	& .rc-header {
+		padding: 1.25rem 0.5rem 0.75rem;
 
-	/* TODO: -plus and -search should be "globals" */
+		&__wrap {
 
-	&-plus {
-		width: 36px;
-		min-width: 36px;
-		height: 36px;
-		min-height: 36px;
-		padding: 0;
-	}
-	&-search {
-		max-width: 260px;
-	}
+			padding: 0.75rem 0;
 
-	&-selector,
-	&-search,
-	&-plus {
-		margin: 0 0.5rem;
-	}
-}
+			box-shadow: none;
+		}
 
-.rc-directory-header .rc-input__wrapper {
-	padding: 0;
+		&__block {
+			font-size: 1.375rem;
+		}
+	}
 }
 
 .rc-directory-channel {
 	&-wrapper {
 		display: flex;
-		align-items: center;
-		margin: 0 -9px;
 
 		overflow: hidden;
+
+		align-items: center;
 	}
 
 	&-avatar {
-		width: 60px;
-		height: 60px;
-		margin: 0 9px;
-
 		flex: 0 0 auto;
 
-		background-size: contain;
+		width: 32px;
+		height: 32px;
+		padding: 3px;
+
 		background-repeat: no-repeat;
 		background-position: center center;
+
+		background-size: contain;
 	}
 
 	&-info {
 		display: flex;
 
+		overflow: hidden;
+
 		flex-direction: column;
+
 		width: 1%;
-		flex-grow: 1;
 
 		white-space: nowrap;
-		overflow: hidden;
+
 		text-overflow: ellipsis;
+		flex-grow: 1;
+
+		margin: 0 3px;
 	}
 
-	&-name {
-		font-size: 1rem;
-		font-weight: 500;
-		white-space: nowrap;
+	&-name,
+	&-username {
 		overflow: hidden;
+
+		white-space: nowrap;
+
 		text-overflow: ellipsis;
+
+		& .rc-icon {
+			font-size: 1rem;
+		}
 	}
 
 	&-description {
-		margin-top: 0.625rem;
-		color: var(--rc-color-primary-light);
+
 		overflow: hidden;
-		text-overflow: ellipsis;
+
 		max-width: 200px;
-	}
+		margin-top: 0.625rem;
+
+		text-overflow: ellipsis;
 
-	&-createdAt {
-		text-transform: capitalize;
+		color: var(--rc-color-primary-light);
 	}
 }
 
 .rc-directory-content {
+	display: flex;
 	overflow-x: auto;
+	flex-direction: column;
 	flex: 1 1 100%;
+
 	height: 100vh;
 
 	& .js-sort {
 		cursor: pointer;
+
+		&.is-sorting .table-fake-th .rc-icon {
+			opacity: 1;
+		}
+	}
+
+	& .table-fake-th {
+		&:hover .rc-icon {
+			opacity: 1;
+		}
+
+		& .rc-icon {
+			transition: opacity 0.3s;
+
+			opacity: 0;
+
+			font-size: 1rem;
+		}
 	}
 }
 
-.rc-table-td--createdAt,
-.rc-table-td--users {
+.rc-directory-td--users {
+	overflow: hidden;
+
 	width: 120px;
+
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	overflow: hidden;
 }
 
-.rc-table-td--users {
+.rc-directory-td--users {
 	width: 80px;
 }
 
 @media (width <= 500px) {
-	.rc-directory-content .rc-table-head {
-		display: none;
+	.rc-directory-content {
+		& th:not(:first-child),
+		& td:not(:first-child) {
+			display: none;
+		}
 	}
 
 	.rc-directory {
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 3670b60ce6138..edc65dd3f3117 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -1,38 +1,126 @@
 .rc-table {
-	font-size: 0.875rem;
-	color: var(--rc-color-primary);
 	width: 100%;
 
+	color: var(--rc-color-primary);
+
+	font-size: 0.875rem;
+
 	&--fixed {
-		table-layout:fixed;
+		table-layout: fixed;
 	}
 
-	&-head {
-		color: var(--rc-color-primary-light);
+	& tbody {
+		& tr {
+			cursor: pointer;
 
-		& .rc-icon {
-			fill: var(--rc-color-primary-light);
+			&:hover {
+				background-color: var(--rc-color-primary-lightest);
+			}
 		}
 	}
 
-	&-body .rc-table-tr {
-		cursor: pointer;
+	& th,
+	& td {
+		vertical-align: middle;
 
-		&:hover {
-			background-color: var(--rc-color-primary-lightest);
+		&.bold {
+			font-weight: 600;
 		}
 	}
 
-	&-tr {
-		box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
-	}
+	& th {
+		height: 0;
 
-	&-td {
-		padding: 1.25rem 1rem;
-		vertical-align: middle;
+		padding-top: 0;
+		padding-bottom: 0;
 
-		&--bold {
-			font-weight: 600;
+		white-space: nowrap;
+
+		color: transparent;
+
+		line-height: 0;
+
+		& > .rc-icon {
+			display: none;
 		}
 	}
+
+	& td {
+		padding: 0.25rem 0;
+
+		font-size: 0.75rem;
+		line-height: 1rem;
+
+		overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+	}
+}
+
+.table-wrapper {
+	position: relative;
+
+	height: 100%;
+}
+
+.table-content-wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+}
+
+.table-content {
+	display: flex;
+	flex-direction: column;
+
+	min-height: 0;
+	flex-grow: 1;
+}
+
+.table-scroll {
+	overflow: auto;
+
+	min-height: 0;
+
+	margin-top: 2rem;
+
+	border-top: 1px solid #d8d8d8;
+	flex-grow: 1;
+}
+
+.table-fake-th {
+	position: absolute;
+	display: flex;
+	top: 0;
+
+	padding: 0.5rem 0;
+
+	text-align: left;
+
+	color: var(--rc-color-primary-light);
+
+	font-size: 0.75rem;
+	font-weight: 400;
+	line-height: 1rem;
+
+	& .rc-icon {
+		fill: var(--rc-color-primary-light);
+	}
+}
+
+.table-tr-dummy {
+	height: 1rem;
+}
+
+.table-column-date {
+	overflow: hidden;
+	width: 120px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-transform: capitalize;
 }
diff --git a/packages/rocketchat-theme/client/imports/components/tabs.css b/packages/rocketchat-theme/client/imports/components/tabs.css
new file mode 100644
index 0000000000000..1276b8aaae668
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/components/tabs.css
@@ -0,0 +1,34 @@
+.tabs {
+	margin-bottom: 0.5rem;
+
+	border-bottom: 1px solid rgba(216, 216, 216, 0.2);
+}
+
+.tabs-wrapper {
+	display: flex;
+
+	width: 100%;
+
+	margin: 0 -1rem;
+}
+
+.tab {
+	margin: 0 1rem;
+	padding: 1rem 0;
+
+	cursor: pointer;
+
+	transition: all 0.3s;
+
+	color: var(--rc-color-primary-light);
+
+	border-bottom: 1px solid transparent;
+
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+
+	&.active {
+		color: var(--rc-color-button-primary);
+		border-bottom-color: var(--rc-color-button-primary);
+	}
+}
diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css
index bbe16d044c530..25a3d80b4d9f4 100644
--- a/packages/rocketchat-theme/client/main.css
+++ b/packages/rocketchat-theme/client/main.css
@@ -49,9 +49,7 @@
 @import 'imports/components/emojiPicker.css';
 @import 'imports/components/table.css';
 @import 'imports/components/file-list.css';
-
-
-
+@import 'imports/components/tabs.css';
 
 /* Modal */
 @import 'imports/components/modal/full-modal.css';
diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index 368209622606a..f0299fa6c5ff5 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -448,12 +448,8 @@
     <symbol id="icon-loading" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling">
         <circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle>
     </symbol>
-    <symbol id="icon-sort-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-        <path d="M287.968 288H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 322.528 316.45 288 287.968 288zM160 448L32 320h256L160 448z" />
-    </symbol>
-    <symbol id="icon-sort-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-        <path d="M32.032 224h255.93c28.425 0 42.767-34.488 22.627-54.627l-127.962-128c-12.496-12.496-32.758-12.497-45.255 0l-127.968 128C-10.695 189.472 3.55 224 32.032 224zM160 64l128 128H32L160 64z" />
-    </symbol>
+    <symbol id="icon-sort-down" viewBox="0 0 16 16"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path stroke="#CBCED1" d="M10.657 6L8 3.343 5.343 6"/><path stroke="#9EA2A8" d="M10.657 10L8 12.657 5.343 10"/></g></symbol>
+    <symbol id="icon-sort-up" viewBox="0 0 16 16"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path stroke="#CBCED1" d="M10.657 10L8 12.657 5.343 10"/><path stroke="#9EA2A8" d="M10.657 6L8 3.343 5.343 6"/></g></symbol>
     <symbol id="icon-ban" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
         <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zM103.265 408.735c-80.622-80.622-84.149-208.957-10.9-293.743l304.644 304.643c-84.804 73.264-213.138 69.706-293.744-10.9zm316.37-11.727L114.992 92.365c84.804-73.263 213.137-69.705 293.743 10.9 80.622 80.621 84.149 208.957 10.9 293.743z" />
     </symbol>
diff --git a/packages/rocketchat-ui/client/components/table.html b/packages/rocketchat-ui/client/components/table.html
new file mode 100644
index 0000000000000..a3a18f66acc70
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/table.html
@@ -0,0 +1,13 @@
+<template name="table">
+	<div class="table-wrapper">
+		<div class="table-content-wrapper">
+			<div class="table-content">
+				<div class="table-scroll">
+					<table class="rc-table {{#if fixed}}rc-table--fixed{{/if}}">
+							{{> Template.contentBlock}}
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
new file mode 100644
index 0000000000000..63e4f284b83e7
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -0,0 +1,28 @@
+import _ from 'underscore';
+
+Template.table.onRendered(function() {
+	const dummyTr = '<tr class="table-tr-dummy"></tr>';
+	this.$('tbody').prepend(dummyTr).append(dummyTr);
+
+	const onResize = this.data.onResize;
+	if (onResize) {
+		onResize();
+		$(window).on('resize', onResize);
+	}
+});
+
+Template.table.events({
+	'click tbody tr'(e, t) {
+		const onItemClick = t.data.onItemClick;
+
+		return onItemClick && onItemClick(this);
+	},
+	'scroll .table-scroll': _.debounce((e, t) => {
+		const onScroll = t.data.onScroll;
+
+		return onScroll && onScroll(e.currentTarget);
+	}, 300),
+	'click .js-sort'(e, t) {
+		t.data.onSort(e.currentTarget.dataset.sort);
+	}
+});
diff --git a/packages/rocketchat-ui/client/components/tabs.html b/packages/rocketchat-ui/client/components/tabs.html
new file mode 100644
index 0000000000000..37ec16ef2270a
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabs.html
@@ -0,0 +1,9 @@
+<template name="tabs">
+	<div class="tabs">
+		<div class="tabs-wrapper">
+			{{#each tabs}}
+				<div class="tab {{#if isActive value}}active{{/if}}" data-value={{value}}>{{label}}</div>
+			{{/each}}
+		</div>
+	</div>
+</template>
diff --git a/packages/rocketchat-ui/client/components/tabs.js b/packages/rocketchat-ui/client/components/tabs.js
new file mode 100644
index 0000000000000..2beb1dcd7312b
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabs.js
@@ -0,0 +1,20 @@
+Template.tabs.onCreated(function() {
+	this.activeTab = new ReactiveVar(this.data.tabs.tabs.find(tab => tab.active).value);
+});
+
+Template.tabs.events({
+	'click .tab'(e) {
+		const value = e.currentTarget.dataset.value;
+		Template.instance().activeTab.set(value);
+		Template.instance().data.tabs.onChange(value);
+	}
+});
+
+Template.tabs.helpers({
+	tabs() {
+		return Template.instance().data.tabs.tabs.filter(tab => tab.condition ? tab.condition() : tab);
+	},
+	isActive(value) {
+		return Template.instance().activeTab.get() === value;
+	}
+});
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 106bb30b1f06d..aa50e46dc3b9e 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -1,11 +1,8 @@
 <template name="directory">
 	<section class="rc-directory">
-		{{# header sectionName="Directory" hideHelp=true}}
-		<div class="rc-directory-header">
-		<select class="rc-input__element rc-directory-selector js-typeSelector" name="type">
-				<option value="channels">{{_ "Channels"}}</option>
-				<option value="users">{{_ "Users"}}</option>
-			</select>
+		{{> header sectionName="Directory" hideHelp=true}}
+		<div class="rc-directory-content">
+			{{>tabs tabs=tabsData}}
 			<div class="rc-input rc-input--small rc-directory-search">
 				<label class="rc-input__label">
 					<div class="rc-input__wrapper">
@@ -14,25 +11,28 @@
 					</div>
 				</label>
 			</div>
-			{{#if createChannelOrGroup}}
-				<button class="rc-button rc-button--small rc-button--primary rc-directory-plus">{{> icon icon="plus" }}</button>
-			{{/if}}
-		</div>
-		{{/header}}
-		<div class="rc-directory-content">
 			{{#if $eq searchType 'channels'}}
-				<table class="rc-table rc-table--fixed">
-					<thead class="rc-table-head">
-						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</td>
-							<td class="rc-table-td rc-table-td--users">{{_ "Users"}}</td>
-							<td class="rc-table-td js-sort rc-table-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</td>
+				{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
+					<thead>
+						<tr>
+							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
+							</th>
+							<th class="rc-directory-td--users">
+								<div class="table-fake-th">{{_ "Users"}}</div>
+							</th>
+							<th class="js-sort table-column-date {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
+							</th>
+							<th>
+								<div class="table-fake-th">{{_ "Topic"}}</div>
+							</th>
 						</tr>
 					</thead>
-					<tbody class="rc-table-body">
+					<tbody>
 						{{#each searchResults}}
-							<tr class="rc-table-tr" data-name="{{name}}">
-								<td class="rc-table-td rc-table-td--name">
+							<tr data-name="{{name}}">
+								<td>
 									<div class="rc-directory-channel-wrapper">
 										<div class="rc-directory-channel-avatar">{{> avatar username=name roomIcon="true"}}</div>
 										<div class="rc-directory-channel-info">
@@ -40,51 +40,61 @@
 												{{>icon icon="hashtag"}}
 												{{name}}
 											</span>
-											{{#if description}}
-												<span class="rc-directory-channel-description">{{description}}</span>
-											{{/if}}
 										</div>
 									</div>
 								</td>
-								<td class="rc-table-td rc-table-td--users">{{users}}</td>
-								<td class="rc-table-td rc-table-td--createdAt">
-									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
-								</td>
+								<td>{{users}}</td>
+								<td>{{createdAt}}</td>
+								<td>{{topic}}</td>
 							</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr>
+									<td colspan="3" style="position: relative;">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
-				</table>
+				{{/table}}
 			{{/if}}
 			{{#if $eq searchType 'users'}}
-				<table class="rc-table">
-					<thead class="rc-table-head">
-						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="username">{{_ "Username"}} {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon="sort" }}</td>
+				{{#table onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
+					<thead>
+						<tr>
+							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
+								<div class="table-fake-th">{{_ "Username"}} {{> icon icon=(sortIcon 'username') }}</div>
+							</th>
+							<th class="js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name') }}</div>
+							</th>
+							<th class="js-sort table-column-date {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
+							</th>
 						</tr>
 					</thead>
-					<tbody class="rc-table-body">
+					<tbody>
 						{{#each searchResults}}
-							<tr class="rc-table-tr" data-name="{{name}}">
-								<td class="rc-table-td rc-table-td--username">
+							<tr data-name="{{name}}">
+								<td>
 									<div class="rc-directory-channel-wrapper">
 										<div class="rc-directory-channel-avatar">{{> avatar username=username}}</div>
 										<div class="rc-directory-channel-info">
 											<span class="rc-directory-channel-username">
-												{{>icon icon="at"}}{{username}}
+												{{username}}
 											</span>
 										</div>
 									</div>
 								</td>
-								<td class="rc-table-td rc-table-td--name">{{name}}</td>
-								<td class="rc-table-td rc-table-td--createdAt">
-									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
-								</td>
+								<td>{{name}}</td>
+								<td>{{createdAt}}</td>
 							</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr>
+									<td colspan="3" style="position: relative;">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
-				</table>
+				{{/table}}
 			{{/if}}
 		</div>
 	</section>
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index e73f5083069f3..005c15e3b3afa 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -1,4 +1,5 @@
 import moment from 'moment';
+import _ from 'underscore';
 
 function timeAgo(time) {
 	const now = new Date();
@@ -20,7 +21,8 @@ function directorySearch(config, cb) {
 					users: result.usernames.length,
 					createdAt: timeAgo(result.ts),
 					description: result.description,
-					archived: result.archived
+					archived: result.archived,
+					topic: result.topic
 				};
 			}
 
@@ -50,75 +52,105 @@ Template.directory.helpers({
 
 		return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down';
 	},
+	searchSortBy(key) {
+		return Template.instance().searchSortBy.get() === key;
+	},
 	createChannelOrGroup() {
 		return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
-	}
-});
-
-Template.directory.events({
-	'input .js-search'(e, t) {
-		t.end.set(false);
-		t.sortDirection.set('asc');
-		t.page.set(0);
-		t.searchText.set(e.currentTarget.value);
 	},
-	'change .js-typeSelector'(e, t) {
-		t.end.set(false);
-		t.sortDirection.set('asc');
-		t.page.set(0);
-		t.searchType.set(e.currentTarget.value);
+	tabsData() {
+		const {
+			sortDirection,
+			searchType,
+			end,
+			page
+		} = Template.instance();
+		return {
+			tabs: [
+				{
+					label: t('Channels'),
+					value: 'channels',
+					condition() { return true; },
+					active: true
+				},
+				{
+					label: t('Users'),
+					value: 'users',
+					condition() { return true; }
+				}
+			],
+			onChange(value) {
+				end.set(false);
+				sortDirection.set('asc');
+				page.set(0);
+				searchType.set(value);
+			}
+		};
 	},
-	'click .rc-table-body .rc-table-tr'() {
-		let searchType;
+	onTableItemClick() {
+		const { searchType } = Template.instance();
+		let type;
 		let routeConfig;
-		if (Template.instance().searchType.get() === 'channels') {
-			searchType = 'c';
-			routeConfig = {name: this.name};
-		} else {
-			searchType = 'd';
-			routeConfig = {name: this.username};
-		}
-		FlowRouter.go(RocketChat.roomTypes.getRouteLink(searchType, routeConfig));
+		return function(item) {
+			if (searchType.get() === 'channels') {
+				type = 'c';
+				routeConfig = {name: item.name};
+			} else {
+				type = 'd';
+				routeConfig = {name: item.username};
+			}
+			FlowRouter.go(RocketChat.roomTypes.getRouteLink(type, routeConfig));
+		};
 	},
-	'scroll .rc-directory-content'({currentTarget}, instance) {
+	isLoading() {
+		return Template.instance().isLoading.get();
+	},
+	onTableScroll() {
+		const instance = Template.instance();
 		if (instance.loading || instance.end.get()) {
 			return;
 		}
-		if (currentTarget.offsetHeight + currentTarget.scrollTop >= currentTarget.scrollHeight - 100) {
-			return instance.page.set(instance.page.get() + 1);
-		}
+		return function(currentTarget) {
+			if (currentTarget.offsetHeight + currentTarget.scrollTop >= currentTarget.scrollHeight - 100) {
+				return instance.page.set(instance.page.get() + 1);
+			}
+		};
 	},
-	'click .js-sort'(e, t) {
+	onTableResize() {
+		const { limit } = Template.instance();
 
-		const el = e.currentTarget;
-		const type = el.dataset.sort;
+		return function() {
+			limit.set(Math.ceil((this.$('.table-scroll').height() / 40) + 5));
+		};
+	},
+	onTableSort() {
+		const { end, page, sortDirection, searchSortBy } = Template.instance();
 
-		$('.js-sort').removeClass('rc-table-td--bold');
-		$(el).addClass('rc-table-td--bold');
+		return function(type) {
+			end.set(false);
+			page.set(0);
 
-		t.end.set(false);
-		t.page.set(0);
+			if (searchSortBy.get() === type) {
+				sortDirection.set(sortDirection.get() === 'asc' ? 'desc' : 'asc');
+				return;
+			}
 
-		if (t.searchSortBy.get() === type) {
-			t.sortDirection.set(t.sortDirection.get() === 'asc' ? 'desc' : 'asc');
-			return;
-		}
+			searchSortBy.set(type);
+			sortDirection.set('asc');
+		};
+	}
+});
 
-		t.searchSortBy.set(type);
+Template.directory.events({
+	'input .js-search': _.debounce((e, t) => {
+		t.end.set(false);
 		t.sortDirection.set('asc');
-	},
-	'click .rc-directory-plus'() {
-		FlowRouter.go('create-channel');
-	}
+		t.page.set(0);
+		t.searchText.set(e.currentTarget.value);
+	}, 300)
 });
 
 Template.directory.onRendered(function() {
-	this.resize = () => {
-		const height = this.$('.rc-directory-content').height();
-		this.limit.set(Math.ceil((height / 100) + 5));
-	};
-	this.resize();
-	$(window).on('resize', this.resize);
 	Tracker.autorun(() => {
 		const searchConfig = {
 			text: this.searchText.get(),
@@ -132,11 +164,16 @@ Template.directory.onRendered(function() {
 			return;
 		}
 		this.loading = true;
+		this.isLoading.set(true);
 		directorySearch(searchConfig, (result) => {
 			this.loading = false;
-			if (!result) {
-				this.end.set(true);
+			this.isLoading.set(false);
+			this.end.set(!result);
+
+			if (!Array.isArray(result)) {
+				result = [];
 			}
+
 			if (this.page.get() > 0) {
 				return this.results.set([...this.results.get(), ...result]);
 			}
@@ -159,6 +196,8 @@ Template.directory.onCreated(function() {
 	this.end = new ReactiveVar(false);
 
 	this.results = new ReactiveVar([]);
+
+	this.isLoading = new ReactiveVar(false);
 });
 
 Template.directory.onRendered(function() {
diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js
index 343cd8152feb9..cc20e61b0f995 100644
--- a/packages/rocketchat-ui/package.js
+++ b/packages/rocketchat-ui/package.js
@@ -124,6 +124,12 @@ Package.onUse(function(api) {
 	api.addFiles('client/components/icon.html', 'client');
 	api.addFiles('client/components/icon.js', 'client');
 
+	api.addFiles('client/components/table.html', 'client');
+	api.addFiles('client/components/table.js', 'client');
+
+	api.addFiles('client/components/tabs.html', 'client');
+	api.addFiles('client/components/tabs.js', 'client');
+
 	api.addFiles('client/components/popupList.html', 'client');
 	api.addFiles('client/components/popupList.js', 'client');
 
diff --git a/server/methods/browseChannels.js b/server/methods/browseChannels.js
index 1d918f63595e8..38b0922dbdc36 100644
--- a/server/methods/browseChannels.js
+++ b/server/methods/browseChannels.js
@@ -61,6 +61,7 @@ Meteor.methods({
 					sort,
 					fields: {
 						description: 1,
+						topic: 1,
 						name: 1,
 						ts: 1,
 						archived: 1,