diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index 1c38097eeeeb..3673daa88776 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -60,11 +60,10 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .docs-search {
-  margin:10px;
+  margin:10px 0;
   padding:4px 0 4px 20px;
   background:white;
   border-radius:20px;
-  display:table-cell;
   vertical-align:middle;
 }
 
@@ -403,6 +402,14 @@ iframe.example {
   float:left;
 }
 
+.main-body-grid .side-navigation {
+  position:relative;
+}
+
+.main-body-grid .side-navigation.ng-hide {
+  display:block!important;
+}
+
 .variables-matrix td {
   vertical-align:top;
   padding:5px;
@@ -551,3 +558,104 @@ ul.methods > li,
 ul.events > li {
   margin-bottom:40px;
 }
+
+@media only screen and (max-width : 768px) {
+  .picker, .picker select {
+    width:auto;
+    display:block;
+    margin-bottom:10px;
+  }
+  .docs-navbar-primary {
+    text-align:center;
+  }
+  .main-body-grid {
+    margin-top:0;
+  }
+  .main-header-grid > .grid-left,
+  .main-body-grid > .grid-left,
+  .main-header-grid > .grid-right,
+  .main-body-grid > .grid-right {
+    display:block;
+    float:none;
+    width:auto!important;
+    margin-left:0;
+  }
+  .main-body-grid > .grid-left,
+  .header-fixed, .footer {
+    position:static!important;
+  }
+  .main-body-grid > .grid-left {
+    background:#efefef;
+    margin-left:-1em;
+    margin-right:-1em;
+    padding:1em;
+    width:auto!important;
+    overflow:visible;
+  }
+  .main-header-grid > .grid-right,
+  .main-body-grid > .grid-right {
+    margin-left:0;
+  }
+  .main-body-grid .side-navigation {
+    display:block!important;
+  }
+  .main-body-grid .side-navigation.ng-hide {
+    display:none!important;
+  }
+  .nav-index-group .nav-index-listing {
+    display:inline-block;
+    padding:3px 0;
+  }
+  .nav-index-group .nav-index-listing:not(.nav-index-section) + .nav-index-listing:not(.nav-index-section):after {
+      padding-right:5px;
+      content:",  ";
+  }
+  .nav-index-group .nav-index-listing:last-child {
+    content:"";
+  }
+  .nav-index-group .nav-index-section {
+    display:block;
+  }
+  .toc-toggle {
+    margin-bottom:20px;
+  }
+  .toc-close {
+    position: absolute;
+    bottom: -50px;
+    left: 50%;
+    margin-left: -50%;
+    text-align: center;
+    padding: 5px;
+    background: #eee;
+    border-radius: 5px;
+    width: 90%;
+    border:1px solid #ddd;
+    box-shadow:0 0 10px #bbb;
+  }
+  .navbar-brand {
+    float:none;
+    text-align:center;
+  }
+  .search-results-container {
+    padding-bottom:60px;
+    text-align:left;
+  }
+  .search-results-group {
+    float:none!important;
+    display:block!important;
+    width:auto!important;
+    border:0!important;
+    padding:0!important;
+  }
+  .search-results-group .search-result {
+    display:inline-block!important;
+    padding:0 5px;
+    width:auto!important;
+  }
+  .search-results-group .search-result:after {
+    content:", ";
+  }
+  #wrapper {
+    padding-bottom:0px;
+  }
+}
diff --git a/docs/config/templates/indexPage.template.html b/docs/config/templates/indexPage.template.html
index 1bb12605b314..28128ba03635 100644
--- a/docs/config/templates/indexPage.template.html
+++ b/docs/config/templates/indexPage.template.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en" ng-app="docsApp" ng-controller="DocsController">
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="Description"
@@ -81,62 +82,62 @@
     <header class="header header-fixed">
       <section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
         <div class="container">
-          <div class="navbar-header">
-            <a class="brand navbar-brand" href="http://angularjs.org">
-              <img class="logo" src="img/angularjs-for-header-only.svg">
-            </a>
-          </div>
           <div class="row">
-            <ul class="nav navbar-nav col-md-7">
-              <li class="divider-vertical"></li>
-              <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
-              <li class="divider-vertical"></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
-                </a>
-                <ul class="dropdown-menu">
-                  <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
-                  <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
-                  <li><a href="tutorial">Tutorial</a></li>
-                  <li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
-                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
-                  <li><a href="misc/faq">FAQ</a></li>
-                </ul>
-              </li>
-              <li class="divider-vertical"></li>
-              <li class="dropdown active">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
-                </a>
-                <ul class="dropdown-menu">
-                  <li><a href="tutorial">Tutorial</a></li>
-                  <li><a href="guide">Developer Guide</a></li>
-                  <li><a href="api">API Reference</a></li>
-                  <li><a href="error">Error Reference</a></li>
-                  <li><a href="misc/contribute">Contribute</a></li>
-                  <li><a href="http://code.angularjs.org/">Download</a></li>
-                </ul>
-              </li>
-              <li class="divider-vertical"></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
-                </a>
-                <ul class="dropdown-menu">
-                  <li><a href="http://blog.angularjs.org">Blog</a></li>
-                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
-                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
-                  <li class="divider"></li>
-                  <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
-                  <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
-                  <li class="divider"></li>
-                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
-                  <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
-                </ul>
-              </li>
-              <li class="divider-vertical"></li>
-            </ul>
+            <div class="col-md-9 header-branding">
+              <a class="brand navbar-brand" href="http://angularjs.org">
+                <img class="logo" src="img/angularjs-for-header-only.svg">
+              </a>
+              <ul class="nav navbar-nav">
+                <li class="divider-vertical"></li>
+                <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
+                <li class="divider-vertical"></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
+                    <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
+                    <li><a href="tutorial">Tutorial</a></li>
+                    <li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
+                    <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
+                    <li><a href="misc/faq">FAQ</a></li>
+                  </ul>
+                </li>
+                <li class="divider-vertical"></li>
+                <li class="dropdown active">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a href="tutorial">Tutorial</a></li>
+                    <li><a href="guide">Developer Guide</a></li>
+                    <li><a href="api">API Reference</a></li>
+                    <li><a href="error">Error Reference</a></li>
+                    <li><a href="misc/contribute">Contribute</a></li>
+                    <li><a href="http://code.angularjs.org/">Download</a></li>
+                  </ul>
+                </li>
+                <li class="divider-vertical"></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a href="http://blog.angularjs.org">Blog</a></li>
+                    <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
+                    <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
+                    <li class="divider"></li>
+                    <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
+                    <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
+                    <li class="divider"></li>
+                    <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
+                    <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
+                  </ul>
+                </li>
+                <li class="divider-vertical"></li>
+              </ul>
+            </div>
             <form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
               <span class="glyphicon glyphicon-search search-icon"></span>
               <input type="text"
@@ -196,7 +197,8 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
     <section role="main" class="container main-body">
       <div class="main-grid main-body-grid">
         <div class="grid-left">
-          <div class="side-navigation">
+          <a class="btn toc-toggle visible-xs" ng-click="toc=!toc">Show / Hide Table of Contents</a>
+          <div class="side-navigation" ng-show="toc==true">
             <ul class="nav-list naked-list">
               <li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
                 <a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>
@@ -210,6 +212,9 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
                 </ul>
               </li>
             </ul>
+            <a href="" ng-click="toc=false" class="toc-close visible-xs">
+              <span class="glyphicon glyphicon-remove toc-close-icon"></span> Close
+            </a>
           </div>
         </div>
         <div class="grid-right">
