diff --git a/frappe/docs/index.html b/frappe/docs/index.html
index c1a80dcecb..e46146fe1d 100644
--- a/frappe/docs/index.html
+++ b/frappe/docs/index.html
@@ -1,17 +1,20 @@
 <!-- title: Frappe Framework: Documentation -->
 <!-- no-breadcrumbs -->
 <div class="splash">
- <div class="jumbotron">
-  <h1>Superhero Web Framework</h1>
-  <p>Build extensions to ERPNext or make your own database driven app</p>
-</div>
-
-<div class="section" style="padding-top: 0px; margin-top: -30px;">
-    <div class="fake-browser-frame">
-    	<img class="img-responsive browser-image feature-image"
-            src="assets/img/home.png">
-    </div>
-</div>
+ <div class="container">
+  <div class="col-sm-10 col-sm-offset-1">
+   <div class="jumbotron">
+    <h1>Superhero Web Framework</h1>
+    <p>Build extensions to ERPNext or make your own database driven app</p>
+   </div>
+   <div class="section" style="padding-top: 0px; margin-top: -30px;">
+      <div class="fake-browser-frame">
+       <img class="img-responsive browser-image feature-image"
+              src="assets/img/home.png">
+      </div>
+   </div>
+  </div>
+ </div>
 </div>
 
 
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index aa48a416f8..f382d50e0c 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -246,6 +246,30 @@ body {
 .splash {
   background: #383851;
   color: #ffffff;
+  padding-top: 128px;
+}
+.splash .jumbotron {
+  background-color: transparent;
+  padding: 14px 0 60px 0;
+  text-align: center;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
+}
+.splash .jumbotron h1 {
+  font-size: 36px;
+  font-weight: 700;
+  opacity: 0.9;
+}
+.splash .jumbotron p {
+  font-size: 24px;
+  font-color: #8D99A6 !important;
+  letter-spacing: 0px;
+  opacity: 0.7;
+  margin-top: 20px;
+  font-weight: 300;
+  line-height: 1.4em;
+}
+.splash .section {
+  padding: 30px 0 0 0;
 }
 .navbar {
   position: absolute;
@@ -318,26 +342,13 @@ h2 {
   display: inline-block;
   margin: 0 15px;
 }
-.jumbotron {
-  background-color: transparent;
-  padding: 80px 30px;
-  text-align: center;
-}
-.jumbotron h1 {
-  font-size: 32px;
-  font-weight: 700;
-}
-.jumbotron p {
-  font-color: #8D99A6 !important;
-}
 .browser-image {
   min-height: 300px;
   border: 1px solid #d1d8dd;
 }
 .fake-browser-frame {
   position: relative;
-  margin: 40px auto;
-  max-width: 600px;
+  margin: 24px auto 0px;
 }
 .fake-browser-frame::before {
   content: "";
@@ -347,6 +358,7 @@ h2 {
   left: 0px;
   right: 0px;
   border: 1px solid #d1d8dd;
+  background: #ffffff;
   border-bottom: none;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
diff --git a/frappe/public/less/docs.less b/frappe/public/less/docs.less
index a98f0c79d7..c63be0b581 100644
--- a/frappe/public/less/docs.less
+++ b/frappe/public/less/docs.less
@@ -16,6 +16,34 @@ body {
 .splash{
  background: #383851;
  color: #ffffff;
+ padding-top: 128px;
+ 
+ .jumbotron{
+  background-color: transparent;
+	 padding: 14px 0 60px 0;
+	 text-align: center;
+  text-shadow: 0px 1px 2px rgba(0,0,0,0.7);
+  
+   h1 {
+    font-size: 36px;
+    font-weight: 700;
+    opacity: 0.9;
+   }
+  
+   p {
+    font-size: 24px;
+    font-color: @text-muted !important;
+    letter-spacing: 0px;
+    opacity: 0.7;
+    margin-top: 20px;
+    font-weight: 300;
+    line-height: 1.4em;
+   }
+ }
+ 
+ .section{
+   padding: 30px 0 0 0;
+ }
 }
 
 .navbar {
@@ -99,21 +127,6 @@ h2 {
 	}
 }
 
-.jumbotron {
-	background-color: transparent;
-	padding: 80px 30px;
-	text-align: center;
-
-	h1 {
-		font-size: 32px;
-		font-weight: 700;
-	}
-
-	p {
-		font-color: @text-muted !important;
-	}
-}
-
 // fake frames
 .browser-image {
 	min-height: 300px;
@@ -122,8 +135,7 @@ h2 {
 
 .fake-browser-frame {
 	position: relative;
-	margin: 40px auto;
-	max-width: 600px;
+	margin: 24px auto 0px;
 }
 
 .fake-browser-frame::before {
@@ -134,6 +146,7 @@ h2 {
 	left: 0px;
 	right: 0px;
 	border: 1px solid #d1d8dd;
+ background: #ffffff;
 	border-bottom: none;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
@@ -149,7 +162,7 @@ h2 {
 
 	/* octicon */
     font: normal normal;
-	font-size: 8px;
+	   font-size: 8px;
     font-family: 'FontAwesome';
     line-height: 1;
     display: inline-block;
diff --git a/frappe/templates/autodoc/docs_home.html b/frappe/templates/autodoc/docs_home.html
index 40734d5ec7..b2e30df217 100644
--- a/frappe/templates/autodoc/docs_home.html
+++ b/frappe/templates/autodoc/docs_home.html
@@ -1,17 +1,20 @@
 <!-- title: {{ app.title }}: Documentation -->
 <!-- no-breadcrumbs -->
 <div class="splash">
- <div class="jumbotron">
-  <h1>{{ app.headline }}</h1>
-  <p>{{ app.sub_heading }}</p>
-</div>
-
-<div class="section" style="padding-top: 0px; margin-top: -30px;">
-    <div class="fake-browser-frame">
-    	<img class="img-responsive browser-image feature-image"
-            src="assets/img/home.png">
-    </div>
-</div>
+ <div class="container">
+  <div class="col-sm-10 col-sm-offset-1">
+   <div class="jumbotron">
+    <h1>{{ app.headline }}</h1>
+    <p>{{ app.sub_heading }}</p>
+   </div>
+   <div class="section" style="padding-top: 0px; margin-top: -30px;">
+      <div class="fake-browser-frame">
+       <img class="img-responsive browser-image feature-image"
+              src="assets/img/home.png">
+      </div>
+   </div>
+  </div>
+ </div>
 </div>
 
 {% if app.long_description %}