diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36a1efaa..31878535 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
  * **Improvement**
    * Support reading large (>500MB) stats.json files ([#423](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/423) by [@henry-alakazhang](https://github.com/henry-alakazhang))
+   * Improve search UX by graying out non-matches ([#554](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/554) by [@starpit](https://github.com/starpit))
 
 ## 4.7.0
 
diff --git a/client/components/Treemap.jsx b/client/components/Treemap.jsx
index d9d46b72..0b67321c 100644
--- a/client/components/Treemap.jsx
+++ b/client/components/Treemap.jsx
@@ -22,11 +22,7 @@ export default class Treemap extends Component {
         dataObject: this.getTreemapDataObject(nextProps.data)
       });
     } else if (nextProps.highlightGroups !== this.props.highlightGroups) {
-      const groupsToRedraw = [
-        ...nextProps.highlightGroups,
-        ...this.props.highlightGroups
-      ];
-      setTimeout(() => this.treemap.redraw(false, groupsToRedraw));
+      setTimeout(() => this.treemap.redraw());
     }
   }
 
@@ -102,6 +98,11 @@ export default class Treemap extends Component {
             b: 0,
             a: 0.8
           };
+        } else if (highlightGroups && highlightGroups.size > 0) {
+          // this means a search (e.g.) is active, but this module
+          // does not match; gray it out
+          // https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/553
+          variables.groupColor.s = 10;
         }
       },
       /**