diff --git a/assets/templates/test-fonts.css.njk b/assets/templates/test-fonts.css.njk
index 6fa5e5e..8786ad9 100644
--- a/assets/templates/test-fonts.css.njk
+++ b/assets/templates/test-fonts.css.njk
@@ -186,6 +186,7 @@
 
 {% for glyph in glyphs %}
 .{{ className }}.{{ glyph.name }}::before {
-  content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
+  /* content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}"; */
+  content: "{{ glyph.unicode[1] }}";
 }
 {% endfor %}
diff --git a/assets/templates/test-fonts.html.njk b/assets/templates/test-fonts.html.njk
index aad171d..067ccc1 100644
--- a/assets/templates/test-fonts.html.njk
+++ b/assets/templates/test-fonts.html.njk
@@ -4,103 +4,55 @@
     <meta charset="utf-8">
     <title>{{ fontName }}</title>
     <style>
+      * {
+        padding: 0%;
+        margin: 0%;
+      }
       body {
-        min-width: calc(24rem * 0.625);
         margin: 0%;
-        padding: 1rem;
+        padding: 1rem 0%;
         background: #fff;
         color: #222;
         font-family:"Helvetica Neue", Arial, sans-serif;
       }
 
-      h1 {
-        margin:0% 0% 2rem;
+      h1, .light-table-filter {
+        margin: 1rem;
         font-size: 2rem;
         font-weight: normal;
       }
-      
-      h3 {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: baseline;
+
+      table {
+        width: 100%;
+        border-spacing: 0px;
       }
       
-      h3 > * {
-        display: inline-block;
+      th, td {
+        text-align: left;
+        padding: 1rem;
+        border-bottom: 1px solid #ccc;
+        white-space: nowrap;
       }
       
-      h3 pre {
-        font-weight: normal;
-        display: inline-block;
-        margin: 0%;
-        flex: 1;
-      }
+      tbody tr:hover {background-color: #dfdfdf;}
+      
+      .hide {display: none;}
 
-      .icons {
-        margin-top: 1rem;
-        margin-bottom: 2rem;
-        display: flex;
-        flex-flow: row wrap;
-      }
+      .even {background-color: #f5f5f5;}
 
-      .icons__item {
-        padding: 0.4rem 0%;
+      .text-center {
         text-align: center;
-        width: 100%;
       }
 
-      .icons__item i, .icons__item span {
-        display: inline-block;
-      }
-
-      .icons__item,
-      .icons__item i {
-        vertical-align: middle;
-      }
-
-      .icons__item:hover {
-        color: #3c90be;
-      }
-
-      .icons__item span {
-        line-height: 3em;
-        white-space: nowrap;
-      }
-      
-      @media screen and (min-width: 480px) {
-        .icons__item {
-          width: calc(100% / 2)
-        }  
+      .overflow-x-auto {
+        overflow-x: auto;
       }
       
-      @media screen and (min-width: 640px) {
-        .icons__item {
-          width: calc(100% / 3)
-        }  
+      tr i {
+        transition: transform .2s; /* Animation */
       }
-      
-      @media screen and (min-width: 1024px) {
-        .icons__item {
-          width: calc(100% / 4)
-        }  
-      }
-      
-      @media screen and (min-width: 1200px) {
-        .icons__item {
-          width: calc(100% / 5)
-        }  
-      }
-
-      @media screen and (min-width: 1440px) {
-        .icons__item {
-          width: calc(100% / 6)
-        }  
-      }
-
-      @media screen and (min-width: 1920px) {
-        .icons__item {
-          width: calc(100% / 8)
-        }  
+      tr:hover i {
+        transform: scale(1.75); /* (175% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
       }
 
       @font-face {
@@ -290,37 +242,82 @@
       {% for glyph in glyphs %}
       .{{ className }}.{{ glyph.name }}::before {
         content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
+        content: "{{ glyph.unicode[1] }}";
       }
       {% endfor %}
     </style>
   </head>
   <body>
     <h1>Icons: {{ className }}</h1>
-      <h3>
-        <span>Class:&nbsp;</span>
-        <pre>{{ '<i class="' | escape }}{{ className }} {{ glyphs[0].name }}{{ '"></i>' | escape }}</pre>
-      </h3>
-      <hr>
-      <div class="icons" id="icon-classes">
-          {% for glyph in glyphs %}
-            <div class="icons__item">
-              <i class="{{ className }} {{ className }}-4x {{ glyph.name }}"></i><br />
-              <span>.{{ glyph.name }}</span>
-            </div>
-          {% endfor %}
-      </div>
-      <h3>
-        <span>Ligature:&nbsp;</span>
-        <pre>{{ '<i class="' | escape }}{{ className }}{{ '">'  | escape }}{{glyphs[0].unicode[1]}}{{'</i>' | escape }}</pre>
-      </h3>
-      <hr>
-      <div class="icons" id="icon-ligatures">
+    <input type="search" class="light-table-filter" data-table="order-table" placeholder="Search">
+    <div class="overflow-x-auto">
+      <table class="order-table table">
+        <thead>
+          <tr>
+            <th>Icon</th>
+            <th>Class</th>
+            <th>Ligature</th>
+            <th>Code</th>
+          </tr>
+        </thead>
+        <tbody>
           {% for glyph in glyphs %}
-            <div class="icons__item">
-              <i class="{{ className }} {{ className }}-4x">{{ glyph.unicode[1] }}</i><br />
-              <span>{{ glyph.unicode[1] }}</span>
-            </div>
+          <tr>
+            <td><i class="{{ className }} {{ className }}-2x {{ glyph.name }}"></i></td>
+            <td>.{{ glyph.name }}</td>
+            <td>{{glyph.unicode[1]}}</td>
+            <td>
+              <pre>{{ '<i class="' | escape }}{{ className }}{{ '">'  | escape }}{{glyph.unicode[1]}}{{'</i>' | escape }}</pre>
+            </td>
+          </tr>
           {% endfor %}
-      </div>
+        </tbody>
+      </table>
+    </div>
+    <script>
+      (function(document) {
+        'use strict';
+
+        var LightTableFilter = (function(Arr) {
+
+          var _input;
+
+          function _onInputEvent(e) {
+            _input = e.target;
+            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
+            Arr.forEach.call(tables, function(table) {
+              Arr.forEach.call(table.tBodies, function(tbody) {
+                Arr.forEach.call(tbody.rows, _filter);
+                ([...tbody.querySelectorAll('tr:not(.hide)')]).forEach(function(row, index){
+                  row.classList.toggle('even', ~index & 1);
+                });
+              });
+            });
+          }
+
+          function _filter(row) {
+            var text = row.children[2].textContent.toLowerCase(), val = _input.value.toLowerCase();
+            row.classList.toggle('hide', text.replace(/_/g, ' ').indexOf(val) === -1)
+          }
+
+          return {
+            init: function() {
+              var inputs = document.getElementsByClassName('light-table-filter');
+              Arr.forEach.call(inputs, function(input) {
+                input.oninput = _onInputEvent;
+                _onInputEvent({target: input});
+              });
+            }
+          };
+        })(Array.prototype);
+
+        document.addEventListener('readystatechange', function() {
+          if (document.readyState === 'complete') {
+            LightTableFilter.init();
+          }
+        });
+
+      })(document);
+    </script>
   </body>
 </html>
diff --git a/assets/templates/test-fonts.scss.njk b/assets/templates/test-fonts.scss.njk
index fd40e37..ec511cc 100644
--- a/assets/templates/test-fonts.scss.njk
+++ b/assets/templates/test-fonts.scss.njk
@@ -199,6 +199,7 @@ display: inline-block;
 
 {% for glyph in glyphs %}
 .{{ className }}.{{ glyph.name }}::before {
-    content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
+  /* content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}"; */
+  content: "{{ glyph.unicode[1] }}";
 }
 {% endfor %}
diff --git a/dist/README.md b/dist/README.md
index 9d45397..fd66992 100644
--- a/dist/README.md
+++ b/dist/README.md
@@ -20,8 +20,18 @@ nodejs 11+
 
 ### Changelog
 
+#### [1.0.4](https://github.com/mpalpha/test-fonts/compare/1.0.3...1.0.4) - 2019-08-28
+
+##### Commits
+
+- update task scripts [`dd6b5d7`](https://github.com/mpalpha/test-fonts/commit/dd6b5d7b07af7a007a2ce3345332bf14525a7f13)
+
 #### [1.0.3](https://github.com/mpalpha/test-fonts/compare/1.0.2...1.0.3) - 2019-08-28
 
+##### Commits
+
+- Release 1.0.3 [`9046f3b`](https://github.com/mpalpha/test-fonts/commit/9046f3b26996df3ae5b16da965dd53cd359c6832)
+
 #### [1.0.2](https://github.com/mpalpha/test-fonts/compare/1.0.1...1.0.2) - 2019-08-28
 
 ##### Commits
diff --git a/dist/index.html b/dist/index.html
index d76ba87..a40ee02 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,103 +4,46 @@
     <meta charset="utf-8">
     <title>test-fonts</title>
     <style>
+      * {
+        padding: 0%;
+        margin: 0%;
+      }
       body {
-        min-width: calc(24rem * 0.625);
         margin: 0%;
-        padding: 1rem;
+        padding: 1rem 0%;
         background: #fff;
         color: #222;
         font-family:"Helvetica Neue", Arial, sans-serif;
       }
 
-      h1 {
-        margin:0% 0% 2rem;
+      h1, .light-table-filter {
+        margin: 1rem;
         font-size: 2rem;
         font-weight: normal;
       }
-      
-      h3 {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: baseline;
-      }
-      
-      h3 > * {
-        display: inline-block;
-      }
-      
-      h3 pre {
-        font-weight: normal;
-        display: inline-block;
-        margin: 0%;
-        flex: 1;
-      }
 
-      .icons {
-        margin-top: 1rem;
-        margin-bottom: 2rem;
-        display: flex;
-        flex-flow: row wrap;
-      }
-
-      .icons__item {
-        padding: 0.4rem 0%;
-        text-align: center;
+      table {
         width: 100%;
-      }
-
-      .icons__item i, .icons__item span {
-        display: inline-block;
-      }
-
-      .icons__item,
-      .icons__item i {
-        vertical-align: middle;
-      }
-
-      .icons__item:hover {
-        color: #3c90be;
-      }
-
-      .icons__item span {
-        line-height: 3em;
-        white-space: nowrap;
-      }
-      
-      @media screen and (min-width: 480px) {
-        .icons__item {
-          width: calc(100% / 2)
-        }  
+        border-spacing: 0px;
       }
       
-      @media screen and (min-width: 640px) {
-        .icons__item {
-          width: calc(100% / 3)
-        }  
+      th, td {
+        text-align: left;
+        padding: 1rem;
+        border-bottom: 1px solid #ddd;
+        white-space: nowrap;
       }
       
-      @media screen and (min-width: 1024px) {
-        .icons__item {
-          width: calc(100% / 4)
-        }  
-      }
+      tbody tr:hover {background-color: #f5f5f5;}
       
-      @media screen and (min-width: 1200px) {
-        .icons__item {
-          width: calc(100% / 5)
-        }  
-      }
+      tbody tr:nth-child(even) {background-color: #f2f2f2;}
 
-      @media screen and (min-width: 1440px) {
-        .icons__item {
-          width: calc(100% / 6)
-        }  
+      .text-center {
+        text-align: center;
       }
 
-      @media screen and (min-width: 1920px) {
-        .icons__item {
-          width: calc(100% / 8)
-        }  
+      .overflow-x-auto {
+        overflow-x: auto;
       }
 
       @font-face {
@@ -260,52 +203,93 @@
 
       
       .test-fonts.attach::before {
-        content: "\ea01";
+        /* content: "\ea01"; */
+        content: "attach";
       }
       
       .test-fonts.chat-round::before {
-        content: "\ea02";
+        /* content: "\ea02"; */
+        content: "chat_round";
       }
       
     </style>
   </head>
   <body>
     <h1>Icons: test-fonts</h1>
-      <h3>
-        <span>Class:&nbsp;</span>
-        <pre>&lt;i class=&quot;test-fonts attach&quot;&gt;&lt;/i&gt;</pre>
-      </h3>
-      <hr>
-      <div class="icons" id="icon-classes">
-          
-            <div class="icons__item">
-              <i class="test-fonts test-fonts-4x attach"></i><br />
-              <span>.attach</span>
-            </div>
-          
-            <div class="icons__item">
-              <i class="test-fonts test-fonts-4x chat-round"></i><br />
-              <span>.chat-round</span>
-            </div>
-          
-      </div>
-      <h3>
-        <span>Ligature:&nbsp;</span>
-        <pre>&lt;i class=&quot;test-fonts&quot;&gt;attach&lt;/i&gt;</pre>
-      </h3>
-      <hr>
-      <div class="icons" id="icon-ligatures">
+    <input type="search" class="light-table-filter" data-table="order-table" placeholder="Search">
+    <div class="overflow-x-auto">
+      <table class="order-table table">
+        <thead>
+          <tr>
+            <th>Icon</th>
+            <th>Class</th>
+            <th>Ligature</th>
+            <th>Code</th>
+          </tr>
+        </thead>
+        <tbody>
           
-            <div class="icons__item">
-              <i class="test-fonts test-fonts-4x">attach</i><br />
-              <span>attach</span>
-            </div>
+          <tr>
+            <td><i class="test-fonts test-fonts-3x attach"></i></td>
+            <td>.attach</td>
+            <td>attach</td>
+            <td>
+              <pre>&lt;i class=&quot;test-fonts&quot;&gt;attach&lt;/i&gt;</pre>
+            </td>
+          </tr>
           
-            <div class="icons__item">
-              <i class="test-fonts test-fonts-4x">chat_round</i><br />
-              <span>chat_round</span>
-            </div>
+          <tr>
+            <td><i class="test-fonts test-fonts-3x chat-round"></i></td>
+            <td>.chat-round</td>
+            <td>chat_round</td>
+            <td>
+              <pre>&lt;i class=&quot;test-fonts&quot;&gt;chat_round&lt;/i&gt;</pre>
+            </td>
+          </tr>
           
-      </div>
+        </tbody>
+      </table>
+    </div>
+    <script>
+      (function(document) {
+        'use strict';
+
+        var LightTableFilter = (function(Arr) {
+
+          var _input;
+
+          function _onInputEvent(e) {
+            _input = e.target;
+            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
+            Arr.forEach.call(tables, function(table) {
+              Arr.forEach.call(table.tBodies, function(tbody) {
+                Arr.forEach.call(tbody.rows, _filter);
+              });
+            });
+          }
+
+          function _filter(row) {
+            var text = row.children[2].textContent.toLowerCase(), val = _input.value.toLowerCase();
+            row.style.display = text.replace(/_/g, ' ').indexOf(val) === -1 ? 'none' : 'table-row';
+          }
+
+          return {
+            init: function() {
+              var inputs = document.getElementsByClassName('light-table-filter');
+              Arr.forEach.call(inputs, function(input) {
+                input.oninput = _onInputEvent;
+              });
+            }
+          };
+        })(Array.prototype);
+
+        document.addEventListener('readystatechange', function() {
+          if (document.readyState === 'complete') {
+            LightTableFilter.init();
+          }
+        });
+
+      })(document);
+    </script>
   </body>
 </html>
diff --git a/dist/test-fonts.css b/dist/test-fonts.css
index 9cd881d..503ab44 100644
--- a/dist/test-fonts.css
+++ b/dist/test-fonts.css
@@ -157,10 +157,12 @@
 
 
 .test-fonts.attach::before {
-  content: "\ea01";
+  /* content: "\ea01"; */
+  content: "attach";
 }
 
 .test-fonts.chat-round::before {
-  content: "\ea02";
+  /* content: "\ea02"; */
+  content: "chat_round";
 }
 
diff --git a/dist/test-fonts.scss b/dist/test-fonts.scss
index 067ffe1..5a23290 100644
--- a/dist/test-fonts.scss
+++ b/dist/test-fonts.scss
@@ -172,10 +172,12 @@ display: inline-block;
 
 
 .test-fonts.attach::before {
-    content: "\ea01";
+  /* content: "\ea01"; */
+  content: "attach";
 }
 
 .test-fonts.chat-round::before {
-    content: "\ea02";
+  /* content: "\ea02"; */
+  content: "chat_round";
 }
 

Icon	Class	Ligature	Code
	.attach	attach	+ <i class="test-fonts">attach</i> +
	.chat-round	chat_round	+ <i class="test-fonts">chat_round</i> +