diff --git a/_includes/category.html b/_includes/category.html
new file mode 100644
index 0000000..bc33b96
--- /dev/null
+++ b/_includes/category.html
@@ -0,0 +1,11 @@
+<div class="pv4">
+    <h2 class="mt0 mb3 tc f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
+    <ul class="flex flex-wrap justify-center mv0 pl0 list">
+      {% capture category_path %}icons/{{ include.category }}{% endcapture %}
+      {% for icon in site.static_files %}
+        {% if icon.path contains category_path  %}
+          {% include icon.html icon=icon %}
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </div>
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index db11c9d..69eff22 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,4 +1,4 @@
-<footer class="flex flex-column items-center pv5 bt b--black-10">
+<footer class="flex flex-column items-center pb5 pt5-l">
   <ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list">
     {% for link in include.links %}
     <li class="mh3-l pv3 pv0-l f6 ttu tracked bb b--black-10 bn-l">
@@ -12,7 +12,5 @@
    </p>
   <p class="mv0 f6 lh-copy">
     <span class="mh1">v{{ site.data.package.version }}</span>
-    -
-    <span class="mh1">{{ site.data.manifest | size }} icons</span>
   </p>
 </footer>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
index a77e424..1872654 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="flex flex-column items-center w-80 mw8 pv5 pv6-ns center">
+<header class="flex flex-column items-center w-80 mw8 pt5 pt6-ns center">
     <h1 class="mt0 mb2 f2 fw3 tc lh-title black-90">Feather</h1>
     <p class="mt0 mb5 mb4-ns f5 tc lh-copy">Simply beautiful open source icons</p>
 
diff --git a/_includes/icon.html b/_includes/icon.html
new file mode 100644
index 0000000..cb541a2
--- /dev/null
+++ b/_includes/icon.html
@@ -0,0 +1,14 @@
+<li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
+    {% include_relative {{ include.icon.path }} %}
+    <div class="tooltip flex flex-column tc white bg-dark-gray br3">
+      <p class="dib mh4 mv3 lh-copy nowrap">{{ include.icon.basename }}</p>
+      <a
+        class="btn white bg-black-90 dim br3 br--bottom outline-0"
+        href="{{ include.icon.path }}"
+        download
+        tabindex="-1"
+        onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
+        Download
+      </a>
+    </div>
+  </li>
diff --git a/_includes/icons.html b/_includes/icons.html
index 7812401..1253c1b 100644
--- a/_includes/icons.html
+++ b/_includes/icons.html
@@ -1,19 +1,9 @@
-<ul class="flex flex-wrap justify-center w-80 w-80-ns center mw8 mv0 pl0 list">
-  {% for icon in site.data.manifest %}
-  {% capture icon_path %}icons/{{ icon }}.svg{% endcapture %}
-  <li class="icon relative pa3 ma2 black-90 bg-animate br3 outline-0 pointer">
-    {% include_relative {{ icon_path }} %}
-    <div class="tooltip flex flex-column tc white bg-dark-gray br3">
-      <p class="dib mh4 mv3 lh-copy nowrap">{{ icon }}</p>
-      <a
-        class="btn white bg-black-90 dim br3 br--bottom outline-0"
-        href="{{ icon_path }}"
-        download
-        tabindex="-1"
-        onclick="ga('send', 'event', 'download', 'click', '{{ icon }}');">
-        Download
-      </a>
-    </div>
-  </li>
-  {% endfor %}
-</ul>
\ No newline at end of file
+<div class="w-80 center mw8 pv5">
+  {% include category.html category="core" %}
+  {% include category.html category="media-controls" %}
+  {% include category.html category="communication" %}
+  {% include category.html category="photo-and-video" %}
+  {% include category.html category="location" %}
+  {% include category.html category="weather" %}
+  {% include category.html category="arrows" %}
+</div>
diff --git a/index.html b/index.html
index c0ceda2..f842ab5 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@ links:
 </head>
 <body class="ma0 rubik font-smoothing black-60 bg-near-white">
 
-  <div class="pb5 pb6-ns bg-white">
+  <div class="bg-white">
     {% include header.html %}
     {% include icons.html %}
   </div>
diff --git a/style.css b/style.css
index 23c7002..e570310 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 :root {
-  --accent: #4353FF;
+  --accent: #2979FF;
 }
 
 .accent {
