diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index dc56a5e93..f876abe10 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -1,24 +1,27 @@
 module.exports = (grunt)->
-  SRC_DIR = "less"
-  TARGET_DIR = "css"
+  less = 'less'
+  TARGET_DIR = 'css'
 
   grunt.initConfig
     less:
-      app_css:
-        src: "#{SRC_DIR}/flag-icon.less"
-        dest: "#{TARGET_DIR}/flag-icon.css"
+      flag:
+        src: 'less/flag-icon.less'
+        dest: 'css/flag-icon.css'
+      docs:
+        src: 'assets/docs.less'
+        dest: 'assets/docs.css'
 
     cssmin:
-      app_css:
-        src: "#{TARGET_DIR}/flag-icon.css"
-        dest: "#{TARGET_DIR}/flag-icon.min.css"
+      flag:
+        src: 'css/flag-icon.css'
+        dest: 'css/flag-icon.min.css'
 
     watch:
       css:
         options:
           livereload: true
-        files: "#{SRC_DIR}/*.less"
-        tasks: ["build"]
+        files: '**/*.less'
+        tasks: ['build']
 
       assets:
         options:
@@ -32,10 +35,10 @@ module.exports = (grunt)->
           keepalive: true
 
 
-    grunt.loadNpmTasks("grunt-contrib-less")
-    grunt.loadNpmTasks("grunt-contrib-cssmin")
-    grunt.loadNpmTasks("grunt-contrib-watch")
-    grunt.loadNpmTasks('grunt-contrib-connect')
+    grunt.loadNpmTasks 'grunt-contrib-less'
+    grunt.loadNpmTasks 'grunt-contrib-cssmin'
+    grunt.loadNpmTasks 'grunt-contrib-watch'
+    grunt.loadNpmTasks 'grunt-contrib-connect'
 
-    grunt.registerTask("default", ["build", "watch"])
-    grunt.registerTask("build", ["less", "cssmin"])
+    grunt.registerTask 'build',   ['less', 'cssmin']
+    grunt.registerTask 'default', ['build', 'watch']
diff --git a/assets/docs.css b/assets/docs.css
index e7560d4de..d15de22f2 100644
--- a/assets/docs.css
+++ b/assets/docs.css
@@ -1,3 +1,15 @@
+body {
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}
 .flag-wrapper {
   width: 100%;
   display: inline-block;
@@ -6,31 +18,136 @@
   overflow: hidden;
   margin-bottom: 20px;
 }
-
 .flag-wrapper:after {
-  padding-top: 75%; /* ratio */
+  padding-top: 75%;
+  /* ratio */
   display: block;
   content: '';
 }
-
 .flag-wrapper .flag {
   position: absolute;
-  top: 0; bottom: 0; right: 0; left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
 }
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 300;
-}
-
 .no-wrap {
   white-space: nowrap;
   margin-bottom: 8px;
   overflow: hidden;
 }
-
 .all-flags .flag-icon-background {
   cursor: pointer;
 }
