diff --git a/sass/custom/_paulus.scss b/sass/custom/_paulus.scss
index 6720925343b..04aff728974 100644
--- a/sass/custom/_paulus.scss
+++ b/sass/custom/_paulus.scss
@@ -299,21 +299,6 @@ p.note {
       transition-property: transform, opacity;
   }
 
-  .filter-button-group {
-    margin-bottom: 16px;
-
-    .btn {
-      margin-right: 8px;
-      margin-bottom: 8px;
-      text-decoration: none;
-
-      &.current {
-        background-color: #3A5561;
-        background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
-      }
-    }
-  }
-
   #componentContainer {
     a {
       display: inline-block;
@@ -365,6 +350,45 @@ p.note {
   }
 }
 
+@media only screen and (max-width: $lap-end) {
+  #components-page {
+    .filter-button-group {
+      margin-bottom: 16px;
+
+      .btn {
+        display: inline-block;
+        margin-right: 8px;
+        margin-bottom: 8px;
+
+        &.current {
+          background-color: #3A5561;
+          background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $desk-start) {
+  #components-page {
+    .filter-button-group {
+      .btn {
+        display: block;
+        background: 0;
+        color: black;
+        box-shadow: none;
+        text-shadow: none;
+        padding: 2px;
+
+        &.current {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+
 .aside-module {
   .section {
     margin-bottom: 16px;
diff --git a/source/components/index.html b/source/components/index.html
index 87b08f3085b..d9ee273e703 100644
--- a/source/components/index.html
+++ b/source/components/index.html
@@ -20,40 +20,46 @@ Support for these components is provided by the Home Assistant community.
 {% assign components = site.components | sort: 'title' %}
 {% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
 
-<div class="filter-button-group">
-  <a href='#all' class="btn">All</a>
-  <a href='#featured' class="btn">Featured</a>
+<div class="grid">
+  <div class="grid__item one-sixth lap-one-whole palm-one-whole">
 
-  {% for category in categories %}
-    {% if category and category != 'Other' %}
-      <a href='#{{ category | slugify }}' class="btn">{{ category }}</a>
-    {% endif %}
-  {% endfor %}
+    <div class="filter-button-group">
+      <a href='#all' class="btn">All</a>
+      <a href='#featured' class="btn">Featured</a>
 
-  <a href='#other' class="btn">Other</a>
-</div>
+      {% for category in categories %}
+        {% if category and category != 'Other' %}
+          <a href='#{{ category | slugify }}' class="btn">
+            {{ category }}
+            ({{ components | where: 'ha_category', category | size }})
+          </a>
+        {% endif %}
+      {% endfor %}
 
-<div id="componentContainer">
-  {% for component in components %}
-    {% if component.ha_category %}
-      <a href='{{ component.url }}'
-         class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
-         {% unless component.featured %}style='display: none'{% endunless %}>
-        <div class='img-container'>
-          {% if component.logo %}
-            <img src='/images/supported_brands/{{ component.logo }}'>
-          {% endif %}
-        </div>
-        <div class='title'>{{ component.title }}</div>
-        <div class='category'>{{ component.ha_category }}</div>
-      </a>
-    {% endif %}
-  {% endfor %}
+      <a href='#other' class="btn">Other</a>
+    </div>
+  </div>
+  <div class="grid__item five-sixths lap-one-whole palm-one-whole" id="componentContainer">
+    {% for component in components %}
+      {% if component.ha_category %}
+        <a href='{{ component.url }}'
+           class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
+           {% unless component.featured %}style='display: none'{% endunless %}>
+          <div class='img-container'>
+            {% if component.logo %}
+              <img src='/images/supported_brands/{{ component.logo }}'>
+            {% endif %}
+          </div>
+          <div class='title'>{{ component.title }}</div>
+          <div class='category'>{{ component.ha_category }}</div>
+        </a>
+      {% endif %}
+    {% endfor %}
+  </div>
 </div>
 
 {% comment %}
 ## Pages without categories
-
 {% for component in components %}
   {% unless component.ha_category %}
 <p>{{ component.title }}</p>