diff --git a/_config.yml b/_config.yml
index 0a10ed8cb..ec404468e 100755
--- a/_config.yml
+++ b/_config.yml
@@ -26,6 +26,7 @@ google_analytics_key: "UA-91070609-1"
 ### template colors, used site-wide via css ###
 colors:
   black:         '#111111'
+  gray:          '#75715e'
   white:         '#f8f8f8'
   purewhite:     '#ffffff'
   blue:          '#49a7e9'
diff --git a/_includes/css/main.css b/_includes/css/main.css
index 46e40784b..9ae7562dd 100644
--- a/_includes/css/main.css
+++ b/_includes/css/main.css
@@ -112,8 +112,8 @@ hr {
 
 /* ----- top menu ----- */
 
-{% assign navborder = 3 %}
-{% assign navborder_active = 6 %}
+{% assign navborder = 5 %}
+{% assign navborder_active = 10 %}
 
 nav {
   font-size:15px;
@@ -241,6 +241,42 @@ nav ul li:hover, nav ul li.active {
   text-shadow: 1px 1px 3px #333;
 }
 
+#features .sectioninner {
+  position: relative;
+}
+
+#features .sectioninner .nerd-font {
+  font-size: 1.5em;
+}
+
+#features .sectioninner1 {
+  top:-2em;
+  left:5em;
+}
+
+#features .sectioninner2 {
+  top:1em;
+  left:4em;
+  line-height: 2em;
+  word-spacing: .5em;
+}
+
+#features .sectioninner img,
+#features .sectioninner div {
+  border-radius: 50%;
+  width:100%;
+  height:100%;
+  margin-top:0px;
+}
+
+#features .sectioninner2 div {
+  /*background: url('/img/preview2.png');*/
+  /*background-position: -50% 101%;*/
+  /*background-color: {{ site.colors.black }};*/
+  background-color: #2e2e2e;
+  font-weight: bold;
+  padding-top: .75em;
+}
 
 .columned {
   -webkit-column-count: 3;
@@ -316,6 +352,9 @@ nav ul li:hover, nav ul li.active {
   .section:first-of-type {
     padding-top: 70px;
   }
+  #features .sectioninner2 {
+    font-size: .7em;
+  }
 }
 
 /* tiny size (phones) */
@@ -324,6 +363,9 @@ nav ul li:hover, nav ul li.active {
   .section:first-of-type {
     padding-top: 70px;
   }
+  #features .sectioninner2 {
+    font-size: .7em;
+  }
 }
 
 /* anything not desktop */
@@ -356,6 +398,10 @@ nav ul li:hover, nav ul li.active {
     width:170px
   }
 
+  #features .sectioninner2 {
+    font-size: .7em;
+  }
+
   .columned {
     -webkit-column-count: 2;
     -moz-column-count:    2;
diff --git a/_includes/css/nerd-font-tweaks.css b/_includes/css/nerd-font-tweaks.css
index 4e07c6699..0a5a343d7 100644
--- a/_includes/css/nerd-font-tweaks.css
+++ b/_includes/css/nerd-font-tweaks.css
@@ -75,6 +75,16 @@
   display: inline-block;
 }
 
