diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index a20c5cad5d..a0084ad30a 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -83,7 +83,7 @@ export default class MoreChannels extends React.Component {
                 moreChannels = <LoadingScreen />;
             } else if (channels.length) {
                 moreChannels = (
-                    <table className='more-channel-table table'>
+                    <table className='more-table table'>
                         <tbody>
                             {channels.map(function cMap(channel, index) {
                                 var joinButton;
@@ -108,8 +108,8 @@ export default class MoreChannels extends React.Component {
                                 return (
                                     <tr key={channel.id}>
                                         <td>
-                                            <p className='more-channel-name'>{channel.display_name}</p>
-                                            <p className='more-channel-description'>{channel.description}</p>
+                                            <p className='more-name'>{channel.display_name}</p>
+                                            <p className='more-description'>{channel.description}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 08b64de8be..a599c18722 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -140,12 +140,12 @@ export default class MoreDirectChannels extends React.Component {
         if (user.nickname) {
             const separator = fullName ? ' - ' : '';
             details.push(
-                <span
+                <p
                     key={`${user.nickname}__nickname`}
-                    className='nickname'
+                    className='more-description'
                 >
                     {separator + user.nickname}
-                </span>
+                </p>
             );
         }
 
@@ -170,28 +170,26 @@ export default class MoreDirectChannels extends React.Component {
         }
 
         return (
-            <li
-                key={user.id}
-                className='direct-channel'
-            >
-                <div className='col-xs-1 image-div'>
+            <tr>
+                <td
+                    key={user.id}
+                    className='direct-channel'
+                >
                     <img
-                        className='profile-image'
+                        className='profile-img pull-left'
+                        width='38'
+                        height='38'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                     />
-                </div>
-                <div className='col-xs-9'>
-                    <div className='username'>
+                    <div className='more-name'>
                         {user.username}
                     </div>
-                    <div>
-                        {details}
-                    </div>
-                </div>
-                <div className='col-xs-2 btn-div'>
+                    {details}
+                </td>
+                <td className='td--action lg'>
                     {joinButton}
-                </div>
-            </li>
+                </td>
+            </tr>
         );
     }
 
@@ -213,7 +211,7 @@ export default class MoreDirectChannels extends React.Component {
         const userEntries = users.map(this.createRowForUser);
 
         if (userEntries.length === 0) {
-            userEntries.push(<li key='no-users-found'>{'No users found :('}</li>);
+            userEntries.push(<div key='no-users-found'>{'No users found :('}</div>);
         }
 
         let memberString = 'Member';
@@ -232,26 +230,32 @@ export default class MoreDirectChannels extends React.Component {
             <Modal
                 className='modal-direct-channels'
                 show={this.props.show}
-                bsSize='large'
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'More Direct Messages'}</Modal.Title>
+                    <Modal.Title>{'Team Directory'}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <div>
-                        <input
-                            ref='filter'
-                            className='form-control filter-textbox'
-                            placeholder='Search members'
-                            onInput={this.handleFilterChange}
-                            style={{width: '200px', display: 'inline'}}
-                        />
-                        <span className='member-count pull-right'>{count}</span>
+                    <div className='row filter-row'>
+                        <div className='col-sm-6'>
+                            <input
+                                ref='filter'
+                                className='form-control filter-textbox'
+                                placeholder='Search members'
+                                onInput={this.handleFilterChange}
+                            />
+                        </div>
+                        <div className='col-sm-6'>
+                            <span className='member-count'>{count}</span>
+                        </div>
+                    </div>
+                    <div className='user-list'>
+                        <table className='more-table table'>
+                            <tbody>
+                                {userEntries}
+                            </tbody>
+                        </table>
                     </div>
-                    <ul className='user-list'>
-                        {userEntries}
-                    </ul>
                 </Modal.Body>
                 <Modal.Footer>
                     <button
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 16ae693fac..5ea452830e 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -57,7 +57,7 @@ export default class PopoverListMembers extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='bottom'
-                rootClose='true'
+                rootClose={true}
                 overlay={<Popover title='Members'>{popoverHtml}</Popover>}
             >
             <div id='member_popover'>
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index a95095ff6a..36260d77c4 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -150,7 +150,7 @@ export default class PostInfo extends React.Component {
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
                     <OverlayTrigger
-                        delayShow='500'
+                        delayShow={500}
                         container={this}
                         placement='top'
                         overlay={tooltip}
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 7a209de2b8..6b3dae4cd9 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -479,7 +479,7 @@ export default class Sidebar extends React.Component {
         if (handleClose && !badge) {
             closeButton = (
                 <OverlayTrigger
-                    delayShow='1000'
+                    delayShow={1000}
                     placement='top'
                     overlay={removeTooltip}
                 >
@@ -611,7 +611,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Channels'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createChannelTootlip}
                                 >
@@ -644,7 +644,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Private Groups'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createGroupTootlip}
                                 >
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 715161b4f1..47d8363216 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -93,7 +93,7 @@ export default class UserProfile extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='right'
-                rootClose='true'
+                rootClose={true}
                 overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
             >
             <div
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index b942a5a40a..344b11e9e1 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -140,7 +140,7 @@
 			padding: 0;
 		}
 	}
-	.more-channel-table {
+	.more-table {
 		margin: 0;
 		table-layout: fixed;
 		p {
@@ -150,7 +150,7 @@
 			@include opacity(0.8);
 			margin: 5px 0;
 		}
-		.more-channel-name {
+		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
 		}
@@ -175,6 +175,9 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						&.lg {
+							width: 110px;
+						}
 					}
 				}
 			}
@@ -331,47 +334,41 @@
 }
 
 .modal-direct-channels {
-    .user-list {
-        list-style-type: none;
-        margin: 15px 0px 0px;
-        max-height: 600px;
-        padding: 0px;
-        overflow: auto;
 
-        li {
-            border-bottom: 1px solid #ddd;
-            height: 60px;
-            padding: 10px 0px;
+	.user-list {
+		margin-top: 20px;
+		overflow: auto;
+		-webkit-overflow-scrolling: touch;
+		max-height: 500px;
+	}
 
-            .image-div {
-                padding: 0px;
+	.table {
+		margin-top: 10px;
+	}
 
-                .profile-image {
-                    width: 40px;
-                    height: 40px;
-                    @include border-radius(20px);
-                }
-            }
+	.modal-body {
+		padding: 20px 0 0;
+		@include clearfix;
+	}
 
-            .username {
-                font-weight: bold;
-            }
+	.filter-row {
+		padding: 0 15px;
+	}
 
-            .nickname {
-                color: #888;
-            }
+	.member-count {
+		margin-top: 5px;
+		float: right;
+		@include opacity(0.8);
+	}
 
-            .btn-div {
-                padding: 0px;
-                .btn-message {
-                    position: relative;
-                    top: 5px;
-                }
-            }
+	.more-description {
+		@include opacity(0.7);
+	}
 
-            &:last-child {
-                border-bottom: 0px;
-            }
-        }
-    }
+	.profile-img {
+		-moz-border-radius: 50px;
+		-webkit-border-radius: 50px;
+		border-radius: 50px;
+		margin-right: 8px;
+	}
 }
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 0c2f25eab7..3146c16d57 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -230,13 +230,6 @@
     font-weight:500;
 }
 
-.profile-img {
-    width:128px;
-    height:128px;
-    margin-bottom: 10px;
-    @include border-radius(128px);
-}
-
 .sel-btn {
     margin-right:5px;
 }