diff --git a/_config.yml b/_config.yml
index c8657356797..1fcd8b3c3e8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -63,7 +63,7 @@ titlecase: true # Converts page and post titles to titlecase
 # page_asides:
 
 collections:
-  components:
+  integrations:
     output: true
   cookbook:
     output: true
diff --git a/source/integrations/index.html b/source/integrations/index.html
index 3e4de44d1ba..dca1868b1a4 100644
--- a/source/integrations/index.html
+++ b/source/integrations/index.html
@@ -10,22 +10,22 @@ regenerate: false
 
 {%- comment -%}Can't use where to count nil because of https://github.com/jekyll/jekyll/issues/6038{%- endcomment -%}
 {%- assign tot = 0 -%}
-{%- for comp in site.components -%}
-  {%- if comp.ha_category -%}
-    {%- if comp.ha_category.first -%}
-      {%- assign tot = tot | plus: comp.ha_category.size -%}
-    {%- else -%}
-      {%- assign tot = tot | plus: 1 -%}
-    {%- endif -%}
-  {%- endif %}
+{%- for comp in site.integrations -%}
+{%- if comp.ha_category -%}
+{%- if comp.ha_category.first -%}
+{%- assign tot = tot | plus: comp.ha_category.size -%}
+{%- else -%}
+{%- assign tot = tot | plus: 1 -%}
+{%- endif -%}
+{%- endif %}
 {%- endfor -%}
 
-{%- assign components = site.components | sort: 'title' -%}
-{%- assign components_by_version = site.components | group_components_by_release -%}
+{%- assign components = site.integrations | sort: 'title' -%}
+{%- assign components_by_version = site.integrations | group_components_by_release -%}
 {%- assign categories = components | map: 'ha_category' | join: ',' | join: ',' | split: ',' | uniq | sort -%}
 
 <p class='note'>
-Support for these integrations is provided by the Home Assistant community.
+  Support for these integrations is provided by the Home Assistant community.
 </p>
 <div class="grid">
   <div class="grid__item one-sixth lap-one-whole palm-one-whole">
@@ -34,21 +34,22 @@ Support for these integrations is provided by the Home Assistant community.
       <a href='#all' class="btn">All ({{tot}})</a>
       <a href='#featured' class="btn featured">Featured</a>
       <div class="version_select">Added in: <select name="versions">
-        <option value="#"></option>
-        {%- for group in components_by_version -%}
+          <option value="#"></option>
+          {%- for group in components_by_version -%}
           <optgroup label="{{ group.label }} ({{group.new_components_count}})">
             {%- for version in group.versions -%}
-              <option value="#version/{{ version.label }}">{{ version.label }} ({{ version.new_components_count }})</option>
+            <option value="#version/{{ version.label }}">{{ version.label }} ({{ version.new_components_count }})
+            </option>
             {%- endfor -%}
           </optgroup>
-        {%- endfor -%}
-      </select></div>
-{%- for category in categories -%}
-  {%- assign components_count = components | where: 'ha_category', category | size -%}
-  {%- if category and category != 'Other' and components_count != 0 -%}
-    <a href='#{{ category | slugify }}' class="btn">{{ category }} ({{ components_count }})</a>
-  {%- endif -%}
-{%- endfor -%}
+          {%- endfor -%}
+        </select></div>
+      {%- for category in categories -%}
+      {%- assign components_count = components | where: 'ha_category', category | size -%}
+      {%- if category and category != 'Other' and components_count != 0 -%}
+      <a href='#{{ category | slugify }}' class="btn">{{ category }} ({{ components_count }})</a>
+      {%- endif -%}
+      {%- endfor -%}
 
       <a href='#other' class="btn">Other ({{ components | where: 'ha_category', 'Other' | size }})</a>
     </div>
@@ -69,7 +70,7 @@ Support for these integrations is provided by the Home Assistant community.
 
 {% raw %}
 <script id="component-template" type="text/x-custom-template">
-{{#components}}
+  {{#components}}
   <a href="{{url}}" class="option-card">
     <div class="img-container">{{{image}}}</div>
     <div class='title'>{{title}}</div>
@@ -83,201 +84,233 @@ Support for these integrations is provided by the Home Assistant community.
 {% endraw %}
 
 <script type="text/javascript">
-// This object contains all components we have
-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 -%}
-      {%- 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 -%}
-      {%- endfor -%}
-    {% endif -%}
-  {%- endfor -%}
-  false
-];
-allComponents.pop(); // remove placeholder element at the end
+  // This object contains all components we have
+  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 - %
+    } {
+      % -
+      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 - %
+    } {
+      % -endfor - %
+    } {
+      % endif - %
+    } {
+      % -endfor - %
+    }
+    false
+  ];
+  allComponents.pop(); // remove placeholder element at the end
 </script>
 <script type="text/javascript">
