diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 65b99c6d4f..d082e2bb5e 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -29,9 +29,10 @@
 @tip-background: #0088CC;
 @tip-color: #fff;
 
+html, body { height: 100%; }
 
 html {
-  background-color: @black;
+  background-color: @white;
 }
 
 body {
@@ -39,6 +40,12 @@ body {
   color: @black;
 }
 
+/* Bootstrap fix that's causing a right margin to appear
+   whenver a modal is opened */
+body.modal-open {
+  margin-right: 0;
+}
+
 
 /* Helper Classes */
 .pad-right-sm { padding-right: 10px; }
@@ -299,11 +306,24 @@ dd {
   min-height: 15px;
 }
 
-.main-container {
-  min-height: 700px;
+/* footer variables */
+@footer-height: 85px;
+@footer-margin: 60px;
+@push-height: (@footer-height + @footer-margin);
+@push-margin: 0px;
+#wrap {
+    min-height: 100%;
+    height: 100%;
+    height: auto !important;
+    margin: 0 auto -(@push-height + @push-margin);
+}
+#push {
+    height: (@footer-height + @footer-margin); /* push height = footer height + footer padding */
+    margin-bottom: (@footer-margin);
 }
 
-.main-menu {
+#navbar-container, .main-menu {
+  width: 100%;
   background-color: @black;
 }
 
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index d4977a99b3..5f9bbaa621 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -132,29 +132,32 @@
 </head>
 <body>
 
-    <div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
-       <div class="container">
-         <div class="navbar-header">
-            <a class="navbar-brand" href="#home"><img class="logo" src="{{ STATIC_URL }}img/logo.png" /></a>
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-         </div>
-         <div class="collapse navbar-collapse navbar-responsive-collapse">
-            <ul class="nav navbar-nav pull-right">
-              <li ng-show="current_user.username != null && current_user.username != undefined">
-                 <a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
-              <li ng-show="userLoggedIn == true"><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
-              <li ng-show="userLoggedIn == true"><a id="main_contact_support" target="_blank"
-                  href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a><li>
-              <li ng-show="userLoggedIn == true"><a id="main_logout" href="#/logout">Logout</a></li>
-            </ul>
-         </div><!-- nav-collapse -->
-       </div>
-    </div><!-- navbar -->
-    
+<div id="wrap">
+
+    <div id="navbar-container">
+        <div class="navbar navbar-inverse navbar-fixed-top main-menu" role="navigation">
+           <div class="container">
+             <div class="navbar-header">
+                <a class="navbar-brand" href="#home"><img class="logo" src="{{ STATIC_URL }}img/logo.png" /></a>
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </button>
+             </div>
+             <div class="collapse navbar-collapse navbar-responsive-collapse">
+                <ul class="nav navbar-nav pull-right">
+                  <li ng-show="current_user.username != null && current_user.username != undefined">
+                     <a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-bind="'Hello! ' + current_user.username"></a></li>
+                  <li ng-show="userLoggedIn == true"><a id="main_view_license" href="" ng-click="viewLicense()">View License</a></li>
+                  <li ng-show="userLoggedIn == true"><a id="main_contact_support" target="_blank"
+                      href="https://ansibleworks.zendesk.com/anonymous_requests/new">Contact Support</a><li>
+                  <li ng-show="userLoggedIn == true"><a id="main_logout" href="#/logout">Logout</a></li>
+                </ul>
+             </div><!-- nav-collapse -->
+           </div>
+        </div><!-- navbar -->
+    </div>  
     <div class="container main-container" id="main">
 
     <div class="row">
@@ -352,12 +355,16 @@
 
     <!-- Help dialog -->
     <div id="help-modal"></div>
-     
+
   </div><!-- container -->
   
   <div class="overlay"></div>
   <div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
-   
+
+  <div id="push"></div>
+
+</div><!-- wrap -->
+
   <div class="site-footer">
     <div class="container">
         <div class="row">
