diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index d90414ff..4f997c9e 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -32,7 +32,8 @@
 .dark-bg {
   background-color: #2E3338;
 }
-.left-aligned {
+.left-aligned,
+.text-left {
   text-align: left;
 }
 .right-aligned {
@@ -50,6 +51,9 @@
 .text-white {
   color: #fff;
 }
+.text-normal {
+  font-size: 1rem;
+}
 .text-medium {
   font-size: 1.5rem;
 }
@@ -57,7 +61,8 @@
   font-size: 0.5rem;
 }
 .centered {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 .bold {
   font-weight: bold;
@@ -71,6 +76,15 @@
 .list-circle {
   list-style: circle;
 }
+.bullet::before {
+  content: "\2022";
+  display: inline-block;
+  width: 1em;
+  font-size: 1.25rem;
+}
+.half-width {
+  max-width: 50%;
+}
 .border {
   border: 1px solid #d1d8dd;
 }
@@ -83,6 +97,65 @@
 .saturate:hover {
   filter: grayscale(0%);
 }
+/* colors */
+.green-bullet::before {
+  color: #98d85b;
+}
+/* components */
+.grid-of-four,
+.grid-of-three {
+  grid-gap: 2.5rem;
+  display: grid;
+}
+.grid-of-four {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media screen and (min-width: 500px) {
+  .grid-of-four {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 767px) {
+  .grid-of-four {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media screen and (min-width: 991px) {
+  .grid-of-four {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+.grid-of-three {
+  grid-template-columns: repeat(1, 1fr);
+}
+@media screen and (min-width: 500px) {
+  .grid-of-three {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 767px) {
+  .grid-of-three {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.columns {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+@media screen and (min-width: 767px) {
+  .columns {
+    flex-direction: row;
+  }
+}
+.column {
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 767px) {
+  .column {
+    margin: 0;
+  }
+}
 .indicator,
 .indicator-right {
   background: none;
@@ -167,22 +240,23 @@ a:focus,
 a:visited {
   outline: 0;
 }
+.header-1,
+.header-2,
+.header-3 {
+  line-height: 1.025;
+}
 .header-1 {
   font-size: 2.5rem;
-  line-height: 1.025;
 }
 .header-2 {
   font-size: 1.5rem;
-  line-height: 1.025;
 }
 .header-3 {
   font-size: 1rem;
-  line-height: 1.025;
 }
 .navbar {
   padding: 1rem;
   background-color: #fff;
-  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 }
 @media screen and (min-width: 767px) {
   .navbar {
@@ -249,6 +323,9 @@ a:visited {
     padding: 8rem 2.5rem;
   }
 }
+.feature .bullet {
+  margin-bottom: 0.5rem;
+}
 .page {
   padding: 0 1rem;
   border-top: 1px solid #EBEFF2;
@@ -272,56 +349,6 @@ a:visited {
 .list-items:hover {
   box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 }
-.grid-of-four,
-.grid-of-three {
-  grid-gap: 2.5rem;
-  display: grid;
-}
-.grid-of-four {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media screen and (min-width: 500px) {
-  .grid-of-four {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media screen and (min-width: 767px) {
-  .grid-of-four {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media screen and (min-width: 991px) {
-  .grid-of-four {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-.grid-of-three {
-  grid-template-columns: repeat(1, 1fr);
-}
-@media screen and (min-width: 500px) {
-  .grid-of-three {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media screen and (min-width: 767px) {
-  .grid-of-three {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-.two-column,
-.three-column,
-.four-column {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-@media screen and (min-width: 767px) {
-  .two-column,
-  .three-column,
-  .four-column {
-    flex-direction: row;
-  }
-}
 .contact-content {
   max-width: 90%;
 }
@@ -330,14 +357,6 @@ a:visited {
     max-width: 50%;
   }
 }
-.columns {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 767px) {
-  .columns {
-    margin: 0;
-  }
-}
 .countries {
   max-width: 100%;
 }
@@ -806,12 +825,6 @@ textarea.form-control {
   border-color: #5e5ec9;
   text-decoration: none;
 }
-.screenshot,
-.img-responsive {
-  max-width: 800px;
-  margin: auto;
-  width: auto;
-}
 img.blog-cover-image,
 .blog-text img,
 .screenshot {
diff --git a/foundation/public/css/reset.css b/foundation/public/css/reset.css
index 0389a522..761931cd 100644
--- a/foundation/public/css/reset.css
+++ b/foundation/public/css/reset.css
@@ -200,7 +200,7 @@ figure {
 img {
 	vertical-align: middle;
 	border-style: none;
-	width: 100%;
+	max-width: 100%;
 	border-radius: 0.25em;
 }
 
diff --git a/foundation/public/less/base.less b/foundation/public/less/base.less
index 485d6af7..8a9f2f4f 100644
--- a/foundation/public/less/base.less
+++ b/foundation/public/less/base.less
@@ -41,7 +41,8 @@
 	background-color: @text-dark;
 }
 
-.left-aligned {
+.left-aligned,
+.text-left {
 	text-align: left;
 }
 
@@ -65,6 +66,10 @@
 	color: #fff;
 }
 
+.text-normal {
+	font-size: 1rem;
+}
+
 .text-medium {
 	font-size: 1.5rem;
 }
@@ -74,7 +79,8 @@
 }
 
 .centered {
-	margin: 0 auto;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .bold {
@@ -93,6 +99,19 @@
 	list-style: circle;
 }
 
+.bullet {
+	&::before {
+		content: "\2022";
+		display: inline-block;
+		width: 1em;
+		font-size: 1.25rem;
+	}
+}
+
+.half-width {
+	max-width: 50%;
+}
+
 .border {
 	border: @border;
 }
@@ -108,3 +127,65 @@
 		filter: grayscale(0%);
 	}
 }
+
+/* colors */
+
+.green-bullet {
+	&::before {
+		color: @indicator-green;
+	}
+}
+
+/* components */
+
+.grid-of-four,
+.grid-of-three {
+	grid-gap: 2.5rem;
+	display: grid;
+}
+
+.grid-of-four {
+	grid-template-columns: repeat(1, 1fr);
+
+	@media screen and (min-width: @screen-palm) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media screen and (min-width: @screen-xs) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	@media screen and (min-width: @screen-sm) {
+		grid-template-columns: repeat(4, 1fr);
+	}
+}
+
+.grid-of-three {
+	grid-template-columns: repeat(1, 1fr);
+
+	@media screen and (min-width: @screen-palm) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media screen and (min-width: @screen-xs) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+.columns {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+
+	@media screen and (min-width: @screen-xs) {
+		flex-direction: row;
+	}
+}
+
+.column {
+	margin-bottom: 1rem;
+
+	@media screen and (min-width: @screen-xs) {
+		margin: 0;
+	}
+}
diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less
index 1791e836..26d87ae7 100644
--- a/foundation/public/less/erpnext-org-theme.less
+++ b/foundation/public/less/erpnext-org-theme.less
@@ -19,25 +19,27 @@ a {
 	}
 }
 
+.header-1,
+.header-2,
+.header-3 {
+	line-height: 1.025;
+}
+
 .header-1 {
 	font-size: 2.5rem;
-	line-height: 1.025;
 }
 
 .header-2 {
 	font-size: 1.5rem;
-	line-height: 1.025;
 }
 
 .header-3 {
 	font-size: 1rem;
-	line-height: 1.025;
 }
 
 .navbar {
 	padding: 1rem;
 	background-color: #fff;
-	box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 
 	@media screen and (min-width: @screen-xs) {
 		padding: 1rem 2.5rem;
@@ -111,6 +113,10 @@ a {
 	}
 }
 
+.feature .bullet {
+	margin-bottom: 0.5rem;
+}
+
 .page {
 	padding: 0 1rem;
 	border-top: 1px solid @light-border-color;
@@ -137,52 +143,6 @@ a {
 	}
 }
 
-.grid-of-four,
-.grid-of-three {
-	grid-gap: 2.5rem;
-	display: grid;
-}
-
-.grid-of-four {
-	grid-template-columns: repeat(1, 1fr);
-
-	@media screen and (min-width: @screen-palm) {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media screen and (min-width: @screen-xs) {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	@media screen and (min-width: @screen-sm) {
-		grid-template-columns: repeat(4, 1fr);
-	}
-}
-
-.grid-of-three {
-	grid-template-columns: repeat(1, 1fr);
-
-	@media screen and (min-width: @screen-palm) {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media screen and (min-width: @screen-xs) {
-		grid-template-columns: repeat(3, 1fr);
-	}
-}
-
-.two-column,
-.three-column,
-.four-column {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-
-	@media screen and (min-width: @screen-xs) {
-		flex-direction: row;
-	}
-}
-
 .contact-content {
 	max-width: 90%;
 
@@ -191,14 +151,6 @@ a {
 	}
 }
 
-.columns {
-	margin-bottom: 1rem;
-
-	@media screen and (min-width: @screen-xs) {
-		margin: 0;
-	}
-}
-
 .countries {
 	max-width: 100%;
 
@@ -745,13 +697,6 @@ textarea.form-control {
 	text-decoration: none;
 }
 
-.screenshot,
-.img-responsive {
-	max-width: 800px;
-	margin: auto;
-	width: auto;
-}
-
 img.blog-cover-image,
 .blog-text img,
 .screenshot {
diff --git a/foundation/templates/includes/footer/footer.html b/foundation/templates/includes/footer/footer.html
index 9c2f3faa..1c35098e 100644
--- a/foundation/templates/includes/footer/footer.html
+++ b/foundation/templates/includes/footer/footer.html
@@ -1,8 +1,8 @@
 <footer class="dark-bg">
 <div class="footer">
  <div class="container">
-	<div class="four-column left-aligned clearfix">
-		<div class="columns">
+	<div class="columns text-left clearfix">
+		<div class="column">
 			<h3 class="footer-title text-white">Industries</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -31,7 +31,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Foundation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -60,7 +60,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Community</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -90,7 +90,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Documentation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -116,19 +116,19 @@
     </div>
     <div class="footer-end dark-bg text-muted">
         <div class="container">
-            <div class="align-iten-center three-column">
-                <div class="columns">
+            <div class="align-iten-center columns">
+                <div class="column">
                 <p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg" alt="ERPnext Icon">
                     &copy; <span id="year"></span> ERPNext Open Source Software Foundation.</p>
                 </div>
-                <div class="columns">
+                <div class="column">
                     <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="columns">
+                <div class="column">
                     <p>Content licensed under <a class="secondary-link" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a> | <a href="/terms" class="secondary-link">Terms of use</a>.
                     </p>
                 </div>
diff --git a/foundation/www/about.html b/foundation/www/about.html
index e87c4a5c..89259abd 100644
--- a/foundation/www/about.html
+++ b/foundation/www/about.html
@@ -9,7 +9,7 @@
         <section class='top-spacer hero text-center about'>
             <div class="container">
                 <img class="about-img bottom-spacer" src="/assets/foundation/img/community-colored.jpg">
-                <h1 class="header1">ERPNext Foundation</h1>
+                <h1 class="header-1">ERPNext Foundation</h1>
                 <p class="intro-copy text-medium">We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal 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><p class="intro-copy text-medium"> ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the <a href="/faq" class="secondary-link" target="_blank">FAQ</a>.
             </div>
diff --git a/foundation/www/index.html b/foundation/www/index.html
index 4a5b970c..784c241d 100644
--- a/foundation/www/index.html
+++ b/foundation/www/index.html
@@ -9,7 +9,7 @@
         <a class="button button-primary" href="/get-started.html">Get Started</a>
     </div>
 </section>
-<section class="feature gray-bg left-aligned">
+<section class="feature gray-bg text-left">
     <div class="container">
         <h2 class="header-1 bottom-spacer-4 text-center">Industries</h1>
           <ul class="list-unstyled grid-of-four">
@@ -61,8 +61,8 @@
 </section>
 <section class="feature">
     <div class="container">
-        <div class="three-column left-aligned">
-            <div class="columns">
+        <div class="columns text-left">
+            <div class="column">
                 <h1 class="header-2">Events & Meetups</h1>
                 <ul class="bulleted-list list-circle">
                 {# get first three events from portal events doctype #}
@@ -73,7 +73,7 @@
 					{% endfor %}
                 </ul>
             </div>
-            <div class="columns">
+            <div class="column">
                 <h1 class="header-2">Help Us Improve</h1>
                 <ul class="bulleted-list list-circle">
                     <li>
@@ -87,7 +87,7 @@
                     </li>
                 </ul>
             </div>
-            <div class="columns">
+            <div class="column">
                 <h1 class="header-2">Need Help?</h1>
                 <ul class="bulleted-list list-circle">
                     <li>
diff --git a/foundation/www/service-providers.html b/foundation/www/service-providers.html
index 772cd407..b67a19bd 100644
--- a/foundation/www/service-providers.html
+++ b/foundation/www/service-providers.html
@@ -4,42 +4,40 @@
 
 {% 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>
-		<div class="media-body">
-			<h4 class="media-heading">{{ m.title }}</h4>
-			{{ m.introduction }}
-		</div>
+	<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>
+	<div class="media-body">
+		<h4 class="media-heading">{{ m.title }}</h4>
+		{{ m.introduction }}
+	</div>
 </div>
 {% endmacro %}
 
 {% macro silver_member(m) %}
-	<div class="box clickable {{ 'text-muted' if m.placeholder else '' }}"
-		 style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
-		<h4>{{ m.title }}</h4>
-		<p>{{ m.introduction | truncate(140) }}</p>
-	</div>
+<div class="box clickable {{ 'text-muted' if m.placeholder else '' }}"
+	 style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
+	<h4>{{ m.title }}</h4>
+	<p>{{ m.introduction | truncate(140) }}</p>
+</div>
 {% endmacro %}
 
 {% macro show_member(s) %}
-	<div class='individual-member columns'>
-		<h3><a class='secondary-link bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a></h3>
-		<p>
-			{{ s.introduction and s.introduction | truncate(140) }}
-		</p>
-	</div>
+<div class='individual-member column'>
+	<h3><a class='secondary-link bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a></h3>
+	<p>
+	{{ s.introduction and s.introduction | truncate(140) }}
+	</p>
+</div>
 {% endmacro %}
 
 {% block page_content %}
-{% if form_dict.country %}
-{% endif %}
 <section class="gold bottom-spacer-4">
 	<h2 class='media-heading'>Gold Members</h2>
 	{% for m in gold_members %}
-		{{ gold_member(m) }}
+	{{ gold_member(m) }}
 	{% endfor %}
 	{% if has_gold_member %}
 	<p class="top-spacer text-center"><a class='text-muted' href='/members'>
@@ -48,46 +46,41 @@
 </section>
 
 <section class="silver bottom-spacer-4">
-<h2 class='media-heading'>Silver Members</h2>
-<div class="grid-of-three">
-	{% for m in silver_members %}
+	<h2 class='media-heading'>Silver Members</h2>
+	<div class="grid-of-three">
+		{% for m in silver_members %}
 		{{ silver_member(m) }}
-	{% endfor %}
-</div>
+		{% endfor %}
+	</div>
 	{% if has_silver_member %}
-		<p class="top-spacer text-center"><a class='text-muted' href='/members'>
-			Become a Silver Member and get your company featured here</a></p>
+	<p class="top-spacer text-center"><a class='text-muted' href='/members'>
+		Become a Silver Member and get your company featured here</a></p>
 	{% endif %}
 </section>
 <section class="bottom-spacer-4">
 	<h2>Individual Members</h2>
 	<div class="grid-of-three">
 		{% for s in individual_members %}
-			{{ show_member(s) }}
+		{{ show_member(s) }}
 		{% endfor %}
 	</div>
+	{% if has_individual_member %}
+	<p class="top-spacer text-center"><a class='text-muted' href='/members'>
+		Become an Individual Member and get your company featured here</a></p>
+	{% endif %}
 </section>
-{% if form_dict.country %}
-<section class="bottom-spacer-4">
-	<h2>Other Service Providers</h2>
-	<div class="grid-of-three">
-		{% for s in service_providers %}
-			{{ show_member(s) }}
-		{% endfor %}
-	</div>
-</section>
-{% else %}
+{% if not form_dict.country %}
 <section>
 	<h2>Select by country</h2>
-	<div class='four-column flex-wrap'>
-	{% for c in countries %}
-	<div class='countries columns'>
-		<p>
+	<div class='columns flex-wrap'>
+		{% for c in countries %}
+		<div class='countries column'>
+			<p>
 			<a class="secondary-link" href="/service-providers?country={{ c[0] }}">{{ c[0] }} ({{ c[1] }})</a>
-		</p>
+			</p>
+		</div>
+		{% endfor %}
 	</div>
-	{% endfor %}
-</div>
 </section>
 {% endif %}
 {% endblock %}
diff --git a/foundation/www/service_providers.py b/foundation/www/service_providers.py
index d222f324..9a1718ef 100644
--- a/foundation/www/service_providers.py
+++ b/foundation/www/service_providers.py
@@ -56,12 +56,15 @@ def get_context(context):
 		filters['member'] = ('in', individual_members)
 		context.individual_members = frappe.get_all('Service Provider',
 			'title, introduction, `image`, route', filters)
+
+        if context.individual_members:
+                context.has_individual_member = 1
 	else:
-		context.individual_members = [dict(
+		context.individual_members.append(dict(
 			title='Your Company',
 			introduction='Become an invidual member to list here',
 			route='/members'
-		)]
+		))
 
 	if context.form_dict.country:
 		context.title = 'ERPNext Service Providers in {0}'.format(context.form_dict.country)