-(function(){
-  var template = $('#component-template').html();
-  Mustache.parse(template); // make future calls to render faster
+  (function () {
+    var template = $('#component-template').html();
+    Mustache.parse(template); // make future calls to render faster
 
-  function init() {
-    // 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
-    allComponents.sort(function(a, b){
-      return a.titleLC.localeCompare(b.titleLC);
-    });
-
-    if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
-      // set default value in search from URL
-      jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
-    }
-
-    // add focus to the search field - even on IE
-    setTimeout(function () {
-      jQuery('.component-search input').focus();
-    }, 1);
-  }
-  init();
-
-  /**
-   * filter all components, based on the location's hash and render them into the component box
-   */
-  function applyFilter() {
-    var logoLazyLoad = new LazyLoad({
-      elements_selector: ".option-card img"
-    });
-    var rendered, i, filter, search;
-    var hash = location.hash || '';
-    var data = {
-      components: [],
-      image: function () {
-        if (this.logo === '') {
-          return '';
-        } else {
-          return '<img data-src="/images/supported_brands/' + this.logo + '">';
-        }
+    function init() {
+      // 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();
       }
-    };
 
-    // fade-out css effect on the old elements. This is actually not visible on fast browsers
-    $('#componentContainer').addClass('remove-items');
+      // sort the components alphabetically
+      allComponents.sort(function (a, b) {
+        return a.titleLC.localeCompare(b.titleLC);
+      });
 
-    if (hash.indexOf('#search/') === -1) {
-      // reset search box when not searching
-      jQuery('.component-search input').val(null);
+      if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
+        // set default value in search from URL
+        jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
+      }
+
+      // add focus to the search field - even on IE
+      setTimeout(function () {
+        jQuery('.component-search input').focus();
+      }, 1);
     }
+    init();
 
-    if (hash === '#all') {
-      // shortcut: no need to filter
-      data.components = allComponents;
-    } else {
-      if (hash.indexOf('#search/') === 0) {
-        // search through title and category
-        search = decodeURIComponent(hash).substring(8).toLowerCase();
-        filter = function(comp) {
-          return (comp.titleLC.indexOf(search) !== -1) ||
-                 (comp.catLC.indexOf(search) !== -1);
-        };
+    /**
+     * filter all components, based on the location's hash and render them into the component box
+     */
+    function applyFilter() {
+      var logoLazyLoad = new LazyLoad({
+        elements_selector: ".option-card img"
+      });
+      var rendered, i, filter, search;
+      var hash = location.hash || '';
+      var data = {
+        components: [],
+        image: function () {
+          if (this.logo === '') {
+            return '';
+          } else {
+            return '<img data-src="/images/supported_brands/' + this.logo + '">';
+          }
+        }
+      };
 
-      } else if(hash === '#featured' || hash === '') {
-        // only show those with featured = true
-        filter = function(comp) {
-          return comp.featured;
-        };
+      // fade-out css effect on the old elements. This is actually not visible on fast browsers
+      $('#componentContainer').addClass('remove-items');
 
-      } else if(hash.indexOf('#version/') === 0) {
-        // compare against a version
-        search = decodeURIComponent(hash).substring(9).toLowerCase();
-        filter = function(comp) {
-          // compare version string against version js
-          return comp.v === search;
-        };
+      if (hash.indexOf('#search/') === -1) {
+        // reset search box when not searching
+        jQuery('.component-search input').val(null);
+      }
 
+      if (hash === '#all') {
+        // shortcut: no need to filter
+        data.components = allComponents;
       } else {
-        // regular filter categories
-        search = hash.substring(1);
-        filter = function(comp) {
-          return comp.catLC === search;
-        };
-      }
+        if (hash.indexOf('#search/') === 0) {
+          // search through title and category
+          search = decodeURIComponent(hash).substring(8).toLowerCase();
+          filter = function (comp) {
+            return (comp.titleLC.indexOf(search) !== -1) ||
+              (comp.catLC.indexOf(search) !== -1);
+          };
 
-      // filter all components using the filter function
-      for (i=0; i < (allComponents.length); i++) {
-        if (filter(allComponents[i])) {
-          data.components.push(allComponents[i]);
+        } else if (hash === '#featured' || hash === '') {
+          // only show those with featured = true
+          filter = function (comp) {
+            return comp.featured;
+          };
+
+        } else if (hash.indexOf('#version/') === 0) {
+          // compare against a version
+          search = decodeURIComponent(hash).substring(9).toLowerCase();
+          filter = function (comp) {
+            // compare version string against version js
+            return comp.v === search;
+          };
+
+        } else {
+          // regular filter categories
+          search = hash.substring(1);
+          filter = function (comp) {
+            return comp.catLC === search;
+          };
+        }
+
+        // filter all components using the filter function
+        for (i = 0; i < (allComponents.length); i++) {
+          if (filter(allComponents[i])) {
+            data.components.push(allComponents[i]);
+          }
         }
       }
+
+      rendered = Mustache.render(template, data);
+
+      // 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();
     }
 
-    rendered = Mustache.render(template, data);
-
-    // 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();
-  }
-
-  /**
-   * update the browser location hash. This enables users to use the browser-history
-   */
-  function updateHash(newHash) {
-    if ('pushState' in history) {
-      history.pushState('', '', newHash);
-    } else {
-      location.hash = newHash;
+    /**
+     * update the browser location hash. This enables users to use the browser-history
+     */
+    function updateHash(newHash) {
+      if ('pushState' in history) {
+        history.pushState('', '', newHash);
+      } else {
+        location.hash = newHash;
+      }
     }
-  }
 
-  // update view by filter selection
-  jQuery('.filter-button-group a').click(function() {
-    updateHash(this.getAttribute('href'));
-    applyFilter();
+    // update view by filter selection
+    jQuery('.filter-button-group a').click(function () {
+      updateHash(this.getAttribute('href'));
+      applyFilter();
 
-    return false;
-  });
+      return false;
+    });
 
-  // update view on select change
-  jQuery('select').change(function() {
-    updateHash(this.value);
-    applyFilter();
+    // update view on select change
+    jQuery('select').change(function () {
+      updateHash(this.value);
+      applyFilter();
 
-    return false;
-  });
+      return false;
+    });
 
-  /**
-   * Simple debounce implementation, based on http://davidwalsh.name/javascript-debounce-function
-   */
-  function debounce(func, wait, immediate) {
-    var timeout;
-    return function() {
-      var context = this, args = arguments;
-      var later = function() {
-        timeout = null;
-        if (!immediate) {
+    /**
+     * Simple debounce implementation, based on http://davidwalsh.name/javascript-debounce-function
+     */
+    function debounce(func, wait, immediate) {
+      var timeout;
+      return function () {
+        var context = this,
+          args = arguments;
+        var later = function () {
+          timeout = null;
+          if (!immediate) {
+            func.apply(context, args);
+          }
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) {
           func.apply(context, args);
         }
       };
-      var callNow = immediate && !timeout;
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-      if (callNow) {
-        func.apply(context, args);
-      }
     };
-  };
 
-  // update view by search text
-  $('.component-search input').keyup(debounce(function() {
-    var text = $(this).val();
-    // sanitize input
-    text = text.replace(/[(\?|\&\{\}\(\))]/gi, '').trim();
-    if (typeof text === "string" && text.length !== 0) {
+    // update view by search text
+    $('.component-search input').keyup(debounce(function () {
+      var text = $(this).val();
+      // sanitize input
+      text = text.replace(/[(\?|\&\{\}\(\))]/gi, '').trim();
+      if (typeof text === "string" && text.length !== 0) {
         updateHash('#search/' + text);
         applyFilter();
-    }
-  }, 500));
+      }
+    }, 500));
 
-  window.addEventListener('hashchange', applyFilter);
-  applyFilter();
-})();
+    window.addEventListener('hashchange', applyFilter);
+    applyFilter();
+  })();
 </script>
 
 <noscript>
   <ul>
-  {%- for component in components -%}
+    {%- for component in components -%}
     {%- if component.ha_category -%}
-      <li><a href='{{ component.url }}'>{{ component.title }}</a></li>
+    <li><a href='{{ component.url }}'>{{ component.title }}</a></li>
     {%- endif -%}
-  {%- endfor -%}
+    {%- endfor -%}
   </ul>
-</noscript>
+</noscript>
\ No newline at end of file