+.jumbotron {
+  position: relative;
+  font-size: 16px;
+  color: #fff;
+  color: rgba(255, 255, 255, 0.75);
+  text-align: center;
+  border-radius: 0;
+  padding-bottom: 80px;
+  background: linear-gradient(to right, #0d6632, #f4c01a);
+}
+.jumbotron h1 {
+  margin-bottom: 15px;
+  font-weight: 300;
+  letter-spacing: -1px;
+  color: #fff;
+}
+.jumbotron iframe {
+  width: 100px!important;
+  height: 20px!important;
+  border: none;
+  overflow: hidden;
+  margin: 2px;
+}
+.jumbotron p a,
+.jumbotron .jumbotron-links a {
+  font-weight: 500;
+  color: #fff;
+}
+.jumbotron .jumbotron-links {
+  margin-top: 15px;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  font-size: 14px;
+}
+.jumbotron .jumbotron-links li {
+  display: inline;
+}
+.jumbotron .jumbotron-links li + li {
+  margin-left: 20px;
+}
+.jumbotron .bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 18px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.btn-outline {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  padding: 18px 24px;
+  font-size: inherit;
+  font-weight: 500;
+  color: #fff;
+  /* redeclare to override the `.jumbotron a` */
+  background-color: transparent;
+  border-color: #fff;
+  border-color: rgba(255, 255, 255, 0.5);
+  transition: all 0.1s ease-in-out;
+}
+.btn-outline:hover,
+.btn-outline:active {
+  color: #0d6632;
+  background-color: #fff;
+  border-color: #fff;
+}
+.how-to {
+  padding: 20px;
+}
+.how-to h2 {
+  text-align: center;
+}
+.how-to li {
+  font-size: 21px;
+  line-height: 1.7;
+  margin-top: 20px;
+}
+.how-to li p {
+  font-size: 16px;
+  color: #555;
+}
+.how-to code {
+  font-size: 85%;
+  word-wrap: break-word;
+  white-space: normal;
+}
+footer {
+  text-align: center;
+  opacity: .8;
+  padding: 50px;
+  background: linear-gradient(to right, #f4c01a, #0d6632);
+}
+footer a {
+  color: #fff;
+}
+footer a:hover {
+  color: #fff;
+}
+.links {
+  margin: 0;
+  list-style: none;
+  padding-left: 0;
+}
+.links li {
+  display: inline;
+  padding: 0 10px;
+}
diff --git a/assets/docs.js b/assets/docs.js
index 874eedd0f..e95e66370 100644
--- a/assets/docs.js
+++ b/assets/docs.js
@@ -1,14 +1,4 @@
 window.onload = function () {
-  document.getElementById('btn-bootstrap').onclick = function() {
-    if (document.getElementById('bootstrap').rel == 'stylesheet') {
-      document.getElementById('bootstrap').rel = 'styleshit';
-      document.getElementById('btn-bootstrap').innerHTML = document.getElementById('btn-bootstrap').innerHTML.replace('Disable', 'Enable');
-    } else {
-      document.getElementById('bootstrap').rel = 'stylesheet';
-      document.getElementById('btn-bootstrap').innerHTML = document.getElementById('btn-bootstrap').innerHTML.replace('Enable', 'Disable');
-    }
-  }
-
   $('.all-flags .flag-icon-background').click(function(event){
     var flag = $(event.currentTarget).attr('title');
     var w = 640;
diff --git a/assets/docs.less b/assets/docs.less
new file mode 100644
index 000000000..50965b56d
--- /dev/null
+++ b/assets/docs.less
@@ -0,0 +1,162 @@
+@color-from:   #0d6632;
+@color-to: #f4c01a;
+
+body {
+  font-weight: 300;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 300;
+}
+
+.flag-wrapper {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  box-shadow: 0 0 2px black;
+  overflow: hidden;
+  margin-bottom: 20px;
+
+  &:after {
+    padding-top: 75%; /* ratio */
+    display: block;
+    content: '';
+  }
+
+  .flag {
+    position: absolute;
+    top: 0; bottom: 0; right: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+  }
+}
+
+.no-wrap {
+  white-space: nowrap;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.all-flags .flag-icon-background {
+  cursor: pointer;
+}
+
+.jumbotron {
+  position: relative;
+  font-size: 16px;
+  color: #fff;
+  color: rgba(255,255,255,.75);
+  text-align: center;
+  border-radius: 0;
+  padding-bottom: 80px;
+  background: linear-gradient(to right, @color-from, @color-to);
+  h1 {
+    margin-bottom: 15px;
+    font-weight: 300;
+    letter-spacing: -1px;
+    color: #fff;
+  }
+  iframe {
+    width: 100px!important;
+    height: 20px!important;
+    border: none;
+    overflow: hidden;
+    margin: 2px;
+  }
+
+  p
+  a,
+  .jumbotron-links a {
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .jumbotron-links {
+    margin-top: 15px;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+    font-size: 14px;
+    li {
+      display: inline;
+    }
+    li + li {
+      margin-left: 20px;
+    }
+  }
+
+  .bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 18px;
+    background-color: fade(#000, 20%);
+  }
+}
+
+.btn-outline {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  padding: 18px 24px;
+  font-size: inherit;
+  font-weight: 500;
+  color: #fff; /* redeclare to override the `.jumbotron a` */
+  background-color: transparent;
+  border-color: #fff;
+  border-color: rgba(255,255,255,.5);
+  transition: all .1s ease-in-out;
+  &:hover,
+  &:active {
+    color: @color-from;
+    background-color: #fff;
+    border-color: #fff;
+  }
+}
+
+.how-to {
+  padding: 20px;
+  h2 {
+    text-align: center;
+  }
+  li {
+    font-size: 21px;
+    line-height: 1.7;
+    margin-top: 20px;
+    p {
+      font-size: 16px;
+      color: #555;
+    }
+  }
+  code {
+    font-size: 85%;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+}
+
+footer {
+  text-align: center;
+  opacity: .8;
+  padding: 50px;
+  background: linear-gradient(to right, @color-to, @color-from);
+
+  a {
+    color: #fff;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.links {
+  margin: 0;
+  list-style: none;
+  padding-left: 0;
+  li {
+    display: inline;
+    padding: 0 10px;
+  }
+}
diff --git a/index.html b/index.html
index 04cec529c..755e9ddf5 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,16 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <title>flag-icon-css</title>
-    <link href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/flatly/bootstrap.min.css" rel="stylesheet" id="bootstrap">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://lipis.github.io/flag-icon-css/" />
+
+    <title>SVG Country Flags | flag-icon-css</title>
+
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" id="bootstrap">
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
     <link href="./assets/docs.css" rel="stylesheet">
     <link href="./css/flag-icon.css" rel="stylesheet">
+
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -19,31 +22,24 @@
       ga('send', 'pageview');
     </script>
   </head>
+
   <body>
-    <a href="https://github.com/lipis/flag-icon-css"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-    <div class="jumbotron text-center">
+    <div class="jumbotron">
       <div class="container">
-        <h1>flag-icon<span class="text-muted">-css</span></h1>
+        <h1>flag-icon-css</h1>
         <p>
-          CSS for vector based country flags!
-        </p>
-        <p>
-          <a href="https://github.com/lipis/flag-icon-css" class="btn btn-success btn-lg">
-            <span class="icon-github"></span> View Project
-          </a>
-          <a href="https://github.com/lipis/flag-icon-css/archive/master.zip" class="btn btn-primary btn-lg">
-            <span class="icon-download-alt"></span> Download
-          </a>
-        </p>
-        <p>
-          <button id="btn-bootstrap" class="btn btn-default btn-xs">Disable Bootstrap Theme</button>
-        </p>
-        <p>
-          <iframe src="http://ghbtns.com/github-btn.html?user=lipis&repo=flag-icon-css&type=watch&count=true"
-            allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
+          SVG country flags that could be used anywhere via CSS!
         </p>
+        <a href="https://github.com/lipis/flag-icon-css" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'GitHub']);"><span class="fa fa-github"></span> View on GitHub</a>
+        <ul class="jumbotron-links">
+          <li><a href="http://lipis.github.io/bootstrap-social" onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']);"><span class="fa fa-facebook"></span> bootstrap-social</a></li>
+        </ul>
+      </div>
+      <div class="bottom">
+        <iframe src="http://ghbtns.com/github-btn.html?user=lipis&amp;repo=flag-icon-css&amp;type=watch&amp;count=true" class="social-share"></iframe>
       </div>
     </div>
+
     <div class="container">
       <section id="examples">
         <div class="page-header">
@@ -484,7 +480,17 @@ <h1>All flags</h1>
         </div>
       </section>
     </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+
+    <footer>
+      <ul class="links">
+        <li><a href="https://lip.is" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Lipis']);">Lipis</a></li>
+        <li><a href="https://github.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'GitHub']);"><span class="fa fa-github"></span> GitHub</a></li>
+        <li><a href="https://twitter.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Twitter']);"><span class="fa fa-twitter"></span> Twitter</a></li>
+        <li><a href="https://google.com/+PanayiotisLipiridis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Google+']);"><span class="fa fa-google-plus"></span> Google+</a></li>
+      </ul>
+    </footer>
+    <a href="https://github.com/lipis/flag-icon-css" title="Fork me on GitHub" class="github-corner"><svg width="80" height="80" viewbox="0 0 250 250"><title>Fork me on GitHub</title><path d="M0 0h250v250"></path><path d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px" class="octo-arm"></path><path d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor" class="octo-body"></path></svg><style> .github-corner svg{position:absolute;right:0;top:0;mix-blend-mode:darken;color:#ffffff;fill:#000000;}.github-corner:hover .octo-arm{animation:octocat-wave .56s;}@keyframes octocat-wave{0%, 100%{transform:rotate(0);}20%, 60%{transform:rotate(-20deg);}40%, 80%{transform:rotate(10deg);}}</style></a>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="./assets/docs.js"></script>
   </body>
 </html>