diff --git a/content/bundles.html b/content/bundles.html
index 419c1f1..d68d9cc 100755
--- a/content/bundles.html
+++ b/content/bundles.html
@@ -37,7 +37,32 @@ <h2>Bundles.</h2>
     <article class="center bundles-info">
         <div class="wrap">
 
-            <!--<section class="coming-soon"></section>-->
+          {{ range where $.Site.Data.bundles "status" "live" }}
+            {{ partial "bundle.html" . }}
+          {{ end }}
+
+          <section class="coming-soon">
+            {{ range where $.Site.Data.bundles "status" "coming-soon" }}
+              <div class="card">
+                <div class="rectangle coming-soon" title="{{ .name }} bundle coming soon">
+                  <div class="img">
+                    <img src="{{ .image }}" alt="{{ .name }}">
+                  </div>
+                  <div class="text">In progress...</div>
+                </div>
+              </div>
+            {{ end }}
+            <div class="card empty">
+              <div class="rectangle empty">
+                <img src="../img/img4.png" alt="A 3 cube tetris block in a minimal L shape, pointing upwards."/>
+              </div>
+            </div>
+            <div class="card empty">
+              <div class="rectangle empty">
+                <img src="../img/img5.png" alt="A single cube, corner pointing upwards; The isomorphic perspective revealing an hexangonal outline." />
+              </div>
+            </div>
+          </section>
 
         </div>
         <div class="triangle grey"></div>
