diff --git a/foundation/hooks.py b/foundation/hooks.py
index 8b1c0d91..cf78bfc4 100644
--- a/foundation/hooks.py
+++ b/foundation/hooks.py
@@ -41,6 +41,7 @@ website_context = {
 	# "navbar_search": 1,
 	"brand_html": "<img class='mr-1 d-inline-block align-top' width='30px' height='30px' src='/assets/foundation/img/erpnext-logo.svg' alt='Oensource ERP Software'/>ERPNext.org",
 	"top_bar_items": [
+			{"label": "About", "url": "/about", "right":1},
 			{"label": "Blog", "url": "/blog", "right":1},
 			{"label": "Foundation", "child_items":[
 				{"label": "Chapter", "url": "/chapters","right": 1},
diff --git a/foundation/templates/includes/macros.html b/foundation/templates/includes/macros.html
index 43c65a3b..09b92c4f 100644
--- a/foundation/templates/includes/macros.html
+++ b/foundation/templates/includes/macros.html
@@ -2,15 +2,13 @@
 	<div class="media centered {% if link %}clickable{% endif %}"
 		{% if link %}style="cursor: pointer;"{% endif %}
 		{% if link %}onclick="location.href='{{ link }}'"{% endif %}>
-		<div class="media-left">
-			<a href="{{ link or "#" }}">
-				<img class="media-object"
-					src="{% if image %}{% if not '/' in image %}/assets/foundation/img/{% endif %}{{ image }}{% else %}/assets/foundation/img/frappe-bird-grey.svg{% endif %}"
-					style="{% if image and not '/' in image %}opacity: 0.4{% endif %}">
-			</a>
-		</div>
+		<a class="mr-3" href="{{ link or "#" }}">
+			<img class="img-thumbnail"
+			src="{% if image %}{% if not '/' in image %}/assets/foundation/img/{% endif %}{{ image }}{% else %}/assets/foundation/img/frappe-bird-grey.svg{% endif %}"
+			style="{% if image and not '/' in image %}opacity: 0.4{% endif %}">
+		</a>
 		<div class="media-body">
-			{% if title %}<h4 class="media-heading">{{ title }}</h4>{% endif %}
+			{% if title %}<h4>{{ title }}</h4>{% endif %}
 			{{ content }}
 		</div>
 	</div>
diff --git a/foundation/www/index.html b/foundation/www/index.html
index 78ae965d..b5dcccb7 100644
--- a/foundation/www/index.html
+++ b/foundation/www/index.html
@@ -1,123 +1,125 @@
 {% extends "foundation/templates/base.html" %}
 {% block title %}ERPNext Foundation - Open Source ERP Software{% endblock %}
 {% block content %}
-<section class='section-padding hero border-top-light text-center'>
-	<div class="container">
-		<img class="hero-illustration bottom-spacer" src='/assets/foundation/img/hero-illustration-erpnext.png' alt="ERP software for everybody">
-		<h1 class="header-1">ERP for Everybody</h1>
-		<p class='intro-copy text-medium text-light'>World's leading fully open source ERP software that helps you stay in control of your business</p>
-		<a class="button button-primary" href="/get-started.html">Get Started</a>
+<section class='my-5 text-center'>
+	<img class="hero-illustration" src='/assets/foundation/img/hero-illustration-erpnext.png' alt="ERP software for everybody">
+	<h1 class="mt-4">ERP for Everybody</h1>
+	<p class=' w-50 m-auto lead font-weight-normal'>World's leading fully open source ERP software that helps you stay in control of your business</p>
+	<a class="mt-4 btn btn-primary btn-lg" href="/get-started.html">Get Started</a>
+</section>
+<hr class="featurette-divider">
+<section class='my-5 text-center'>
+	<h1>We have got it all covered</h1>
+	<p class=' w-50 m-auto lead font-weight-normal'>ERPNext has all the features to put you in complete control of your business.</p>
+	<img class="mt-4 screenshot" src='/assets/foundation/img/screenshot-main.png' alt="ERPNext desk view">
+</section>
+<hr class="featurette-divider">
+<section class="my-5 text-center">
+	<h1>Industries</h1>
+	<div class="mt-5 row">
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/manufacturing">
+				<img class="grid-images" src="/assets/foundation/img/manufacturing.png" alt="ERP software for manufacturing">
+				<h4 class="mt-3">Manufacturing</h4 class="mt-3">
+			</a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/projects">
+				<img class="grid-images" src="/assets/foundation/img/services.png" alt="ERP software for Services">
+				<h4 class="mt-3">Services</h4 class="mt-3">
+			</a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">
+				<img class="grid-images" src="/assets/foundation/img/retail.png" alt="ERP software for retail">
+				<h4 class="mt-3">Retail</h4 class="mt-3"></a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class=""  href="/docs/user/manual/en/stock">
+				<img class="grid-images" src="/assets/foundation/img/distribution.png" alt="ERP software for Distribution">
+				<h4 class="mt-3">Distribution</h4 class="mt-3"></a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/education">
+				<img class="grid-images" src="/assets/foundation/img/education.png" alt="ERP software for Education">
+				<h4 class="mt-3">Education</h4 class="mt-3"></a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/agriculture">
+				<img class="grid-images" src="/assets/foundation/img/agriculture.png" alt="ERP software for Agriculture">
+				<h4 class="mt-3">Agriculture</h4 class="mt-3"></a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/healthcare">
+				<img class="grid-images" src="/assets/foundation/img/healthcare.png" alt="ERP software for Healthcare">
+				<h4 class="mt-3">Healthcare</h4 class="mt-3"></a>
+		</div>
+		<div class="col-sm-4 col-md-3 col-lg-3 mt4">
+			<a class="" href="/docs/user/manual/en/non_profit">
+				<img class="grid-images" src="/assets/foundation/img/non-profits.png" alt="ERP software for Non-Profits">
+				<h4 class="mt-3">Non Profit</h4 class="mt-3"></a>
+		</div>
 	</div>
 </section>
-<section class='section-padding blue-bg border-top-light text-center'>
-	<div class="container">
-		<h1 class="header-1">We have got it all covered</h1>
-		<p class='intro-copy text-medium text-light'>ERPNext has all the features to put you in complete control of your business.</p>
-		<img class="screenshot" src='/assets/foundation/img/screenshot-main.png' alt="ERPNext desk view">
-	</div>
-</section>
-<section class="section-padding gray-bg border-top-light text-left">
-	<div class="container">
-		<h1 class="header-1 bottom-spacer text-center">Industries</h1>
-			<ul class="list-unstyled grid-of-four">
-			<li class="list-items grid-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/manufacturing">
-					<img class="grid-images" src="/assets/foundation/img/manufacturing.png" alt="ERP software for manufacturing"><span>Manufacturing</span>
-				</a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/projects">
-					<img class="grid-images" src="/assets/foundation/img/services.png" alt="ERP software for Services"><span>Services</span>
-				</a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">
-					<img class="grid-images" src="/assets/foundation/img/retail.png" alt="ERP software for retail"><span>Retail</span></a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes"  href="/docs/user/manual/en/stock">
-					<img class="grid-images" src="/assets/foundation/img/distribution.png" alt="ERP software for Distribution"><span>Distribution</span></a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/education">
-					<img class="grid-images" src="/assets/foundation/img/education.png" alt="ERP software for Education"><span>Education</span></a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/agriculture">
-					<img class="grid-images" src="/assets/foundation/img/agriculture.png" alt="ERP software for Agriculture"><span>Agriculture</span></a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/healthcare">
-					<img class="grid-images" src="/assets/foundation/img/healthcare.png" alt="ERP software for Healthcare"><span>Healthcare</span></a>
-			</li>
-			<li class="list-items">
-				<a class="primary-links grid-boxes" href="/docs/user/manual/en/non_profit">
-				<img class="grid-images" src="/assets/foundation/img/non-profits.png" alt="ERP software for Non-Profits"><span>Non Profit</span></a>
-			</li>
-		</ul>
-	</div>
-</section>
-<section class="section-padding border-top-light">
-	<div class="container">
-	<h1 class="header-1 text-center">Empowering businesses around the world</h1>
-	<p class="intro-copy text-medium text-center text-light">Trusted by more than 3000 companies</p>
-		<div class="bottom-spacer grid-of-three">
-			<div class="box">
+<hr class="featurette-divider">
+<section class="my-5 text-center">
+	<h1>Empowering businesses around the world</h1>
+	<p class="w-50 m-auto lead font-weight-normal">Trusted by more than 3000 companies</p>
+	<div class="mt-5 card-deck">
+		<div class="card">
+			<div class="card-body">
 				<p class="">ERPNext was the most wonderful, minimalist and affordable ERP Environment that my little team (7 employees) vote to buy and use like a Cloud Based Unitary Software.</p>
 				<p class="bold text-muted">Hernan</br>Venezuela</p>
 			</div>
-			<div class="box">
+		</div>
+		<div class="card">
+			<div class="card-body">
 				<p class="">First of all, I would like to thank you very much for the great work you’ve done with this ERP, it is the perfect solution for start-ups, like mine! Keep up the good work!</p>
 				<p class="bold text-muted">Dan Radulescu</br>Romania</p>
 			</div>
-			<div class="box">
+		</div>
+		<div class="card">
+			<div class="card-body">
 				<p class="">The UI and UX are one of the most fluid and highly useable interfaces I have ever seen in an ERP. You make accounting fun! Keep up the amazing work.</p>
 				<p class="bold text-muted">Gladwyn Lewis</br>ERP Consultant, UAE</p>
 			</div>
 		</div>
-		<div class="grid-of-four grid-center">
-			<div class="reviews text-center">
-				<a class="secondary-link" target="_blank" href="https://www.capterra.com/p/164441/ERPNext/">
-					<img alt="captera-erpnext review" src="/assets/foundation/img/captera-bw.png" class="review-img">
-					<img alt-"above 4.5 stars" src="/assets/foundation/img/stars.png" class="stars">
-				</a>
-			</div>
-			<div class="reviews text-center">
+	</div>
+	<div class="mt-5 row">
+		<div class="col-xs-12 col-sm-6 col-md-3">
+			<a class="secondary-link" target="_blank" href="https://www.capterra.com/p/164441/ERPNext/">
+				<img alt="captera-erpnext review" src="/assets/foundation/img/captera-bw.png" class="review-img">
+				<img alt-"above 4.5 stars" src="/assets/foundation/img/stars.png" class="stars">
+			</a>
+		</div>
+		<div class="col-xs-12 col-sm-6 col-md-3">
 			<a class="secondary-link" target="_blank" href="https://www.softwareadvice.com/erp/erpnext-profile/">
 				<img alt="software advice erpnext review" src="/assets/foundation/img/software-advice-bw.png" class="review-img">
 				<img alt="above 4.5 stars" src="/assets/foundation/img/stars.png" class="stars">
 			</a>
-			</div>
-			<div class="reviews text-center">
+		</div>
+		<div class="col-xs-12 col-sm-6 col-md-3">
 			<a class="secondary-link" target="_blank" href="https://www.g2crowd.com/products/erpnext/reviews">
 				<img alt="g2-crowd review" src="/assets/foundation/img/g2-crowd-bw.png" class="review-img">
 				<img alt="above 4.5 stars" src="/assets/foundation/img/stars.png" class="stars">
 			</a>
-			</div>
-			<div class="reviews text-center">
+		</div>
+		<div class="col-xs-12 col-sm-6 col-md-3">
 			<a class="secondary-link" target="_blank" href="https://www.getapp.com/operations-management-software/a/iwebnotes/">
 				<img alt="get app review" src="/assets/foundation/img/getapp-bw.png" class="review-img">
 				<img alt="above 4.5 stars" src="/assets/foundation/img/stars.png" class="stars">
 			</a>
-			</div>
 		</div>
 	</div>
 </section>
-<section class="section-padding border-top-light gray-bg">
-	<div class="container">
-		<div class="text-center">
-			<p class="intro-copy text-medium">ERPNext is both powerful and easy to use</br>What are you waiting for?</p>
-			<a class="button button-primary" href="/get-started.html">Get Started Now</a>
-		</div>
-	</div>
-</section>
-<section class="section-padding community-bg border-top-light text-white">
-	<div class="container">
-		<div class="text-center">
-			<h1 class="header-1">ERPNext Foundation</h1>
-			<p class="intro-copy text-medium">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="/members/details" class="button button-secondary">Become a Member</a>
-		</div>
-	</div>
+<hr class="featurette-divider">
+<section class="my-5 text-center">
+	<h1>ERPNext Foundation</h1>
+	<p class="w-50 m-auto lead font-weight-normal">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="/members/details" class="mt-4 btn btn-secondary btn-lg">Become a Member</a>
 </section>
 {% endblock %}
diff --git a/foundation/www/service-providers.html b/foundation/www/service-providers.html
index 5b1db6f6..53375265 100644
--- a/foundation/www/service-providers.html
+++ b/foundation/www/service-providers.html
@@ -4,11 +4,9 @@
 
 {% macro gold_member(m) %}
 <div class="media {{ 'text-muted' if m.placeholder else '' }}" style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
-	<div class="media-left">
-		<a href="{{ m.route }}">
-			<img class="thumb-small media-object" src="{{ m.image or '/assets/foundation/img/gold.png' }}">
-		</a>
-	</div>
+	<a class="mr-3" href="{{ m.route }}">
+		<img class="img-thumbnail" src="{{ m.image or '/assets/foundation/img/gold.png' }}">
+	</a>
 	<div class="media-body">
 		<h4 class="media-heading">{{ m.title }}</h4>
 		{{ m.introduction }}
@@ -35,7 +33,7 @@
 
 {% block page_content %}
 <section class="gold bottom-spacer-4">
-	<h2 class='media-heading'>Gold Members</h2>
+	<h2>Gold Members</h2>
 	{% for m in gold_members %}
 	{{ gold_member(m) }}
 	{% endfor %}
@@ -46,7 +44,7 @@
 </section>
 
 <section class="silver bottom-spacer-4">
-	<h2 class='media-heading'>Silver Members</h2>
+	<h2>Silver Members</h2>
 	<div class="grid-of-three">
 		{% for m in silver_members %}
 		{{ silver_member(m) }}