diff --git a/index.html b/index.html
index e276471..3528218 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Keyrune</title>
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" /> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css" />
     <link rel="stylesheet" href="css/keyrune.min.css" />
     <!-- <link rel="stylesheet" href="css/keyrune.css" /> -->
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type="text/css">
         body {
             background: #fff;
@@ -20,6 +20,9 @@
             margin: 0;
             padding: 0 100px;
         }
+        h1 > small > code { /* i know this is lazy solution lol, but its a quick fix for now. */
+          font-size: 14px;
+        }
         h3 {
             font-size: 16px;
             font-weight: bold;
@@ -36,39 +39,154 @@
     </style>
 </head>
 <body>
-    <h1>Keyrune</h1>
-    <h2>Set Symbol Demos</h2>
-    <p>
+  <!-- header  -->
+  <div class="row column">
+    <header>
+      <h1>Keyrune <small><code>ver 1.7.2_sass</code></small></h1>
+      <h2 class="subheader">Set Symbol Demos</h2>
+      <p>
         This HTML file is for demo purposes and is not necessary for Keyrune installation or use.
         You can view a few of the set symbol font icons and the available examples below
         (some may only be available for specific browsers).
-    </p>
+      </p>
+    </header>
+  </div> <!-- /.row -->
+
+  <!-- common examples -->
+  <div class="row text-center">
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Common <small>(w/out gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-common ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-common ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-common ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-common ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-common ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-common ss-1x"></i> &nbsp;
+      </p>
+    </div>
+    <h3>Default Setsymbol, Common <small>(w/ gradient)</small></h3>
     <p>
-        <i class="ss ss-leg ss-3x ss-common"></i>&nbsp;
-        <i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
-        <i class="ss ss-leg ss-common"></i>&nbsp;
-        Common (Legends)
-    </p>
-    <p>
-        <i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>&nbsp;
-        <i class="ss ss-ons ss-2x ss-uncommon"></i>&nbsp;
-        <i class="ss ss-ons ss-uncommon"></i>&nbsp;
-        Uncommon (Onslaught)
-    </p>
-    <p>
-        <i class="ss ss-fut ss-3x ss-rare ss-grad"></i>&nbsp;
-        <i class="ss ss-fut ss-2x ss-rare"></i>&nbsp;
-        <i class="ss ss-fut ss-rare"></i>&nbsp;
-        Rare (Future Sight)
-    </p>
-    <p>
-        <i class="ss ss-wwk ss-3x ss-mythic ss-grad"></i>&nbsp;
-        <i class="ss ss-wwk ss-2x ss-mythic"></i>&nbsp;
-        <i class="ss ss-wwk ss-mythic"></i>&nbsp;
-        Mythic Rare (Worldwake)
+      <i class="ss ss-default ss-common ss-grad ss-6x"></i> &nbsp;
+      <i class="ss ss-default ss-common ss-grad ss-5x"></i> &nbsp;
+      <i class="ss ss-default ss-common ss-grad ss-4x"></i> &nbsp;
+      <i class="ss ss-default ss-common ss-grad ss-3x"></i> &nbsp;
+      <i class="ss ss-default ss-common ss-grad ss-2x"></i> &nbsp;
+      <i class="ss ss-default ss-common ss-grad ss-1x"></i> &nbsp;
     </p>
+  </div> <!-- /.row -->
+
+  <!-- uncommon examples -->
+  <div class="row text-center">
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Uncommon <small>(w/out gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-uncommon ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-1x"></i> &nbsp;
+      </p>
+    </div>
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Uncommon <small>(w/ gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-uncommon ss-grad ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-grad ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-grad ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-grad ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-grad ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-uncommon ss-grad ss-1x"></i> &nbsp;
+      </p>
+    </div>
+  </div> <!-- /.row -->
+
+  <!-- rare examples -->
+  <div class="row text-center">
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Rare <small>(w/out gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-rare ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-1x"></i> &nbsp;
+      </p>
+    </div>
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Rare <small>(w/ gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-rare ss-grad ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-grad ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-grad ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-grad ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-grad ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-rare ss-grad ss-1x"></i> &nbsp;
+      </p>
+    </div>
+  </div> <!-- /.row -->
+
+  <!-- mythic examples -->
+  <div class="row text-center">
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Mythic <small>(w/out gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-mythic ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-1x"></i> &nbsp;
+      </p>
+    </div>
+    <div class="columns small-12 medium-12 large-6">
+      <h3>Default Setsymbol, Mythic <small>(w/ gradient)</small></h3>
+      <p>
+        <i class="ss ss-default ss-mythic ss-grad ss-6x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-grad ss-5x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-grad ss-4x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-grad ss-3x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-grad ss-2x"></i> &nbsp;
+        <i class="ss ss-default ss-mythic ss-grad ss-1x"></i> &nbsp;
+      </p>
+    </div>
+  </div> <!-- /.row -->
+
+  <!-- old set symbol examples -->
+  <!--
+  <p>
+    <i class="ss ss-leg ss-3x ss-common"></i>&nbsp;
+    <i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
+    <i class="ss ss-leg ss-common"></i>&nbsp;
+    Common (Legends)
+  </p>
+  <p>
+    <i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>&nbsp;
+    <i class="ss ss-ons ss-2x ss-uncommon"></i>&nbsp;
+    <i class="ss ss-ons ss-uncommon"></i>&nbsp;
+    Uncommon (Onslaught)
+  </p>
+  <p>
+    <i class="ss ss-fut ss-3x ss-rare ss-grad"></i>&nbsp;
+    <i class="ss ss-fut ss-2x ss-rare"></i>&nbsp;
+    <i class="ss ss-fut ss-rare"></i>&nbsp;
+    Rare (Future Sight)
+  </p>
+  <p>
+    <i class="ss ss-wwk ss-3x ss-mythic ss-grad"></i>&nbsp;
+    <i class="ss ss-wwk ss-2x ss-mythic"></i>&nbsp;
+    <i class="ss ss-wwk ss-mythic"></i>&nbsp;
+    Mythic Rare (Worldwake)
+  </p>
+  -->
+
+  <!-- footer -->
+  <div class="row column">
     <footer>
-        Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
+      Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
     </footer>
+  </div> <!-- /.row -->
 </body>
 </html>