diff --git a/data/bundles.json b/data/bundles.json
old mode 100755
new mode 100644
index 22c1cd9..a5ff5d4
--- a/data/bundles.json
+++ b/data/bundles.json
@@ -1,243 +1,303 @@
-{
-  "Bundles": {
-    "Browser JS": {
-      "status": "live",
-      "image": "../img/logo_1.png",
-      "github": "https://github.com/ipfs/js-libp2p-ipfs-browser",
-      "categories": {
-        "Transport": {
-          "modules": {
-            "libp2p-websockets": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-websockets"
-            },
-            "libp2p-webrtc-star": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
-            }
-          }
-        },
-        "Stream Muxer": {
-          "modules": {
-            "libp2p-multiplex": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-multiplex"
-            },
-            "libp2p-spdy": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-spdy"
-            }
-          }
-        },
-        "Crypto Channels": {
-          "modules": {
-            "libp2p-secio": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-secio"
-            }
-          }
-        },
-        "Peer Routing": {
-          "modules": {
-            "libp2p-kad-dht": {
-              "status": "unstable",
-              "url": "https://github.com/libp2p/js-libp2p-kad-dht"
-            }
-          }
-        },
-        "Record Stores": {
-          "modules": {
-            "record": {
-              "status": "usable",
-              "url": "https://github.com/libp2p/js-libp2p-record"
-            }
-          }
-        },
-        "Discovery": {
-          "modules": {
-            "libp2p-webrtc-star": {
-              "status": "done",
-              "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
-            },
-            "libp2p-railing": {
-              "status": "done",
-              "url": "https://github.com/libp2p/js-libp2p-railing"
-            }
-          }
-        }
+[
+  {
+    "id": "browser-js",
+    "name": "Browser JS",
+    "status": "live",
+    "image": "../img/logo_1.png",
+    "github": "https://github.com/ipfs/js-libp2p-ipfs-browser",
+    "categories": [
+      {
+        "id": "transport",
+        "modules": [
+          {
+            "id": "libp2p-websockets",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-websockets"
+          },
+          {
+            "id": "libp2p-webrtc-star",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
+          }
+        ]
+      },
+      {
+        "id": "stream-muxer",
+        "modules": [
+          {
+            "id": "libp2p-multiplex",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-multiplex"
+          },
+          {
+            "id": "libp2p-spdy",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-spdy"
+          }
+        ]
+      },
+      {
+        "id": "crypto-channels",
+        "modules": [
+          {
+            "id": "libp2p-secio",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-secio"
+          }
+        ]
+      },
+      {
+        "id": "peer-routing",
+        "modules": [
+          {
+            "id": "libp2p-kad-dht",
+            "status": "Unstable",
+            "url": "https://github.com/libp2p/js-libp2p-kad-dht"
+          }
+        ]
+      },
+      {
+        "id": "record-stores",
+        "modules": [
+          {
+            "id": "record",
+            "status": "Usable",
+            "url": "https://github.com/libp2p/js-libp2p-record"
+          }
+        ]
+      },
+      {
+        "id": "discovery",
+        "modules": [
+          {
+            "id": "libp2p-webrtc-star",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
+          },
+          {
+            "id": "libp2p-railing",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-railing"
+          }
+        ]
       }
-    },
-    "Node JS": {
-      "status": "live",
-      "image": "../img/logo_2.png",
-      "github": "https://github.com/ipfs/js-libp2p-ipfs-nodejs",
-      "categories": {
-        "Transport": {
-          "modules": {
-            "libp2p-tcp": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-tcp"
-            },
-            "libp2p-websockets": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-websockets"
-            },
-            "libp2p-webrtc-star": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
-            }
-          }
-        },
-        "Stream Muxer": {
-          "modules": {
-            "libp2p-multiplex": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-multiplex"
-            },
-            "libp2p-spdy": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-spdy"
-            }
-          }
-        },
-        "Crypto Channels": {
-          "modules": {
-            "libp2p-secio": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/js-libp2p-secio"
-            }
-          }
-        },
-        "Peer Routing": {
-          "modules": {
-            "libp2p-kad-dht": {
-              "status": "unstable",
-              "url": "https://github.com/libp2p/js-libp2p-kad-dht"
-            }
-          }
-        },
-        "Record Stores": {
-          "modules": {
-            "record": {
-              "status": "usable",
-              "url": "https://github.com/libp2p/js-libp2p-record"
-            }
-          }
-        },
-        "Discovery": {
-          "modules": {
-            "libp2p-mdns": {
-              "status": "done",
-              "url": "https://github.com/libp2p/js-libp2p-mdns"
-            },
-            "libp2p-webrtc-star": {
-              "status": "done",
-              "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
-            },
-            "libp2p-railing": {
-              "status": "unstable",
-              "url": "https://github.com/libp2p/js-libp2p-railing"
-            }
-          }
-        }
+    ]
+  },
+  {
+    "id": "node-js",
+    "name": "Node JS",
+    "status": "live",
+    "image": "../img/logo_2.png",
+    "github": "https://github.com/ipfs/js-libp2p-ipfs-nodejs",
+    "categories": [
+      {
+        "id": "transport",
+        "modules": [
+          {
+            "id": "libp2p-tcp",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-tcp"
+          },
+          {
+            "id": "libp2p-websockets",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-websockets"
+          },
+          {
+            "id": "libp2p-webrtc-star",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
+          }
+        ]
+      },
+      {
+        "id": "stream-muxer",
+        "modules": [
+          {
+            "id": "libp2p-multiplex",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-multiplex"
+          },
+          {
+            "id": "libp2p-spdy",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-spdy"
+          }
+        ]
+      },
+      {
+        "id": "crypto-channels",
+        "modules": [
+          {
+            "id": "libp2p-secio",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-secio"
+          }
+        ]
+      },
+      {
+        "id": "peer-routing",
+        "modules": [
+          {
+            "id": "libp2p-kad-dht",
+            "status": "Unstable",
+            "url": "https://github.com/libp2p/js-libp2p-kad-dht"
+          }
+        ]
+      },
+      {
+        "id": "record-stores",
+        "modules": [
+          {
+            "id": "record",
+            "status": "Usable",
+            "url": "https://github.com/libp2p/js-libp2p-record"
+          }
+        ]
+      },
+      {
+        "id": "discovery",
+        "modules": [
+          {
+            "id": "libp2p-mdns",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-mdns"
+          },
+          {
+            "id": "libp2p-webrtc-star",
+            "status": "Done",
+            "url": "https://github.com/libp2p/js-libp2p-webrtc-star"
+          },
+          {
+            "id": "libp2p-railing",
+            "status": "Unstable",
+            "url": "https://github.com/libp2p/js-libp2p-railing"
+          }
+        ]
       }
-    },
-    "Golang": {
-      "status": "live",
-      "image": "../img/logo_3.png",
-      "github": "https://github.com/libp2p/go-libp2p",
-      "categories": {
-        "Transport": {
-          "modules": {
-            "go-tcp-transport": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-tcp-transport"
-            },
-            "go-ws-transport": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-ws-transport"
-            }
-          }
-        },
-        "Stream Muxer": {
-          "modules": {
-            "libp2p-yamux": {
-              "status": "Done",
-              "url": ""
-            },
-            "libp2p-multiplex": {
-              "status": "Done",
-              "url": ""
-            }
-          }
-        },
-        "Crypto Channels": {
-          "modules": {
-            "libp2p-secio": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-libp2p-secio"
-            }
-          }
-        },
-        "Peer Routing": {
-          "modules": {
-            "libp2p-kad-dht": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-libp2p-kad-dht"
-            }
-          }
-        },
-        "Record Stores": {
-          "modules": {
-            "libp2p-kad-dht": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-libp2p-kad-dht"
-            }
-          }
-        },
-        "NAT Traversal": {
-          "modules": {
-            "libp2p-nat": {
-              "status": "Done",
-              "url": "https://github.com/libp2p/go-libp2p-nat"
-            }
-          }
-        },
-        "Discovery": {
-          "modules": {
-            "libp2p-mdns": {
-              "status": "done",
-              "url": "https://github.com/libp2p/go-libp2p/blob/master/p2p/discovery/mdns.go"
-            },
-            "libp2p-railing": {
-              "status": "unstable",
-              "url": ""
-            }
-          }
-        }
+    ]
+  },
+  {
+    "id": "golang",
+    "name": "Golang",
+    "status": "live",
+    "image": "../img/logo_3.png",
+    "github": "https://github.com/libp2p/go-libp2p",
+    "categories": [
+      {
+        "id": "transport",
+        "modules": [
+          {
+            "id": "go-tcp-transport",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-tcp-transport"
+          },
+          {
+            "id": "go-ws-transport",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-ws-transport"
+          }
+        ]
+      },
+      {
+        "id": "stream-muxer",
+        "modules": [
+          {
+            "id": "libp2p-yamux",
+            "status": "Done",
+            "url": ""
+          },
+          {
+            "id": "libp2p-multiplex",
+            "status": "Done",
+            "url": ""
+          }
+        ]
+      },
+      {
+        "id": "crypto-channels",
+        "modules": [
+          {
+            "id": "libp2p-secio",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-libp2p-secio"
+          }
+        ]
+      },
+      {
+        "id": "peer-routing",
+        "modules": [
+          {
+            "id": "libp2p-kad-dht",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-libp2p-kad-dht"
+          }
+        ]
+      },
+      {
+        "id": "record-stores",
+        "modules": [
+          {
+            "id": "libp2p-kad-dht",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-libp2p-kad-dht"
+          }
+        ]
+      },
+      {
+        "id": "nat-traversal",
+        "name": "NAT Traversal",
+        "modules": [
+          {
+            "id": "libp2p-nat",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-libp2p-nat"
+          }
+        ]
+      },
+      {
+        "id": "discovery",
+        "modules": [
+          {
+            "id": "libp2p-mdns",
+            "status": "Done",
+            "url": "https://github.com/libp2p/go-libp2p/blob/master/p2p/discovery/mdns.go"
+          },
+          {
+            "id": "libp2p-railing",
+            "status": "Unstable",
+            "url": ""
+          }
+        ]
       }
-    },
-    "Haskell": {
-      "status": "coming-soon",
-      "image": "../img/logo_4.png",
-      "github": ""
-    },
-    "Java": {
-      "status": "coming-soon",
-      "image": "../img/logo_java.png",
-      "nav-img": "../img/logo_5.png",
-      "github": ""
-    },
-    "Python": {
-      "status": "coming-soon",
-      "image": "../img/logo_6.png",
-      "nav-img": "../img/logo_6_.png",
-      "github": ""
-    },
-    "Rust": {
-      "status": "coming-soon",
-      "image": "../img/logo_7.png",
-      "github": ""
-    }
+    ]
+  },
+  {
+    "name": "Haskell",
+    "status": "coming-soon",
+    "image": "../img/logo_4.png",
+    "github": "",
+    "categories": []
+  },
+  {
+    "name": "Java",
+    "status": "coming-soon",
+    "image": "../img/logo_java.png",
+    "github": "",
+    "categories": []
+  },
+  {
+    "name": "Python",
+    "status": "coming-soon",
+    "image": "../img/logo_6.png",
+    "github": "",
+    "categories": []
+  },
+  {
+    "name": "Rust",
+    "status": "coming-soon",
+    "image": "../img/logo_7.png",
+    "github": "",
+    "categories": []
   }
