diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index 23f7d17620..1ed8445f8b 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -248,6 +248,8 @@ export default class SearchBar extends React.Component {
         let mentionBtn;
         let flagBtn;
         if (this.props.showMentionFlagBtns) {
+            var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : '';
+
             mentionBtn = (
                 <div
                     className='dropdown channel-header__links'
@@ -262,6 +264,7 @@ export default class SearchBar extends React.Component {
                             href='#'
                             type='button'
                             onClick={this.searchMentions}
+                            className={mentionBtnClass}
                         >
                             {'@'}
                         </a>
@@ -269,6 +272,8 @@ export default class SearchBar extends React.Component {
                 </div>
             );
 
+            var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : '';
+
             flagBtn = (
                 <div
                     className='dropdown channel-header__links'
@@ -283,6 +288,7 @@ export default class SearchBar extends React.Component {
                             href='#'
                             type='button'
                             onClick={this.getFlagged}
+                            className={flagBtnClass}
                         >
                             <span
                                 className='icon icon__flag'
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 000a7819e5..5e4abcb0ef 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -462,12 +462,20 @@
             text-decoration: none;
 
             &:hover {
-                @include opacity(1);
+                @include opacity(0.7);
             }
 
             &:focus {
                 color: inherit;
             }
+
+            &.active {
+                color: $primary-color;
+                @include opacity(1);
+                .icon {
+                    fill: $primary-color;
+                }
+            }
         }
     }