+/* color scheme */
+
+.nf1 { color: #E2DB74 }
+.nf2 { color: #49a7e9 }
+.nf3 { color: #66FF99 }
+.nf4 { color: #Ff66CC }
+.nf5 { color: #00ffff }
+.nf6 { color: #f09f17 }
+.nf7 { color: #DD1B16 }
+
 /* Example Usage */
 .nerd-fonts-example-usage {
 	font-size: 2rem;
diff --git a/_posts/2017-01-01-home.md b/_posts/2017-01-01-home.md
index ad1f79c26..de195603b 100644
--- a/_posts/2017-01-01-home.md
+++ b/_posts/2017-01-01-home.md
@@ -9,7 +9,7 @@ style: center
   <a href="https://github.com/ryanoasis/nerd-fonts"><img src="img/nerd-fonts-logo.png" alt="Nerd Fonts Logo" /></a>
 </h1>
 
-### Iconic font aggregator, collection, and patcher: 37 patched fonts (71.4k+ variations). Includes popular glyph collections such as Font Awesome & fonts such as Hack
+### Iconic font aggregator, collection, and patcher
 
 <a class="github-button" href="https://github.com/ryanoasis/nerd-fonts" data-icon="octicon-star" data-style="mega" data-count-href="/ryanoasis/nerd-fonts/stargazers" data-count-api="/repos/ryanoasis/nerd-fonts#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ryanoasis/nerd-fonts on GitHub">Star</a>
 <a class="github-button" href="https://github.com/ryanoasis/nerd-fonts/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/ryanoasis/nerd-fonts/network" data-count-api="/repos/ryanoasis/nerd-fonts#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ryanoasis/nerd-fonts on GitHub">Fork</a>
@@ -30,13 +30,14 @@ style: center
     </h3>
   </div>
 </div>
-
+<br/>
+<br/>
 **Nerd Fonts** is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as [Font Awesome][font-awesome], [Devicons][vorillaz-devicons], [Octicons][octicons], and others.
 
 <h1 align="center">
   <a href="https://github.com/ryanoasis/nerd-fonts"><img src="img/custom-sankey-glyphs-combined-diagram.png" alt="Nerd Fonts Sankey Diagram" /></a>
 </h1>
-<sub><i>Diagram created using <a href="http://sankeymatic.com/" title="SankeyMATIC (BETA): A Sankey diagram builder for everyone">@SankeyMATIC</a></i></sub>
+<sub class="text-left"><em>Diagram created using <a href="http://sankeymatic.com/" title="SankeyMATIC (BETA): A Sankey diagram builder for everyone">SankeyMATIC</a></em></sub>
 
 
 <span id="forkongithub">
diff --git a/_posts/2017-01-02-features.md b/_posts/2017-01-02-features.md
new file mode 100644
index 000000000..bbe9c4aea
--- /dev/null
+++ b/_posts/2017-01-02-features.md
@@ -0,0 +1,63 @@
+---
+title: "Features"
+bg: turquoise
+color: black
+style: left
+fa-icon: gears
+---
+
+<div class="container">
+  <div class="half column nerd-font-badges" markdown="1">
+  - Fonts compatabile with **Linux**, **macOS**, and **Windows**
+  - A [FontForge Python Script](https://github.com/ryanoasis/nerd-fonts#font-patcher) to patch any font
+  - **`37`** already [patched font families](#downloads)
+  - **`1.3k+`** glyphs/icons combined, current glyph sets include:
+    - [Powerline with Extra Symbols][ryanoasis-powerline-extra-symbols]
+    - [Font Awesome][font-awesome]
+    - [Devicons][vorillaz-devicons]
+    - [Octicons][octicons]
+    - [Font Linux][font-linux]
+    - [Pomicons][gabrielelana-pomicons]
+  - **`71k+`** unique combinations/variations of patched fonts [(more details)](https://github.com/ryanoasis/nerd-fonts#combinations)
+  - A Developer/Contributor provided [Bash Script](https://github.com/ryanoasis/nerd-fonts#gotta-patch-em-all-font-patcher) to re-patch all the fonts
+  </div>
+  <div class="half column">
+    <div class="subtlecircle sectiondivider faicon sectioninner sectioninner1">
+      <img src="https://github.com/ryanoasis/powerline-extra-symbols/raw/master/preview.png">
+    </div>
+    <div class="subtlecircle sectiondivider faicon sectioninner sectioninner2">
+      <!--<img src="https://github.com/tiagofumo/vim-nerdtree-syntax-highlight/raw/master/screenshots/allfiles.png">-->
+      <div>
+        <b class="nf2"><i class="nerd-font nf-seti-css"></i>.css</b> <b class="nf1"><i class="nerd-font nf-dev-javascript"></i>.js</b><br/>
+        <b class="nf3"><i class="nerd-font nf-dev-html5"></i>.html</b> <b class="nf4"><i class="nerd-font nf-seti-json"></i>.json</b><br/>
+        <b class="nf6"><i class="nerd-font nf-seti-grunt"></i> Gruntfile.json</b> <i class="nerd-font nf-dev-react"></i>react.jsx<br/>
+        <b class="nf7"><i class="nerd-font nf-dev-angular"></i>angular.js</b> <b class="nf2"><i class="nerd-font nf-dev-jquery"></i>jquery.js</b> <b class="nf6"><i class="nerd-font nf-seti-markdown"></i>.md</b><br/>
+        <b class="nf2"><i class="nerd-font nf-dev-git"></i> git </b> <b class="nf4"><i class="nerd-font nf-seti-php"></i> php </b> <b class="nf3"><i class="nerd-font nf-dev-terminal"></i> .sh</b><br/>
+        <b class="nf2"><i class="nerd-font nf-fa-image"></i> png </b> <b class="nf4"><i class="nerd-font nf-dev-haskell"></i> lhs </b><br/>
+        <b class="nf3"><i class="nerd-font nf-custom-folder_npm"></i> node_modules</b><br/>
+        <b class="nf2"><i class="nerd-font nf-custom-folder_github"></i> .git</b><br/>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!--
+Repo References
+-->
+
+[vim-devicons]:https://github.com/ryanoasis/vim-devicons "VimDevIcons Vim Plugin (external link) ➶"
+[vorillaz-devicons]:http://vorillaz.github.io/devicons/
+[font-awesome]:https://github.com/FortAwesome/Font-Awesome
+[font-awesome-extension]:https://github.com/AndreLGava/font-awesome-extension
+[octicons]:https://github.com/github/octicons
+[font-linux]:https://github.com/Lukas-W/font-linux
+[gabrielelana-pomicons]:https://github.com/gabrielelana/pomicons
+[Seti-UI]:https://atom.io/themes/seti-ui
+[ryanoasis-powerline-extra-symbols]:https://github.com/ryanoasis/powerline-extra-symbols
+[wiki]:https://github.com/ryanoasis/nerd-fonts/wiki
+[wiki-project-purpose]:https://github.com/ryanoasis/nerd-fonts/wiki/Project-Purpose
+[repo]:https://github.com/ryanoasis/nerd-fonts
+[gitter]:https://gitter.im/ryanoasis/nerd-fonts
+
+
diff --git a/_posts/2017-01-02-downloads.md b/_posts/2017-01-03-downloads.md
similarity index 100%
rename from _posts/2017-01-02-downloads.md
rename to _posts/2017-01-03-downloads.md
diff --git a/_posts/2017-01-03-cheat-sheet.md b/_posts/2017-01-04-cheat-sheet.md
similarity index 99%
rename from _posts/2017-01-03-cheat-sheet.md
rename to _posts/2017-01-04-cheat-sheet.md
index 8a5e5e9b8..328f309f3 100644
--- a/_posts/2017-01-03-cheat-sheet.md
+++ b/_posts/2017-01-04-cheat-sheet.md
@@ -1,6 +1,6 @@
 ---
 title: "Cheat Sheet"
-bg: black
+bg: gray
 color: white
 fa-icon: search
 ---
diff --git a/_posts/2017-01-04-release.md b/_posts/2017-01-05-release.md
similarity index 100%
rename from _posts/2017-01-04-release.md
rename to _posts/2017-01-05-release.md
diff --git a/img/preview1.png b/img/preview1.png
new file mode 100644
index 000000000..b7beb7ad5
Binary files /dev/null and b/img/preview1.png differ
diff --git a/img/preview2.png b/img/preview2.png
new file mode 100644
index 000000000..a1d78958f
Binary files /dev/null and b/img/preview2.png differ
diff --git a/index.html b/index.html
index 9264b416f..9dacf9206 100755
--- a/index.html
+++ b/index.html
@@ -20,7 +20,10 @@
     <nav><ul>
       {% for node in site.posts reversed %}
         {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
-        <li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
+        <li class="p-{{id}}"><a href="#{{id}}">
+            <i class="fa fa-{{ node.fa-icon }}"></i>
+            {{node.title}}</a>
+        </li>
       {% endfor %}
     </ul></nav>