diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index 0d4c289b..ffc75988 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -1,6 +1,83 @@
 @import "reset.css";
-.wrapper {
-  text-align: center;
+.indicator,
+.indicator-right {
+  background: none;
+  font-size: 12px;
+  vertical-align: middle;
+  font-weight: bold;
+  color: #6c7680;
+}
+.indicator::before,
+.indicator-right::after {
+  content: '';
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+}
+.indicator::before {
+  margin: 0 4px 0 0px;
+}
+.indicator-right::after {
+  margin: 0 0 0 4px;
+}
+.indicator.grey::before,
+.indicator-right.grey::after {
+  background: #F0F4F7;
+}
+.indicator.blue::before,
+.indicator-right.blue::after {
+  background: #5e64ff;
+}
+.indicator.red::before,
+.indicator-right.red::after {
+  background: #ff5858;
+}
+.indicator.green::before,
+.indicator-right.green::after {
+  background: #98d85b;
+}
+.indicator.orange::before,
+.indicator-right.orange::after {
+  background: #ffa00a;
+}
+.indicator.purple::before,
+.indicator-right.purple::after {
+  background: #743ee2;
+}
+.indicator.darkgrey::before,
+.indicator-right.darkgrey::after {
+  background: #b8c2cc;
+}
+.indicator.black::before,
+.indicator-right.black::after {
+  background: #36414C;
+}
+.indicator.yellow::before,
+.indicator-right.yellow::after {
+  background: #FEEF72;
+}
+.indicator.light-blue::before,
+.indicator-right.light-blue::after {
+  background: #7CD6FD;
+}
+.indicator.lightblue::before,
+.indicator-right.lightblue::after {
+  background: #7CD6FD;
+}
+.modal-header .indicator {
+  float: left;
+  margin-top: 7.5px;
+  margin-right: 3px;
+}
+a {
+  color: #7575ff;
+  text-decoration: none;
+  transition: color 0.5s ease-in;
+}
+a:hover {
+  color: #2E3338;
+  text-decoration: underline;
 }
 .navbar {
   padding: 1rem 2.5rem;
@@ -36,6 +113,10 @@
   padding: 8rem 2.5rem;
   border-top: 1px solid #EBEFF2;
 }
+.page {
+  padding: 0 2.5rem;
+  border-top: 1px solid #EBEFF2;
+}
 .homepage-illustration {
   margin-bottom: 4rem;
   width: 100%;
@@ -45,20 +126,9 @@
   font-size: 2.5rem;
   line-height: 1.025;
 }
-.left-aligned {
-  text-align: left;
-}
 .domain-links {
   font-size: 1.5rem;
 }
-.centered-text {
-  max-width: 300px;
-  text-align: center;
-  margin: 0 auto;
-}
-.info {
-  line-height: 2;
-}
 .list.grid-of-four {
   grid-gap: 4rem;
 }
@@ -67,16 +137,29 @@
   padding-left: 0;
 }
 /*utilities*/
+.left-aligned {
+  text-align: left;
+}
+.centered {
+  text-align: center;
+}
+.text-muted {
+  color: #8D99A6;
+}
+.text-light {
+  color: #6c7680;
+}
+.text-white {
+  color: #fff;
+}
 .grid-of-four {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
 }
 .intro-copy {
   font-size: 1.5rem;
-  max-width: 35%;
-  min-width: 30%;
+  max-width: 683px;
   margin: 0 auto 1.5rem auto;
-  color: #6c7680;
   line-height: 1.5em;
 }
 .primary-links {
@@ -111,14 +194,26 @@
   background: #5e5ec9;
   color: #fff;
 }
+.button-secondary {
+  font-size: 1.5em;
+  color: #6c7680;
+  background: #F0F4F7;
+  border-right: 0px;
+  border-left: 0px;
+  border-top: 0px;
+  line-height: 3;
+}
+.button-secondary:hover {
+  background: #cad5df;
+  color: #2E3338;
+}
 .gray-bg {
   background-color: #fafbfc;
 }
 .community-bg {
-  background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), #7574fe), url("/assets/foundation/img/community.jpg");
+  background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), #7574fe), url("/assets/foundation/img/community-2016.jpg");
   background-size: cover;
   background-repeat: no-repeat;
