diff --git a/demo/assets/devicon.json b/demo/assets/devicon.json
index 195fa773..2f070898 100644
--- a/demo/assets/devicon.json
+++ b/demo/assets/devicon.json
@@ -2,6 +2,7 @@
 
   "ProgrammingLanguages": {
     "name": "Programming Languages",
+    "order": 1,
     "icons": [
 
       {
@@ -46,6 +47,7 @@
 
   "DevelopmentTools": {
     "name": "Development tools",
+    "order": 2,
     "icons": [
 
       {
@@ -125,6 +127,7 @@
 
   "DesigningTools": {
     "name": "Designing tools",
+    "order": 3,
     "icons": [
 
       {
diff --git a/demo/assets/script.js b/demo/assets/script.js
index 41de8843..0ee2ce3f 100644
--- a/demo/assets/script.js
+++ b/demo/assets/script.js
@@ -1,8 +1,23 @@
-var phonecatApp = angular.module('devicon', []);
+var devicon = angular.module('devicon', []);
  
-phonecatApp.controller('IconListCtrl', function ($scope, $http) {
+devicon.controller('IconListCtrl', function ($scope, $http) {
+
   $http.get('assets/devicon.json').success(function(data) {
     $scope.icons = data[0];
   });
- 
+
+});
+
+devicon.filter('toArray', function () {
+    'use strict';
+
+    return function (obj) {
+        if (!(obj instanceof Object)) {
+            return obj;
+        }
+
+        return Object.keys(obj).map(function (key) {
+            return Object.defineProperty(obj[key], '$key', {__proto__: null, value: key});
+        });
+    }
 });
\ No newline at end of file
diff --git a/demo/assets/scss/style.scss b/demo/assets/scss/style.scss
index e67bd443..23330673 100644
--- a/demo/assets/scss/style.scss
+++ b/demo/assets/scss/style.scss
@@ -1,11 +1,16 @@
 @import
 	"../scss/devicon.scss";
 
+ul {
+  margin: 0;
+}
+
 .devicons {
+  padding: 3rem 0;
   list-style: none;
   li {
     display: inline-block;
-    padding: 1rem 2rem;
+    padding: 2rem 3rem;
   }
 }
 
diff --git a/demo/assets/style.css b/demo/assets/style.css
index 3dfcb206..e786923a 100644
--- a/demo/assets/style.css
+++ b/demo/assets/style.css
@@ -316,12 +316,17 @@
   color: #faa625;
 }
 
+ul {
+  margin: 0;
+}
+
 .devicons {
+  padding: 3rem 0;
   list-style: none;
 }
 .devicons li {
   display: inline-block;
-  padding: 1rem 2rem;
+  padding: 2rem 3rem;
 }
 
 i {
diff --git a/demo/index.html b/demo/index.html
index f723bc1d..1dd09574 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,7 +16,7 @@
 
     <script src="assets/components/modernizr.js"></script>
   </head>
-  <body ng-app="devicon">
+  <body ng-app="devicon" class="row">
     <!--[if lt IE 7]>
         <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
     <![endif]-->
@@ -25,15 +25,21 @@
       <h1>devicon</h1>
     </header> -->
 
-    <main class="main" ng-controller="IconListCtrl">
-      <ul class="devicons" ng-repeat="type in icons">
+    <main class="main columns large-12" ng-controller="IconListCtrl">
+      <label>Search icon
+        <input type="text" placeholder="Search icon" ng-model="search">
+      </label>
+      <label>Options</label>
+      <input id="color" type="checkbox" ng-true-value="-color" ng-false-value="" ng-model="color"><label for="color">Color</label>
+      <input id="text" type="checkbox" ng-true-value="-text" ng-false-value="" ng-model="text"><label for="text">Text</label>
+      </label>
+      <ul class="devicons" ng-repeat="type in icons | toArray | orderBy:'order'">
         <h2>{{ type.name }}</h2>
-        <li ng-repeat="icon in type.icons">
-          <i class="devicon-{{ icon.name }}"></i>
-          <i class="devicon-{{ icon.name }}-color"></i>
-          <i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text"></i>
-          <i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text-color"></i>
-        </li>
+        <ul>
+          <li ng-repeat="icon in type.icons | filter:search | orderBy:'name'" class="">
+            <i class="devicon-{{ icon.name }}{{text}}{{color}}"></i>
+          </li>
+        </ul>
       </ul>
     </main>
 
