diff --git a/docs/content/overview/installing.md b/docs/content/overview/installing.md
index 825ff76e0..1ae80682d 100644
--- a/docs/content/overview/installing.md
+++ b/docs/content/overview/installing.md
@@ -25,9 +25,12 @@ Once downloaded it can be run from anywhere. You don't need to install
 it into a global location. This works well for shared hosts and other systems
 where you don't have a privileged account.
 
-Ideally you should install it somewhere in your path for easy use. `/usr/local/bin` 
+Ideally you should install it somewhere in your path for easy use. `/usr/local/bin`
 is the most probable location.
 
+If you have [Homebrew](http://brew.sh), installation is even easier.  Just run
+`brew install hugo`.
+
 ### Installing Pygments (optional)
 
 The Hugo executable has one *optional* external dependency for source code highlighting (Pygments).
diff --git a/docs/layouts/index.html b/docs/layouts/index.html
index 23367cf04..83bb72e8c 100755
--- a/docs/layouts/index.html
+++ b/docs/layouts/index.html
@@ -29,7 +29,7 @@
         <a href="#intro"><img src="/img/hugo.png" class="logo"> </a>
         <div class="buttonbox">
         <a href="/overview/introduction" class="btn btn-primary btn-lg">Docs <i class="icon-idea"></i></a>
-        <a href="https://github.com/spf13/hugo/releases" class="btn btn-success btn-lg">Download <i class="icon-arrow-down"></i></a>
+        <a href="#action" class="btn btn-success btn-lg">Download <i class="icon-arrow-down"></i></a>
         <a href="http://discuss.gohugo.io" class="btn btn-info btn-lg">Community <i class="icon-talking"></i></a>
         <a href="https://github.com/spf13/hugo" class="btn btn-dark btn-lg">Github <i class="icon-circlestar"></i></a>
         </div>
@@ -111,7 +111,7 @@
                 Organize your content however you want with any URL structure.
                 Declare your own content types.
                 Define your own meta data in YAML, TOML or JSON.
-                Use indexes to group your content however you want. 
+                Use indexes to group your content however you want.
                 Best of all this is all done with virtually no configuration, Hugo
                 just works.
 
@@ -211,6 +211,7 @@
             <div class="row">
               <div class="col-md-10 col-md-offset-1 text-center">
                 <h3>Get Started Today!</h3>
+                <pre><code>brew install hugo</code></pre>
                 <a href="https://github.com/spf13/hugo/releases" class="btn btn-lg btn-primary">Download <i class="icon-arrow-down"></i></a>
                 <a href="/overview/introduction" style="color:white;font-weight:300;">Documentation</a>
               </div>
@@ -218,7 +219,6 @@
           </div>
         </div>
         <!-- /Call to Action -->
-        <div id="footerSpacer"></div>
 
         <!-- Footer -->
         <footer id="footer">
@@ -245,7 +245,7 @@
   <script>
     $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
-          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
+          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
               || location.hostname == this.hostname) {
 
             var target = $(this.hash);
diff --git a/docs/static/css/HPstyles.css b/docs/static/css/HPstyles.css
index 85afa322e..8c7f88e14 100755
--- a/docs/static/css/HPstyles.css
+++ b/docs/static/css/HPstyles.css
@@ -42,7 +42,7 @@ body {
 }
 
 .logo {
-    max-width: 35em; 
+    max-width: 35em;
     width: 100%;
     padding: 2em;
 }
@@ -51,7 +51,7 @@ body {
     margin: 2em 0 4em;
 }
 
-@media only screen 
+@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
@@ -68,7 +68,7 @@ and (orientation : portrait)
     }
 }
 
-@media only screen 
+@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 1024px)
 and (orientation : landscape) {
@@ -192,27 +192,25 @@ i.callout-icon:hover {
 
 #action {
     background: url(../img/gray.png);
-    padding: 50px 0px 30px;
-    position: fixed;
-    bottom: 130px;
-    z-index: 99998;
+    padding: 30px 0px 40px;
     width: 100%;
 }
-
-#footerSpacer {
-    display: block;
-    min-height: 310px;
-    background-color: rgba(0, 0, 0, 0);
+#action pre {
+    background-color: #545454;
+    color: #f9f2f4;
+}
+#action pre:hover {
+    background-color: #f9f2f4;
+    color: #545454;
+}
+#action code {
+    font-family: Lato, monospace;
+    font-size: 14pt;
 }
 
 #footer {
-    bottom: 0px;
-    left: 0px;
-    padding: 10px 0px;
-    position: fixed;
-    width: 100%;
     font-size: 14px;
-    z-index: 99998;
+    padding: 50px 0px 25px 0px;
     background: rgb(255, 255, 255);
 }