-  color: #fff;
   background-position: center;
   background-attachment: fixed;
 }
@@ -133,6 +228,10 @@
   display: flex;
   justify-content: space-between;
 }
+.list-unstyled {
+  padding: 0;
+  margin: 0;
+}
 .bulleted-list {
   margin: 0;
   list-style: circle;
@@ -141,7 +240,7 @@
 .bulleted-list li {
   padding-bottom: 1em;
 }
-.row {
+.footer-row {
   display: flex;
   text-align: left;
   justify-content: space-between;
@@ -153,8 +252,148 @@
 }
 .list-unstyled li {
   list-style: none;
-  margin: 1em 0;
+  margin-bottom: 1em;
 }
 .top-spacer {
   margin-top: 3rem;
 }
+.page-container {
+  display: flex;
+  max-width: 1366px;
+  margin: 0 auto;
+}
+.active {
+  color: #2E3338;
+}
+.breadcrumb {
+  padding: 0;
+  margin-bottom: 1.5rem;
+}
+.breadcrumb a,
+.breadcrumb a:focus,
+.breadcrumb a:visited {
+  background-color: transparent;
+  color: #8D99A6;
+}
+.breadcrumb a:hover {
+  color: #2E3338;
+  transition: color 0.5s ease-in;
+}
+.breadcrumb > li {
+  display: inline-block;
+}
+.breadcrumb > li + li::before {
+  padding: 0 5px;
+  color: #8D99A6;
+  content: "/\00a0";
+}
+.sidebar-block {
+  padding: 4rem 0;
+  border-right: 1px solid black;
+  min-width: 200px;
+  border-right: 1px solid #EBEFF2;
+}
+.page-content {
+  width: 100%;
+}
+.page-content.with-sidebar {
+  padding: 4rem 0 4rem 2.5rem;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #EBEFF2;
+}
+/* loaned from bootstrap*/
+.btn-default {
+  color: inherit;
+  background-color: #F0F4F7;
+  border-color: transparent;
+}
+.btn {
+  display: inline-block;
+  padding: .25em .75em;
+  margin-bottom: 0;
+  font-size: 1em;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: .25em;
+}
+.table-bordered {
+  border: 1px solid #d1d8dd;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #d1d8dd;
+}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: .5em;
+  vertical-align: top;
+  border-top: 1px solid #EBEFF2;
+}
+.btn-block {
+  display: block;
+  width: 100%;
+}
+.form-signin .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: .5rem ;
+  margin-bottom: .5rem;
+}
+.form-control {
+  display: block;
+  width: 100%;
+  height: 2em;
+  padding: .5em;
+  color: #2E3338;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d1d8dd;
+  border-radius: .25em;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+/*loaned from frappe*/
+.page-card {
+  max-width: 360px;
+  padding: 1em;
+  margin: 8rem auto;
+  border: 1px solid #d1d8dd;
+  border-radius: .25em;
+  background-color: #fff;
+  box-shadow: 0px 0.25em 0.5em rgba(0, 0, 0, 0.1);
+}
+.page-card .page-card-head {
+  padding: .75em 1em;
+  margin: -1em;
+  margin-bottom: 1em;
+  border-bottom: 1px solid #d1d8dd;
+}
+.login-content .btn {
+  margin-top: 3rem;
+}
+.btn-primary {
+  background-color: #7575ff;
+  border-color: #7575ff;
+}
diff --git a/foundation/public/css/reset.css b/foundation/public/css/reset.css
index 889acf04..511d2d94 100644
--- a/foundation/public/css/reset.css
+++ b/foundation/public/css/reset.css
@@ -21,8 +21,7 @@ html {
     -ms-text-size-adjust: 100%;
     -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: transparent;
-    --line-height: 3;
-    line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
+    line-height: 1.5;
 }
 
 @-ms-viewport {
@@ -37,15 +36,10 @@ body {
     margin: 0;
     font-size: 1em;
     font-weight: 400;
-    /* line-height: 1.5; */
     text-align: left;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans",  Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     color: #36414c;
     font-weight:normal;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-feature-settings: "kern" 1;
-    -moz-font-feature-settings: "kern" 1;
-    -o-font-feature-settings: "kern" 1;
     font-feature-settings: "kern" 1;
     font-kerning: normal;
     text-rendering: optimizeLegibility;
diff --git a/foundation/public/img/community-2016.jpg b/foundation/public/img/community-2016.jpg
new file mode 100644
index 00000000..7363a891
Binary files /dev/null and b/foundation/public/img/community-2016.jpg differ
diff --git a/foundation/public/img/community.jpeg b/foundation/public/img/community.jpeg
deleted file mode 100644
index 4e03d31d..00000000
Binary files a/foundation/public/img/community.jpeg and /dev/null differ
diff --git a/foundation/public/img/community.jpg b/foundation/public/img/community.jpg
deleted file mode 100644
index 0fe18231..00000000
Binary files a/foundation/public/img/community.jpg and /dev/null differ
diff --git a/foundation/public/img/community.png b/foundation/public/img/community.png
deleted file mode 100644
index 5ff687f5..00000000
Binary files a/foundation/public/img/community.png and /dev/null differ
diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less
index 3a233640..fa2c1ac6 100644
--- a/foundation/public/less/erpnext-org-theme.less
+++ b/foundation/public/less/erpnext-org-theme.less
@@ -1,8 +1,15 @@
 @import (css) "reset.css";
 @import "variables.less";
+@import "indicator.less";
 
-.wrapper {
-text-align:center;
+a {
+    color:@brand-primary;
+    text-decoration:none;
+    transition: color .5s ease-in;
+    &:hover{
+    color:@text-dark;
+    text-decoration:underline
+    }
 }
 .navbar{
     padding: 1rem 2.5rem;
@@ -30,9 +37,8 @@ text-align:center;
 .navbar-brand:visited{
     color: @text-color;
 }
-
 .container {
-    max-width: 1366px;
+    max-width: @screen-max;
     margin: 0 auto;
 }
 
@@ -40,6 +46,10 @@ text-align:center;
     padding: 8rem 2.5rem;
     border-top: 1px solid @light-border-color;
 }
+.page{
+    padding: 0 2.5rem;
+    border-top: 1px solid @light-border-color;
+}
 
 .homepage-illustration {
     margin-bottom: 4rem;
@@ -52,24 +62,11 @@ text-align:center;
     line-height: 1.025;
 }
 
-.left-aligned{
-    text-align: left;
-}
 
 .domain-links{
     font-size: 1.5rem;
 }
 
-.centered-text{
-    max-width: 300px;
-    text-align:center;
-    margin: 0 auto;
-}
-.info {
-  line-height: 2;
-}
-
-
 .list.grid-of-four{
     grid-gap: 4rem;
 }
@@ -79,6 +76,26 @@ text-align:center;
     padding-left: 0;
 }
 /*utilities*/
+
+.left-aligned{
+    text-align: left;
+}
+
+.centered{
+    text-align: center;
+}
+
+.text-muted{
+    color: @text-muted;
+}
+
+.text-light{
+    color: @text-light;
+}
+
+.text-white{
+    color:#fff;
+}
 .grid-of-four{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -86,10 +103,8 @@ text-align:center;
 
 .intro-copy{
     font-size: 1.5rem;
-    max-width: 35%;
-    min-width: 30%;
+    max-width: @screen-max/2;
     margin: 0 auto 1.5rem auto;
-    color: @text-light;
     line-height: 1.5em;
 }
 
@@ -128,15 +143,28 @@ text-align:center;
     }
 }
 
+.button-secondary{
+    font-size: 1.5em;
+    color: @text-light;
+    background: @btn-bg;
+    border-right: 0px;
+    border-left: 0px;
+    border-top: 0px;
+    line-height: 3;
+    &:hover{
+        background: @button-secondary-hover;
+        color: @text-dark;
+    }
+}
+
 .gray-bg{
     background-color: @light-bg;
 }
 
 .community-bg {
-  background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), rgb(117, 116, 254)), url("/assets/foundation/img/community.jpg");
+  background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), rgb(117, 116, 254)), url("/assets/foundation/img/community-2016.jpg");
   background-size: cover;
   background-repeat: no-repeat;
