diff --git a/sass/custom/_component_page.scss b/sass/custom/_component_page.scss
index c52b3dc6107..1b337c6d226 100644
--- a/sass/custom/_component_page.scss
+++ b/sass/custom/_component_page.scss
@@ -46,6 +46,10 @@
 @media only screen and (min-width: $desk-start) {
   #components-page {
     .filter-button-group {
+      .active {
+        font-weight: bold;
+      }
+
       .featured {
         margin: 12px 0;
       }
diff --git a/source/integrations/index.html b/source/integrations/index.html
index 8cd023e0b51..131fe1f4bbc 100644
--- a/source/integrations/index.html
+++ b/source/integrations/index.html
@@ -206,6 +206,13 @@ allComponents.pop(); // remove placeholder element at the end
 
       rendered = Mustache.render(template, data);
 
+      // set active class on active menu item
+      jQuery('.filter-button-group a.active').removeClass('active');
+      jQuery(`.filter-button-group a[href*="${hash}"]`).addClass('active');
+      if (hash === "") {
+        jQuery('.filter-button-group a[href*="#featured"]').addClass('active');
+      }
+
       // remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
       $('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
       logoLazyLoad.update();