diff --git a/components/__snapshots__/quick_input.test.jsx.snap b/components/__snapshots__/quick_input.test.jsx.snap
index 98543f024d26..1080d8ea8e94 100644
--- a/components/__snapshots__/quick_input.test.jsx.snap
+++ b/components/__snapshots__/quick_input.test.jsx.snap
@@ -59,7 +59,9 @@ exports[`components/QuickInput should render clear button with customized toolti
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
-        ×
+        <i
+          className="icon icon-close-circle"
+        />
       </span>
     </OverlayTrigger>
   </OverlayTrigger>
@@ -121,7 +123,9 @@ exports[`components/QuickInput should render clear button with customized toolti
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
-        ×
+        <i
+          className="icon icon-close-circle"
+        />
       </span>
     </OverlayTrigger>
   </OverlayTrigger>
@@ -191,7 +195,9 @@ exports[`components/QuickInput should render clear button with default tooltip t
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
-        ×
+        <i
+          className="icon icon-close-circle"
+        />
       </span>
     </OverlayTrigger>
   </OverlayTrigger>
diff --git a/components/channel_layout/center_channel/center_channel.tsx b/components/channel_layout/center_channel/center_channel.tsx
index e077d639a327..8e614e81f020 100644
--- a/components/channel_layout/center_channel/center_channel.tsx
+++ b/components/channel_layout/center_channel/center_channel.tsx
@@ -35,6 +35,7 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
             lastReturnTo: '',
         };
     }
+
     static getDerivedStateFromProps(nextProps: Props, prevState: State) {
         if (prevState.lastReturnTo !== nextProps.location.pathname && nextProps.location.pathname.includes('/pl/')) {
             return {
diff --git a/components/invitation_modal/invitation_modal.scss b/components/invitation_modal/invitation_modal.scss
index a0d620eb29dd..b9ce575b2c93 100644
--- a/components/invitation_modal/invitation_modal.scss
+++ b/components/invitation_modal/invitation_modal.scss
@@ -8,7 +8,8 @@
     height: 100%;
     align-items: center;
     font-size: 16px;
-    color: var(--center-channel-color-90);
+    color: var(--center-channel-color);
+
     @media (max-width: 768px) {
         padding-left: 15px;
         padding-right: 15px;
diff --git a/components/plugin_marketplace/marketplace_modal.scss b/components/plugin_marketplace/marketplace_modal.scss
index 1bf11364da7b..2ea2a1cdf5c1 100644
--- a/components/plugin_marketplace/marketplace_modal.scss
+++ b/components/plugin_marketplace/marketplace_modal.scss
@@ -10,7 +10,7 @@
     height: 100%;
     align-items: center;
     font-size: 16px;
-    color: var(--center-channel-color-90);
+    color: var(--center-channel-color);
 
     @media (max-width: 768px) {
         padding-left: 15px;
@@ -37,10 +37,10 @@
 
     .input-clear {
         top: 32px;
-        right: 38px;
-        font-size: 22px;
-        width: 30px;
-        height: 30px;
+        right: 36px;
+        font-size: 16px;
+        width: 32px;
+        height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -103,6 +103,7 @@
     }
 
     .search_input {
+        box-shadow: none;
         flex: 1;
         margin-left: 16px;
         margin-right: 16px;
diff --git a/components/quick_input.jsx b/components/quick_input.jsx
index e3515a2883ec..94ea0a6f6c14 100644
--- a/components/quick_input.jsx
+++ b/components/quick_input.jsx
@@ -152,7 +152,7 @@ export default class QuickInput extends React.PureComponent {
                             className='input-clear-x'
                             aria-hidden='true'
                         >
-                            {'×'}
+                            <i className='icon icon-close-circle'/>
                         </span>
                     </OverlayTrigger>
                 </div>
diff --git a/components/rhs_card_header/rhs_card_header.jsx b/components/rhs_card_header/rhs_card_header.jsx
index 416e5932add5..412c4eb28f54 100644
--- a/components/rhs_card_header/rhs_card_header.jsx
+++ b/components/rhs_card_header/rhs_card_header.jsx
@@ -127,7 +127,7 @@ export default class RhsCardHeader extends React.Component {
                         >
                             {(ariaLabel) => (
                                 <i
-                                    className='fa fa-angle-left'
+                                    className='icon icon-arrow-back-ios'
                                     aria-label={ariaLabel}
                                 />
                             )}
@@ -149,7 +149,7 @@ export default class RhsCardHeader extends React.Component {
                 <div className='pull-right'>
                     <button
                         type='button'
-                        className='sidebar--right__expand'
+                        className='sidebar--right__expand btn-icon'
                         aria-label='Expand'
                         onClick={this.props.actions.toggleRhsExpanded}
                     >
@@ -164,7 +164,7 @@ export default class RhsCardHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-expand'
+                                        className='icon icon-arrow-expand'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -181,7 +181,7 @@ export default class RhsCardHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-compress'
+                                        className='icon icon-arrow-collapse'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -190,7 +190,7 @@ export default class RhsCardHeader extends React.Component {
                     </button>
                     <button
                         type='button'
-                        className='sidebar--right__close'
+                        className='sidebar--right__close btn-icon'
                         aria-label='Close'
                         onClick={this.props.actions.closeRightHandSide}
                     >
@@ -205,7 +205,7 @@ export default class RhsCardHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-sign-out'
+                                        className='icon icon-close'
                                         aria-label={ariaLabel}
                                     />
                                 )}
diff --git a/components/rhs_header_post/index.js b/components/rhs_header_post/index.js
index 99d811d7cd9f..4ada39709266 100644
--- a/components/rhs_header_post/index.js
+++ b/components/rhs_header_post/index.js
@@ -3,8 +3,10 @@
 
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+import {getCurrentRelativeTeamUrl} from 'mattermost-redux/selectors/entities/teams';
 
 import {
+    setRhsExpanded,
     showMentions,
     showSearchResults,
     showFlaggedPosts,
@@ -15,9 +17,16 @@ import {
 
 import RhsHeaderPost from './rhs_header_post.jsx';
 
+function mapStateToProps(state) {
+    return {
+        relativeTeamUrl: getCurrentRelativeTeamUrl(state),
+    };
+}
+
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
+            setRhsExpanded,
             showSearchResults,
             showMentions,
             showFlaggedPosts,
@@ -28,4 +37,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(null, mapDispatchToProps)(RhsHeaderPost);
+export default connect(mapStateToProps, mapDispatchToProps)(RhsHeaderPost);
diff --git a/components/rhs_header_post/rhs_header_post.jsx b/components/rhs_header_post/rhs_header_post.jsx
index 6163c0779906..f17eb1662779 100644
--- a/components/rhs_header_post/rhs_header_post.jsx
+++ b/components/rhs_header_post/rhs_header_post.jsx
@@ -9,13 +9,19 @@ import {FormattedMessage} from 'react-intl';
 import OverlayTrigger from 'components/overlay_trigger';
 
 import Constants, {RHSStates} from 'utils/constants';
+import {isMobile} from 'utils/utils.jsx';
+import {browserHistory} from 'utils/browser_history';
 
 export default class RhsHeaderPost extends React.Component {
     static propTypes = {
+        rootPostId: PropTypes.string.isRequired,
+        channel: PropTypes.object.isRequired,
         previousRhsState: PropTypes.oneOf(
             Object.values(RHSStates)
         ),
+        relativeTeamUrl: PropTypes.string.isRequired,
         actions: PropTypes.shape({
+            setRhsExpanded: PropTypes.func,
             showMentions: PropTypes.func,
             showSearchResults: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
@@ -46,6 +52,16 @@ export default class RhsHeaderPost extends React.Component {
         }
     }
 
+    handleJumpClick = () => {
+        if (isMobile()) {
+            this.props.actions.closeRightHandSide();
+        }
+
+        this.props.actions.setRhsExpanded(false);
+        const teamUrl = this.props.relativeTeamUrl;
+        browserHistory.push(`${teamUrl}/pl/${this.props.rootPostId}`);
+    }
+
     render() {
         let back;
         const closeSidebarTooltip = (
@@ -111,6 +127,8 @@ export default class RhsHeaderPost extends React.Component {
             </Tooltip>
         );
 
+        const channelName = this.props.channel.display_name;
+
         if (backToResultsTooltip) {
             back = (
                 <a
@@ -129,7 +147,7 @@ export default class RhsHeaderPost extends React.Component {
                         >
                             {(ariaLabel) => (
                                 <i
-                                    className='fa fa-angle-left'
+                                    className='icon icon-arrow-back-ios'
                                     aria-label={ariaLabel}
                                 />
                             )}
@@ -145,13 +163,21 @@ export default class RhsHeaderPost extends React.Component {
                     {back}
                     <FormattedMessage
                         id='rhs_header.details'
-                        defaultMessage='Message Details'
+                        defaultMessage='Thread'
                     />
+                    {channelName &&
+                        <button
+                            onClick={this.handleJumpClick}
+                            className='style--none sidebar--right__title__channel'
+                        >
+                            {channelName}
+                        </button>
+                    }
                 </span>
                 <div className='pull-right'>
                     <button
                         type='button'
-                        className='sidebar--right__expand'
+                        className='sidebar--right__expand btn-icon'
                         aria-label='Expand'
                         onClick={this.props.actions.toggleRhsExpanded}
                     >
@@ -166,7 +192,7 @@ export default class RhsHeaderPost extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-expand'
+                                        className='icon icon-arrow-expand'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -183,7 +209,7 @@ export default class RhsHeaderPost extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-compress'
+                                        className='icon icon-arrow-collapse'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -193,7 +219,7 @@ export default class RhsHeaderPost extends React.Component {
                     <button
                         id='rhsCloseButton'
                         type='button'
-                        className='sidebar--right__close'
+                        className='sidebar--right__close btn-icon'
                         aria-label='Close'
                         onClick={this.props.actions.closeRightHandSide}
                     >
@@ -209,7 +235,7 @@ export default class RhsHeaderPost extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-sign-out'
+                                        className='icon icon-close'
                                         aria-label={ariaLabel}
                                     />
                                 )}
diff --git a/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap b/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap
index ae5e0c3046cb..f0ba13618e37 100644
--- a/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap
+++ b/components/rhs_root_post/__snapshots__/rhs_root_post.test.jsx.snap
@@ -11,11 +11,6 @@ exports[`components/RhsRootPost should match snapshot 1`] = `
   role="listitem"
   tabIndex="-1"
 >
-  <div
-    className="post-right-channel__name"
-  >
-    Test
-  </div>
   <div
     className="post__content"
     role="application"
@@ -193,11 +188,6 @@ exports[`components/RhsRootPost should match snapshot on deleted post 1`] = `
   role="listitem"
   tabIndex="-1"
 >
-  <div
-    className="post-right-channel__name"
-  >
-    Test
-  </div>
   <div
     className="post__content"
     role="application"
@@ -331,11 +321,6 @@ exports[`components/RhsRootPost should match snapshot on flagged, deleted post 1
   role="listitem"
   tabIndex="-1"
 >
-  <div
-    className="post-right-channel__name"
-  >
-    Test
-  </div>
   <div
     className="post__content"
     role="application"
@@ -472,11 +457,6 @@ exports[`components/RhsRootPost should match snapshot when flagged 1`] = `
   role="listitem"
   tabIndex="-1"
 >
-  <div
-    className="post-right-channel__name"
-  >
-    Test
-  </div>
   <div
     className="post__content"
     role="application"
diff --git a/components/rhs_root_post/index.js b/components/rhs_root_post/index.js
index 99ca66ee9d08..670eb0201b70 100644
--- a/components/rhs_root_post/index.js
+++ b/components/rhs_root_post/index.js
@@ -44,8 +44,6 @@ function mapStateToProps(state, ownProps) {
         teamId,
         pluginPostTypes: state.plugins.postTypes,
         channelIsArchived: isArchivedChannel(channel),
-        channelType: channel.type,
-        channelDisplayName: channel.display_name,
         isFlagged: get(state, Preferences.CATEGORY_FLAGGED_POST, ownProps.post.id, null) != null,
         compactDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
         shortcutReactToLastPostEmittedFrom,
diff --git a/components/rhs_root_post/rhs_root_post.jsx b/components/rhs_root_post/rhs_root_post.jsx
index 0469bd05a2d6..d43d1427fa5f 100644
--- a/components/rhs_root_post/rhs_root_post.jsx
+++ b/components/rhs_root_post/rhs_root_post.jsx
@@ -45,8 +45,6 @@ class RhsRootPost extends React.PureComponent {
         isReadOnly: PropTypes.bool.isRequired,
         pluginPostTypes: PropTypes.object,
         channelIsArchived: PropTypes.bool.isRequired,
-        channelType: PropTypes.string,
-        channelDisplayName: PropTypes.string,
         handleCardClick: PropTypes.func.isRequired,
 
         /**
@@ -229,25 +227,13 @@ class RhsRootPost extends React.PureComponent {
     };
 
     render() {
-        const {post, isReadOnly, teamId, channelIsArchived, channelType, channelDisplayName} = this.props;
+        const {post, isReadOnly, teamId, channelIsArchived} = this.props;
 
         const isPostDeleted = post && post.state === Posts.POST_DELETED;
         const isEphemeral = Utils.isPostEphemeral(post);
         const isSystemMessage = PostUtils.isSystemMessage(post);
         const isMeMessage = ReduxPostUtils.isMeMessage(post);
 
-        let channelName;
-        if (channelType === 'D') {
-            channelName = (
-                <FormattedMessage
-                    id='rhs_root.direct'
-                    defaultMessage='Direct Message'
-                />
-            );
-        } else {
-            channelName = channelDisplayName;
-        }
-
         let postReaction;
         if (!isReadOnly && !isEphemeral && !post.failed && !isSystemMessage && this.props.enableEmojiPicker && !channelIsArchived) {
             postReaction = (
@@ -421,7 +407,6 @@ class RhsRootPost extends React.PureComponent {
                 onFocus={this.handlePostFocus}
                 data-a11y-sort-order='0'
             >
-                <div className='post-right-channel__name'>{channelName}</div>
                 <div
                     role='application'
                     className='post__content'
diff --git a/components/rhs_thread/__snapshots__/rhs_thread.test.jsx.snap b/components/rhs_thread/__snapshots__/rhs_thread.test.jsx.snap
index f09d90c24030..45a008383e3c 100644
--- a/components/rhs_thread/__snapshots__/rhs_thread.test.jsx.snap
+++ b/components/rhs_thread/__snapshots__/rhs_thread.test.jsx.snap
@@ -11,7 +11,16 @@ exports[`components/RhsThread should match snapshot 1`] = `
     isScrolling={false}
     postId={0}
   />
-  <Connect(RhsHeaderPost) />
+  <Connect(RhsHeaderPost)
+    channel={
+      Object {
+        "delete_at": 0,
+        "id": "channel_id",
+        "team_id": "team_id",
+      }
+    }
+    rootPostId="id"
+  />
   <Scrollbars
     autoHeight={false}
     autoHeightMax={200}
diff --git a/components/rhs_thread/rhs_thread.jsx b/components/rhs_thread/rhs_thread.jsx
index 5f3e149e3104..fd9bc48aa6f7 100644
--- a/components/rhs_thread/rhs_thread.jsx
+++ b/components/rhs_thread/rhs_thread.jsx
@@ -360,6 +360,8 @@ export default class RhsThread extends React.Component {
                     isRhsPost={true}
                 />
                 <RhsHeaderPost
+                    rootPostId={selected.id}
+                    channel={this.props.channel}
                     previousRhsState={this.props.previousRhsState}
                 />
                 <Scrollbars
diff --git a/components/search_results/search_results.jsx b/components/search_results/search_results.jsx
index ec66e04086b3..b36238e454ec 100644
--- a/components/search_results/search_results.jsx
+++ b/components/search_results/search_results.jsx
@@ -267,6 +267,8 @@ class SearchResults extends React.Component {
             defaultMessage: 'Search Results',
         });
 
+        const channelName = this.props.channelDisplayName;
+
         if (this.props.isMentionSearch) {
             formattedTitle = this.props.intl.formatMessage({
                 id: 'search_header.title2',
@@ -279,10 +281,8 @@ class SearchResults extends React.Component {
             });
         } else if (this.props.isPinnedPosts) {
             formattedTitle = this.props.intl.formatMessage({
-                id: 'search_header.title4',
-                defaultMessage: 'Pinned Posts in {channelDisplayName}',
-            }, {
-                channelDisplayName: this.props.channelDisplayName,
+                id: 'channel_header.pinnedPosts',
+                defaultMessage: 'Pinned Posts',
             });
         } else if (this.props.isCard) {
             formattedTitle = this.props.intl.formatMessage({
@@ -298,6 +298,7 @@ class SearchResults extends React.Component {
             >
                 <SearchResultsHeader>
                     {formattedTitle}
+                    {channelName && <div className='sidebar--right__title__channel'>{channelName}</div>}
                 </SearchResultsHeader>
                 <Scrollbars
                     ref='scrollbars'
diff --git a/components/search_results_header/search_results_header.jsx b/components/search_results_header/search_results_header.jsx
index d78ecde5e83a..fb4cc7dc28ad 100644
--- a/components/search_results_header/search_results_header.jsx
+++ b/components/search_results_header/search_results_header.jsx
@@ -53,7 +53,7 @@ export default class SearchResultsHeader extends React.Component {
                 <div className='pull-right'>
                     <button
                         type='button'
-                        className='sidebar--right__expand'
+                        className='sidebar--right__expand btn-icon'
                         aria-label='Expand'
                         onClick={this.props.actions.toggleRhsExpanded}
                     >
@@ -68,7 +68,7 @@ export default class SearchResultsHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-expand'
+                                        className='icon icon-arrow-expand'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -85,7 +85,7 @@ export default class SearchResultsHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-compress'
+                                        className='icon icon-arrow-collapse'
                                         aria-label={ariaLabel}
                                     />
                                 )}
@@ -95,7 +95,7 @@ export default class SearchResultsHeader extends React.Component {
                     <button
                         id='searchResultsCloseButton'
                         type='button'
-                        className='sidebar--right__close'
+                        className='sidebar--right__close btn-icon'
                         aria-label='Close'
                         onClick={this.props.actions.closeRightHandSide}
                     >
@@ -110,7 +110,7 @@ export default class SearchResultsHeader extends React.Component {
                             >
                                 {(ariaLabel) => (
                                     <i
-                                        className='fa fa-sign-out'
+                                        className='icon icon-close'
                                         aria-label={ariaLabel}
                                     />
                                 )}
diff --git a/components/sidebar_right/index.js b/components/sidebar_right/index.js
index 2ed0f52e4ce5..3a4cb66771e6 100644
--- a/components/sidebar_right/index.js
+++ b/components/sidebar_right/index.js
@@ -4,7 +4,10 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
-import {getChannel} from 'mattermost-redux/selectors/entities/channels';
+import {
+    getChannel,
+    getCurrentChannel,
+} from 'mattermost-redux/selectors/entities/channels';
 
 import {setRhsExpanded, showPinnedPosts, openRHSSearch, closeRightHandSide, openAtPrevious} from 'actions/views/rhs';
 import {
@@ -22,12 +25,12 @@ import SidebarRight from './sidebar_right.jsx';
 
 function mapStateToProps(state) {
     const rhsState = getRhsState(state);
-
+    const channel = getCurrentChannel(state);
     const channelId = getSelectedChannelId(state);
 
-    let channel = null;
+    let rhsChannel = null;
     if (channelId) {
-        channel = getChannel(state, channelId);
+        rhsChannel = getChannel(state, channelId);
     }
 
     const selectedPostId = getSelectedPostId(state);
@@ -46,6 +49,7 @@ function mapStateToProps(state) {
         isFlaggedPosts: rhsState === RHSStates.FLAG,
         isPinnedPosts: rhsState === RHSStates.PIN,
         isPluginView: rhsState === RHSStates.PLUGIN,
+        rhsChannel,
         selectedPostId,
         selectedPostCardId,
     };
diff --git a/components/sidebar_right/sidebar_right.jsx b/components/sidebar_right/sidebar_right.jsx
index dfe8b99f598d..fd6f040ceb3a 100644
--- a/components/sidebar_right/sidebar_right.jsx
+++ b/components/sidebar_right/sidebar_right.jsx
@@ -31,6 +31,7 @@ export default class SidebarRight extends React.PureComponent {
         isPinnedPosts: PropTypes.bool,
         isPluginView: PropTypes.bool,
         previousRhsState: PropTypes.string,
+        rhsChannel: PropTypes.object,
         selectedPostId: PropTypes.string,
         selectedPostCardId: PropTypes.string,
         actions: PropTypes.shape({
@@ -100,9 +101,13 @@ export default class SidebarRight extends React.PureComponent {
             trackEvent('ui', 'ui_rhs_opened');
         }
 
-        const {actions, isPinnedPosts, channel} = this.props;
-        if (isPinnedPosts && prevProps.isPinnedPosts === isPinnedPosts && channel.id !== prevProps.channel.id) {
-            actions.showPinnedPosts(channel.id);
+        const {actions, isPinnedPosts, rhsChannel, channel} = this.props;
+        if (isPinnedPosts && prevProps.isPinnedPosts === isPinnedPosts && rhsChannel.id !== prevProps.rhsChannel.id) {
+            actions.showPinnedPosts(rhsChannel.id);
+        }
+
+        if (channel && prevProps.channel && (channel.id !== prevProps.channel.id)) {
+            this.props.actions.setRhsExpanded(false);
         }
 
         this.setPrevious();
@@ -135,7 +140,7 @@ export default class SidebarRight extends React.PureComponent {
 
     render() {
         const {
-            channel,
+            rhsChannel,
             currentUserId,
             isFlaggedPosts,
             isMentionSearch,
@@ -165,12 +170,8 @@ export default class SidebarRight extends React.PureComponent {
         }
 
         let channelDisplayName = '';
-        if (channel) {
-            if (channel.type === Constants.DM_CHANNEL || channel.type === Constants.GM_CHANNEL) {
-                channelDisplayName = Utils.localizeMessage('rhs_root.direct', 'Direct Message');
-            } else {
-                channelDisplayName = channel.display_name;
-            }
+        if (rhsChannel) {
+            channelDisplayName = rhsChannel.display_name;
         }
 
         if (searchVisible) {
diff --git a/components/widgets/modals/full_screen_modal.scss b/components/widgets/modals/full_screen_modal.scss
index 4474a1cc8a9d..3afc69f728a7 100644
--- a/components/widgets/modals/full_screen_modal.scss
+++ b/components/widgets/modals/full_screen_modal.scss
@@ -20,12 +20,19 @@
         z-index: 9;
 
         svg {
-            fill: var(--center-channel-color-90);
+            fill: var(--center-channel-color-56);
             padding: 4px;
             width: 40px;
             height: 40px;
             border-radius: 4px;
+
             &:hover {
+                fill: var(--center-channel-color-72);
+                background: var(--center-channel-color-08);
+            }
+
+            &:active {
+                fill: var(--button-bg);
                 background: var(--button-bg-08);
             }
         }
diff --git a/fonts/mattermosticons.woff b/fonts/mattermosticons.woff
deleted file mode 100644
index 7df039f70d63..000000000000
Binary files a/fonts/mattermosticons.woff and /dev/null differ
diff --git a/fonts/mattermosticons.woff2 b/fonts/mattermosticons.woff2
deleted file mode 100644
index 883dbca7544d..000000000000
Binary files a/fonts/mattermosticons.woff2 and /dev/null differ
diff --git a/fonts/mattermosticons.eot b/fonts/mattermosticons/mattermosticons.eot
similarity index 73%
rename from fonts/mattermosticons.eot
rename to fonts/mattermosticons/mattermosticons.eot
index e2e95a40841a..1827d4edd70b 100644
Binary files a/fonts/mattermosticons.eot and b/fonts/mattermosticons/mattermosticons.eot differ
diff --git a/fonts/mattermosticons.svg b/fonts/mattermosticons/mattermosticons.svg
similarity index 88%
rename from fonts/mattermosticons.svg
rename to fonts/mattermosticons/mattermosticons.svg
index be4d99b0da0a..144299884a60 100644
--- a/fonts/mattermosticons.svg
+++ b/fonts/mattermosticons/mattermosticons.svg
@@ -36,6 +36,16 @@
 
 <glyph glyph-name="image-area-outline" unicode="&#xe80e;" d="M900 50h-800v600h800m0 100h-800c-55 0-100-44-100-100v-600c0-55 45-100 100-100h800c55 0 100 45 100 100v600c0 56-45 100-100 100m-750-600l175 225 125-150 175 225 225-300" horiz-adv-x="1000" />
 
+<glyph glyph-name="emoticon-plus-outline" unicode="&#xe80f;" d="M625 350c40 0 75 35 75 75s-35 75-75 75-75-35-75-75 35-75 75-75m-300 0c40 0 75 35 75 75s-35 75-75 75-75-35-75-75 35-75 75-75m524 4c0-9 1-19 1-29 0-207-168-375-375-375s-375 168-375 375 168 375 375 375c10 0 20-1 29-1 6 34 17 67 34 96-21 3-42 5-63 5-262 0-475-213-475-475s213-475 475-475 475 213 475 475c0 21-2 42-5 63-29-17-62-28-96-34z m-99 496h100v-150h150v-100h-150v-150h-100v150h-150v100h150v150z m-531-625c40-102 139-175 256-175s216 73 256 175h-512z" horiz-adv-x="1000" />
+
+<glyph glyph-name="arrow-back-ios" unicode="&#xe810;" d="M770-80l-430 430 430 430-70 70-500-500 500-500 70 70z" horiz-adv-x="1000" />
+
+<glyph glyph-name="arrow-forward-ios" unicode="&#xe811;" d="M230-80l430 430-430 430 70 70 500-500-500-500-70 70z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mark-as-unread" unicode="&#xe812;" d="M50 700v-100h900v100h-900z m900-250v-200h-100l-100 100 100 100h100z m-900-50v-100h600v100h-600m0-300v-100h900v100h-900z" horiz-adv-x="1000" />
+
+<glyph glyph-name="brand-zoom" unicode="&#xe897;" d="M500 850c-275 0-500-225-500-500s225-500 500-500 500 225 500 500-225 500-500 500z m135-605c0-25 0-35-5-45-5-10-10-15-20-20-10-5-20-5-45-5h-200c-60 0-90 0-110 10-20 10-35 25-45 45-10 25-10 50-10 110v115c0 25 0 35 5 40 5 10 10 15 20 20 10 5 20 5 40 5h205c60 0 90 0 110-10 20-10 35-25 45-45 10-25 10-50 10-110v-110z m170-15c0-20 0-25 0-30-5-10-15-15-30-15-5 0-10 5-25 20l-60 45c-10 10-15 10-15 15-5 10-10 20-15 30 0 5 0 10 0 25v60c0 10 0 20 0 25 0 10 5 20 15 30 5 5 10 10 15 15l60 45c15 10 20 15 25 20 10 5 25-5 30-15 0-5 0-15 0-30v-240z" horiz-adv-x="1000" />
+
 <glyph glyph-name="account-multiple-outline" unicode="&#xf00f;" d="M715 140l-125 75c50 70 80 165 80 260 0 165-110 275-270 275s-270-110-270-275c0-95 30-190 80-260l-125-75c-50-25-85-80-85-135 0-85 70-155 150-155h500c85 0 150 70 150 155 0 55-35 110-85 135z m-485 335c0 120 75 175 170 175s170-55 170-175c0-75-25-155-70-210-25-35-60-55-105-55s-75 20-105 55c-35 55-60 135-60 210z m420-525h-500c-30 0-50 25-50 55 0 5 0 10 0 15 5 10 10 20 15 25 5 0 10 5 15 5l155 95c35-20 70-30 115-30s80 10 115 30l155-95c20-10 30-25 30-50 0-25-25-50-50-50z m195 345c15 60 25 120 25 180 0 20 0 155-95 275-40 50-125 100-175 100-35 0-65-5-90-15 65-20 125-55 170-100 50-55 80-125 90-205 0-20 5-35 5-55 0-80-15-155-45-225l40-25c25-15 50-35 70-55 25-30 45-60 55-100 5-25 10-45 10-70 0-15 0-30-5-45 50 15 85 55 100 105 5 15 5 25 5 40-5 60-50 150-160 195z" horiz-adv-x="1000" />
 
 <glyph glyph-name="account-outline" unicode="&#xf013;" d="M860 155l-160 95c10 15 25 30 35 50 40 70 65 160 65 250 0 180-120 300-300 300s-300-120-300-300c0-90 25-180 65-255 10-20 20-35 35-50l-160-95c-55-20-90-80-90-140 0-90 70-160 160-160h580c90 0 160 70 160 160 0 60-35 120-90 145z m-560 395c0 140 90 200 200 200s200-60 200-200c0-90-30-190-90-250-30-30-65-50-110-50s-80 20-110 50c-60 60-90 160-90 250z m490-600h-580c-35 0-60 25-60 60 0 25 15 45 35 55l195 115c40-20 80-30 120-30s80 10 115 30l195-115c20-10 35-30 35-55 5-35-20-60-55-60z" horiz-adv-x="1000" />
@@ -160,6 +170,8 @@
 
 <glyph glyph-name="paperclip" unicode="&#xf3e2;" d="M725 600v-475c0-110-90-200-200-200s-200 90-200 200v525c0 69 56 125 125 125s125-56 125-125v-475c0-28-22-50-50-50s-50 22-50 50v425h-75v-425c0-69 56-125 125-125s125 56 125 125v475c0 111-90 200-200 200s-200-89-200-200v-525c0-152 123-275 275-275s275 123 275 275v475h-75z" horiz-adv-x="1000" />
 
+<glyph glyph-name="pin" unicode="&#xf403;" d="M985 460l-50 50-325 325c0 0 0 0 0 0-20 20-50 20-70 0 0 0 0 0 0 0-20-20-20-50 0-70l15-15-220-220c-85 10-170 0-250-35-20-5-30-20-35-35 0-15 5-35 15-45l215-215-205-200-50-125 125 50 200 200 210-215c10-10 30-15 45-15 15 5 30 15 35 30 30 80 45 165 35 250l225 230 15-15c20-20 50-20 70 0 20 20 20 50 0 70z" horiz-adv-x="1000" />
+
 <glyph glyph-name="plus" unicode="&#xf415;" d="M850 300h-300v-300h-100v300h-300v100h300v300h100v-300h300v-100z" horiz-adv-x="1000" />
 
 <glyph glyph-name="plus-box" unicode="&#xf416;" d="M750 300h-200v-200h-100v200h-200v100h200v200h100v-200h200m100 400h-700c-55 0-100-45-100-100v-700c0-55 45-100 100-100h700c55 0 100 45 100 100v700c0 55-45 100-100 100z" horiz-adv-x="1000" />
@@ -250,7 +262,7 @@
 
 <glyph glyph-name="palette-outline" unicode="&#xfe6c;" d="M500-150c-275 0-500 225-500 500s225 500 500 500c275 0 500-200 500-450 0-165-135-300-300-300h-90c-15 0-25-10-25-25 0-5 5-10 5-15 20-25 30-55 30-85 5-70-50-125-120-125m0 900c-220 0-400-180-400-400s180-400 400-400c15 0 25 10 25 25 0 10-5 15-5 20-20 25-30 50-30 80 0 70 55 125 125 125h85c110 0 200 90 200 200 0 195-180 350-400 350m-275-300c40 0 75-35 75-75s-35-75-75-75-75 35-75 75 35 75 75 75m150 200c40 0 75-35 75-75s-35-75-75-75-75 35-75 75 35 75 75 75m250 0c40 0 75-35 75-75s-35-75-75-75-75 35-75 75 35 75 75 75m150-200c40 0 75-35 75-75s-35-75-75-75-75 35-75 75 35 75 75 75z" horiz-adv-x="1000" />
 
-<glyph glyph-name="file-music-outline" unicode="&#xfe7c;" d="M600 850l300-300v-600c0-55-45-100-100-100h-600c-55 0-100 45-100 100v800c0 55 45 100 100 100h400m200-900v550h-250v250h-350v-800h600m-250 500v-100h-100v-250c0-55-45-100-100-100s-100 45-100 100 45 100 100 100c20 0 35-5 50-15v265h150z" horiz-adv-x="1000" />
+<glyph glyph-name="file-music-outline" unicode="&#xfe7c;" d="M600 850l300-300v-600c0-55-45-100-100-100h-600c-55 0-100 45-100 100v800c0 55 45 100 100 100h400m200-900v550h-250v250h-350v-800h600m-250 50l-150 150h-100v150h100l150 150v-450z" horiz-adv-x="1000" />
 
 <glyph glyph-name="file-pdf-outline" unicode="&#xfe7d;" d="M600 850l300-300v-600c0-55-45-100-100-100h-600c-55 0-100 45-100 100v800c0 55 45 100 100 100h400m200-900v550h-250v250h-350v-800h600m-355 385c-10 40-40 160 35 165s25-155 25-155c20-75 100-130 100-130 25 10 165 25 145-50-20-75-175-5-175-5-95-5-170-35-170-35-55-105-125-150-150-105-35 55 105 125 105 125 75 120 85 185 85 190m35-40c-20-65-60-135-60-135 45 15 135 35 135 35-60 50-75 95-75 100m155-110c0 0 85-35 90-20 5 15-65 25-90 20m-280-75c-40-15-75-80-65-80 5 0 40 30 65 80m125 275c0 5 20 85 0 85-15 5 0-80 0-85z" horiz-adv-x="1000" />
 
@@ -272,9 +284,41 @@
 
 <glyph glyph-name="dock-left" unicode="&#xf00d5;" d="M900 750h-800c-55 0-100-45-100-100v-600c0-55 45-100 100-100h800c55 0 100 45 100 100v600c0 55-45 100-100 100m0-700h-550v600h550v-600z" horiz-adv-x="1000" />
 
+<glyph glyph-name="chevron-up" unicode="&#xf0143;" d="M271 180l229 229 230-229 70 70-300 300-300-300 71-70z" horiz-adv-x="1000" />
+
+<glyph glyph-name="close-circle" unicode="&#xf0159;" d="M500 850c277 0 500-223 500-500s-223-500-500-500-500 224-500 500 224 500 500 500m180-250l-180-179-179 179-71-70 180-180-180-179 71-71 179 180 180-180 70 71-179 179 179 180-70 70z" horiz-adv-x="1000" />
+
+<glyph glyph-name="content-copy" unicode="&#xf018f;" d="M850-50h-500v600h500m0 100h-500c-55 0-100-45-100-100v-600c0-55 45-100 100-100h500c55 0 100 45 100 100v600c0 55-45 100-100 100m-150 200h-550c-55 0-100-45-100-100v-600h100v600h550v100z" horiz-adv-x="1000" />
+
 <glyph glyph-name="view-grid-outline" unicode="&#xf0204;" d="M50 400h400v400h-400m100-100h200v-200h-200m400-600h400v400h-400m100-100h200v-200h-200m-600-100h400v400h-400m100-100h200v-200h-200m400 800v-400h400v400m-100-300h-200v200h200v-200z" horiz-adv-x="1000" />
 
+<glyph glyph-name="file-outline" unicode="&#xf0224;" d="M600 850h-400c-55 0-100-45-100-100v-800c0-55 45-100 100-100h600c55 0 100 45 100 100v600l-300 300m200-900h-600v800h350v-250h250v-550z" horiz-adv-x="1000" />
+
+<glyph glyph-name="folder-outline" unicode="&#xf0256;" d="M900 50h-800v500h800m0 100h-400l-100 100h-300c-55 0-100-44-100-100v-600c0-55 45-100 100-100h800c55 0 100 45 100 100v500c0 56-45 100-100 100z" horiz-adv-x="1000" />
+
 <glyph glyph-name="archive-arrow-up-outline" unicode="&#xf0287;" d="M900-100h-800v550h100v-450h600v450h100v-550m-850 900h900v-300h-900v300m100-100v-100h700v100m-425-600v150h-125l200 200 200-200h-125v-150" horiz-adv-x="1000" />
+
+<glyph glyph-name="glasses" unicode="&#xf02aa;" d="M965 489c-31 39-77 61-126 61h-178c-55 0-86-12-117-52-14 1-28 2-44 2s-30-1-44-2c-31 40-61 52-117 52h-178c-49 0-95-22-126-61-31-40-42-91-30-140l30-125c18-73 82-124 157-124h86c62 0 117 35 144 91l61 125c13 27 18 56 16 84 0 0 0 0 0 0 1 0 1 0 1 0s1 0 1 0c0 0 0 0 0 0-2-28 3-57 16-84l61-125c27-56 82-91 144-91h87c74 0 138 51 156 124l30 125c12 49 1 100-30 140z m-571-129l-61-125c-11-22-32-35-55-35h-86c-28 0-53 20-60 47l-30 125c-10 40 19 78 59 78h178c45 0 75-49 55-90z m504 12l-30-125c-7-27-31-47-59-47h-87c-23 0-44 13-54 35l-61 125c-21 41 9 90 54 90h178c40 0 69-38 59-78z" horiz-adv-x="1000" />
+
+<glyph glyph-name="magnify-minus" unicode="&#xf034a;" d="M350 850c193 0 350-157 350-350 0-78-25-150-69-209l40-41h29l300-300-100-100-300 300v30l-40 40c-60-45-131-70-210-70-193 0-350 157-350 350s157 350 350 350m-200-300v-100h400v100h-400z" horiz-adv-x="1000" />
+
+<glyph glyph-name="magnify-plus" unicode="&#xf034b;" d="M350 850c193 0 350-157 350-350 0-78-25-150-69-209l40-41h29l300-300-100-100-300 300v30l-40 40c-60-45-131-70-210-70-193 0-350 157-350 350s157 350 350 350m-50-150v-150h-150v-100h150v-150h100v150h150v100h-150v150h-100z" horiz-adv-x="1000" />
+
+<glyph glyph-name="minus" unicode="&#xf0374;" d="M850 300h-700v100h700v-100z" horiz-adv-x="1000" />
+
+<glyph glyph-name="minus-circle-outline" unicode="&#xf0377;" d="M500-50c-220 0-400 180-400 400s180 400 400 400 400-179 400-400-179-400-400-400m0 900c-276 0-500-224-500-500s224-500 500-500 500 224 500 500-224 500-500 500m-250-550h500v100h-500" horiz-adv-x="1000" />
+
+<glyph glyph-name="sort-alphabetical-ascending" unicode="&#xf05bd;" d="M800 100h150l-200-200-200 200h150v700h100m-400-500v-100l-166-200h166v-100h-300v100l167 200h-167v100m200 500h-100c-55 0-100-45-100-100v-300h100v100h100v-100h100v300c0 55-44 100-100 100m0-200h-100v100h100v-100z" horiz-adv-x="1000" />
+
+<glyph glyph-name="trash-can-outline" unicode="&#xf0a7a;" d="M350 800v-50h-250v-100h50v-650c0-55 45-100 100-100h500c55 0 100 45 100 100v650h50v100h-250v50h-300m-100-150h500v-650h-500v650m100-100v-450h100v450h-100m200 0v-450h100v450h-100z" horiz-adv-x="1000" />
+
+<glyph glyph-name="folder-plus-outline" unicode="&#xf0b9d;" d="M500 350h100v100h100v-100h100v-100h-100v-100h-100v100h-100v100m500 200v-500c0-56-44-100-100-100h-800c-55 0-100 44-100 100v600c0 56 45 100 100 100h300l100-100h400c56 0 100-44 100-100m-100 0h-800v-500h800v500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="hand-right" unicode="&#xf0e47;" d="M950 621v-604c0-93-74-167-166-167h-305c-45 0-87 18-118 50l-327 332c0 0 52 52 54 52 9 8 20 13 33 13 9 0 17-3 25-7 1-1 179-103 179-103v497c0 34 28 62 63 62s62-28 62-62v-292h42v396c0 34 28 62 62 62 35 0 63-28 63-62v-396h42v354c0 35 27 63 62 63 35 0 63-28 63-63v-354h41v229c0 35 28 63 63 63s62-28 62-63z" horiz-adv-x="1000" />
+
+<glyph glyph-name="shield-alert-outline" unicode="&#xf0ecd;" d="M864 396c0-253-175-489-409-546-235 57-409 293-409 546v272l409 182 409-182v-272m-409-455c170 45 318 248 318 445v223l-318 142-319-142v-223c0-197 148-400 319-445m-46 636h91v-272h-91v272m0-363h91v-91h-91v91z" horiz-adv-x="909" />
+
+<glyph glyph-name="folder-move-outline" unicode="&#xf1246;" d="M900 50h-800v500h800v-500m-400 600l-100 100h-300c-55 0-100-44-100-100v-600c0-56 45-100 100-100h800c56 0 100 44 100 100v500c0 55-44 100-100 100h-400m-50-400v100h200v150l200-200-200-200v150h-200z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>
\ No newline at end of file
diff --git a/fonts/mattermosticons.ttf b/fonts/mattermosticons/mattermosticons.ttf
similarity index 73%
rename from fonts/mattermosticons.ttf
rename to fonts/mattermosticons/mattermosticons.ttf
index cc8b362067ba..b011afc2d7ae 100644
Binary files a/fonts/mattermosticons.ttf and b/fonts/mattermosticons/mattermosticons.ttf differ
diff --git a/fonts/mattermosticons/mattermosticons.woff b/fonts/mattermosticons/mattermosticons.woff
new file mode 100644
index 000000000000..289400c62b71
Binary files /dev/null and b/fonts/mattermosticons/mattermosticons.woff differ
diff --git a/fonts/mattermosticons/mattermosticons.woff2 b/fonts/mattermosticons/mattermosticons.woff2
new file mode 100644
index 000000000000..1252db60af0f
Binary files /dev/null and b/fonts/mattermosticons/mattermosticons.woff2 differ
diff --git a/i18n/en.json b/i18n/en.json
index 748d1a439d8d..9f2c89ad7791 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -3098,12 +3098,11 @@
   "rhs_header.backToResultsTooltip": "Back to search results",
   "rhs_header.closeSidebarTooltip": "Close the sidebar",
   "rhs_header.closeTooltip.icon": "Close the sidebar icon",
-  "rhs_header.details": "Message Details",
+  "rhs_header.details": "Thread",
   "rhs_header.expandSidebarTooltip": "Expand the sidebar",
   "rhs_header.expandSidebarTooltip.icon": "Expand the sidebar icon",
   "rhs_header.expandTooltip.icon": "Shrink the sidebar icon",
   "rhs_header.shrinkSidebarTooltip": "Shrink the sidebar",
-  "rhs_root.direct": "Direct Message",
   "rhs_root.mobile.add_reaction": "Add Reaction",
   "rhs_root.mobile.flag": "Flag",
   "rhs_root.mobile.unflag": "Unflag",
@@ -3117,7 +3116,6 @@
   "search_header.results": "Search Results",
   "search_header.title2": "Recent Mentions",
   "search_header.title3": "Flagged Posts",
-  "search_header.title4": "Pinned Posts in {channelDisplayName}",
   "search_header.title5": "Extra Information",
   "search_item.channelArchived": "Archived",
   "search_item.direct": "Direct Message (with {username})",
diff --git a/sass/base/_mattermost-icons.scss b/sass/base/_mattermost-icons.scss
index 86bc0924af15..adc9175838f7 100755
--- a/sass/base/_mattermost-icons.scss
+++ b/sass/base/_mattermost-icons.scss
@@ -2,12 +2,12 @@
 
  @font-face {
   font-family: 'mattermosticons';
-  src: url('../fonts/mattermosticons.eot?61084707');
-  src: url('../fonts/mattermosticons.eot?61084707#iefix') format('embedded-opentype'),
-       url('../fonts/mattermosticons.woff2?61084707') format('woff2'),
-       url('../fonts/mattermosticons.woff?61084707') format('woff'),
-       url('../fonts/mattermosticons.ttf?61084707') format('truetype'),
-       url('../fonts/mattermosticons.svg?61084707#mattermosticons') format('svg');
+  src: url('../fonts/mattermosticons/mattermosticons.eot?16343536');
+  src: url('../fonts/mattermosticons/mattermosticons.eot?16343536#iefix') format('embedded-opentype'),
+       url('../fonts/mattermosticons/mattermosticons.woff2?16343536') format('woff2'),
+       url('../fonts/mattermosticons/mattermosticons.woff?16343536') format('woff'),
+       url('../fonts/mattermosticons/mattermosticons.ttf?16343536') format('truetype'),
+       url('../fonts/mattermosticons/mattermosticons.svg?16343536#mattermosticons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -17,12 +17,12 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'mattermosticons';
-    src: url('../font/mattermosticons.svg?61084707#mattermosticons') format('svg');
+    src: url('../font/mattermosticons.svg?16343536#mattermosticons') format('svg');
   }
 }
 */
 
- [class^="icon-"]:before, [class*=" icon-"]:before {
+[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "mattermosticons";
   font-style: normal;
   font-weight: normal;
@@ -57,14 +57,6 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon--no-spacing:before {
-  margin: 0;
-}
-
-.icon--standard {
-  font-size: 1.6rem;
-}
-
 .icon-mattermost:before { content: '\e800'; } /* '' */
 .icon-archive-outline:before { content: '\e801'; } /* '' */
 .icon-beach-umbrella-outline:before { content: '\e802'; } /* '' */
@@ -80,6 +72,11 @@
 .icon-webhook-incoming:before { content: '\e80c'; } /* '' */
 .icon-webhook-outgoing:before { content: '\e80d'; } /* '' */
 .icon-image-area-outline:before { content: '\e80e'; } /* '' */
+.icon-emoticon-plus-outline:before { content: '\e80f'; } /* '' */
+.icon-arrow-back-ios:before { content: '\e810'; } /* '' */
+.icon-arrow-forward-ios:before { content: '\e811'; } /* '' */
+.icon-mark-as-unread:before { content: '\e812'; } /* '' */
+.icon-brand-zoom:before { content: '\e897'; } /* '' */
 .icon-account-multiple-outline:before { content: '\f00f'; } /* '' */
 .icon-account-outline:before { content: '\f013'; } /* '' */
 .icon-airplane:before { content: '\f01d'; } /* '' */
@@ -142,6 +139,7 @@
 .icon-minus-box:before { content: '\f375'; } /* '' */
 .icon-minus-circle:before { content: '\f376'; } /* '' */
 .icon-paperclip:before { content: '\f3e2'; } /* '' */
+.icon-pin:before { content: '\f403'; } /* '' */
 .icon-plus:before { content: '\f415'; } /* '' */
 .icon-plus-box:before { content: '\f416'; } /* '' */
 .icon-refresh:before { content: '\f450'; } /* '' */
@@ -198,5 +196,21 @@
 .icon-file-powerpoint-outline:before { content: '󰁗'; } /* '\f0057' */
 .icon-file-word-outline:before { content: '󰁠'; } /* '\f0060' */
 .icon-dock-left:before { content: '󰃕'; } /* '\f00d5' */
+.icon-chevron-up:before { content: '󰅃'; } /* '\f0143' */
+.icon-close-circle:before { content: '󰅙'; } /* '\f0159' */
+.icon-content-copy:before { content: '󰆏'; } /* '\f018f' */
 .icon-view-grid-outline:before { content: '󰈄'; } /* '\f0204' */
-.icon-archive-arrow-up-outline:before { content: '󰊇'; } /* '\f0287' */
\ No newline at end of file
+.icon-file-outline:before { content: '󰈤'; } /* '\f0224' */
+.icon-folder-outline:before { content: '󰉖'; } /* '\f0256' */
+.icon-archive-arrow-up-outline:before { content: '󰊇'; } /* '\f0287' */
+.icon-glasses:before { content: '󰊪'; } /* '\f02aa' */
+.icon-magnify-minus:before { content: '󰍊'; } /* '\f034a' */
+.icon-magnify-plus:before { content: '󰍋'; } /* '\f034b' */
+.icon-minus:before { content: '󰍴'; } /* '\f0374' */
+.icon-minus-circle-outline:before { content: '󰍷'; } /* '\f0377' */
+.icon-sort-alphabetical-ascending:before { content: '󰖽'; } /* '\f05bd' */
+.icon-trash-can-outline:before { content: '󰩺'; } /* '\f0a7a' */
+.icon-folder-plus-outline:before { content: '󰮝'; } /* '\f0b9d' */
+.icon-hand-right:before { content: '󰹇'; } /* '\f0e47' */
+.icon-shield-alert-outline:before { content: '󰻍'; } /* '\f0ecd' */
+.icon-folder-move-outline:before { content: '󱉆'; } /* '\f1246' */
\ No newline at end of file
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index c2d260d802f6..fe972245976b 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -96,4 +96,30 @@ button {
 
 %btn-transition {
     @include single-transition(all, .15s, ease);
+}
+
+.btn-icon {
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    width: 3.2rem;
+    height: 3.2rem;
+    font-size: 1.6rem;
+    fill: v(center-channel-color-56);
+    color: v(center-channel-color-56);
+
+    &:hover {
+        background: v(center-channel-color-08);
+        fill: v(center-channel-color-72);
+        color: v(center-channel-color-72);
+    }
+
+    &:active,
+    &--active,
+    &--active:hover {
+        background: v(button-bg-08);
+        fill: v(button-bg);
+        color: v(button-bg);
+    }
 }
\ No newline at end of file
diff --git a/sass/components/_channel-switcher.scss b/sass/components/_channel-switcher.scss
index 512ef4807211..b2960d904d7f 100644
--- a/sass/components/_channel-switcher.scss
+++ b/sass/components/_channel-switcher.scss
@@ -59,7 +59,7 @@
     .channel-switcher__suggestion-box {
         min-height: 344px;
         position: relative;
-        padding: 0 0 1.2rem;
+        padding: 0;
 
         .icon-magnify {
             opacity: .48;
diff --git a/sass/components/_icons.scss b/sass/components/_icons.scss
index 93dd4add1666..f5e8fe90cc2f 100644
--- a/sass/components/_icons.scss
+++ b/sass/components/_icons.scss
@@ -6,12 +6,17 @@
     justify-content: center;
 }
 
+.icon--no-spacing:before {
+    margin: 0;
+}
+
 .icon--small {
     height: 16px;
     width: 16px;
 }
 
 .icon--standard {
+    font-size: 1.6rem;
     height: 20px;
     width: 20px;
 }
\ No newline at end of file
diff --git a/sass/components/_post-right.scss b/sass/components/_post-right.scss
index 57ff3b959e62..63ade05ddb19 100644
--- a/sass/components/_post-right.scss
+++ b/sass/components/_post-right.scss
@@ -27,7 +27,7 @@
 
                         &:before {
                             content: '';
-                            background: v(center-channel-color-08);
+                            background: v(center-channel-color-04);
                             width: 100%;
                             height: 16px;
                             position: absolute;
@@ -57,9 +57,7 @@
 
     .post {
         &.post--root {
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 1em;
-            padding-left: 1.5em;
+            padding-top: 2rem;
 
             .post__body {
                 background: transparent !important;
diff --git a/sass/components/_post.scss b/sass/components/_post.scss
index 254f44a79f9d..25d1e8da2d6d 100644
--- a/sass/components/_post.scss
+++ b/sass/components/_post.scss
@@ -1862,15 +1862,18 @@
     width: 100%;
 
     .post-collapse__gradient, .post-attachment-collapse__gradient {
+        background: linear-gradient(transparent, v(center-channel-bg));
         position: relative;
     }
 
     .post-collapse__show-more, .post-attachment-collapse__show-more {
+        background: v(center-channel-bg);
         pointer-events: auto;
     }
 }
 
 .post-collapse__show-more {
+    background: v(center-channel-bg);
     padding-bottom: 10px;
 }
 
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
index 8d8fa83701db..7a16ec583588 100644
--- a/sass/components/_search.scss
+++ b/sass/components/_search.scss
@@ -41,20 +41,25 @@
 
 .input-clear {
     cursor: pointer;
+    font-size: 14px;
     color: v(center-channel-color-56);
     position: absolute;
     right: 0;
-    top: 1px;
+    top: 0;
     visibility: hidden;
     width: 2.4rem;
+    height: 100%;
     margin: 0;
-    font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &:hover {
-        @include opacity(1);
+        color: v(center-channel-color-72);
+    }
+
+    &:active {
+        color: v(center-channel-color);
     }
 
     &.visible {
@@ -84,8 +89,7 @@
         height: 32px;
 
         .input-clear {
-            top: 1px;
-            right: 3px;
+            right: 4px;
         }
 
         &:hover {
@@ -101,19 +105,13 @@
                 padding-left: 2.9rem;
             }
 
-            .input-clear {
-                top: 0;
-                right: 1px;
-            }
-
             .search__icon {
                 top: 6px;
                 left: 8px;
             }
 
             .input-clear {
-                top: 0;
-                right: 2px;
+                right: 3px;
             }
         }
     }
@@ -148,7 +146,7 @@
         @include opacity(0.5);
         font-size: 1em;
         position: absolute;
-        right: 24px;
+        right: 25px;
         top: 4px;
     }
 }
diff --git a/sass/components/_suggestion-list.scss b/sass/components/_suggestion-list.scss
index 3f35f76a2ccb..5fd1511002ab 100644
--- a/sass/components/_suggestion-list.scss
+++ b/sass/components/_suggestion-list.scss
@@ -122,7 +122,7 @@
 
 .slash-command {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     padding: 1rem 2.4rem;
 
     &:first-child {
@@ -154,8 +154,9 @@
 
 .slash-command__desc {
     @include opacity(.56);
-    margin: 4px 0 0;
+    margin: 2px 0 0;
     font-size: 12px;
+    line-height: 1.6;
 }
 
 .suggestion-list__content--top {
diff --git a/sass/layout/_headers.scss b/sass/layout/_headers.scss
index 478f6e4e6abb..f1ef8d8d3b20 100644
--- a/sass/layout/_headers.scss
+++ b/sass/layout/_headers.scss
@@ -2,12 +2,13 @@
 
 .channel-header {
     @include flex(0 0 63px);
+    z-index: 15;
+    background: v(center-channel-bg);
     max-height: 63px;
     border-bottom: 1px solid;
     font-size: 14px;
     position: relative;
     width: 100%;
-    z-index: 9;
 
     .Badge {
         display: inline-block;
diff --git a/sass/layout/_sidebar-right.scss b/sass/layout/_sidebar-right.scss
index 448a1aabca1a..78fd87e3f86b 100644
--- a/sass/layout/_sidebar-right.scss
+++ b/sass/layout/_sidebar-right.scss
@@ -2,35 +2,44 @@
 
 .sidebar--right {
     @include translateX(100%);
-    background: $white;
     height: 100%;
     padding: 0;
     position: fixed;
     right: 0;
     width: 400px;
-    z-index: 8;
+    z-index: 11;
 
     body.announcement-bar--fixed & {
         height: calc(100% - #{$announcement-bar-height});
     }
 
+    &.move--left {
+        @include single-transition(width, 0.25s, ease-in);
+    }
+
     &.sidebar--right--expanded {
-        z-index: 15;
+        @include box-shadow(0px 8px 24px alpha-color($black, .24));
+
+        .sidebar-right__body {
+            overflow: hidden;
+        }
     }
 
     .sidebar--right__bg {
-        @include single-transition(background-color, .5s, ease);
-        background-color: alpha-color($black, 0);
+        background-color: transparent;
         height: 110%;
         position: absolute;
         top: -70px;
         visibility: hidden;
-        width: 300%;
+        z-index: 5;
+        // Since the element (sidebar--right__bg) is tied to the sidebar, we need to expand beyond it, we're given an arbitrary large width and left positioning so that it may take the width completely
+        width: 1000%;
+        left: -500%;
     }
 
-    &.move--left {
+    &.sidebar--right--expanded {
         .sidebar--right__bg {
-            left: -100%;
+            visibility: visible;
         }
     }
 
@@ -135,24 +144,26 @@
 
     .sidebar--right__back {
         @include single-transition(all, .2s, ease-in);
-        @include opacity(.5);
-        color: inherit;
-        display: inline-block;
-        font-size: 26px;
-        margin-left: -14px;
-        text-align: center;
-        vertical-align: top;
-        width: 30px;
+        border-radius: 4px;
+        text-decoration: none;
+        color: v(center-channel-color-56);
+        font-size: 12px;
+        width: 2.4rem;
+        height: 2.4rem;
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
 
-        &:hover,
-        &:active {
-            color: inherit;
-            opacity: .8;
+        &:hover {
+            background-color: v(center-channel-color-08);
+            color: v(center-channel-color-72);
         }
 
-        i {
-            position: relative;
-            top: -2px;
+        &:active {
+            background-color: v(button-bg-08);
+            color: v(button-bg);
         }
     }
 
@@ -160,7 +171,8 @@
         @include display-flex;
         @include flex(1 1 auto);
         @include flex-direction(column);
-        border-left: $border-gray;
+        background: v(center-channel-bg);
+        border-left: 1px solid v(center-channel-color-16);
         height: calc(100% - 56px);
 
         .loading-screen {
@@ -202,63 +214,66 @@
         float: right;
     }
 
-    .sidebar--right__close {
-        @include single-transition(all, .2s, ease-in);
-        background: none;
-        border: none;
-        font-size: 20px;
-        height: 30px;
-        line-height: 0;
-        margin: 6px 0 0;
-        outline: none;
-        padding: 0;
-        width: 30px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover,
-        &:active {
-            i {
-                opacity: .8;
-            }
-        }
-
-        i {
-            opacity: .5;
-            position: relative;
-            top: 1px;
-        }
-    }
-
     .sidebar--right__expand {
-        @extend .sidebar--right__close;
-        font-size: 17px;
+        margin: 0 4px 0 0;
 
         i {
             top: 0;
         }
 
-        .fa-compress {
+        .icon-arrow-collapse {
             display: none;
         }
     }
 
     .sidebar--right__title {
+        height: 2.4rem;
         @include clearfix;
-        padding-left: 15px;
+        display: flex;
+        flex: 1 1 auto;
+        font-size: 1.6rem;
+        font-weight: 600;
+        padding: 0 1.6rem;
+    }
+
+    .sidebar--right__title__channel {
+        border-left: 1px solid v(center-channel-color-16);
+        color: v(center-channel-color-56);
+        cursor: pointer;
+        margin: 0 0 0 8px;
+        font-size: 12px;
+        font-weight: normal;
+        height: 2.4rem;
+        line-height: 2.4rem;
+        padding: 0 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+            border-radius: 4px;
+            border-color: transparent;
+            background: v(center-channel-color-08);
+            color: v(center-channel-color-72);
+        }
+
+        &:active {
+            color: v(button-bg);
+            background: v(button-bg-08);
+        }
     }
 
     .sidebar--right__header {
-        @include flex(0 0 44px);
-        border-bottom: 1px solid;
+        @include flex(0 0 56px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: v(center-channel-color-04);
+        border-bottom: 1px solid v(center-channel-color-08);
         color: inherit;
-        font-size: 1em;
-        height: 44px;
-        line-height: 44px;
         overflow: hidden;
-        padding: 0 5px 0 0;
-        text-transform: uppercase;
+        padding: 0 16px 0 0;
+        white-space: nowrap;
     }
 
     .sidebar--right__loading {
diff --git a/sass/responsive/_desktop.scss b/sass/responsive/_desktop.scss
index 486695c627e3..5dbc6e4877a2 100644
--- a/sass/responsive/_desktop.scss
+++ b/sass/responsive/_desktop.scss
@@ -3,6 +3,10 @@
 @media screen and (min-width: 1680px) {
     .sidebar--right {
         width: 500px;
+
+        .sidebar--right__title__channel {
+            max-width: 30rem;
+        }
     }
 
     .channel-header {
@@ -138,6 +142,18 @@
     }
 }
 
+@media (min-width: 1280px) {
+    .sidebar--right {
+        &.sidebar--right--expanded {
+            width: 96rem;
+
+            .multi-teams & {
+                width: 96rem;
+            }
+        }
+    }
+}
+
 @media (min-width: 1025px) {
     .post-image__details {
         .post-image__download {
diff --git a/sass/responsive/_mobile.scss b/sass/responsive/_mobile.scss
index a9488aacc34f..a66717834a00 100644
--- a/sass/responsive/_mobile.scss
+++ b/sass/responsive/_mobile.scss
@@ -1628,6 +1628,14 @@
             display: none;
         }
 
+        .sidebar--right__bg {
+            display: none;
+        }
+
+        .sidebar--right__expand {
+            display: none;
+        }
+
         .post-create__container {
             form {
                 padding: .5em 1em;
diff --git a/sass/responsive/_tablet.scss b/sass/responsive/_tablet.scss
index 2d8aaa39937c..947d43e6948e 100644
--- a/sass/responsive/_tablet.scss
+++ b/sass/responsive/_tablet.scss
@@ -176,15 +176,10 @@
         }
 
         &.sidebar--right--expanded {
-            width: calc(100% - 220px);
+            width: calc(100% - 220px - 48px);
 
             .multi-teams & {
-                width: calc(100% - 285px);
-            }
-
-            .sidebar--right__bg {
-                background-color: alpha-color($black, .4);
-                visibility: visible;
+                width: calc(100% - 285px - 48px);
             }
 
             .search-bar__container {
@@ -197,22 +192,15 @@
             }
 
             .sidebar--right__expand {
-                .fa-expand {
+                .icon-arrow-expand {
                     display: none;
                 }
 
-                .fa-compress {
+                .icon-arrow-collapse {
                     display: inline-block;
                 }
             }
         }
-
-        .sidebar--right__title {
-            display: inline-block;
-            max-width: 300px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
     }
 
     .move--left {
@@ -514,6 +502,10 @@
 }
 
 @media screen and (max-width: 1020px) {
+    .channel-header {
+        z-index: 5;
+    }
+
     .sidebar--right {
         @include single-transition(all, .35s, ease);
         @include translateX(100%);
diff --git a/sass/routes/_admin-console.scss b/sass/routes/_admin-console.scss
index e65a3e8aeeeb..19e21db47bbe 100644
--- a/sass/routes/_admin-console.scss
+++ b/sass/routes/_admin-console.scss
@@ -552,8 +552,7 @@
             color: $white;
             font-weight: bold;
             position: absolute;
-            top: 10px;
-            right: 12px
+            right: 16px
         }
     }
 
diff --git a/utils/utils.jsx b/utils/utils.jsx
index 739a6cef40ca..6e3ef9c8b7c8 100644
--- a/utils/utils.jsx
+++ b/utils/utils.jsx
@@ -487,7 +487,7 @@ export function applyTheme(theme) {
         changeCss('.multi-select__focused > div', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.sidebarText, 0.5) + ', inset 0 0 0 1px ' + 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('.app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li button', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('.app__body .modal .settings-modal .nav-pills>li button', '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('.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));
@@ -602,13 +602,12 @@ export function applyTheme(theme) {
         changeCss('#post-create, .app__body .emoji-picker__preview', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg);
-        changeCss('.app__body .sidebar--right, .app__body .dropdown-menu, .app__body .popover, .app__body .tip-overlay', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .dropdown-menu, .app__body .popover, .app__body .tip-overlay', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg);
         changeCss('.app__body .popover.right>.arrow:after, .app__body .tip-overlay.tip-overlay--sidebar .arrow, .app__body .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg);
         changeCss('.app__body .popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg);
         changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg);
         changeCss('@media(min-width: 768px){.app__body .form-control', 'background:' + theme.centerChannelBg);
-        changeCss('@media(min-width: 768px){.app__body .sidebar--right.sidebar--right--expanded .sidebar-right-container', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .attachment__content, .app__body .attachment-actions button', 'background:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
@@ -659,7 +658,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-image__details .post-image__download svg', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.35));
         changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon, .app__body .more-modal__header svg, .app__body .icon--body', 'fill:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .post-menu, .app__body .post.post--hovered .post__header .post-menu, .app__body .post.a11y--active .post__header .post-menu', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .MenuWrapper .MenuItem__divider, .app__body .modal .about-modal .modal-content .modal-header, .post .attachment .attachment__image.attachment__image--opengraph, .app__body .DayPicker .DayPicker-Caption, .app__body .modal .settings-modal .team-img-preview div, .app__body .modal .settings-modal .team-img__container div, .app__body .system-notice__footer, .app__body .system-notice__footer .btn:last-child, .app__body .modal .shortcuts-modal .subsection, .app__body .sidebar--right .sidebar--right__header, .app__body .channel-header, .app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .suggestion-list__content .command, .app__body .channel-archived__message, .app__body .post-card--info', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .MenuWrapper .MenuItem__divider, .app__body .modal .about-modal .modal-content .modal-header, .post .attachment .attachment__image.attachment__image--opengraph, .app__body .DayPicker .DayPicker-Caption, .app__body .modal .settings-modal .team-img-preview div, .app__body .modal .settings-modal .team-img__container div, .app__body .system-notice__footer, .app__body .system-notice__footer .btn:last-child, .app__body .modal .shortcuts-modal .subsection, .app__body .channel-header, .app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .suggestion-list__content .command, .app__body .channel-archived__message, .app__body .post-card--info', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .help-text, .app__body .post .post-waiting, .app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a, pp__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65));
@@ -677,7 +676,8 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
         changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
-        changeCss('.app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .channel-header .channel-header_plugin-dropdown svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
+        changeCss('.app__body .file-preview, .app__body .post-image__details, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.emoji-picker .emoji-picker__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .btn.btn-transparent', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
@@ -695,10 +695,10 @@ export function applyTheme(theme) {
         changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
+        changeCss('.app__body .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
         changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header, .app__body .user-settings .authorized-app:not(:last-child)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
+        changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07));
         changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
@@ -736,37 +736,18 @@ export function applyTheme(theme) {
         changeCss('.app__body .post .post-collapse__show-more-line', `background-color:${changeOpacity(theme.centerChannelColor, 0.1)}`);
 
         if (theme.centerChannelBg) {
-            const ownPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);
-            const hoveredPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.08);
-            const hoveredPostBgLight = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);
-
-            // Fade out effect for collapsed posts made by the current user
-            changeCss(
-                '.app__body .post-list__table .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
-                '.app__body .sidebar-right__body .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
-                '.app__body .post--root .post-collapse__gradient',
-                `background:linear-gradient(${changeOpacity(ownPostBg, 0)}, ${ownPostBg})`,
-            );
-            changeCss(
-                '@media(max-width: 768px){.app__body .post-list__table .post.current--user:hover .post-collapse__gradient',
-                `background:linear-gradient(${changeOpacity(ownPostBg, 0)}, ${ownPostBg}) !important`,
-            );
-            changeCss(
-                '.app__body .post-list__table .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__show-more, ' +
-                '.app__body .sidebar-right__body .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__show-more, ' +
-                '.app__body .post--root .post-collapse__show-more',
-                `background:${ownPostBg}`,
-            );
+            const hoveredPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.04);
+            const hoveredPostBgLight = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.04);
 
             // Fade out effect for collapsed posts that are being hovered over
             changeCss(
                 '@media(min-width: 768px){.app__body .post-list__table .post:hover .post-collapse__gradient, ' +
-                '.app__body .sidebar-right__body .post:not(.post--root):hover .post-collapse__gradient',
+                '.app__body .sidebar-right__body .post:hover .post-collapse__gradient',
                 `background:linear-gradient(${changeOpacity(hoveredPostBg, 0)}, ${hoveredPostBg})`,
             );
             changeCss(
                 '@media(min-width: 768px){.app__body .post-list__table .post:hover .post-collapse__show-more, ' +
-                '.app__body .sidebar-right__body .post:not(.post--root):hover .post-collapse__show-more',
+                '.app__body .sidebar-right__body .post:hover .post-collapse__show-more',
                 `background:${hoveredPostBg}`,
             );
             changeCss(
@@ -832,7 +813,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover svg', 'fill:' + theme.linkColor);
         changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .header-dropdown__icon, .app__body .channel-header__title .open .heading, .app__body .channel-header__info .channel-header__title .open .heading', 'color:' + theme.linkColor);
         changeCss('.emoji-picker__container .icon--emoji.active svg', 'fill:' + theme.linkColor);
-        changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover .fa, .sidebar--right--expanded .sidebar--right__expand', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header .channel-header_plugin-dropdown a:hover .fa', 'color:' + theme.linkColor);
         changeCss('.app__body .post .post-collapse__show-more', `color:${theme.linkColor}`);
         changeCss('.app__body .post .post-attachment-collapse__show-more', `color:${theme.linkColor}`);
         changeCss('.app__body .post .post-collapse__show-more-button:hover', `background-color:${theme.linkColor}`);