diff --git a/webapp/components/admin_console/cluster_settings.jsx b/webapp/components/admin_console/cluster_settings.jsx
index 0c3346c5a2..36f86f0ef5 100644
--- a/webapp/components/admin_console/cluster_settings.jsx
+++ b/webapp/components/admin_console/cluster_settings.jsx
@@ -120,12 +120,12 @@ export default class ClusterSettings extends AdminSettings {
             <SettingsGroup>
                 {configLoadedFromCluster}
                 {clusterTableContainer}
-                <p>
+                <div className='banner'>
                     <FormattedMessage
                         id='admin.cluster.noteDescription'
                         defaultMessage='Changing properties in this section will require a server restart before taking effect. When High Availability mode is enabled, the System Console is set to read-only and can only be changed from the configuration file unless ReadOnlyConfig is disabled in the configuration file.'
                     />
-                </p>
+                </div>
                 {warning}
                 <BooleanSetting
                     id='Enable'
diff --git a/webapp/components/admin_console/database_settings.jsx b/webapp/components/admin_console/database_settings.jsx
index 303865d918..9f008483cf 100644
--- a/webapp/components/admin_console/database_settings.jsx
+++ b/webapp/components/admin_console/database_settings.jsx
@@ -108,12 +108,12 @@ export default class DatabaseSettings extends AdminSettings {
 
         return (
             <SettingsGroup>
-                <p>
+                <div className='banner'>
                     <FormattedMessage
                         id='admin.sql.noteDescription'
                         defaultMessage='Changing properties in this section will require a server restart before taking effect.'
                     />
-                </p>
+                </div>
                 <div className='form-group'>
                     <label
                         className='control-label col-sm-4'
diff --git a/webapp/components/post_view/new_message_indicator.jsx b/webapp/components/post_view/new_message_indicator.jsx
index d5fb6c1d3d..537520c298 100644
--- a/webapp/components/post_view/new_message_indicator.jsx
+++ b/webapp/components/post_view/new_message_indicator.jsx
@@ -3,6 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import Constants from 'utils/constants.jsx';
 import {FormattedMessage} from 'react-intl';
 
 export default class NewMessageIndicator extends React.PureComponent {
@@ -30,6 +31,7 @@ export default class NewMessageIndicator extends React.PureComponent {
     }
 
     render() {
+        const unreadIcon = Constants.UNREAD_ICON_SVG;
         let className = 'new-messages__button';
         if (this.state.visible > 0) {
             className += ' visible';
@@ -44,14 +46,15 @@ export default class NewMessageIndicator extends React.PureComponent {
                 ref='indicator'
             >
                 <div onClick={this.props.onClick}>
-                    <i
-                        className='fa fa-angle-down'
-                    />
                     <FormattedMessage
                         id='posts_view.newMsgBelow'
-                        defaultMessage='New {count, plural, one {message} other {messages}} below'
+                        defaultMessage='New {count, plural, one {message} other {messages}}'
                         values={{count: this.props.newMessages}}
                     />
+                    <span
+                        className='icon icon__unread'
+                        dangerouslySetInnerHTML={{__html: unreadIcon}}
+                    />
                 </div>
             </div>
         );
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 25ad51ba99..788f14cd9c 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -745,15 +745,15 @@ export default class Sidebar extends React.Component {
 
         const above = (
             <FormattedMessage
-                id='sidebar.unreadAbove'
-                defaultMessage='Unread post(s) above'
+                id='sidebar.unreads'
+                defaultMessage='More unreads'
             />
         );
 
         const below = (
             <FormattedMessage
-                id='sidebar.unreadBelow'
-                defaultMessage='Unread post(s) below'
+                id='sidebar.unreads'
+                defaultMessage='More unreads'
             />
         );
 
diff --git a/webapp/components/unread_channel_indicator.jsx b/webapp/components/unread_channel_indicator.jsx
index d1ffd4c0ad..9462761aca 100644
--- a/webapp/components/unread_channel_indicator.jsx
+++ b/webapp/components/unread_channel_indicator.jsx
@@ -6,18 +6,25 @@ import PropTypes from 'prop-types';
 // Indicator for the left sidebar which indicate if there's unread posts in a channel that is not shown
 // because it is either above or below the screen
 import React from 'react';
+import Constants from 'utils/constants.jsx';
 
 export default function UnreadChannelIndicator(props) {
+    const unreadIcon = Constants.UNREAD_ICON_SVG;
     let displayValue = 'none';
     if (props.show) {
         displayValue = 'block';
     }
+
     return (
         <div
             className={'nav-pills__unread-indicator ' + props.extraClass}
             style={{display: displayValue}}
         >
             {props.text}
+            <span
+                className='icon icon__unread'
+                dangerouslySetInnerHTML={{__html: unreadIcon}}
+            />
         </div>
     );
 }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 202aad177d..57ef37a07f 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1923,7 +1923,7 @@
   "posts_view.loadMore": "Load more messages",
   "posts_view.loadingMore": "Loading more messages...",
   "posts_view.newMsg": "New Messages",
-  "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}} below",
+  "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}}",
   "quick_switch_modal.channels": "Channels",
   "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
   "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
@@ -2026,8 +2026,7 @@
   "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>",
   "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>",
   "sidebar.tutorialScreen3": "<h4>Creating and Joining Channels</h4><p>Click <strong>\"More...\"</strong> to create a new channel or join an existing one.</p><p>You can also create a new channel by clicking the <strong>\"+\" symbol</strong> next to the public or private channel header.</p>",
-  "sidebar.unreadAbove": "Unread post(s) above",
-  "sidebar.unreadBelow": "Unread post(s) below",
+  "sidebar.unreads": "More unreads",
   "sidebar_header.tutorial": "<h4>Main Menu</h4><p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p><p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>",
   "sidebar_right_menu.accountSettings": "Account Settings",
   "sidebar_right_menu.addMemberToTeam": "Add Members to Team",
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 9a4d6771ec..44b8ab4f02 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -249,8 +249,7 @@
 }
 
 .channel-intro {
-    border-bottom: 1px solid $light-gray;
-    margin: 0 auto 15px;
+    margin: 0 auto 10px;
     padding: 0 15px;
 
     &.channel-intro--centered {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 272d224797..cb24315554 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -284,7 +284,7 @@
         bottom: 0;
         font-size: 13.5px;
         left: 0;
-        margin: 0 auto;
+        margin: 5px auto;
         position: absolute;
         right: 0;
         text-align: center;
@@ -299,11 +299,15 @@
             top: 1px;
         }
 
+        .icon {
+            margin-left: 5px;
+        }
+
         div {
             @include border-radius(50px);
             cursor: pointer;
             display: inline-block;
-            padding: 5px 10px;
+            padding: 4px 20px 3px;
         }
 
         &.visible {
@@ -774,6 +778,7 @@
         }
 
         .markdown__heading {
+            clear: both;
             font-size: 1em;
             margin: 0;
         }
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index 4be6088036..515f87a877 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -154,15 +154,25 @@
         font-size: 13.5px;
         left: 15px;
         margin: 0 auto;
-        padding: 3px 0 4px;
+        padding: 4px 0 3px;
         position: fixed;
         text-align: center;
         width: 190px;
         z-index: 1;
+
+        .icon {
+            margin-left: 5px;
+        }
     }
 
     .nav-pills__unread-indicator-top {
         top: 80px;
+
+        .icon {
+            svg {
+                @include transform(rotate(180deg));
+            }
+        }
     }
 
     .nav-pills__unread-indicator-bottom {
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 7b449e2c89..9e8c744842 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -183,7 +183,7 @@
         border: 1px solid #ddd;
         font-size: .95em;
         margin: 2em 0;
-        padding: .7em 1.5em;
+        padding: .8em 1.5rem;
 
         .banner__heading {
             font-size: 1.5em;
diff --git a/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss
index 5a35039e7d..85232708a9 100644
--- a/webapp/sass/routes/_statistics.scss
+++ b/webapp/sass/routes/_statistics.scss
@@ -16,6 +16,14 @@
             padding: 7px 10px;
             text-align: left;
 
+            span {
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: calc(100% - 20px);
+            }
+
             .fa {
                 color: #555555;
                 float: right;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 0ff90087a3..69492e95ca 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -446,6 +446,7 @@ export const Constants = {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    UNREAD_ICON_SVG: "<svg width='10px' height='10px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><g transform='matrix(1,0,0,1,-20,-18)'><g transform='matrix(0.0330723,0,0,0.0322634,15.8132,12.3164)'><path d='M245.803,377.493C245.803,377.493 204.794,336.485 179.398,311.088C168.55,300.24 150.962,300.24 140.114,311.088C138.327,312.875 136.517,314.686 134.73,316.473C123.882,327.321 123.882,344.908 134.73,355.756C167.972,388.998 233.949,454.975 256.949,477.975C262.158,483.184 269.223,486.111 276.591,486.111C277.38,486.111 278.176,486.111 278.965,486.111C286.332,486.111 293.397,483.184 298.607,477.975C321.607,454.975 387.584,388.998 420.826,355.756C431.674,344.908 431.674,327.321 420.826,316.473C419.039,314.686 417.228,312.875 415.441,311.088C404.593,300.24 387.005,300.24 376.158,311.088C350.761,336.485 309.753,377.493 309.753,377.493C309.753,377.493 309.753,279.687 309.753,203.94C309.753,196.573 306.826,189.508 301.617,184.298C296.408,179.089 289.342,176.162 281.975,176.162C279.191,176.162 276.364,176.162 273.58,176.162C266.213,176.162 259.148,179.089 253.939,184.298C248.729,189.508 245.803,196.573 245.803,203.94L245.803,377.493Z'/></g></g></svg>",
     MEMBERS_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Symbols' stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g id='Channel-Header/Web-HD' transform='translate(-725.000000, -32.000000)' fill-rule='nonzero' fill='inherit'> <g id='Channel-Header'> <g id='user-count' transform='translate(676.000000, 22.000000)'> <path d='M64.9481342,24 C64.6981342,20.955 63.2551342,19.076 60.6731342,18.354 C61.4831342,17.466 61.9881342,16.296 61.9881342,15 C61.9881342,12.238 59.7501342,10 56.9881342,10 C54.2261342,10 51.9881342,12.238 51.9881342,15 C51.9881342,16.297 52.4941342,17.467 53.3031342,18.354 C50.7221342,19.076 49.2771342,20.955 49.0271342,24 C49.0161342,24.146 49.0061342,24.577 49.0001342,25.001 C48.9911342,25.553 49.4361342,26 49.9881342,26 L63.9881342,26 C64.5411342,26 64.9851342,25.553 64.9761342,25.001 C64.9701342,24.577 64.9601342,24.146 64.9481342,24 Z M56.9881342,12 C58.6421342,12 59.9881342,13.346 59.9881342,15 C59.9881342,16.654 58.6421342,18 56.9881342,18 C55.3341342,18 53.9881342,16.654 53.9881342,15 C53.9881342,13.346 55.3341342,12 56.9881342,12 Z M51.0321342,24 C51.2981342,21.174 52.7911342,20 55.9881342,20 L57.9881342,20 C61.1851342,20 62.6781342,21.174 62.9441342,24 L51.0321342,24 Z' id='User_4_x2C__Profile_5-Copy-9'></path> </g> </g> </g> </g> </svg>",
     TEAM_INFO_SVG: "<svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g transform='matrix(1.17647,0,0,1.17647,-1.55431e-15,-1.00573e-14)'> <path d='M8.5,0C3.797,0 0,3.797 0,8.5C0,13.203 3.797,17 8.5,17C13.203,17 17,13.203 17,8.5C17,3.797 13.203,0 8.5,0ZM10,8.5C10,7.672 9.328,7 8.5,7C7.672,7 7,7.672 7,8.5L7,12.45C7,13.278 7.672,13.95 8.5,13.95C9.328,13.95 10,13.278 10,12.45L10,8.5ZM8.5,3C9.328,3 10,3.672 10,4.5C10,5.328 9.328,6 8.5,6C7.672,6 7,5.328 7,4.5C7,3.672 7.672,3 8.5,3Z'/> </g> </svg>",
     FLAG_FILLED_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1073.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(-1.000000, 0.000000)'> <g transform='translate(1064.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z'></path> </g> </g> </g> </g> </g> </svg>",
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index da54367370..658ccd74be 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -492,11 +492,10 @@ export function applyTheme(theme) {
     if (theme.sidebarText) {
         changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText);
         changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover, .app__body .sidebar__switcher button:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
-        changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('.app__body .sidebar--left .nav-pills__container li > h4, .app__body .sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
         changeCss('.app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8));
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
-        changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus, .app__body .sidebar--left .nav-pills__container li > h4', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg, .app__body .sidebar-item .icon', 'fill:' + theme.sidebarText);
         changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
@@ -571,6 +570,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionColor) {
+        changeCss('.sidebar--left .nav-pills__unread-indicator svg', 'fill:' + theme.mentionColor);
         changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor);
         changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
         changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor);
@@ -715,6 +715,7 @@ export function applyTheme(theme) {
 
     if (theme.buttonColor) {
         changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor);
+        changeCss('.app__body .new-messages__button svg', 'fill:' + theme.buttonColor);
     }
 
     if (theme.errorTextColor) {