diff --git a/sass/custom/_component_page.scss b/sass/custom/_component_page.scss
index 5cc5f79c75a0..d5b68a6c7173 100644
--- a/sass/custom/_component_page.scss
+++ b/sass/custom/_component_page.scss
@@ -1,8 +1,8 @@
-#components-page{
-  .component-search{
+#components-page {
+  .component-search {
     margin-bottom: 24px;
 
-    input{
+    input {
       width: 100%;
       padding: 10px;
 
@@ -35,8 +35,8 @@
         margin-bottom: 8px;
 
         &.current {
-          background-color: #3A5561;
-          background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
+          background-color: #3a5561;
+          background-image: linear-gradient(to bottom, #3a5561, #3f6b7d);
         }
       }
     }
@@ -88,7 +88,7 @@
   align-items: flex-start;
   margin: -4px; // grid trick, has to match option-card's margin
 
-  p.note{
+  p.note {
     width: 100%;
   }
 
@@ -100,20 +100,22 @@
     background-color: #fefefe;
     margin: 4px;
     border-radius: 2px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+      0 3px 1px -2px rgba(0, 0, 0, 0.2);
     padding: 8px;
     text-align: center;
     text-decoration: none;
 
     .img-container {
       height: 50px;
-      margin: 8px 0;
+      margin: 12px 0;
       font: 0/0 a;
 
-      &:before {    /* create a full-height inline block pseudo=element */
-        content: ' ';
+      &:before {
+        /* create a full-height inline block pseudo=element */
+        content: " ";
         display: inline-block;
-        vertical-align: middle;  /* vertical alignment of the inline element */
+        vertical-align: middle; /* vertical alignment of the inline element */
         height: 100%;
       }
 
@@ -132,128 +134,127 @@
       color: #000;
       line-height: 1.3em;
       height: 2.6em;
-    }
-
-    .category {
-      font-size: 14px;
-      color: #AAA;
+      margin-top: 20px;
     }
   }
 
   // fade-in animation
-  &.show-items .option-card{
-    opacity:0;
-    -webkit-animation:new-item-animation .2s linear forwards;
-    -o-animation:new-item-animation .2s linear forwards;
-    animation:new-item-animation .2s linear forwards;
+  &.show-items .option-card {
+    opacity: 0;
+    -webkit-animation: new-item-animation 0.2s linear forwards;
+    -o-animation: new-item-animation 0.2s linear forwards;
+    animation: new-item-animation 0.2s linear forwards;
   }
 
   // fade-out animation
-  &.remove-items .option-card{
-    -webkit-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
-    -o-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
-    animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards
+  &.remove-items .option-card {
+    -webkit-animation: removed-item-animation 0.2s
+      cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
+    -o-animation: removed-item-animation 0.2s
+      cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
+    animation: removed-item-animation 0.2s cubic-bezier(0.55, -0.04, 0.91, 0.94)
+      forwards;
   }
 }
 
 // animations for fade-in and fade-out effects of option-cards
 @keyframes new-item-animation {
   from {
-    opacity:0;
-    -webkit-transform:scale(0);
-    -ms-transform:scale(0);
-    -o-transform:scale(0);
-    transform:scale(0)
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
   }
   to {
-    opacity:1;
-    -webkit-transform:scale(1);
-    -ms-transform:scale(1);
-    -o-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
   }
 }
 @-webkit-keyframes new-item-animation {
   from {
-    opacity:0;
-    -webkit-transform:scale(0);
-    transform:scale(0)
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
   }
   to {
-    opacity:1;
-    -webkit-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
   }
 }
 @-o-keyframes new-item-animation {
   from {
-    opacity:0;
-    -o-transform:scale(0);
-    transform:scale(0)
+    opacity: 0;
+    -o-transform: scale(0);
+    transform: scale(0);
   }
   to {
-    opacity:1;
-    -o-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -o-transform: scale(1);
+    transform: scale(1);
   }
 }
 
 // space blocker animation
 @keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 
 @-webkit-keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 @-o-keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 
 // removal animation
 @keyframes removed-item-animation {
   from {
-    opacity:1;
-    -webkit-transform:scale(1);
-    -ms-transform:scale(1);
-    -o-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
   }
   to {
-    -webkit-transform:scale(0);
-    -ms-transform:scale(0);
-    -o-transform:scale(0);
-    transform:scale(0);
-    opacity:0
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
   }
 }
 @-webkit-keyframes removed-item-animation {
   from {
-    opacity:1;
-    -webkit-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
   }
   to {
-    -webkit-transform:scale(0);
-    transform:scale(0);
-    opacity:0
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
   }
 }
 @-o-keyframes removed-item-animation {
   from {
-    opacity:1;
-    -o-transform:scale(1);
-    transform:scale(1)
+    opacity: 1;
+    -o-transform: scale(1);
+    transform: scale(1);
   }
   to {
-    -o-transform:scale(0);
-    transform:scale(0);
-    opacity:0
+    -o-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
   }
 }
diff --git a/source/integrations/index.html b/source/integrations/index.html
index 4a2e487f8515..6882ffabd396 100644
--- a/source/integrations/index.html
+++ b/source/integrations/index.html
@@ -74,7 +74,6 @@
   <a href="{{url}}" class="option-card">
     <div class="img-container">{{{image}}}</div>
     <div class='title'>{{title}}</div>
-    <div class='category'>{{cat}}</div>
   </a>
 {{/components}}
 {{^components}}
@@ -88,14 +87,15 @@
 var allComponents = [
   {%- for component in components -%}
     {%- if component.ha_category -%}
-{%- assign sliced_version = component.ha_release | split: '.' -%}
-{%- assign minor_version = sliced_version[1]|plus: 0 -%}
-{%- assign major_version = sliced_version[0]|plus: 0 -%}
-{%- assign featured_first = true -%}
+      {%- assign sliced_version = component.ha_release | split: '.' -%}
+      {%- assign minor_version = sliced_version[1]|plus: 0 -%}
+      {%- assign major_version = sliced_version[0]|plus: 0 -%}
+      {% assign categories = "" | split: ',' %}
       {%- for ha_category in component.ha_category -%}
-{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{ha_category | slugify}}", featured: {% if component.featured and featured_first %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
-      {%- assign featured_first = false -%}
+        {% capture category %}"{{ ha_category | slugify | downcase }}"{% endcapture %}
+        {% assign categories = categories | push: category %}
       {%- endfor -%}
+      {url:"{{ component.url }}", title:"{{component.title}}", cat: [{{categories|join: ","}}], featured: {% if component.featured %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
     {% endif -%}
   {%- endfor -%}
   false
@@ -112,7 +112,6 @@
       // do the lowerCase transformation once
       for (i = 0; i < (allComponents.length); i++) {
         allComponents[i].titleLC = allComponents[i].title.toLowerCase();
-        allComponents[i].catLC = allComponents[i].cat.toLowerCase();
       }
 
       // sort the components alphabetically
@@ -169,7 +168,7 @@
           search = decodeURIComponent(hash).substring(8).toLowerCase();
           filter = function (comp) {
             return (comp.titleLC.indexOf(search) !== -1) ||
-              (comp.catLC.indexOf(search) !== -1);
+              (comp.cat.find(c => c.includes("#")) != undefined);
           };
 
         } else if (hash === '#featured' || hash === '') {
@@ -190,7 +189,7 @@
           // regular filter categories
           search = hash.substring(1);
           filter = function (comp) {
-            return comp.catLC === search;
+            return comp.cat.includes(search);
           };
         }