-  color: #fff;
   background-position: center;
   background-attachment: fixed;
 }
@@ -154,6 +182,11 @@ text-align:center;
     justify-content: space-between;
 }
 
+.list-unstyled{
+    padding: 0;
+    margin: 0;
+}
+
 .bulleted-list {
     margin: 0;
     list-style: circle;
@@ -164,7 +197,7 @@ text-align:center;
   padding-bottom: 1em;
 }
 
-.row {
+.footer-row {
     display: flex;
     text-align: left;
     justify-content: space-between;
@@ -177,9 +210,157 @@ text-align:center;
 }
 .list-unstyled li {
     list-style: none;
-    margin: 1em 0;
+    margin-bottom: 1em;
 }
 
 .top-spacer {
     margin-top: 3rem;
 }
+.page-container {
+    display: flex;
+    max-width: @screen-max;
+    margin: 0 auto;
+}
+
+.active{
+    color: @text-dark;
+}
+.breadcrumb {
+    padding: 0;
+    margin-bottom: 1.5rem;
+}
+
+.breadcrumb a, .breadcrumb a:focus, .breadcrumb a:visited {
+    background-color: transparent;
+    color: @text-muted;
+}
+
+.breadcrumb a:hover{
+    color: @text-dark;
+    transition: color .5s ease-in;
+}
+
+.breadcrumb > li {
+    display: inline-block;
+}
+.breadcrumb > li + li::before {
+    padding: 0 5px;
+    color: @text-muted;
+    content: "/\00a0";
+}
+
+.sidebar-block {
+    padding: 4rem 0;
+    border-right: 1px solid black;
+    min-width: 200px;
+    border-right: 1px solid @light-border-color;
+}
+
+.page-content{
+    width:100%;
+}
+
+.page-content.with-sidebar {
+    padding: 4rem 0 4rem 2.5rem;
+}
+hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid @light-border-color;
+}
+
+/* loaned from bootstrap*/
+
+
+.btn-default {
+    color: inherit;
+    background-color: @btn-bg;
+    border-color: transparent;
+}
+.btn {
+    display: inline-block;
+    padding: .25em .75em;
+    margin-bottom: 0;
+    font-size: 1em;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: .25em;
+}
+
+.table-bordered {
+    border: 1px solid @border-color;
+}
+
+.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
+    border: 1px solid @border-color;
+}
+
+.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
+    padding: .5em;
+    vertical-align: top;
+    border-top: 1px solid @light-border-color;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+.form-signin .form-control {
+    position: relative;
+    height: auto;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: .5rem ;
+    margin-bottom: .5rem;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: 2em;
+    padding: .5em;
+    color: @text-dark;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid @border-color;
+    border-radius: .25em;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+/*loaned from frappe*/
+.page-card {
+    max-width: 360px;
+    padding: 1em;
+    margin: 8rem auto;
+    border: 1px solid @border-color;
+    border-radius: .25em;
+    background-color: #fff;
+    box-shadow: 0px .25em .5em rgba(0, 0, 0, 0.1);
+}
+
+.page-card .page-card-head {
+    padding: .75em 1em;
+    margin: -1em;
+    margin-bottom: 1em;
+    border-bottom: 1px solid @border-color;
+}
+
+.login-content .btn {
+    margin-top: 3rem;
+}
+
+.btn-primary {
+    background-color: @brand-primary;
+    border-color: @brand-primary;
+}
diff --git a/foundation/public/less/indicator.less b/foundation/public/less/indicator.less
new file mode 100644
index 00000000..0616af3e
--- /dev/null
+++ b/foundation/public/less/indicator.less
@@ -0,0 +1,80 @@
+.indicator,
+.indicator-right {
+    background:none;
+    font-size:12px;
+    vertical-align:middle;
+    font-weight:bold;
+    color:#6c7680;
+}
+
+.indicator::before,
+.indicator-right::after {
+    content:'';
+    display:inline-block;
+    height:8px;
+    width:8px;
+    border-radius:8px;
+}
+
+.indicator::before {
+	margin:0 4px 0 0px;
+}
+
+.indicator-right::after {
+	margin:0 0 0 4px;
+}
+
+.indicator.grey::before,
+.indicator-right.grey::after {
+    background: @btn-bg;
+}
+.indicator.blue::before,
+.indicator-right.blue::after {
+    background: @indicator-blue;
+}
+.indicator.red::before,
+.indicator-right.red::after {
+    background: @indicator-red;
+}
+.indicator.green::before,
+.indicator-right.green::after {
+    background: @indicator-green;
+}
+.indicator.orange::before,
+.indicator-right.orange::after {
+    background: @indicator-orange;
+}
+.indicator.purple::before,
+.indicator-right.purple::after {
+    background: @indicator-purple;
+}
+.indicator.darkgrey::before,
+.indicator-right.darkgrey::after {
+    background: @indicator-darkgrey;
+}
+
+.indicator.black::before,
+.indicator-right.black::after {
+    background: @text-color;
+}
+
+.indicator.yellow::before,
+.indicator-right.yellow::after {
+    background: @indicator-yellow;
+}
+
+.indicator.light-blue::before,
+.indicator-right.light-blue::after {
+    background: @indicator-light-blue;
+}
+
+.indicator.lightblue::before,
+.indicator-right.lightblue::after {
+    background: @indicator-light-blue;
+}
+
+.modal-header .indicator {
+	float: left;
+	margin-top: 7.5px;
+	margin-right: 3px;
+}
diff --git a/foundation/public/less/variables.less b/foundation/public/less/variables.less
index bd8ade23..e6cbdc5e 100644
--- a/foundation/public/less/variables.less
+++ b/foundation/public/less/variables.less
@@ -1,7 +1,9 @@
 @import "../../../../frappe/frappe/public/less/variables.less";
 
-@brand-primary:         #7575ff;
-@screen-sm-min:         768px;
-@screen-xs-max:         (@screen-sm-min - 1);
-@button-primary-hover:  darken(desaturate(@brand-primary, 50%), 15%);
-@primary-link-color:    lighten(@brand-primary, 5%);
+@brand-primary:             #7575ff;
+@screen-sm-min:             768px;
+@screen-xs-max:             (@screen-sm-min - 1);
+@button-primary-hover:      darken(desaturate(@brand-primary, 50%), 15%);
+@button-secondary-hover:    darken(@light-bg, 15%);
+@primary-link-color:        lighten(@brand-primary, 5%);
+@screen-max:                1366px;
diff --git a/foundation/templates/base.html b/foundation/templates/base.html
index 1e06ba5c..ba5cda37 100644
--- a/foundation/templates/base.html
+++ b/foundation/templates/base.html
@@ -16,8 +16,24 @@
     {% endblock %}
 	{%- block head -%}
 		{% block meta_block %}{% endblock %}
-        <link href="assets/foundation/css/erpnext-org-theme.css" rel="stylesheet">
+        <link href="/assets/foundation/css/erpnext-org-theme.css" rel="stylesheet">
+        {% if 'docs' in  path %}
+                <link type="text/css" rel="stylesheet" href="/docs/assets/css/hljs.css">
+                <link type="text/css" rel="stylesheet" href="/docs/assets/css/font-awesome.css">
+                <link type="text/css" rel="stylesheet" href="/docs/assets/css/octicons/octicons.css">
+                <link type="text/css" rel="stylesheet" href="/docs/assets/css/docs.css">
+        {% endif %}
 	{%- endblock -%}
+    {# loading required JS for login #}
+	<script>
+		window.frappe = {};
+		frappe.ready_events = [];
+		frappe.ready = function(fn) {
+			frappe.ready_events.push(fn);
+		}
+		window.dev_server = {{ dev_server }};
+    </script>
+        {# loading required JS for login #}
 </head>
 <body data-path="{{ path }}">
     <div class="wrapper">
@@ -27,5 +43,29 @@
         {% endblock %}
         {%- block footer -%}{% include "foundation/templates/includes/footer/footer.html" %}{%- endblock -%}
     </div>
+    {# loading required JS for login #}
+    {% if path == 'login' or 'docs' in path %}
+        {% block base_scripts %}
+        <!-- js should be loaded in body! -->
+        <script type="text/javascript"
+            src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
+        <script type="text/javascript"
+            src="/assets/frappe/js/frappe-web.min.js"></script>
+        {% endblock %}
+        {%- if js_globals is defined %}
+        <script>
+        {%- for key, value in js_globals.iteritems() %}
+        window.{{ key }} = "{{ value[0] }}";
+        {%- endfor -%}
+        </script>
+        {% endif -%}
+        {%- for link in web_include_js %}
+        <script type="text/javascript" src="{{ link|abs_url }}"></script>
+        {%- endfor -%}
+        {%- block script %}{%- endblock %}
+        <!-- csrf_token -->
+        {%- block body_include %}{{ body_include or "" }}{% endblock -%}
+    {% endif %}
+
 </body>
 </html>
diff --git a/foundation/templates/includes/footer/footer.html b/foundation/templates/includes/footer/footer.html
index 39e59097..ab0f7160 100644
--- a/foundation/templates/includes/footer/footer.html
+++ b/foundation/templates/includes/footer/footer.html
@@ -1,6 +1,6 @@
 <footer class="footer">
  <div class="container">
-	<div class="row clearfix">
+	<div class="footer-row clearfix">
 		<div class="columned">
 			<h3 class="footer-title">Domains</h3>
 			<ul class="list-unstyled footer-list">
@@ -11,7 +11,7 @@
 					<a class="secondary-link" href="/docs/user/manual/en/stock">Distribution</a>
 				</li>
 				<li>
-					<a class="secondary-link" href="docs/user/manual/en/projects">Services</a>
+					<a class="secondary-link" href="/docs/user/manual/en/projects">Services</a>
 				</li>
 				<li>
 					<a class="secondary-link" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">Retail</a>
@@ -20,13 +20,13 @@
 					<a class="secondary-link" href="/docs/user/manual/en/schools">Education</a>
 				</li>
 				<li>
-					<a class="secondary-link" href="docs/user/manual/en/healthcare">Healthcare</a>
+					<a class="secondary-link" href="/docs/user/manual/en/healthcare">Healthcare</a>
 				</li>
 				<li>
-					<a class="secondary-link" href="docs/user/manual/en/agriculture">Agriculture</a>
+					<a class="secondary-link" href="/docs/user/manual/en/agriculture">Agriculture</a>
 				</li>
 				<li>
-					<a class="secondary-link" href="docs/user/manual/en/non_profit">Non Profit</a>
+					<a class="secondary-link" href="/docs/user/manual/en/non_profit">Non Profit</a>
 				</li>
 			</ul>
 		</div>
@@ -113,14 +113,14 @@
             </ul>
         </div>
     </div>
-    <div class="social">
+    <div class="social centered">
         <p>Find us on
             <a class="secondary-link" href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
             <a class="secondary-link" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a> &
             <a class="secondary-link" href="https://medium.com/frappé-thoughts/" target="_blank">Medium</a>
         </p>
     </div>
-    <div class="copyright">
+    <div class="copyright centered">
         <p> &copy;<span id="year"></span> ERPNext Open Source Software Foundation.Content licensed under <a class="secondary-link" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a>. Read the <a href="/terms" class="secondary-link">terms of use</a>.
         </p>
     </div>
diff --git a/foundation/templates/web.html b/foundation/templates/web.html
new file mode 100644
index 00000000..6d5fbf55
--- /dev/null
+++ b/foundation/templates/web.html
@@ -0,0 +1,53 @@
+{% extends base_template_path %}
+{% block hero %}{% endblock %}
+{% block content %}
+<div class="page">
+    <div class="page-container" id="page-{{ name or route }}"
+        data-path="{{ pathname }}" {%- if page_or_generator=="Generator" %} data-doctype="{{ doctype }}"{% endif %}>
+            {% if show_sidebar %}
+                <div class="sidebar-block">
+                    {% include "templates/includes/web_sidebar.html" %}
+                </div>
+            {% endif %}
+        <div class="{% if show_sidebar %}page-content with-sidebar{% else %}page-content without-sidebar{% endif %}">
+            <div class="page-content-wrapper">
+                <div class="row page-head">
+                    <div class='col-sm-12'>
+                        {% if not no_breadcrumbs and parents %}
+                        <div class="page-breadcrumbs">
+                            {% block breadcrumbs %}
+                            {% include 'templates/includes/breadcrumbs.html' %}
+                            {% endblock %}
+                        </div>
+                        {% endif %}
+                    </div>
+                    <div class="col-sm-8 col-xs-6">
+                        {% block header %}{% endblock %}
+                    </div>
+                    <div class="col-sm-4 col-xs-6">
+                        {% if show_search %}
+                            <div class="page-search-block">
+                            {% block search %}
+                                {% include
+                                    'templates/includes/search_box.html' %}
+                            {% endblock %}
+                            </div>
+                        {% endif %}
+
+                        {% if self.header_actions() %}
+                        <div class="page-header-actions-block">
+                            {% block header_actions %}{% endblock %}
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="page_content">
+                    {%- block page_content -%}{%- endblock -%}
+                </div>
+            </div>
+            <!-- sidebar ends -->
+        </div>
+    </div>
+</div>
+{% endblock %}
+
diff --git a/foundation/www/index.html b/foundation/www/index.html
index dc4564f5..0168a4ce 100644
--- a/foundation/www/index.html
+++ b/foundation/www/index.html
@@ -1,11 +1,11 @@
 {% extends "templates/base.html" %}
 {% block title %}ERPNext Foundation{% endblock %}
 {% block content %}
-<section class='feature hero'>
+<section class='feature hero centered'>
     <div class="container">
         <img class="homepage-illustration" src='/assets/foundation/img/hero-illustration-erpnext.png'>
         <h1 class="title">ERP for Everybody</h1>
-        <p class='intro-copy'>A free and opensource do-it-yourself business management system that will help you stay in control.</p>
+        <p class='intro-copy text-light'>A free and opensource do-it-yourself business management system that will help you stay in control.</p>
         <a class="button button-primary" href="https://erpnext.com/pricing">Get Started</a>
     </div>
 </section>
@@ -48,12 +48,12 @@
         </ul>
 	</div>
 </section>
-<section class="feature community-bg">
+<section class="feature community-bg text-white">
     <div class="container">
-        <div class="centered-text">
-            <h1 class="subtitle">ERPNext Foundation</h1>
-            <p class="info">ERPNext Foundation is a community of ERPNext Users, Developers and Service Providers. The goal of the ERPNext Foundation is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p>
-            <a href="" class="secondary-link">Become a Member</a>
+        <div class="centered">
+            <h1 class="title">ERPNext Foundation</h1>
+            <p class="intro-copy">ERPNext Foundation is a community of ERPNext Users, Developers and Service Providers. The goal of the ERPNext Foundation is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p>
+            <a href="" class="button button-secondary">Become a Member</a>
         </div>
     </div>
 </section>