diff --git a/ui/src/data_explorer/components/TagListItem.js b/ui/src/data_explorer/components/TagListItem.js
index 73d2ee664..21242e91b 100644
--- a/ui/src/data_explorer/components/TagListItem.js
+++ b/ui/src/data_explorer/components/TagListItem.js
@@ -99,7 +99,7 @@ const TagListItem = React.createClass({
   },
 
   render() {
-    const {tagKey, tagValues} = this.props
+    const {tagKey, tagValues, isUsingGroupBy} = this.props
     const {isOpen} = this.state
     const tagItemLabel = `${tagKey} — ${tagValues.length}`
 
@@ -115,8 +115,9 @@ const TagListItem = React.createClass({
             {tagItemLabel}
           </span>
           <div
-            className={classnames('btn btn-default btn-xs group-by-tag', {
-              active: this.props.isUsingGroupBy,
+            className={classnames('btn btn-xs group-by-tag', {
+              'btn-primary': isUsingGroupBy,
+              'btn-default': !isUsingGroupBy,
             })}
             onClick={this.handleGroupBy}
           >
diff --git a/ui/src/style/components/query-builder.scss b/ui/src/style/components/query-builder.scss
index 0c7586b00..545212935 100644
--- a/ui/src/style/components/query-builder.scss
+++ b/ui/src/style/components/query-builder.scss
@@ -198,7 +198,8 @@
   }
 }
 .query-builder--list-item:hover .group-by-tag,
-.query-builder--list-item.active .group-by-tag {
+.query-builder--list-item.active .group-by-tag,
+.query-builder--list-item .group-by-tag.btn-primary {
   visibility: visible;
 }
 .query-builder--db-dropdown {