diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index b8676390..4d0d1c0c 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -37,3 +37,11 @@ a {
 .logo-img {
 	width: var(--unit-3);
 }
+
+.outter-container {
+	max-width: var(--screen-laptop);
+}
+
+.inner-container {
+	max-width: var(--screen-palm);
+}
diff --git a/foundation/public/css/reset.css b/foundation/public/css/reset.css
index c3fd40fa..cb887a2f 100644
--- a/foundation/public/css/reset.css
+++ b/foundation/public/css/reset.css
@@ -38,6 +38,7 @@ body {
 	font-feature-settings: "kern" 1;
 	font-kerning: normal;
 	text-rendering: optimizeLegibility;
+	margin: 0;
 }
 
 [ tabindex = "-1" ]:focus {
diff --git a/foundation/templates/base.html b/foundation/templates/base.html
index 0054b8da..a6089d0d 100644
--- a/foundation/templates/base.html
+++ b/foundation/templates/base.html
@@ -9,29 +9,30 @@
 {% endblock %}
 
 {% block body %}
-<body class="container m0auto page-shadow text-dark-grey" data-path="{{ path }}">
-    {%- block navbar -%}{% include "templates/includes/navbar/navbar.html" %}{%- endblock -%}
-    {% block content %}
-    {{ content }}
-    {% endblock %}
-    {%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
+<body class="bg-light-grey text-dark-grey" data-path="{{ path }}">
+    <div class="outter-container m0auto">
+        {%- block navbar -%}{% include "templates/includes/navbar/navbar.html" %}{%- endblock -%}
+        {% block content %}
+        {{ content }}
+        {% endblock %}
+        {%- block footer -%}{% include "templates/includes/footer/footer.html" %}{%- endblock -%}
 
-    {% 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/js/frappe-web.min.js"></script>
-    {% endblock %}
+        {% 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/js/frappe-web.min.js"></script>
+        {% endblock %}
 
-    {%- for link in web_include_js %}
-    <script type="text/javascript" src="{{ link|abs_url }}"></script>
-    {%- endfor -%}
+        {%- for link in web_include_js %}
+        <script type="text/javascript" src="{{ link|abs_url }}"></script>
+        {%- endfor -%}
 
-    {%- block script %}
+        {%- block script %}
         <script>
-        {% include 'public/js/index.js' %}
+            {% include 'public/js/index.js' %}
         </script>
-    {%- endblock %}
-
+        {%- endblock %}
+</div>
     <!-- csrf_token -->
 </body>
 {% endblock %}
diff --git a/foundation/templates/includes/footer/footer.html b/foundation/templates/includes/footer/footer.html
index 6024f6fa..267d5da6 100644
--- a/foundation/templates/includes/footer/footer.html
+++ b/foundation/templates/includes/footer/footer.html
@@ -1,5 +1,5 @@
-<footer>
-	<div class="border-top flex space-between p4">
+<footer class="bg-white border-top">
+	<div class="inner-container m0auto flex space-between p4">
 		<div >
 			<h3 class="h3 text-black mb1">Industries</h3>
 			<ul class="list-unstyled">
@@ -114,8 +114,8 @@
 			</ul>
 		</div>
 	</div>
-			<div class="p4 border-top">
-				<div class="bottom-spacer">
+			<div class="border-top">
+				<div class=" p4 inner-container m0auto">
 					<span>&copy; <span id="year"></span> ERPNext Open Source Software Foundation. Content licensed under <a  href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a> Read the <a href="/terms" >Terms of use</a>.</span>
 				</div>
 			</div>
diff --git a/foundation/templates/includes/navbar/navbar.html b/foundation/templates/includes/navbar/navbar.html
index b6640e52..83db8afd 100644
--- a/foundation/templates/includes/navbar/navbar.html
+++ b/foundation/templates/includes/navbar/navbar.html
@@ -1,5 +1,5 @@
-<nav class="navbar top-sticky bg-white" role="navigation">
-	<div class="flex space-between align-item-center border-bottom ph4 pv2">
+<nav class="navbar border-bottom top-sticky bg-white" role="navigation">
+	<div class="flex space-between align-item-center m0auto inner-container ph4 pv2">
 		<div class="left flex align-item-center">
 			<a class="logo flex align-item-center pr1" href="{{ url_prefix }}{{ home_page or "/"}}">
 				<img class="logo-img" src="/assets/foundation/img/erpnext-logo.svg" alt="Open Source ERP Software">