-}
+]
diff --git a/js/bundles.js b/js/bundles.js
index bac1ec0..4a335fe 100755
--- a/js/bundles.js
+++ b/js/bundles.js
@@ -1,158 +1,9 @@
 var $ = require('jquery')
-var data = require('../data/bundles.json')
 var initPage = require('./lib/init-page')
 
 initPage()
 
 $(function () {
-  var bundles = data.Bundles
-  createNav()
-  createContent()
-  createComingSoon()
-
-  function createComingSoon () {
-    var template = $(
-                '<div class="card">' +
-                    '<a href="#" class="rectangle coming-soon">' +
-                        '<div class="img">' +
-                            '<img>' +
-                        '</div>' +
-                        '<div class="text">In progress...</div>' +
-                    '</a>' +
-                '</div>'
-            )
-
-    var section = $('<section class="coming-soon"></section>')
-    var index = 0
-    $.each(bundles, function (key, values) {
-      if (values['status'] !== 'live' && index < 6) {
-        var tmp = template.clone()
-        tmp.find('img').attr('src', values['image'])
-        section.append(tmp)
-
-        index++
-      }
-    })
-
-    var tempRectangle = $(
-            '<div class="card empty">' +
-                '<div class="rectangle empty">' +
-                    '<img>' +
-                '</div>' +
-            '</div>'
-        )
-    var imgCube = ['../img/img4.png', '../img/img5.png']
-    for (var n = index; n < 6; n++) {
-      var tmp = tempRectangle.clone()
-      tmp.find('img').attr('src', imgCube[n % 2])
-      section.append(tmp)
-    }
-    $('.wrap', 'article.bundles-info').append(section)
-  }
-
-  function createContent () {
-    var template = $('<section>' +
-            '<aside class="left">' +
-            '<div class="active-link"><span></span><i class="fa fa-angle-down" aria-hidden="true"></i></div>' +
-            '<nav></nav>' +
-            '</aside>' +
-            '<div class="content">' +
-            '<div class="title">' +
-            '<div class="wrapper">' +
-            '<div class="img">' +
-            '<img>' +
-            '</div>' +
-            '<a class="btn-interface" target="_blank">GitHub</a>' +
-            '</div>' +
-            '</div>' +
-            '<div class="info"></div>' +
-            '</div>' +
-            '</section>'
-        )
-
-    $.each(bundles, function (key, values) {
-      if (values['status'] === 'live') {
-        var tmp = template.clone()
-        var id = key.replace(' ', '-').toLowerCase()
-        tmp.attr('id', id)
-        tmp.find('img', '.title').attr('src', values['image']).attr('alt', key).attr('title', key)
-        tmp.find('.btn-interface', '.title').attr('href', values['github'])
-
-        var nav = tmp.find('nav')
-        var index = 0
-        $.each(values['categories'], function (key, values) {
-          nav.append($('<a href="#" ' + (index === 0 ? 'class="active"' : '') +
-                        ' data-info="' + key.replace(' ', '-').toLowerCase() + '">' + key + '</a>'))
-          if (index === 0) tmp.find('.active-link span').text(key)
-
-          var ul = document.createElement('ul')
-          ul.classList.add(key.replace(' ', '-').toLowerCase())
-          ul.classList.add('calc-col')
-          if (index === 0) ul.classList.add('show')
-
-          // var info = tmp.find('.info')
-          var modules = values['modules']
-          $.each(modules, function (item, items) {
-            var li = document.createElement('li')
-            var a = document.createElement('a')
-            if (items['url']) { a.setAttribute('href', items['url']) }
-            var i = document.createElement('i')
-            i.classList.add('icon-hexagon')
-            i.classList.add(color(items['status']))
-            a.appendChild(i)
-            var span = document.createElement('span')
-            span.textContent = item
-            a.appendChild(span)
-            li.appendChild(a)
-            ul.appendChild(li)
-          })
-
-          tmp.find('.info').append(ul)
-
-          index++
-        })
-
-        $('.wrap', 'article.bundles-info').append(tmp)
-      }
-    })
-  }
-
-  function createNav () {
-    var index = 0
-    $.each(bundles, function (key, values) {
-      var colNum = Math.floor(index / 2) + 1
-      var $col = $('.col' + colNum, '.links')
-      var id = key.replace(' ', '-').toLowerCase()
-
-      var a = document.createElement('a')
-      a.setAttribute('href', '#' + id)
-      a.classList.add('link')
-      a.classList.add(values['status'] === 'live' ? 'scroll' : 'inactive')
-
-      var div = document.createElement('div')
-      div.classList.add('img')
-      var img = document.createElement('img')
-      img.classList.add(id)
-      img.setAttribute('src', values['nav-img'] || values['image'])
-      img.setAttribute('alt', key)
-      img.setAttribute('title', key)
-      div.appendChild(img)
-      a.appendChild(div)
-
-      var span = document.createElement('span')
-      span.textContent = key
-      a.appendChild(span)
-
-      $col.append(a)
-
-      if (index === 0) {
-        $('.copy-block', '.links').append($(div).clone()).append($(span).clone())
-      }
-
-      index++
-    })
-  }
-
   $('nav a', 'article').on('click', function (e) {
     e.preventDefault()
     var mobile = $(window).innerWidth() <= 767
@@ -244,19 +95,6 @@ $(function () {
     }
   })
 
-  function color (status) {
-    switch (status.toLowerCase()) {
-      case 'done':
-        return 'green'
-      case 'usable':
-        return 'yellow'
-      case 'unstable':
-        return 'red'
-      default:
-        return 'grey'
-    }
-  }
-
   $('.active-link', '.links').on('click', function (e) {
     e.preventDefault()
     var $link = $(this)
diff --git a/layouts/partials/bundle.html b/layouts/partials/bundle.html
new file mode 100644
index 0000000..93590e8
--- /dev/null
+++ b/layouts/partials/bundle.html
@@ -0,0 +1,42 @@
+<section id="{{ .id }}">
+  <aside class="left">
+    <div class="active-link">
+      <span>Transport</span><i class="fa fa-angle-down" aria-hidden="true"></i>
+    </div>
+    <nav>
+      {{ range $index, $element := .categories }}
+      <a href="#" {{ if eq $index 0 }}class="active"{{end}} data-info="{{ .id }}" style="text-transform: capitalize;">
+        {{if isset . "name"}}
+          {{ .name }}
+        {{else}}
+          {{ humanize .id }}
+        {{end}}
+      </a>
+      {{ end }}
+    </nav>
+  </aside>
+  <div class="content">
+    <div class="title">
+      <div class="wrapper">
+        <div class="img">
+          <img src="{{ .image }}" alt="{{ .name }}" title="{{ .name }}">
+        </div>
+        <a class="btn-interface" target="_blank" href="{{ .github }}">GitHub</a>
+      </div>
+    </div>
+    <div class="info">
+      {{ range $index, $element := .categories }}
+      <ul class="{{ .id }} calc-col one-col {{if eq $index 0}}show{{end}}">
+        {{ range .modules }}
+        <li style="min-width: 100px; width: 100%; max-width: 168px;">
+          <a href="{{ .url }}">
+            {{ partial "status-icon" . }}
+            <span>{{ .id }}</span>
+          </a>
+        </li>
+        {{ end }}
+      </ul>
+      {{ end }}
+    </div>
+  </div>
+</section>