diff --git a/takwimu/context_processors.py b/takwimu/context_processors.py
index 3a65cfe1..005152fe 100644
--- a/takwimu/context_processors.py
+++ b/takwimu/context_processors.py
@@ -35,13 +35,9 @@ def takwimu_stories(request):
     stories_trending = []
 
     try:
-        if settings.HURUMAP.get('url') != 'https://takwimu.africa':
-            with open('data/articles.json') as f:
-                stories = json.load(f)
-        else:
-            client = Medium()
-            stories = client.get_publication_posts('takwimu-africa',
-                                                   count=20)
+        client = Medium()
+        stories = client.get_publication_posts('takwimu-africa',
+                                                count=20)
         stories_latest = stories[0:3]
 
         stories_dict = [i.__dict__ for i in stories]
diff --git a/takwimu/settings.py b/takwimu/settings.py
index bc07a1b0..c130261f 100644
--- a/takwimu/settings.py
+++ b/takwimu/settings.py
@@ -28,7 +28,7 @@
                                                     'context_processors'] + [
                                                     'takwimu.context_processors.takwimu_countries',
                                                     'takwimu.context_processors.takwimu_stories',
-                                                    'takwimu.context_processors.sdgs',]
+                                                    'takwimu.context_processors.sdgs']
 
 # -------------------------------------------------------------------------------------
 # HURUmap / Wazimap Config
diff --git a/takwimu/static/css/takwimu.scss b/takwimu/static/css/takwimu.scss
index a3336081..b6b18da8 100644
--- a/takwimu/static/css/takwimu.scss
+++ b/takwimu/static/css/takwimu.scss
@@ -5,13 +5,13 @@
  *
  * NOTE: Please don't make edits here unless super necessary.
  */
-@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800,900');
+@import url('https://fonts.googleapis.com/css?family=Lora:400,700|Muli:400,700,900');
 
-$brand-color-primary: #1f6cc6;
-$brand-color-primary-alt: #074c9c;
-$brand-color-primary-light: #7ab1f2;
-$brand-color-secondary: #1e4a7e;
-$brand-color-dark-alt: #46648c;
+$brand-color-primary: #29a87c;
+$brand-color-primary-alt: #4abc70;
+$brand-color-primary-light: #f6fbfa;
+$brand-color-secondary: #4abc70;
+$brand-color-dark-alt: #8ed3a5;
 $brand-extend-white: #ffffff;
 $brand-extend-light: #f8f9fa;
 $brand-extend-jumbotron: #fafafa;
@@ -19,17 +19,54 @@ $brand-extend-black: #000000;
 $brand-extend-muted: #6c757d;
 $brand-extend-disabled: #ededec;
 
-html, body, h1, h2, h3, h4, h5, h6, p, * {
-  font-family: 'Montserrat', sans-serif;
+html, body, p, * {
+  font-family: 'Muli', sans-serif;
   word-break: break-word;
+  line-height: initial;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Lora', serif;
+  line-height: initial;
+}
+.font-heading {
+  font-family: 'Lora', serif;
+}
+.font-paragraph {
+  font-family: 'Muli', sans-serif;
 }
 
-img {
-  max-width: 100%;
+p, .rich-text {
+  font-size: 20px;
+  line-height: 41px;
+}
+a, .breadcrumb-item {
+  font-size: 18px;
+  line-height: 43px;
+}
+.line-height-md {
+  &, a, .breadcrumb-item, p, .rich-text, * {
+    line-height: 31px;
+  }
+}
+.line-height-sm {
+  &, a, .breadcrumb-item, p, .rich-text, * {
+    line-height: 22px;
+  }
+}
+.line-height-initial {
+  &, a, .breadcrumb-item, p, .rich-text, * {
+    line-height: initial;
+  }
+}
+.display-1, .display-2, .display-3, .display-4 {
+  line-height: initial;
+}
+.anchorjs-link {
+  font-size: inherit;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: bold;
+img {
+  max-width: 100%;
 }
 
 
@@ -76,6 +113,12 @@ a {
 .bg-info {
   background-color: #2da4c7 !important;
 }
+.bg-black {
+  background-color: #000;
+}
+.bg-light {
+  background-color: #f6fbfa;
+}
 // Text Colours
 .text-primary {
   color: $brand-color-primary !important;
@@ -92,15 +135,13 @@ a {
 
 // Button
 .btn {
-  border-radius: 24px;
+  border-radius: 12px;
   padding: .375rem 1.25rem;
   max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.btn-lg {
-  padding: .5rem 1.5rem;
-}
+
 // Button - colours
 .btn-primary {
   background-color: $brand-color-primary;
@@ -134,17 +175,22 @@ a {
     }
   }
 }
+.btn-link {
+  color: $brand-color-primary-alt;
+  &:hover {
+    color: $brand-color-primary;
+  }
+}
 
 .nav-pills.nav-pills-alt .nav-link {
-  color: #929292;
+  color: #4a4a4a;
 }
 .nav-pills.nav-pills-alt .nav-link.active, .nav-pills.nav-pills-alt .show>.nav-link {
   background-color: transparent;
   color: $brand-color-primary;
   border-bottom: 3px $brand-color-primary solid;
   border-radius: 0;
-  color: #4a4a4a;
-  font-weight: 900;
+  color: $brand-extend-black;
 }
 
 
@@ -164,6 +210,28 @@ body {
   background-color: $brand-color-secondary !important;
   border-color: $brand-color-secondary !important;
 }
+.leaflet-container a {
+  font-size: 11px;
+  line-height: initial;
+  color: $brand-color-primary;
+}
+.leaflet-bar a, .leaflet-control-layers-toggle {
+  font-size: initial;
+  line-height: initial;
+}
+
+// Profile
+
+.caption {
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0; padding: 0;
+  margin-bottom: 15px;
+  a {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
 
 
 
@@ -253,12 +321,13 @@ body {
   border-bottom: 5px solid transparent;
   cursor: pointer;
   text-decoration: none;
-  .border-left {
-    border-left: 1px solid rgba(255, 255, 255, 0.25)!important;
+  &.border-left, .border-left {
+    border-left: 1px solid rgba(255, 255, 255, 0.3)!important;
   }
   &:hover, &.active {
     background: $brand-color-dark-alt;
     border-bottom: 5px solid $brand-extend-white;
+    color: $brand-extend-white !important;
     + a div {
       border-left: 1px solid transparent !important;
     }
@@ -267,11 +336,47 @@ body {
     }
   }
   &.active {
-    background: $brand-color-primary;
-    border-bottom: 5px solid transparent;
+    border-bottom: 5px solid $brand-extend-white;
   }
 }
 
+// Support Services Button
+
+.support-services-button:hover {
+  background-color: $brand-color-primary-alt !important;
+}
+  .support-services-button a:hover {
+    text-decoration: none !important;
+    color: $brand-extend-white !important;
+  }
+.support-services-button u {
+  text-decoration: none;
+  border-bottom: 2px solid #fff;
+  display: inline-block;
+}
+
+
+// Updates section
+
+.updates a {
+  font-weight: bold;
+  color: $brand-color-primary;
+  text-decoration: underline;
+}
+
+.updates .col-md-6:hover {
+  background-color: #e8e8e8;;
+}
+.updates .col-md-6:hover + .col div {
+  border-left: 2px dashed transparent!important;
+}
+
+// Country Map SVG
+.country-map.svg {
+  path {
+    fill: $brand-color-primary;
+  }
+}
 
 /* -----------------------------------------
  * Main Navbar
@@ -297,8 +402,11 @@ body {
   }
   .nav-link {
     white-space: nowrap;
+    font-size: 18px;
     svg {
       margin-left: .255em;
+      margin-right: .255em;
+      margin-bottom: -2px;
     }
   }
 
@@ -317,7 +425,7 @@ body {
     position: relative;
     top: -10px; margin-bottom: -10px;
     span {
-      border-bottom: 10px solid $brand-color-primary-alt;
+      border-bottom: 10px solid $brand-color-primary;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
     }
@@ -328,7 +436,7 @@ body {
     display: none;
     position: absolute; left: 0;
     width: 100vw; z-index: 3000;
-    background-color: $brand-color-primary-alt;
+    background-color: $brand-color-primary;
 
     a {
       color: $brand-extend-light;
@@ -368,6 +476,62 @@ body {
 
 }
 
+/* -----------------------------------------------
+ * PAGE: Homepage
+ * ----------------------------------------------- */
+
+// Carousel
+
+#carousel-homepage-hero {
+  line-height: 31px;
+}
+#carousel-homepage-hero .icon-wrap {
+  border-radius: 999px;
+  height: 50px; width: 50px;
+  text-align: center;
+  text-align: center;
+  overflow: hidden;
+}
+  #carousel-homepage-hero .country-flag.svg {
+    height: 50px;
+    width: 50px;
+    opacity: 0.76;
+    mix-blend-mode: screen;
+    filter: saturate(0%);
+  }
+    #carousel-homepage-hero svg#beta {
+      padding: 10px;
+      opacity: 1.0;
+      filter: none;
+      mix-blend-mode: normal;
+      background: #fff;
+    }
+
+#carousel-homepage-hero .carousel-item .btn {
+  background-color: rgba(255, 255, 255, 0.28);
+}
+#carousel-homepage-hero .carousel-item .btn:hover {
+  background-color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+}
+.carousel-indicators li {
+  position: relative;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  width: 10px;
+  height: 10px;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
+  cursor: pointer;
+  border-radius:10px;
+  background-color:white;
+}
+.carousel-indicators .active {
+  background-color: $brand-color-primary-alt;
+}
+
+
 /* -----------------------------------------------
  * PAGE: Profile Page
  * ----------------------------------------------- */
@@ -414,20 +578,22 @@ body {
 
 .dataindicators-nav {
   .nav-pills {
-    background-color: #1f6cc6;
+    background-color: $brand-color-primary;
     .nav-link.active, .show > .nav-link {
-      background-color: transparent;
+      background-color: rgba($color: $brand-extend-light, $alpha: 0.1);
       font-weight: bold;
     }
   }
   .nav-link {
     color: #f0f0f0;
+    line-height: 2;
     &:hover {
-      color: #f0f0f0;;
+      color: #fff;
+      background-color: rgba($color: $brand-extend-light, $alpha: 0.1);
     }
     .fa-eye {
       display: none;
-      margin-left: -2em;
+      margin-left: -35px;
       position: absolute;
     }
     &[aria-selected=true] .fa-eye {
@@ -441,6 +607,7 @@ body {
     .nav-item {
       .nav-link {
         font-size: 14px;
+        line-height: 2;
         border-radius: 0;
         &.active {
           font-weight: bold;
@@ -456,6 +623,11 @@ body {
   }
 }
 
+.dataview-entities {
+  font-size: 80%;
+  line-height: 2;
+}
+
 // Profile Page > Sections List
 
 .profile.page .profilesections-list .sections-list {
@@ -503,9 +675,9 @@ body {
       }
 
       &:hover,&:focus {
-        color: $brand-color-secondary;
+        color: $brand-color-primary;
         svg  {
-          filter: $brand-color-secondary; /* IE6-9 */
+          filter: $brand-color-primary; /* IE6-9 */
           -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
           filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
         }
@@ -615,6 +787,9 @@ body {
 }
 
 
+
+
+
 // Extra small devices (portrait phones, less than 576px)
 // No media query for `xs` since this is the default in Bootstrap
 
@@ -658,4 +833,9 @@ body {
   * during development
   */
   // body { background: grey;}
+
+  // Container fluid max-width:
+  .container {
+    max-width: 1249px;
+  }
  }
diff --git a/takwimu/static/img/bg/africanparliament-detail.jpg b/takwimu/static/img/bg/africanparliament-detail.jpg
new file mode 100644
index 00000000..f3b9b74d
Binary files /dev/null and b/takwimu/static/img/bg/africanparliament-detail.jpg differ
diff --git a/takwimu/static/img/bg/africanparliament-homepage.jpg b/takwimu/static/img/bg/africanparliament-homepage.jpg
new file mode 100644
index 00000000..29b9a6d8
Binary files /dev/null and b/takwimu/static/img/bg/africanparliament-homepage.jpg differ
diff --git a/takwimu/static/img/bg/globe-icon.jpg b/takwimu/static/img/bg/globe-icon.jpg
new file mode 100644
index 00000000..0f9d9eba
Binary files /dev/null and b/takwimu/static/img/bg/globe-icon.jpg differ
diff --git a/takwimu/static/img/bg/parliament.jpg b/takwimu/static/img/bg/parliament.jpg
new file mode 100644
index 00000000..73b11def
Binary files /dev/null and b/takwimu/static/img/bg/parliament.jpg differ
diff --git a/takwimu/static/img/bg/profile-hero-line.png b/takwimu/static/img/bg/profile-hero-line.png
new file mode 100644
index 00000000..db631eeb
Binary files /dev/null and b/takwimu/static/img/bg/profile-hero-line.png differ
diff --git a/takwimu/static/img/icons/a-chart.png b/takwimu/static/img/icons/a-chart.png
new file mode 100644
index 00000000..22cb66ad
Binary files /dev/null and b/takwimu/static/img/icons/a-chart.png differ
diff --git a/takwimu/static/img/icons/a-chart.svg b/takwimu/static/img/icons/a-chart.svg
new file mode 100644
index 00000000..88e0e3a8
--- /dev/null
+++ b/takwimu/static/img/icons/a-chart.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
+        <path d="M14.525 19.664A8.186 8.186 0 1 1 7.051 5.552M21.644 13.458C21.644 6.578 16.067 1 9.186 1v12.458l10.265 7.057a12.397 12.397 0 0 0 2.193-7.057z"/>
+    </g>
+</svg>
diff --git a/takwimu/static/img/icons/a-chart@2x.png b/takwimu/static/img/icons/a-chart@2x.png
new file mode 100644
index 00000000..26badc89
Binary files /dev/null and b/takwimu/static/img/icons/a-chart@2x.png differ
diff --git a/takwimu/static/img/icons/a-chart@3x.png b/takwimu/static/img/icons/a-chart@3x.png
new file mode 100644
index 00000000..82eb6e37
Binary files /dev/null and b/takwimu/static/img/icons/a-chart@3x.png differ
diff --git a/takwimu/static/img/icons/file-paragraph.png b/takwimu/static/img/icons/file-paragraph.png
new file mode 100644
index 00000000..ad412289
Binary files /dev/null and b/takwimu/static/img/icons/file-paragraph.png differ
diff --git a/takwimu/static/img/icons/file-paragraph.svg b/takwimu/static/img/icons/file-paragraph.svg
new file mode 100644
index 00000000..30151607
--- /dev/null
+++ b/takwimu/static/img/icons/file-paragraph.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="square" stroke-width="2">
+        <path d="M1 1h18v21.75H1zM11.875 5.875h3.375M11.875 9.625h3.375M4.75 13.375h10.5M4.75 17.125h10.5"/>
+        <path d="M4.75 5.875h4.125V10H4.75z"/>
+    </g>
+</svg>
diff --git a/takwimu/static/img/icons/file-paragraph@2x.png b/takwimu/static/img/icons/file-paragraph@2x.png
new file mode 100644
index 00000000..f3e8a10b
Binary files /dev/null and b/takwimu/static/img/icons/file-paragraph@2x.png differ
diff --git a/takwimu/static/img/icons/file-paragraph@3x.png b/takwimu/static/img/icons/file-paragraph@3x.png
new file mode 100644
index 00000000..caafd02b
Binary files /dev/null and b/takwimu/static/img/icons/file-paragraph@3x.png differ
diff --git a/takwimu/templates/404.html b/takwimu/templates/404.html
index 9baf9c4a..4ae8468d 100644
--- a/takwimu/templates/404.html
+++ b/takwimu/templates/404.html
@@ -11,8 +11,7 @@ <h2 style="font-size: 60px; font-weight: 800;">404 Not found</h2>
     <div class="container text-center p-5">
       <p style="font-weight: 300; font-size: 30px;">Why not try one of the
         following instead?</p>
-      <div style="width: 70%;" class="d-inline-block p-4 text-uppercase">
-        <a href="{% url 'profiles' %}" class="btn btn-primary float-left mr-5 btn-option">Explore country profiles</a>
+      <div style="width: 70%;" class="d-inline-block p-4">
         <a href="{% url 'home' %}" target="_blank" rel="noopener" class="btn btn-primary float-right btn-option">Go to Home Page</a>
       </div>
 
diff --git a/takwimu/templates/homepage.html b/takwimu/templates/homepage.html
index b3c9d300..fec9b401 100644
--- a/takwimu/templates/homepage.html
+++ b/takwimu/templates/homepage.html
@@ -11,22 +11,11 @@
   {% block header %}
     {% include 'takwimu/_includes/navbar/_index.html' %}
     {% block header_content %}
-      <div class="text-light" style="background: #074c9c url('{% static 'img/bg/header-databycountry.jpg' %}') no-repeat center; background-size: cover;">
-        <div class="text-center py-3">
+      <div style="background: #fff url('{% static 'img/bg/globe-icon.jpg' %}') no-repeat center; background-size: cover;">
+        <div class="text-center py-5" style="background-color: rgba(255,255,255,0.9);">
           <div class="container">
-            <nav aria-label="breadcrumb">
-              <ol class="breadcrumb bg-transparent">
-                <li class="breadcrumb-item">
-                  <a href="/" class="text-light"><u>Home</u></a>
-                </li>
-                <li class="breadcrumb-item active text-light">
-                  Countries profiles
-                </li>
-              </ol>
-            </nav>
-            <h1 class="display-4 text-light font-weight-bold">Find data by
-              Country</h1>
-            <p class="p-4">
+            <h1 class="display-4">Find data by Country</h1>
+            <p>
               All Takwimu data comes with analysis from our expert team, providing you with the insights you need.
             </p>
           </div>
@@ -37,14 +26,7 @@ <h1 class="display-4 text-light font-weight-bold">Find data by
   {% block content_container %}
     <div class="clearfix">
       <div id="slippy-map"></div>
-      <div id="map-div" class="py-4 px-4 mt-3 text-center border" style="position: absolute; top: 50%; left: 30%; border-radius: 2px; width: 700px; height: 201px; background-color: #ffffff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23)">
-        <p class="text-uppercase font-weight-bold">Browse by Map</p>
-        <p>The data view on pages shown by navigating with this map are still <strong>work in progress</strong>. Please treat them as a sneak peak of what to expect in future releases. We'd though still want your <a href="mailto:{{ settings.takwimu.SupportSetting.hello }}" target="_blank" rel="noopener">feedback</a> on them though.</p>
-        <button class="btn btn-primary btn-sm text-uppercase px-4 font-weight-bold" style="border-color: #1f6cc6;"
-                onclick="javascript:$('#map-div').css('display', 'none')">
-          GOT IT
-        </button>
-      </div>
+      
     </div>
     <section class="m-0">
 
@@ -72,24 +54,9 @@ <h1 class="display-4 text-light font-weight-bold">Find data by
     .country-container:nth-of-type(odd) {
       background-color: #fff;
     }
-
     .country-container:nth-of-type(even) {
       background-color: #f4f4f4;
     }
-    .breadcrumb {
-      padding: 1rem;
-    }
-    .breadcrumb-item {
-      padding-left: .1rem;
-      letter-spacing: 0;
-      font-size: 14px;
-    }
-    .breadcrumb-item+.breadcrumb-item::before {
-        display: inline-block;
-        padding-right: .1rem;
-        color: #fff;
-        content: "\00BB";
-    }
   </style>
 {% endblock body %}
 
diff --git a/takwimu/templates/takwimu/_includes/footer.html b/takwimu/templates/takwimu/_includes/footer.html
index 6fdbd121..2f51799c 100644
--- a/takwimu/templates/takwimu/_includes/footer.html
+++ b/takwimu/templates/takwimu/_includes/footer.html
@@ -1,13 +1,12 @@
 {% load staticfiles %}
 {% load datastructuretags %}
 
-<footer class="bg-primary text-light">
+<footer class="bg-black text-light">
   <!-- Footer widgets -->
   <div class="container py-5">
     <!-- Logo -->
     <p class="mb-4 mt-5">
-      <img src="{% static 'img/logo-white-all.png' %}" alt=""
-            style="max-height: 40px;">
+      <img src="{% static 'img/logo-white-all.png' %}" alt="" style="max-height: 40px;">
     </p>
     <div class="underline"></div>
 
@@ -15,14 +14,14 @@
     <div class="row mt-4 mb-2">
 
       <div class="col-lg-6">
-        <h3 class="font-weight-bold">Actionable
+        <h3>Actionable
           <span class="position-relative">
             insights
             <div class="position-absolute"
-                style="background: rgba(255, 255, 255, 0.4); height: 10px; width: 121px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg);">
+                style="background: rgba(255, 255, 255, 0.4); height: 10px; width: 104px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg);">
             </div>
           </span>
-          for African changemakers.
+          for<br/>African changemakers.
         </h3>
 
         <!-- Partner Logos -->
@@ -30,16 +29,13 @@ <h3 class="font-weight-bold">Actionable
           <div class="flex-grow-1">
             <h6 class="mb-0 text-truncate font-weight-light" style="opacity: 0.6;">An initiative by:</h6>
             <div class="d-flex">
-              <a href="http://www.africapractice.com/" target="_blank" rel="noopener"
-                  class="my-2 mr-2 d-flex">
+              <a href="http://www.africapractice.com/" target="_blank" rel="noopener" class="my-2 mr-2 d-flex">
                 <img src="{% static 'img/logos/ap-white.png' %}" alt="africapractice" class="p-3 align-self-center img">
               </a>
-              <a href="https://codeforafrica.org" target="_blank" rel="noopener"
-                  class="m-2 d-flex">
+              <a href="https://codeforafrica.org" target="_blank" rel="noopener" class="m-2 d-flex">
                 <img src="{% static 'img/logos/cfafrica-white.png' %}" alt="Code for Africa" class="p-4 align-self-center img">
               </a>
-              <a href="https://ihub.co.ke/" target="_blank" rel="noopener"
-                  class="m-2 d-flex">
+              <a href="https://ihub.co.ke/" target="_blank" rel="noopener" class="m-2 d-flex">
                 <img src="{% static 'img/logos/ihub-white.png' %}" alt="iHub" class="p-3 align-self-center img">
               </a>
             </div>
@@ -57,11 +53,11 @@ <h6 class="mb-0 pt-0 text-truncate font-weight-light" style="opacity: 0.6;">Supp
 
       <div class="underline d-lg-none my-4 mx-auto"></div>
 
-      <div class="col-lg-6 pr-0" style="border-left: solid 3px #4081ce;">
-        <p style="font-size: 20px; font-weight: bold;">Takwimu provides quality insights and data-driven analysis to empower African development champions.</p>
+      <div class="col-lg-6 pr-0" style="border-left: solid 3px #4abc70;">
+        <p class="line-height-md">Takwimu provides quality insights and data-driven analysis to empower African development champions.</p>
         <div class="underline"></div>
 
-        <p class="pt-4" style="font-size: 16px"><span style="opacity: 0.6;">Explore data and analysis by</span> <a href="/profiles">country</a>, <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">topic</a> <span style="opacity: 0.6;">, and</span> <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">SDG indicator</a><span style="opacity: 0.6;">, discover</span> <a href="https://medium.com/takwimu-africa" target="_blank" rel="noopener">expert insights</a> <span style="opacity: 0.6;">on key development issues, and</span> <a href="/about">see how we created Takwimu</a><span style="opacity: 0.6;">.</span>
+        <p class="pt-4 line-height-md" style="font-size: 16px"><span style="opacity: 0.6;">Explore data and analysis by</span> <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">country</a>, <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">topic</a> <span style="opacity: 0.6;">, and</span> <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">SDG indicator</a><span style="opacity: 0.6;">, discover</span> <a href="https://medium.com/takwimu-africa" target="_blank" rel="noopener">expert insights</a> <span style="opacity: 0.6;">on key development issues, and</span> <a href="/about">see how we created Takwimu</a><span style="opacity: 0.6;">.</span>
         </p>
       </div> <!-- /.col-lg-6 -->
 
@@ -70,15 +66,15 @@ <h6 class="mb-0 pt-0 text-truncate font-weight-light" style="opacity: 0.6;">Supp
   </div>
 
   <!-- Footer Nav -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary-alt font-weight-bold" style="font-size: 14px">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-black" style="font-size: 14px">
     <div class="container py-2 d-flex justify-content-between">
 
       <ul class="navbar-nav flex-row mx-auto mx-md-0">
-        <li class="nav-item navbar-text">Stay in touch with us:</li>
+        <li class="nav-item navbar-text"><p class=" mb-0">Stay in touch with us:</p></li>
         <li class="nav-item ml-2 px-2 my-2 border-right">
           <a class="nav-link py-0" href="mailto:{{ settings.takwimu.SupportSetting.hello }}"
               target="_blank">
-            <i class="fa fa-at fa-fw"></i>
+            <i class="fa fa-at fa-fw fa-xs"></i>
           </a>
         </li>
         {% to_list 'twitter' 'facebook' 'medium' 'linkedin' as social_medias %}
@@ -87,7 +83,7 @@ <h6 class="mb-0 pt-0 text-truncate font-weight-light" style="opacity: 0.6;">Supp
             <li class="nav-item px-2 my-2 {% if not forloop.last %}border-right{% endif %}">
               <a class="nav-link py-0" href="{{ settings.takwimu.SocialMediaSetting|object_value:social_media }}"
                 target="_blank" rel="noopener">
-                <i class="fab fa-{{ social_media }} fa-fw"></i>
+                <i class="fab fa-{{ social_media }} fa-fw fa-xs"></i>
               </a>
             </li>
           {% endif %}
@@ -100,7 +96,7 @@ <h6 class="mb-0 pt-0 text-truncate font-weight-light" style="opacity: 0.6;">Supp
           rel="noopener">CC by 4.0</a>
       </span>
 
-      <ul class="navbar-nav flex-row text-uppercase mx-auto mx-lg-0">
+      <ul class="navbar-nav flex-row small mx-auto mx-lg-0">
         <li class="nav-item mx-2 mx-lg-0">
           <a class="nav-link" href="/legal">Terms of Use</a>
         </li>
@@ -122,7 +118,7 @@ <h6 class="mb-0 pt-0 text-truncate font-weight-light" style="opacity: 0.6;">Supp
   footer .underline {
     width: 79px;
     height: 1px;
-    border: solid 1px #4081ce;
+    border: solid 1px #4abc70;
   }
   footer .border-right {
     border-right-color: rgba(255,255,255,0.2) !important;
diff --git a/takwimu/templates/takwimu/_includes/homepage/carousel_item_detail.html b/takwimu/templates/takwimu/_includes/homepage/carousel_item_detail.html
index c0110476..e46ce184 100644
--- a/takwimu/templates/takwimu/_includes/homepage/carousel_item_detail.html
+++ b/takwimu/templates/takwimu/_includes/homepage/carousel_item_detail.html
@@ -2,17 +2,17 @@
 <div class="carousel-item p-5 {% if forloop.first %}active{% endif %}">
 {% with country=country|slugify %}
   <div>
-    <div class="icon-wrap float-right bg-info">
-      <img src="{% static 'img/flags/'|add:country|add:'.svg' %}" class="svg" id="{{ country }}"/>
+    <div class="icon-wrap float-right bg-primary-alt">
+      <img src="{% static 'img/flags/'|add:country|add:'.svg' %}" class="country-flag svg" id="{{ country }}"/>
     </div>
-    <p class="text-uppercase" style="font-weight: 400; font-size:13px;">
+    <p style="font-size:13px;">
       {% if country == 'beta' %}
       News
       {% else %}
       New Country
       {% endif %}
     </p>
-    <h2 style="font-weight: 600;">
+    <h2>
       {% if country == 'beta' %}
       We'd love to hear your feedback!
       {% else %}
@@ -28,7 +28,7 @@ <h2 style="font-weight: 600;">
       {% endif %}
       </p>
     <p>
-      <a class="btn btn-info px-4 text-uppercase" style="font-size: 80%; height: 44px; line-height: 2.4"
+      <a class="btn btn-success px-4 py-1" style="font-size: 80%; line-height: 2.4;"
           {% if country == 'beta' %}
           href="mailto:{{ settings.takwimu.SupportSetting.support }}" target="_blank"
           {% else %}
@@ -39,8 +39,8 @@ <h2 style="font-weight: 600;">
         {% else %}
         View Country Profile
         {% endif %}
-        <img class="border-0" src="{% static 'img/icons/button-arrow.svg' %}" alt="button arrow"
-            style="height:15px; width: 23px; box-shadow: none; object-fit: contain;">
+        <img class="border-0 svg pt-1 ml-1" src="{% static 'img/icons/button-arrow.svg' %}" alt="button arrow"
+            style="height:12px;">
       </a>
     </p>
   </div>
diff --git a/takwimu/templates/takwimu/_includes/homepage/hero.html b/takwimu/templates/takwimu/_includes/homepage/hero.html
index dcb2f1a6..070f0a27 100644
--- a/takwimu/templates/takwimu/_includes/homepage/hero.html
+++ b/takwimu/templates/takwimu/_includes/homepage/hero.html
@@ -1,37 +1,30 @@
 {% load staticfiles cache %}
 {% cache 600  hero %}
-<div class="text-light" style="background: #074c9c url('{% static 'img/bg/homepage-hero.jpg'%}') no-repeat center; background-size: cover;">
-  <div class="py-5" style="background-color: rgba(7, 76, 156, 0.8)">
-    <div class="container">
+<div style="background: #fff url('{% static 'img/bg/africanparliament-homepage.jpg'%}') no-repeat right bottom; background-size: 100%;">
+  <div class="py-5" style="background-image: linear-gradient(135deg, #fff, rgba(255,255,255,0.8), transparent);">
+    <div class="container mt-3">
       <div class="row align-items-center">
         <div class="col-md-6 col-lg-8">
-          <h1 class="font-weight-regular display-4">
-            <span style="font-weight: 800;">Actionable</span>
-            <span class="position-relative">
-              insights
-              <div class="position-absolute"
-                  style="background: rgba(255, 255, 255, 0.4); height: 20px; width: 223px; bottom: 5px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg);">
-              </div>
-            </span> for African
-            <span style="font-weight: 800;">changemakers</span>
+          <h1 class="font-weight-bold display-4">
+            Actionable insights for African changemakers
           </h1>
+          <p>Takwimu provides quality insights and data-driven analysis on Human Development Indicators across 10 African countries.</p>
+          <p class="line-height-md" style="font-size: 16px"><span style="opacity: 0.6;">Explore data and analysis by</span> <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">country</a>, <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">topic</a> <span style="opacity: 0.6;">, and</span> <a href="#" data-toggle="tooltip" data-placement="top" title="Coming Soon">SDG indicator</a><span style="opacity: 0.6;">, discover</span> <a href="https://medium.com/takwimu-africa" target="_blank" rel="noopener">expert insights</a> <span style="opacity: 0.6;">on key development issues, and</span> <a href="/about">see how we created Takwimu</a><span style="opacity: 0.6;">.</span>
+          </p>
           <p class="mt-2">
-            <a href="/about/" class="btn btn-outline-light text-uppercase font-weight-bold my-2 mr-3 py-3 px-5 " style="font-size: 80%; border-radius: 30px;">
-              Find out more
+            <a href="/about/" class="btn btn-primary font-weight-bold my-2 mr-3 pt-2 pb-2 px-5">
+              Find out more <i class="fas fa-caret-right fa-lg ml-3"></i>
             </a>
-            <button type="button" class="btn btn-outline-light btn-alt text-uppercase font-weight-bold my-2 py-3 px-5 "
-                data-toggle="modal" data-target="#videoModal" style="font-size: 80%; border-radius: 30px;">
-              <i class="fas fa-play mr-2"></i> Watch the video
-            </button>
           </p>
           <hr class="d-md-none border-light"/>
         </div>
 
+        {% comment %}
         <div class="col-md-6 col-lg-4">
           <div id="carousel-homepage-hero"
                data-toggle="carousel"
-               class="carousel slide bg-info shaddow"
-               style="height: 425px">
+               class="carousel slide bg-primary text-light"
+               style="min-height: 510px;">
             <ol class="carousel-indicators">
               <li data-target="#carousel-homepage-hero" data-slide-to="0" class="active"></li>
               <li data-target="#carousel-homepage-hero" data-slide-to="1"></li>
@@ -47,58 +40,10 @@ <h1 class="font-weight-regular display-4">
             </div>
           </div>
         </div>
+        {% endcomment %}
       </div>
     </div>
   </div>
 </div>
 
-<style>
-  #carousel-homepage-hero .icon-wrap {
-    border-radius: 999px;
-    height: 50px; width: 50px;
-    text-align: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
-    text-align: center;
-    overflow: hidden;
-  }
-    #carousel-homepage-hero svg {
-      height: 50px;
-      width: 50px;
-      opacity: 0.76;
-      mix-blend-mode: screen;
-      filter: saturate(0%);
-    }
-      #carousel-homepage-hero svg#beta {
-        padding: 10px;
-        opacity: 1.0;
-        filter: none;
-        mix-blend-mode: normal;
-        background: #fff;
-      }
-
-  #carousel-homepage-hero .carousel-item .btn {
-    background-color: rgba(255, 255, 255, 0.28);
-  }
-  #carousel-homepage-hero .carousel-item .btn:hover {
-    background-color: rgba(255, 255, 255, 0.6);
-    border-color: transparent;
-  }
-  .carousel-indicators li {
-    position: relative;
-    -ms-flex: 0 1 auto;
-    flex: 0 1 auto;
-    width: 10px;
-    height: 10px;
-    margin-right: 3px;
-    margin-left: 3px;
-    text-indent: -999px;
-    cursor: pointer;
-    border-radius:10px;
-    background-color:white;
-  }
-  .carousel-indicators .active {
-    background-color: #005e79;
-}
-</style>
-
 {% endcache %}
diff --git a/takwimu/templates/takwimu/_includes/navbar/_dropdown.html b/takwimu/templates/takwimu/_includes/navbar/_dropdown.html
index 588bc57e..156a323d 100644
--- a/takwimu/templates/takwimu/_includes/navbar/_dropdown.html
+++ b/takwimu/templates/takwimu/_includes/navbar/_dropdown.html
@@ -14,10 +14,12 @@
 
     <!-- Clickable title and a description -->
     <div class="col-lg-3 text-center text-lg-right px-4 px-lg-5">
-      <h2 class="font-weight-bold mt-lg-1 mb-lg-4">
-        <a href="{% block dropdown_url %}#{% endblock %}">{% block dropdown_title %}Some title{% endblock %}</a>
-      </h2>
-      <p class="font-weight-light">{% block dropdown_desc %}Lorem ipsum{% endblock %}</p>
+      <a href="{% block dropdown_url %}#{% endblock %}">
+        <h1 class="mt-lg-1 mb-lg-4">
+          {% block dropdown_title %}Some title{% endblock %}
+        </h1>
+      </a>
+      <p>{% block dropdown_desc %}Lorem ipsum{% endblock %}</p>
     </div>
 
     <!-- Divider -->
diff --git a/takwimu/templates/takwimu/_includes/navbar/_index.html b/takwimu/templates/takwimu/_includes/navbar/_index.html
index 0a6fae23..fefda301 100644
--- a/takwimu/templates/takwimu/_includes/navbar/_index.html
+++ b/takwimu/templates/takwimu/_includes/navbar/_index.html
@@ -4,56 +4,47 @@
 {% cache 600 navbar %}
 <!-- Primary Navbar -->
 <nav class="main-nav navbar navbar-expand-lg navbar-dark py-0 sticky-top bg-primary shadow"
-    style="min-height:72px; z-index: 9999;">
+    style="min-height:101px; z-index: 9999;">
   <div class="container">
-    <a class="navbar-brand" href="/">
-      <img class="pl-4" src="{% static 'img/logo-white-all.png' %}" style="max-height: 22px;">
+    <a class="navbar-brand mr-5" href="/">
+      <img src="{% static 'img/logo-white-all.png' %}" style="max-height: 22px;">
       <span class="badge badge-pill badge-primary">beta</span>
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
       aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
+    <div class="collapse navbar-collapse mt-1" id="navbarNav">
       <ul class="navbar-nav ml-3 mr-auto">
         <li class="nav-item">
-          <a class="nav-link dropdown-toggle text-white text-uppercase font-weight-bold p-3 py-lg-4"
-               href="#" role="button">
-            Country Profiles
-          </a>
-          {% include 'takwimu/_includes/navbar/profiles.html' with button_name="Country Profiles" %}
-        </li>
-        <li class="nav-item">
-          <a class="nav-link dropdown-toggle text-white text-uppercase font-weight-bold px-3 py-4"
+          <a class="nav-link dropdown-toggle text-white p-3 py-lg-4"
               href="#" role="button">
-            Data by Topic
+            <img class="svg" src="{% static 'img/icons/file-paragraph.svg' %}" alt=""> Country Analysis
           </a>
-          {% include 'takwimu/_includes/navbar/topics.html' with button_name="Topics" %}
+          {% include 'takwimu/_includes/navbar/profiles.html' with button_name="Country Profiles" %}
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle text-white text-uppercase font-weight-bold p-3 py-lg-4"
+        <!-- <li class="nav-item">
+          <a class="nav-link dropdown-toggle text-white px-3 py-4"
               href="#" role="button">
-            Our Services
+            <img class="svg" src="{% static 'img/icons/a-chart.svg' %}" alt=""> Data by Topic
           </a>
-          {% include 'takwimu/_includes/navbar/support_services.html' with button_name="Our Services" %}
-        </li>
-        <li class="nav-item">
-            <a class="nav-link text-white text-uppercase font-weight-bold p-3 py-lg-4"
-                href="/contact-us" role="button" aria-expanded="false">
-              Contact Us
-            </a>
-        </li>
+        </li> -->
+        
       </ul>
       <!-- Border on mobile -->
       <div class="border-top d-lg-none mx-2 mt-2" style="border-top-color: rgba(222,226,230,0.5) !important;"></div>
 
       <ul class="navbar-nav flex-row">
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle text-uppercase font-weight-bold p-3 py-lg-4"
-              href="#" role="button">
+        <li class="nav-item">
+          <a class="nav-link p-3 py-lg-4" href="/about" role="button">
             About
           </a>
-          {% include 'takwimu/_includes/navbar/about.html' with button_name="About Us" %}
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link p-3 py-lg-4" href="/contact-us" role="button">
+            Contact Us
+          </a>
         </li>
 
         <li class="nav-item dropdown ml-auto">
@@ -117,10 +108,14 @@
       border-bottom: solid 2px #ffffff!important;
       color: #fff;
   }
-  input[type="text"]#search-takwimu:focus {
-      box-shadow: none;
-      outline: 0 none;
-  }
+    input[type="text"]#search-takwimu:focus {
+        box-shadow: none;
+        outline: 0 none;
+    }
+    input[type="text"]#search-takwimu::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
   #search-takwimu::-webkit-input-placeholder,
   #search-takwimu:-moz-placeholder  {
       color: rgba(255, 255, 255, 0.45);
diff --git a/takwimu/templates/takwimu/_includes/navbar/about.html b/takwimu/templates/takwimu/_includes/navbar/about.html
deleted file mode 100644
index 12d57646..00000000
--- a/takwimu/templates/takwimu/_includes/navbar/about.html
+++ /dev/null
@@ -1,72 +0,0 @@
-{% extends 'takwimu/_includes/navbar/_dropdown.html' %}
-
-{% load staticfiles %}
-{% load datastructuretags %}
-
-{% block dropdown_id %}nav-about{% endblock %}
-{% block dropdown_url %}/about{% endblock %}
-
-{% block dropdown_title %}About Takwimu{% endblock %}
-{% block dropdown_desc %}Takwimu provides quality insights and data-driven analysis to empower African development champions.{% endblock %}
-
-{% block dropdown_content %}
-<div class="row pl-4 pb-5" style="width: 100%;">
-  <div class="col-sm-4">
-    <ul class="font-weight-bold" style="color:#7ab1f2">
-      <li class="pb-2" type="disc"><a href="{% url 'about_page' %}">About Takwimu</a></li>
-      <li class="pb-2" type="disc"><a href="/about/support-services">Our Services</a></li>
-      <li class="pb-2" type="disc"><a href="/contact-us">Contact Us</a></li>
-      <li class="mb-0 pb-3" type="disc"><a href="/dashboard">Dashboard (Admin)</a></li>
-    </ul>
-  </div>
-  <div class="col-sm-8">
-
-    <h5 class="font-weight-bold pb-2">Follow us</h5>
-    <div class="d-inline-block py-3 px-2 rounded social-icons" style="background-color:#1455a0;">
-      <ul class="navbar-nav">
-        {% to_list 'twitter' 'facebook' 'medium' 'slack' 'linkedin' as social_medias %}
-        {% for social_media in social_medias %}
-          {% if settings.takwimu.SocialMediaSetting|object_value:social_media %}
-            <li class="nav-item">
-              <a class="nav-link py-0 px-3 {% if not forloop.last %} border-right {% endif %}" 
-                href="{{ settings.takwimu.SocialMediaSetting|object_value:social_media }}" target="_blank" rel="noopener">
-                <i class="fab fa-{{ social_media }} fa-fw"></i>
-              </a>
-            </li>
-          {% endif %}
-        {% endfor %}
-      </ul>
-    </div>
-
-    <div class="partner-logos partner-logos-navbar mt-5 d-flex align-items-stretch">
-      <div class="flex-grow-1">
-        <h5 class="mb-0 text-truncate font-weight-bold">An initiative by</h5>
-        <div class="d-flex">
-          <a href="http://www.africapractice.com/" target="_blank" rel="noopener"
-              class="my-2 mr-2 px-3 py-2 d-flex">
-            <img src="{% static 'img/logos/ap-white.png' %}" alt="africapractice" class="align-self-center">
-          </a>
-          <a href="https://codeforafrica.org" target="_blank" rel="noopener"
-              class="m-2 px-3 py-2 d-flex">
-            <img src="{% static 'img/logos/cfafrica-white.png' %}" alt="Code for Africa" class="align-self-center">
-          </a>
-          <a href="https://ihub.co.ke/" target="_blank" rel="noopener"
-              class="m-2 px-3 py-2 d-flex">
-            <img src="{% static 'img/logos/ihub-white.png' %}" alt="iHub" class="align-self-center">
-          </a>
-        </div>
-
-      </div>
-
-      <div class="ml-2">
-        <h5 class="mb-0 pt-0 text-truncate font-weight-bold">Supported by</h5>
-        <a href="https://www.gatesfoundation.org" target="_blank" rel="noopener"
-          class="my-2 px-3 d-flex align-items-center justify-content-center">
-          <img src="{% static 'img/logos/bmgf-white.png' %}" alt="Bill and Melinda Gates Foundation" style="width: 200px;">
-        </a>
-      </div>
-    </div> <!-- /.partner-logos -->
-  </div>
-</div>
-
-{% endblock %}
diff --git a/takwimu/templates/takwimu/_includes/navbar/newsletter.html b/takwimu/templates/takwimu/_includes/navbar/newsletter.html
deleted file mode 100644
index 2d850ee4..00000000
--- a/takwimu/templates/takwimu/_includes/navbar/newsletter.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends 'takwimu/_includes/navbar/_dropdown.html' %}
-
-{% load staticfiles %}
-
-{% block dropdown_id %}nav-newsletter{% endblock %}
-
-{% block dropdown_title %}Sign Up{% endblock %}
-{% block dropdown_desc %}Subscribe if you’d like to be updated when new data or content becomes available.{% endblock %}
-
-{% block dropdown_content %}
-
-  <p>Newsletter sign up</p>
-
-{% endblock %}
\ No newline at end of file
diff --git a/takwimu/templates/takwimu/_includes/navbar/search.html b/takwimu/templates/takwimu/_includes/navbar/search.html
index 9c7b2731..6d636a04 100644
--- a/takwimu/templates/takwimu/_includes/navbar/search.html
+++ b/takwimu/templates/takwimu/_includes/navbar/search.html
@@ -8,7 +8,6 @@
     <form action="{% url 'search' %}" method="get">
         <div class="input-group col-6 mx-auto">
             <input type="text" class="form-control border-0 py-3 px-5 text-center"  name="q" value="{{ query }}" id="search-takwimu" placeholder="Search Takwimu">
-
             <a href="{% url 'search' %}" class="btn btn-search">
                 <i class="fa fa-search"></i>
             </a>
diff --git a/takwimu/templates/takwimu/_includes/navbar/support_services.html b/takwimu/templates/takwimu/_includes/navbar/support_services.html
deleted file mode 100644
index 50446bbb..00000000
--- a/takwimu/templates/takwimu/_includes/navbar/support_services.html
+++ /dev/null
@@ -1,67 +0,0 @@
-{% extends 'takwimu/_includes/navbar/_dropdown.html' %}
-
-{% load staticfiles %}
-{% load datastructuretags %}
-
-{% block dropdown_id %}nav-support-services{% endblock %}
-{% block dropdown_url %}/about/support-services{% endblock %}
-
-{% block dropdown_title %}Our Services{% endblock %}
-{% block dropdown_desc %}Takwimu offers both free and premium services designed to help our users access and use high quality data and analysis.{% endblock %}
-
-{% block dropdown_content %}
-  <div class="row w-100">
-    <div class="col-4">
-      <h5 class="font-weight-bold pb-2">Standard Services</h5>
-      <ul class="font-weight-bold"style="color:#7ab1f2;">
-        {% for service in settings.takwimu.SupportServicesSetting.services %}
-          {% if service.value.category == "Standard" %}
-            <li class="pb-2" type="disc"><a href="/about/support-services">For {{ service.value.title }}</a></li>
-          {% endif %}
-        {% endfor %}
-      </ul>
-    </div>
-    <div class="col-4">
-      <h5 class="font-weight-bold pb-2">Premium Services</h5>
-      <ul class="font-weight-bold"style="color:#7ab1f2;">
-        {% for service in settings.takwimu.SupportServicesSetting.services %}
-          {% if service.value.category == "Premium" %}
-            <li class="pb-2" type="disc"><a href="/about/support-services">{{ service.value.title }}</a></li>
-          {% endif %}
-        {% endfor %}
-      </ul>
-    </div>
-
-    <div class="col-4">
-      <h5 class="font-weight-bold pb-2">Help and support</h5>
-      <div class="mt-2 d-inline-block py-3 px-2 rounded social-icons" style="background-color:#1455a0;">
-        <ul class="navbar-nav">
-        {% to_list 'twitter' 'facebook' 'medium' 'slack' 'linkedin' as social_medias %}
-        {% for social_media in social_medias %}
-          {% if settings.takwimu.SocialMediaSetting|object_value:social_media %}
-            <li class="nav-item">
-              <a class="nav-link py-0 px-3 {% if not forloop.last %} border-right {% endif %}"
-		            href="{{ settings.takwimu.SocialMediaSetting|object_value:social_media }}" target="_blank" rel="noopener">
-                <i class="fab fa-{{ social_media }} fa-fw"></i>
-              </a>
-            </li>
-          {% endif %}
-        {% endfor %}
-        </ul>
-      </div>
-
-      <div class="mt-2 d-inline-block pt-2">
-        <ul class="font-weight-bold pl-3" style="color:#7ab1f2;">
-          <li class="pb-2" type="disc"><a href="/contact-us">General Enquiries</a></li>
-          <li class="pb-2" type="disc">
-            <a href="#" target="_blank">FAQ</a>
-          </li>
-          <li class="pb-2" type="disc">
-            <a href="mailto:{{ settings.takwimu.SupportSetting.support }}" target="_blank" rel="noopener">Technical Support Desk</a>
-          </li>
-          <li class="pb-2" type="disc"><a href="/about">About Us</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-{% endblock %}
diff --git a/takwimu/templates/takwimu/_includes/navbar/topics.html b/takwimu/templates/takwimu/_includes/navbar/topics.html
index 17eaba06..407a05b5 100644
--- a/takwimu/templates/takwimu/_includes/navbar/topics.html
+++ b/takwimu/templates/takwimu/_includes/navbar/topics.html
@@ -15,8 +15,8 @@
 {% block dropdown_content %}
 <div class="row w-100">
     <div class="col-4">
-      <h5 class="font-weight-bold pb-2">Key Topics</h5>
-      <ul class="font-weight-bold" style="color:#7ab1f2;">
+      <h4 class="pb-2">Key Topics</h4>
+      <ul>
         <div class="nav flex-column" id="profile-sections-tab" role="tablist">
             {% for section in sections %}
             <li class="pb-1" type="disc">
@@ -33,8 +33,8 @@ <h5 class="font-weight-bold pb-2">Key Topics</h5>
       </ul>
     </div>
     <div class="col-8">
-      <h5 class="font-weight-bold pb-2">Sustainable Development Goals</h5>
-      <div class="row" style="color:#7ab1f2;">
+      <h4 class="pb-2">Sustainable Development Goals</h4>
+      <div class="row">
         {% for sdg in sdgs %}
             <div class="col-2 mx-0 p-1 grayscale">
             {% if forloop.counter <= 6 %}
diff --git a/takwimu/templates/takwimu/_includes/partners.html b/takwimu/templates/takwimu/_includes/partners.html
index 40917adf..e927aef3 100644
--- a/takwimu/templates/takwimu/_includes/partners.html
+++ b/takwimu/templates/takwimu/_includes/partners.html
@@ -1,7 +1,7 @@
 {% load staticfiles %}
 
-<section class="partners container py-5 text-center" style="max-width: 800px;">
-  <h1 class="display-4 font-weight-bold">The Partnership</h1>
+<section class="partners container py-5 my-3 text-center" style="max-width: 800px;">
+  <h1>The Partnership</h1>
   <p>africapractice, Code for Africa and iHub came together to create Takwimu
   </p>
   <div class="row align-items-center pt-4">
@@ -15,10 +15,11 @@ <h1 class="display-4 font-weight-bold">The Partnership</h1>
       <img src="{% static 'img/logos/ihub-black.png' %}" alt="iHub">
     </a>
   </div>
-  <p class="pt-4 pb-2">Supported by:</p>
-  <div class="">
-    <a href="https://www.gatesfoundation.org" target="_blank" rel="noopener" class="p-4">
-      <img src="{% static 'img/logos/bmgf.png' %}" alt="Bill and Melinda Gates Foundation">
+  <h5 class="mb-4 mt-5">Supported by:</h5>
+  <div>
+    <a href="https://www.gatesfoundation.org" target="_blank" rel="noopener">
+      <img src="{% static 'img/logos/bmgf.png' %}" alt="Bill and Melinda Gates Foundation"
+          style="max-width: 220px;">
     </a>
   </div>
 </section>
diff --git a/takwimu/templates/takwimu/_includes/profile/country_profile_downloader.html b/takwimu/templates/takwimu/_includes/profile/country_profile_downloader.html
index b8e7ae03..66281f84 100644
--- a/takwimu/templates/takwimu/_includes/profile/country_profile_downloader.html
+++ b/takwimu/templates/takwimu/_includes/profile/country_profile_downloader.html
@@ -1,22 +1,18 @@
 {% load staticfiles %}
 
 {% if profile_page.document %}
-<a class="btn btn-primary btn-sm text-uppercase px-4 py-2" href="{{ profile_page.document.url }}"
-  role="button">
-  Download full country profile
-  <span class="border-left pl-2 ml-2">
-    <img src="{% static "img/icons/icon-download.svg" %}">
-  </span>
-</a>
-{% else %}
-<!-- Wrapper is required for disabled elements to show tooltips -->
-<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="top" title="Coming Soon">
-  <a class="btn btn-primary btn-sm text-uppercase px-4 py-2 disabled" href="#"
-    role="button" style="pointer-events: none;">
+  <a class="btn btn-primary btn-sm px-4 py-2" href="{{ profile_page.document.url }}"
+    role="button">
     Download full country profile
-    <span class="border-left pl-2 ml-2">
-      <img src="{% static "img/icons/icon-download.svg" %}">
-    </span>
+    <img src="{% static 'img/icons/icon-download.svg' %}" class="svg ml-3">
   </a>
-</span>
+{% else %}
+  <!-- Wrapper is required for disabled elements to show tooltips -->
+  <span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="top" title="Coming Soon">
+    <a class="btn btn-primary btn-sm text-uppercase px-4 py-2 disabled" href="#"
+      role="button" style="pointer-events: none;">
+      Download full country profile
+      <img src="{% static 'img/icons/icon-download.svg' %}" class="svg ml-3">
+    </a>
+  </span>
 {% endif %}
\ No newline at end of file
diff --git a/takwimu/templates/takwimu/_includes/profile/country_section.html b/takwimu/templates/takwimu/_includes/profile/country_section.html
index e1ad4544..404e64af 100644
--- a/takwimu/templates/takwimu/_includes/profile/country_section.html
+++ b/takwimu/templates/takwimu/_includes/profile/country_section.html
@@ -3,25 +3,19 @@
   <div class="container pt-4">
     <div class="row">
       <div class="col-4">
-        <img class=" border-light mr-2"
+        <img class="svg border-light mr-2 country-map"
              src={% with 'img/maps/'|add:country_slug|add:'.svg' as image_static %}
                {% static image_static %}
              {% endwith %}/>
       </div>
       <div class="col-8">
-        <h2 class="display-4 font-weight-bold mb-4">{{ country_name|title}}{% if title %}'s Country Profile{% endif %}</h2>
+        <h2 class="display-4 mb-4">{{ country_name|title}}{% if title %}'s Country Profile{% endif %}</h2>
         <p class="mb-0" style="color: #4a4a4a;">
           Actionable analysis by geo-political and socioeconomic experts across 10 key African countries.
         </p>
-        <p class="font-weight-bold mt-4">
-          <!-- Show data at:
-          <select class="ml-2 py-2"
-                  style="padding-right: 2em; padding-left: 2px; border-color: rgb(169, 169, 169); height: auto">
-            <option value="National Level">National Level</option>
-          </select> -->
-          <a class="btn btn-primary btn-sm text-uppercase font-weight-bold" href="/profiles/{{ country_slug }}"
-             style="border-color: #1f6cc6; padding-top:9px; padding-bottom: 9px;">
-            Read Country Analysis For {{ country_name|upper }}
+        <p class="mt-4">
+          <a class="btn btn-primary" href="/profiles/{{ country_slug }}">
+            Read Country Analysis For {{ country_name }}
           </a>
         </p>
       </div>
diff --git a/takwimu/templates/takwimu/_includes/profile/country_selector.html b/takwimu/templates/takwimu/_includes/profile/country_selector.html
index 4527b49e..06036e01 100644
--- a/takwimu/templates/takwimu/_includes/profile/country_selector.html
+++ b/takwimu/templates/takwimu/_includes/profile/country_selector.html
@@ -8,7 +8,6 @@
     text-align: center;
     display: block;
     font-size: 31px;
-    font-weight: bold;
     line-height: 1.29;
   }
 </style>
@@ -23,38 +22,39 @@
       {{ current_page.title }}
   </div>
 {% else %}
-<div class="country-selector btn-group">
-  <button class="btn btn-link btn-lg px-0 dropdown-toggle font-weight-bold {{ class_extra }}"
-      type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-      style="text-decoration: none; color:#000;"
-      id="dropdownMenuButton_{{ dropdownMenuButton_id }}" >
-    <img class="rounded-circle border-light mr-2"
-        {% with country_slug=current_page.title|slugify %}
-          src="{% static 'img/flags/'|add:country_slug|add:'.svg' %}"
-        {% endwith %}
-        style="border: solid 5px; box-shadow: 0 0 0 2pt rgba(237, 237, 236, 0.61); width: 50px; height: 50px;"/>
-    {{ current_page.title }}
-    <span>
-      <i class="fa fa-angle-down fa-fw"></i>
-    </span>
-  </button>
+  <div class="country-selector btn-group">
+    <button class="btn btn-link btn-lg px-0 dropdown-toggle {{ class_extra }}"
+        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+        style="text-decoration: none; color:#000;"
+        id="dropdownMenuButton_{{ dropdownMenuButton_id }}" >
+      <img class="rounded-circle border-light mr-2"
+          {% with country_slug=current_page.title|slugify %}
+            src="{% static 'img/flags/'|add:country_slug|add:'.svg' %}"
+          {% endwith %}
+          style="border: solid 2px; width: 40px; height: 40px;"/>
+      {{ current_page.title }}
+      <span>
+        <i class="fa fa-angle-down fa-fw"></i>
+      </span>
+    </button>
 
-  <div class="dropdown-menu py-0 rounded-0"
-      aria-labelledby="dropdownMenuButton_{{ dropdownMenuButton_id }}">
+    <div class="dropdown-menu py-0 rounded-0"
+        aria-labelledby="dropdownMenuButton_{{ dropdownMenuButton_id }}"
+        style="z-index: 9200;">
 
-    {% for country in countries %}
-    {% if country.published %}
-      <a class="dropdown-item p-3" href="/profiles/{{ country.slug }}"
-          data-value="{{ country.name }}">
-        <img class="rounded-circle border-light mr-2"
-            src="{% static 'img/flags/'|add:country.slug|add:'.svg' %}"
-            style="border: solid 2px; box-shadow: 0 0 0 2pt rgba(237, 237, 236, 0.61); width: 30px; height: 30px;"/>
-        {{ country.short_name }}
-      </a>
-    {% endif %}
-    {% endfor %}
+      {% for country in countries %}
+      {% if country.published %}
+        <a class="dropdown-item p-3" href="/profiles/{{ country.slug }}"
+            data-value="{{ country.name }}">
+          <img class="rounded-circle border-light mr-2"
+              src="{% static 'img/flags/'|add:country.slug|add:'.svg' %}"
+              style="border: solid 2px; width: 30px; height: 30px;"/>
+          {{ country.short_name }}
+        </a>
+      {% endif %}
+      {% endfor %}
+    </div>
   </div>
-</div>
 {% endif %}
 
 
diff --git a/takwimu/templates/takwimu/_includes/profile/hero.html b/takwimu/templates/takwimu/_includes/profile/hero.html
index cc13e33f..45281ea0 100644
--- a/takwimu/templates/takwimu/_includes/profile/hero.html
+++ b/takwimu/templates/takwimu/_includes/profile/hero.html
@@ -1,43 +1,24 @@
 {% load staticfiles %}
 
-<header class="text-light" style="background: #074c9c url('{% static 'img/bg/profile-hero.jpg'%}') no-repeat center; background-size: cover;">
-  <div class="jumbotron jumbotron-fluid pt-0 mb-0" style="background-color: rgba(7, 76, 156, 0.8)">
+<header style="background: #fff url('{% static 'img/bg/profile-hero-line.png'%}') no-repeat center; background-size: cover;">
+  <div class="jumbotron jumbotron-fluid pt-4 mb-0" style="background-color: rgba(255,255,255,0.85);">
 
     <div class="container">
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb bg-transparent">
-          <li class="breadcrumb-item">
-            <a href="/" class="text-light"><u>Home</u></a><i class="glyphicon glyphicon-thumbs-up"></i>
-          </li>
-          <li class="breadcrumb-item">
-            <a href="/profiles" class="text-light"><u>Country Profiles</u></a>
-          </li>
-          {% if page.content_type.model == "profilesectionpage" %}
-            <li class="breadcrumb-item">
-              <ahref="{{ page.get_parent.url }}" class="text-light">
-                <u>{{ page.get_parent.title }}</u>
-              </a>
-            </li>
-          {% endif %}
-          <li class="breadcrumb-item active text-light" aria-current="page">
-              {{ page.title }}
-          </li>
-        </ol>
-      </nav>
-
+      <p class="small text-muted line-height-sm mb-0">Change Country</p>
       <div class="d-flex justify-content-between align-items-center">
+        
         {% if page.content_type.model == "profilesectionpage" %}
-          {% include 'takwimu/_includes/profile/country_selector.html' with current_page=page.get_parent class_extra='text-light' dropdownMenuButton_id="hero" %}
+          {% include 'takwimu/_includes/profile/country_selector.html' with current_page=page.get_parent dropdownMenuButton_id="hero" %}
         {% else %}
-          {% include 'takwimu/_includes/profile/country_selector.html' with current_page=page class_extra='text-light' dropdownMenuButton_id="hero" %}
+          {% include 'takwimu/_includes/profile/country_selector.html' with current_page=page dropdownMenuButton_id="hero" %}
         {% endif %}
 
         <!-- TOC Button -->
         <button
-            class="btn btn-light btn-lg text-uppercase pr-4 pl-3 py-3 position-fixed font-weight-bold"
-            style="right: 0; border-radius: 2px 0 0 2px; font-size: 13px; z-index: 1000; border: 0px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.29)"
+            class="btn btn-light btn-lg pr-4 pl-3 py-3 position-fixed font-heading"
+            style="right: 0; border-radius: 2px 0 0 2px; font-size: 16px; z-index: 1000; border: 0px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.29)"
             onclick="javascript:$('#toc').removeClass('d-none')">
-          <span class="mr-2"><img src="{% static "img/icons/toc-menu.svg" %}"></span>
+          <span class="mr-2"><img src="{% static 'img/icons/toc-menu.svg' %}"></span>
           Table of Contents
         </button>
       </div>
@@ -45,20 +26,22 @@
       <div class="text-center">
         {% if page.content_type.model == "profilesectionpage" %}
 
-          <p class="font-weight-bold text-uppercase">Section
+          <p>Section
             {% for section in page.get_parent.specific.sections.all %}
               {% if page.title == section.section.title %}
-                {{ forloop.counter | add:"1" }} {% endif %}{% endfor %}</p>
-          <h1 class="text-white" style="font-weight: 900; font-size: 60px">{{ page.title }}</h1>
-          <p class="lead my-4 mx-auto"
-             style="max-width: 780px;">{{ page.description }}</p>
+                {{ forloop.counter | add:"1" }}
+              {% endif %}
+            {% endfor %}
+          </p>
+          <h1 class="display-3">{{ page.title }}</h1>
+          <p class="my-4 mx-auto line-height-md" style="max-width: 780px;">{{ page.description }}</p>
 
           {% include 'takwimu/_includes/profile/country_profile_downloader.html' with profile_page=page.get_parent.specific %}
         {% else %}
 
-          <p class="font-weight-bold  text-uppercase">Section 1</p>
-          <h1 class="text-white" style="font-weight: 900; font-size: 60px">Country Overview</h1>
-          <p class="lead my-4 mx-auto" style="max-width: 780px;">
+          <p>Section 1</p>
+          <h1 class="display-3">Country Overview</h1>
+          <p class="my-4 mx-auto line-height-md" style="max-width: 780px;">
             A top-level overview of {{ page.title }} – how it’s governed, the make-up of
             its population, the economy and SDG indicators
           </p>
@@ -70,14 +53,14 @@ <h1 class="text-white" style="font-weight: 900; font-size: 60px">Country Overvie
     </div>
 
   </div>
-  <div class="bg-secondary">
+  <div class="bg-primary">
     <div class="container">
       <nav class="nav nav-justified container text-center custom-nav">
         {% for topic in page.body %}
-        <a href="#{{ topic.value.title|slugify }}" class=" nav-item nav-link text-light pt-4 pb-2 px-0">
-          <div class="pt-2 col text-center {% if not forloop.first %}border-left{% endif %} d-flex align-items-center flex-column">
-            <span class="d-block my-1 {{ topic.value.icon }} text-white py-0" style="font-size: 1.559em;"></span>
-            <p class="pt-1 text-uppercase" style="font-size: 14px; font-weight:normal;">{{ topic.value.title }}</p>
+        <a href="#{{ topic.value.title|slugify }}" class="nav-item nav-link text-light py-4 px-0 d-flex {% if not forloop.first %}border-left{% endif %}">
+          <div class="col align-self-center px-2 my-1 text-center">
+            <!-- <span class="d-block my-1 {{ topic.value.icon }} text-white py-0" style="font-size: 1.559em;"></span> -->
+            <h5 class="m-0">{{ topic.value.title }}</h5>
           </div>
         </a>
         {% endfor %}
@@ -93,7 +76,7 @@ <h1 class="text-white" style="font-weight: 900; font-size: 60px">Country Overvie
 
   <p class="text-right mb-3">
     <button
-        class="btn btn-link text-uppercase font-weight-bold ml-auto border-0 py-2"
+        class="btn btn-link font-weight-bold ml-auto border-0 py-2"
         style="text-decoration: none; color: #000;"
         onclick="javascript:$('#toc').addClass('d-none')">
       Close
diff --git a/takwimu/templates/takwimu/_includes/profile/sections_list.html b/takwimu/templates/takwimu/_includes/profile/sections_list.html
index c6ea4bb1..eac9e7c8 100644
--- a/takwimu/templates/takwimu/_includes/profile/sections_list.html
+++ b/takwimu/templates/takwimu/_includes/profile/sections_list.html
@@ -7,7 +7,7 @@
     {% else %}
       {% include 'takwimu/_includes/profile/country_selector.html' with current_page=page selector='False' %}
     {% endif %}
-    <h1 class="text-center display-4 font-weight-bold my-4">Country profile contents</h1>
+    <h1 class="text-center display-4 my-4">Country profile contents</h1>
   </div>
 
   <!-- Profile Sections List -->
diff --git a/takwimu/templates/takwimu/_includes/profile/sections_list_detail.html b/takwimu/templates/takwimu/_includes/profile/sections_list_detail.html
index fd31373d..c78a0c06 100644
--- a/takwimu/templates/takwimu/_includes/profile/sections_list_detail.html
+++ b/takwimu/templates/takwimu/_includes/profile/sections_list_detail.html
@@ -2,13 +2,17 @@
 <div class="pt-4 pb-5 mb-0 is-active border-bottom border-top">
   <a style="text-decoration: none;">
       <div class="position-absolute" style="right: 17%; margin-top: -30px;">
-        <span class="text-light py-3 px-4" style="background-color: #074c9c; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);"><i class="fa fa-eye mr-2"></i> <b>YOU ARE HERE</b></span>
+        <span class="text-light py-3 px-4" style="background-color: #4abc70; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);">
+          <i class="fa fa-eye mr-2"></i> You are here
+        </span>
       </div>
 {% elif section.title == page.title %}
 <div class="pt-4 pb-5 mb-0 is-active border-bottom border-top">
   <a style="text-decoration: none!important;">
     <div class="position-absolute" style="right: 17%; margin-top: -30px;">
-      <span class="text-light py-3 px-4" style="background-color: #074c9c; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);"><i class="fa fa-eye mr-2"></i> <b>YOU ARE HERE</b></span>
+      <span class="text-light py-3 px-4" style="background-color: #4abc70; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.26);">
+        <i class="fa fa-eye mr-2"></i> You are here
+      </span>
     </div>
 {% elif page.subpage_types|first == 'takwimu.ProfileSectionPage' %}
 <div class="container border-top bg-white pt-4 pb-5 mb-0">
@@ -18,10 +22,10 @@
   <a href="{{ section.url|default:'../' }}" style="text-decoration: none;">
 {% endif %}
     <div class="container">
-      <small class="text-uppercase font-weight-bold" style="color: #4a4a4a;">Section {{ counter | add:"1" }}</small>
-      <h1 class="display-5 font-weight-bold mb-4 section-title">{{ section.title|default:"Country Overview" }}</h1>
+      <small style="color: #4a4a4a;">Section {{ counter | add:"1" }}</small>
+      <h1 class="display-5 mb-4 section-title">{{ section.title|default:"Country Overview" }}</h1>
       {% with default_desc="A top-level overview of "|add:page.title|add:" – how it’s governed, the make-up of it’s population, the economy and SDG indicators" %}
-      <p class="mb-0 font-weight-light" style="color: #4a4a4a; font-size: 15px">{{ section.description|default:default_desc }}</p>
+      <p class="mb-0 line-height-md" style="color: #4a4a4a; font-size: 15px">{{ section.description|default:default_desc }}</p>
       {% endwith %}
     </div>
   </a>
diff --git a/takwimu/templates/takwimu/_includes/profile/topic_detail.html b/takwimu/templates/takwimu/_includes/profile/topic_detail.html
index db4d9284..660c1545 100644
--- a/takwimu/templates/takwimu/_includes/profile/topic_detail.html
+++ b/takwimu/templates/takwimu/_includes/profile/topic_detail.html
@@ -36,18 +36,17 @@
 
         </div>
         <!-- COMMUNITY: Add your voice -->
-        <div class="row pt-5 pb-5 text-dark">
+        <div class="row py-5 text-dark">
           {% if page.content_type.model == "profilesectionpage" %}
-            <p class=" pl-3">Add your voice to the discussion
+            <p class="pl-3 line-height-md">Add your voice to the discussion
               of {{ page.get_parent.title }}'s development context </p>
           {% else %}
-            <p class=" pl-3">Add your voice to the discussion
+            <p class="pl-3 line-height-md">Add your voice to the discussion
               of {{ page.title }}'s development context </p>
           {% endif %}
-          <a class="pl-3 font-weight-bold" href="{{ settings.takwimu.SocialMediaSetting.twitter }}" target="_blank" rel="noopener"
-             style="text-decoration: none;">
-            <span class="mr-1"><i class="fas fa-comments fa-lg"></i></span> Have
-            your say</a>
+          <a class="pl-3" href="{{ settings.takwimu.SocialMediaSetting.twitter }}" target="_blank" rel="noopener">
+            <span class="mr-1"><i class="fas fa-comments fa-lg"></i></span> Have your say
+          </a>
         </div> <!-- /row pt-5 pb-5 text-dark -->
       </div>  <!-- /.col-3 -->
 
@@ -67,7 +66,7 @@ <h1 class="anchored" data-anchor-id="{{ topic.value.title|slugify }}">{{ topic.v
 
           <!-- Show more button -->
           {% if topic.value.body %}
-            <button class="btn btn-link font-weight-bold p-0 ml-2 read-more d-inline-block" type="button"
+            <button class="btn btn-link font-weight-bold p-0 mt-2 read-more d-inline-block" type="button"
                     data-toggle="collapse" data-target="#collapse-{{ topic.value.title|slugify }}"
                     aria-expanded="false" aria-controls="collapse-{{ topic.value.title|slugify }}"
                     onclick="javascript:$(this).toggleClass('active')">
diff --git a/takwimu/templates/takwimu/_includes/sections/explore/_index.html b/takwimu/templates/takwimu/_includes/sections/explore/_index.html
index bebbcfa2..889170fb 100644
--- a/takwimu/templates/takwimu/_includes/sections/explore/_index.html
+++ b/takwimu/templates/takwimu/_includes/sections/explore/_index.html
@@ -1,6 +1,6 @@
 <div class="clearfix container text-center py-5">
   <div class="wrapper p-3">
-    <h4 class="display-4 font-weight-bold">Explore the data by...</h4>
+    <h1 class="display-4">Explore the data by...</h1>
   </div>
   <ul class="nav nav-pills nav-pills-alt justify-content-center mb-5" role="tablist">
     <li class="nav-item mx-4">
diff --git a/takwimu/templates/takwimu/_includes/sections/explore/countries.html b/takwimu/templates/takwimu/_includes/sections/explore/countries.html
index 63454104..8eebd6ba 100644
--- a/takwimu/templates/takwimu/_includes/sections/explore/countries.html
+++ b/takwimu/templates/takwimu/_includes/sections/explore/countries.html
@@ -12,7 +12,7 @@
 
                     <img class="svg" src="{% static 'img/flags/'|add:country.slug|add:'.svg' %}" alt="{{ country.name }}">
 
-                    <span class="text-uppercase font-weight-extra-bold">{{ country.short_name }}</span>
+                    <span style="font-size: 20px;">{{ country.short_name }}</span>
                 </a>
             </div>
 
diff --git a/takwimu/templates/takwimu/_includes/sections/faq/index.html b/takwimu/templates/takwimu/_includes/sections/faq/index.html
index 031ee949..2778d755 100644
--- a/takwimu/templates/takwimu/_includes/sections/faq/index.html
+++ b/takwimu/templates/takwimu/_includes/sections/faq/index.html
@@ -1,8 +1,8 @@
 <!-- FAQ section -->
 
-<section class="faq bg-primary-alt text-light py-5">
+<section class="faq bg-primary text-light py-5">
   <div class="container">
-    <h3 class="text-center display-4 mt-4 mb-5" style="font-weight: 800;">Common Questions</h3>
+    <h3 class="text-center display-4 mt-4 mb-5">Common Questions</h3>
 
     <div class="row mb-5">
       <div class="col-4">
@@ -57,6 +57,4 @@ <h3 class="text-center display-4 mt-4 mb-5" style="font-weight: 800;">Common Que
     color: #000000;
     font-weight: lighter;
   }
-
-
 </style>
diff --git a/takwimu/templates/takwimu/_includes/sections/faq/morebtn_detail.html b/takwimu/templates/takwimu/_includes/sections/faq/morebtn_detail.html
index 07a1be36..cd062b08 100644
--- a/takwimu/templates/takwimu/_includes/sections/faq/morebtn_detail.html
+++ b/takwimu/templates/takwimu/_includes/sections/faq/morebtn_detail.html
@@ -1,4 +1,4 @@
 <a href="{{ cta_url|default:'mailto:support@takwimu.africa' }}" target="_blank" rel="noopener"
-    class="btn btn-primary font-weight-bold text-uppercase mx-1" style="min-width: 40%; padding: 0.75rem 1.25rem; font-size: 14px; line-height: 1.14; border: solid 1px #1f6cc6; border-radius: 24px;">
-  {{ cta_name|default:'Find Out More'}}
+    class="btn btn-primary mx-1" style="min-width: 40%;">
+  {{ cta_name|default:'Find out more...'}}
 </a>
diff --git a/takwimu/templates/takwimu/_includes/sections/how-it-works/index.html b/takwimu/templates/takwimu/_includes/sections/how-it-works/index.html
index 060c4cf7..3170787c 100644
--- a/takwimu/templates/takwimu/_includes/sections/how-it-works/index.html
+++ b/takwimu/templates/takwimu/_includes/sections/how-it-works/index.html
@@ -37,7 +37,7 @@
 
 <section class="how-it-works pt-4 bg-light">
   <div class="container text-center">
-    <h1 class="display-4 font-weight-bold d-inline-block px-3 bg-light position-relative mt-5" style="z-index: 101; max-width: 90%;">How it works</h1>
+    <h1 class="display-4 d-inline-block px-3 bg-light position-relative mt-5" style="z-index: 101; max-width: 90%;">How it works</h1>
     <div class="position-relative" style="outline: 2px dashed #dee2e6; height: 80px; top: -40px;" style="z-index: 100;"></div>
 
     <ul class="nav nav-justified position-relative flex-scroll" style="top: -75px;" role="tablist">
diff --git a/takwimu/templates/takwimu/_includes/sections/how-it-works/nav_detail.html b/takwimu/templates/takwimu/_includes/sections/how-it-works/nav_detail.html
index a12bdf82..13e5b9c0 100644
--- a/takwimu/templates/takwimu/_includes/sections/how-it-works/nav_detail.html
+++ b/takwimu/templates/takwimu/_includes/sections/how-it-works/nav_detail.html
@@ -2,14 +2,14 @@
   <a class="nav-link {% if forloop.first %}active{% endif %}" style="z-index: 102; height: calc(100% - 80px);"
       id="step-{{ forloop.counter }}-tab" data-toggle="tab" href="#step-{{ forloop.counter }}" role="tab"
       aria-controls="step-{{ forloop.counter }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
-    <h3 class="step-number font-weight-bold d-flex justify-content-center position-relative"
+    <h3 class="step-number d-flex justify-content-center position-relative"
         style="z-index: 102;">
       <span>{{ forloop.counter }}</span>
     </h3>
     <div class="step-description position-relative px-5 py-4 h-100"
         style="background-color: #f5f6f7; top: -17px; z-index: 101; color: #4a4a4a;">
-      <h5 class="font-weight-bold">{{ step.value.title }}</h5>
-      <p class="mb-0">{{ step.value.brief }}</p>
+      <h4>{{ step.value.title }}</h4>
+      <p class="mb-0 line-height-md" style="font-size:16px; line-height: 1.5;"></p>{{ step.value.brief }}</p>
     </div>
     <div class="step-active position-relative mx-auto invisible"
         style="border: 20px solid #17a2b8; border-bottom: 0; border-left-color: transparent; border-right-color: transparent; width: 20px; top: -22px; z-index: 101;"></div>
diff --git a/takwimu/templates/takwimu/_includes/sections/sdg/_collapsed.html b/takwimu/templates/takwimu/_includes/sections/sdg/_collapsed.html
index fa81dbb0..e3e3a693 100644
--- a/takwimu/templates/takwimu/_includes/sections/sdg/_collapsed.html
+++ b/takwimu/templates/takwimu/_includes/sections/sdg/_collapsed.html
@@ -3,17 +3,17 @@
 <div class="bg-secondary text-light container-fluid mx-auto my-1 position-relative" style="width: calc(100% - 0.5em);">
     <div class="row px-0 py-5">
         <div class="col-6 text-left px-5">
-            <h2 class="font-weight-bold">
+            <h1>
                 {{ sdg.short }}
-            </h2>
-            <p class="font-weight-light">
+            </h1>
+            <p class="line-height-md">
                 {{ sdg.title }}
             </p>
         </div>
         <div class="col-6 d-flex px-5 justify-content-center align-items-center" style="border-left: 1px solid rgba(255, 255, 255, .52);">
             {% if sdg.indicators %}
                 <div class="w-100">
-                    <p class="font-weight-bold">View data for:</p>
+                    <h5>View data for:</h5>
                     {% for indicator in sdg.indicators %}
                         <a class="nav-item nav-link text-white text-left pl-3"
                         id="{{ indicator.url }}"
@@ -28,9 +28,9 @@ <h2 class="font-weight-bold">
                     {% endfor %}
                 </div>
             {% else %}
-                <div class="d-block text-center" style="color: #78aff5;">
+                <div class="d-block text-center text-white">
                     <span class="fas fa-exclamation-circle fa-3x"></span>
-                    <p class="text-info my-3" style="font-size: 14px;">We do not have any data associated with this SDG</p>
+                    <p class="my-3 px-2 line-height-md">We do not have any data<br/>associated with this SDG yet.</p>
                 </div>
             {% endif %}
         </div>
diff --git a/takwimu/templates/takwimu/_includes/sections/sdg/nav.html b/takwimu/templates/takwimu/_includes/sections/sdg/nav.html
index adb042d9..b59311f2 100644
--- a/takwimu/templates/takwimu/_includes/sections/sdg/nav.html
+++ b/takwimu/templates/takwimu/_includes/sections/sdg/nav.html
@@ -1,11 +1,11 @@
 {% load staticfiles %}
 
-<h3 class="display-5 py-3 text-light text-center">
-    Filter suistainable development goals by sector
+<h3 class="mb-4 mt-2 text-light text-center">
+    Filter suistainable development goals by sector:
 </h3>
-<ul class="nav justify-content-center text-center py-3 sdg-category" style="font-size: 14px;">
+<ul class="nav justify-content-center text-center py-3 sdg-category">
     <li class="nav-item px-5 border-shade-right" data-sdg="health">
-        <a class="nav-link active text-light text-uppercase position-relative py-0" href="javascript:void(0)">
+        <a class="nav-link active text-light position-relative py-0" href="javascript:void(0)">
             <span class="active position-absolute check" style="top:0; right: 1em;">
                 <img src="{% static 'img/icons/icon-tick.svg' %}" alt="Checked">
             </span>
@@ -16,7 +16,7 @@ <h3 class="display-5 py-3 text-light text-center">
         </a>
     </li>
     <li class="nav-item px-5 border-shade-right" data-sdg="agriculture">
-        <a class="nav-link text-light text-uppercase position-relative py-0" href="javascript:void(0)">
+        <a class="nav-link text-light position-relative py-0" href="javascript:void(0)">
             <span class="active position-absolute check" style="top:0; right: 1em;">
                 <img src="{% static 'img/icons/icon-tick.svg' %}" alt="Checked">
             </span>
@@ -27,7 +27,7 @@ <h3 class="display-5 py-3 text-light text-center">
         </a>
     </li>
     <li class="nav-item px-5 border-shade-right" data-sdg="financial-inclusion">
-        <a class="nav-link text-light text-uppercase position-relative py-0" href="javascript:void(0)">
+        <a class="nav-link text-light position-relative py-0" href="javascript:void(0)">
             <span class="active position-absolute check" style="top:0; right: 1em;">
                 <img src="{% static 'img/icons/icon-tick.svg' %}" alt="Checked">
             </span>
@@ -38,7 +38,7 @@ <h3 class="display-5 py-3 text-light text-center">
         </a>
     </li>
     <li class="nav-item px-5" data-sdg="education">
-        <a class="nav-link text-light text-uppercase position-relative py-0" href="javascript:void(0)">
+        <a class="nav-link text-light position-relative py-0" href="javascript:void(0)">
             <span class="active position-absolute check" style="top:0; right: 1em;">
                 <img src="{% static 'img/icons/icon-tick.svg' %}" alt="Checked">
             </span>
@@ -74,10 +74,10 @@ <h3 class="display-5 py-3 text-light text-center">
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   
-  border-top: 20px solid #1e4a7e;
+  border-top: 20px solid #29a87c;
 }
 .arrow-up {
-    border-bottom: 20px solid #1e4a7e;
+    border-bottom: 20px solid #29a87c;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
 }
diff --git a/takwimu/templates/takwimu/_includes/sections/stories/index.html b/takwimu/templates/takwimu/_includes/sections/stories/index.html
index c5ea75ab..01a757fe 100644
--- a/takwimu/templates/takwimu/_includes/sections/stories/index.html
+++ b/takwimu/templates/takwimu/_includes/sections/stories/index.html
@@ -2,7 +2,7 @@
 
 <section class="stories">
   <div class="container py-5 border-top border-bottom border-left-0 border-right-0" style="border-style: dashed !important;">
-    <h1 class="display-4 text-center mt-5 mb-5" style="font-weight: 800;">Insights &amp; Stories</h1>
+    <h1 class="display-4 text-center mt-5 mb-5">Latest News &amp; Stories</h1>
     <ul class="nav nav-pills nav-pills-alt justify-content-center mb-5" role="tablist">
       <li class="nav-item">
         <a class="nav-link active" href="#latest" role="tab" data-toggle="tab">Latest</a>
@@ -34,9 +34,9 @@ <h1 class="display-4 text-center mt-5 mb-5" style="font-weight: 800;">Insights &
     </div>  <!-- /.tab-content -->
 
     <p class="text-center my-5">
-      <a class="btn btn-primary btn-lg font-weight-bold text-uppercase px-4" href="https://medium.com/takwimu-africa" target="_blank">
-        <span class="mr-2 pr-2 border-right"><i class="fab fa-medium-m fa-fw"></i></span> 
-        <small class="font-weight-bold" style="vertical-align: text-bottom;">Continue Reading On Medium</small>
+      <a class="btn btn-primary btn-lg px-5" href="https://medium.com/takwimu-africa" target="_blank">
+        Continue reading on Medium
+        <i class="fab fa-medium-m fa-fw ml-3" style="vertical-align: middle;"></i>
       </a>
     </p>
   </div>  <!-- /.container -->
diff --git a/takwimu/templates/takwimu/_includes/sections/stories/story_detail.html b/takwimu/templates/takwimu/_includes/sections/stories/story_detail.html
index b23ff830..f8d72985 100644
--- a/takwimu/templates/takwimu/_includes/sections/stories/story_detail.html
+++ b/takwimu/templates/takwimu/_includes/sections/stories/story_detail.html
@@ -3,9 +3,9 @@
 <div class="card grayscale">
   <div class="card-img" style="background-image: url('{{ story.preview_image.url }}'); "></div>
   <div class="card-body text-left pt-5 font-weight-light" style="color: #4a4a4a;">
-    <h5 class="card-title font-weight-bold" style="color: #000000;">{{ story.title }}</h5>
+    <h3 class="card-title" style="color: #000000;">{{ story.title }}</h3>
     <p class="small text-muted">{{ story.post_date|print_timestamp }} . {{ story.read_time|floatformat:"0" }} min read</p>
-    <p class="card-text">{{ story.subtitle }}</p>
+    <p class="card-text line-height-md">{{ story.subtitle }}</p>
   </div>
   <div class="card-footer text-center bg-white border-top-0 pb-4">
     <a href="{{ story.url }}" target="_blank" rel="noopener"
diff --git a/takwimu/templates/takwimu/_includes/sections/support-services/button.html b/takwimu/templates/takwimu/_includes/sections/support-services/button.html
index 312cfe70..b00988c3 100644
--- a/takwimu/templates/takwimu/_includes/sections/support-services/button.html
+++ b/takwimu/templates/takwimu/_includes/sections/support-services/button.html
@@ -1,31 +1,17 @@
 {% load staticfiles %}
 
 <section class="support-services-button bg-primary text-light py-5 mb-0">
-  <a href="/about/support-services" class="text-light">
-    <div class="container py-4 mt-3">
+  <a href="/about#services" class="text-light">
+    <div class="container py-4">
       <div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
-        <div class="pulse-icon mr-5 mb-4">
-          <img src="{% static 'img/icons/pulse.svg' %}" alt="Our Services" style="max-width: 56px;">
+        <div class="pulse-icon mr-4 mt-4 mb-4">
+          <img src="{% static 'img/icons/pulse.svg' %}" alt="Our Services" style="max-width: 45px;">
         </div>
 
         <div>
-          <p class="text-uppercase" style="color: #c0dcfd; text-decoration: none !important;">Looking for other data or support sevices?</p>
-          <h1 class="font-weight-bold text-underline" style="line-height: 0.9;">How Takwimu Can Help You</h1>
+          <p style="text-decoration: none !important;">Looking for other data or support sevices?</p>
+          <h1 class="text-underline" style="line-height: 0.9;">How Takwimu Can Help You</h1>
       </div>
     </div>
   </a>
 </section>
-
-<style>
-  .support-services-button:hover {
-    background-color: #1e4a7e !important;
-  }
-  .support-services-button a:hover {
-    text-decoration: none !important;
-  }
-  .support-services-button u {
-    text-decoration: none;
-    border-bottom: 2px solid #fff;
-    display: inline-block;
-  }
-</style>
diff --git a/takwimu/templates/takwimu/_includes/sections/support-services/tabs.html b/takwimu/templates/takwimu/_includes/sections/support-services/tabs.html
index 34559e7b..0b8e3605 100644
--- a/takwimu/templates/takwimu/_includes/sections/support-services/tabs.html
+++ b/takwimu/templates/takwimu/_includes/sections/support-services/tabs.html
@@ -1,7 +1,7 @@
 {% load staticfiles %}
 
 <section class="support-services-tabs">
-  <div class="bg-secondary">
+  <div class="bg-primary">
     <nav
         class="nav nav-justified align-items-stretch flex-scroll text-center custom-nav"
         id="nav-tabs" role="tablist">
@@ -13,8 +13,8 @@
             aria-controls="support-{{ service.value.title|slugify }}"
             aria-selected="true">
           <div class="text-center {% if not forloop.first %}border-left{% endif %} h-100 px-3">
-            <h2 class="py-1"><i class="{{ service.value.icon }}"></i></h2>
-            <p class="pt-1 text-uppercase" style="font-size: 14px; font-weight:normal";>{{ service.value.title }}</p>
+            <h4 class="py-1"><i class="{{ service.value.icon }}"></i></h4>
+            <h5 class="pt-1">{{ service.value.title }}</h5>
           </div>
         </a>
         {% endif %}
@@ -22,7 +22,7 @@ <h2 class="py-1"><i class="{{ service.value.icon }}"></i></h2>
     </nav>
   </div>
 
-  <div class="tab-content bg-primary text-light" id="datapriority-content">
+  <div class="tab-content bg-primary-alt text-light" id="datapriority-content">
     {% for service in settings.takwimu.SupportServicesSetting.services %}
       {% if service.value.category == "Persona" %}
         <div
@@ -38,9 +38,9 @@ <h2 class="py-1"><i class="{{ service.value.icon }}"></i></h2>
 
           <div class="row">
             <div class="col-md-4 pr-5">
-              <h1 class="font-weight-bold" style="font-size: 50px;">
+              <h1 style="font-size: 50px;">
                 {{ service.value.title }}
-              </h3>
+              </h1>
             </div>
             <div class="col pl-md-5 mt-3 mt-md-0 pt-2" style="border-left: solid 1px rgba(255, 255, 255, 0.49);">
               {{ service.value.description | safe }}
diff --git a/takwimu/templates/takwimu/_includes/sections/testimonials.html b/takwimu/templates/takwimu/_includes/sections/testimonials.html
index b45b8bf2..8fdfde33 100644
--- a/takwimu/templates/takwimu/_includes/sections/testimonials.html
+++ b/takwimu/templates/takwimu/_includes/sections/testimonials.html
@@ -15,19 +15,19 @@
 
 <section class="testimonials py-5">
   <div class="container text-center my-5">
-    <h3 class="mb-5 display-4 position-relative" style="font-weight: 800;">
+    <h3 class="mb-5 display-4 position-relative" style="font-weight: 500;">
       Real
-      <span class="position-relative">
+      <span class="position-relative font-heading font-weight-bold">
         People,
         <div class="position-absolute" 
-            style="background: rgba(98,152,215, 0.32); height: 20px; width: 230px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg); z-index: -1;">
+            style="background: rgba(74,188,112, 0.32); height: 20px; width: 190px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg); z-index: -1;">
         </div>
       </span>
       Real
-      <span class="position-relative">
+      <span class="position-relative font-heading font-weight-bold">
         Benefits
         <div class="position-absolute" 
-            style="background: rgba(98,152,215, 0.32); height: 20px; width: 257px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg); z-index: -1;">
+            style="background: rgba(74,188,112, 0.32); height: 20px; width: 228px; bottom: 1px; left: -3px; -webkit-transform: skew(340deg); -moz-transform: skew(340deg); -o-transform: skew(340deg); z-index: -1;">
         </div>
       </span>
     </h3>
@@ -51,8 +51,8 @@ <h3 class="mb-5 display-4 position-relative" style="font-weight: 800;">
               alt="{{ testimonial.name }}">
             </div>
           </p>
-          <p class="lead font-weight-bold text-primary-alt mb-0">{{ testimonial.name }}</p>
-          <p class="mb-0" style="color: #4a4a4a;">{{ testimonial.title }}</p>
+          <h4 class="text-primary-alt mb-2">{{ testimonial.name }}</h4>
+          <p class="line-height-initial text-muted" style="font-size:80%; max-width: 70%; margin:0 auto;">{{ testimonial.title }}</p>
         </div>
       </div>
       {% endfor %}
diff --git a/takwimu/templates/takwimu/_includes/sections/updates.html b/takwimu/templates/takwimu/_includes/sections/updates.html
index d3e85e90..7332e7a5 100644
--- a/takwimu/templates/takwimu/_includes/sections/updates.html
+++ b/takwimu/templates/takwimu/_includes/sections/updates.html
@@ -4,12 +4,12 @@
   <div class="row mx-0">
     <div class="col-md-6 py-2 px-0">
       <div class="my-2 py-5 px-3" style="border-right: 2px dashed #e7e7e7;">
-        <h4 class="font-weight-bold" style="font-size: 32px;">
+        <h2>
           <img class="pb-2" src={% static 'img/icons/wave.svg' %}
-            style="width: auto; height: 45px;"/><br/>
+              style="width: auto; height: 45px;"/><br/>
           Stay up-to-date
-        </h4>
-        <p class="mx-auto" style="max-width: 400px; color: #4a4a4a;">
+        </h2>
+        <p class="mx-auto line-height-md" style="max-width: 400px; color: #4a4a4a;">
           To be notified when new data is published on Takwimu, subscribe to
           <a href="{% url 'rss_feed' %}">our RSS feed</a> or
           <a href="http://eepurl.com/dynuAX" target="_blank" rel="noopener">
@@ -22,13 +22,12 @@ <h4 class="font-weight-bold" style="font-size: 32px;">
     </div>
     <div class="col-md-6 py-2 px-0">
       <div class="my-2 py-5 px-3">
-          <h4 class="font-weight-bold" style="font-size: 32px;">
+          <h2>
             <img class="pb-2" src={% static 'img/icons/chat.svg' %}
-            style="width: auto; height: 50px;"/><br/>
-            <img src="" alt="">
+                style="width: auto; height: 50px;"/><br/>
             Join the discussion
-          </h4>
-          <p class="mx-auto" style="max-width: 400px; color: #4a4a4a;">
+          </h2>
+          <p class="mx-auto line-height-md" style="max-width: 400px; color: #4a4a4a;">
             Contribute to Takwimu by sharing your thoughts and ideas on
             <a href="{{ settings.takwimu.SocialMediaSetting.twitter }}" target="_blank" rel="noopener">twitter</a>
           </p>
@@ -36,19 +35,3 @@ <h4 class="font-weight-bold" style="font-size: 32px;">
     </div>
   </div>
 </section>
-
-<style>
-  .updates a {
-    font-weight: bold;
-    color: #1f6cc6;
-    text-decoration: underline;
-  }
-
-  .updates .col-md-6:hover {
-    background-color: #e8e8e8;;
-  }
-  .updates .col-md-6:hover + .col div {
-    border-left: 2px dashed transparent!important;
-  }
-
-</style>
diff --git a/takwimu/templates/takwimu/_layouts/_base.html b/takwimu/templates/takwimu/_layouts/_base.html
index b029db3b..f39cd0db 100644
--- a/takwimu/templates/takwimu/_layouts/_base.html
+++ b/takwimu/templates/takwimu/_layouts/_base.html
@@ -56,7 +56,7 @@
   <script src="{% static 'js/plugins.js' %}"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script>
   <script src="{% static 'js/main.js' %}"></script>
   <script src="{% static 'js/svg.js' %}"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.1/anchor.min.js"></script>
diff --git a/takwimu/templates/takwimu/about/index.html b/takwimu/templates/takwimu/about/index.html
index 67683b6f..4a9e6627 100644
--- a/takwimu/templates/takwimu/about/index.html
+++ b/takwimu/templates/takwimu/about/index.html
@@ -1,25 +1,68 @@
 {% extends 'takwimu/_layouts/page.html' %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags static %}
 
 {% block content %}
-  <section class="container py-3 text-muted">
-    <a href="/"><u>Home</u></a> <span class="mx-2">»</span> About Takwimu
-  </section>
-  <div style="background-color: #f9f9f9;">
+  <div style="background-color: #fff;">
     <div class="py-5 container" style="max-width: 800px;">
-      <h1 class="text-center display-3 font-weight-bold">About Takwimu</h1>
+      <h1 class="mb-4 display-4">About Us</h1>
+      <div class="px-4 py-3" style="background-color: #f6fbfa">
+        <p class="small text-muted">On this page</p>
+        <a href="#about-takwimu">About Takwimu</a>
+        <a href="#services" class="ml-4">Services</a>
+      </div>
+
+      <div class="bg-primary my-5" style="height: 2px;"></div>
+      <a name="about-takwimu">
+        <h1 class="mb-3" style="padding-top: 120px; margin-top:-120px;">About Takwimu</h1>
+      </a>
       {{ settings.takwimu.AboutUsSetting.about_us | richtext }}
-    </div>
-  </div>
 
-  <section class="bg-secondary">
-    <div class="container text-center text-light py-5">
-      <h1 class="font-weight-bold display-3">Services for...</h1>
-    </div>
-    {% include 'takwimu/_includes/sections/support-services/tabs.html' %}
+      <section class="partners py-5 my-3">
+        <h2>The Partnership</h2>
+        <p>africapractice, Code for Africa and iHub came together to create Takwimu.</p>
+        <div class="row align-items-center mt-3 text-center">
+          <a href="http://www.africapractice.com/" target="_blank" rel="noopener" class="col border-right p-4">
+            <img src="{% static 'img/logos/ap.png' %}" alt="africapractice">
+          </a>
+          <a href="https://codeforafrica.org" target="_blank" rel="noopener" class="col border-right p-4">
+            <img src="{% static 'img/logos/cfafrica.png' %}" alt ="Code for Africa">
+          </a>
+          <a href="https://ihub.co.ke/" target="_blank" rel="noopener" class="col p-4">
+            <img src="{% static 'img/logos/ihub-black.png' %}" alt="iHub">
+          </a>
+        </div>
+        
+        <h5 class="my-4">Supported by:</h5>
+        <a href="https://www.gatesfoundation.org" target="_blank" rel="noopener">
+          <img src="{% static 'img/logos/bmgf.png' %}" alt="Bill and Melinda Gates Foundation"
+              style="max-width: 220px;">
+        </a>
+
+        <style>
+            section.partners img {
+              max-width: 150px;
+              max-height: 60px;
+            }
+          </style>
+      </section>
 
-  </section>
-  {% include 'takwimu/_includes/partners.html' %}
+      <div class="bg-primary my-5" style="height: 2px;"></div>
+      <a name="services">
+        <h1 class="mb-3" style="padding-top: 120px; margin-top:-120px;">Services</h1>
+      </a>
+
+      <p>We understand that access to data and analysis is not enough - there is a gulf between looking at a web page and being able to harness information to make your work easier and your efforts more effective.</p>
+      <p>Our Standard Services are free; currently they include using advanced tools to download data visuals, create alerts, manage collections, access data over API and attend best practice webinars.</p>
+      <p>Our Premium Services add further value by customising and packaging analysis and related data to your specific requirements as well as the option to showcase your own content to a growing African and international audience. We will usually charge for Premium services and use this income to re-invest in the Takwimu platform.</p>
+
+      {% for service in settings.takwimu.SupportServicesSetting.services %}
+        {% if service.value.category != "Persona" %}
+          <p class="font-weight-bold mt-4 mb-0" style="font-size: 24px;">{{ service.value.title }}</p>
+          {{ service.value.description | richtext }}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
 
   {% include 'takwimu/_includes/sections/support-services/button.html' %}
 
diff --git a/takwimu/templates/takwimu/about/support_services.html b/takwimu/templates/takwimu/about/support_services.html
index 07dd953c..8039ecf7 100644
--- a/takwimu/templates/takwimu/about/support_services.html
+++ b/takwimu/templates/takwimu/about/support_services.html
@@ -3,26 +3,11 @@
 
 {% block content %}
 
-  <div class="bg-white py-2">
-    <div class="container">
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb bg-transparent mb-0">
-          <li class="breadcrumb-item">
-            <a href="/"><u>Home</u></a>
-          </li>
-          <li class="breadcrumb-item active" aria-current="page">
-            Services
-          </li>
-        </ol>
-      </nav>
-    </div>
-  </div>
-
   <div class="container-fluid">
     <div style="background-color: #f9f9f9;">
       <div class="py-5 container" style="max-width: 800px;">
         <div class="text-center mb-3">
-          <h1 class="font-weight-bold display-3">
+          <h1 class="display-3">
             Takwimu Services
           </h1>
           <p>Takwimu offers both free and premium services designed to help our users access and use high quality data and analysis.</p>
diff --git a/takwimu/templates/takwimu/about_page.html b/takwimu/templates/takwimu/about_page.html
deleted file mode 100644
index d5766ca9..00000000
--- a/takwimu/templates/takwimu/about_page.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends 'takwimu/_layouts/page.html' %}
-{% load wagtailcore_tags %}
-
-{% block content %}
-
-<div class="py-5 container" style="max-width: 800px;">
-  <h1 class="text-center display-3">About Us</h1>
-  {{ settings.takwimu.AboutUsSettings.about_us | richtext }}
-</div>
-
-{% include 'takwimu/_includes/partners.html' %}
-
-{% include 'takwimu/_includes/sections/support-services/button.html' %}
-
-{% include 'takwimu/_includes/sections/updates.html' %}
-
-{% endblock %}
diff --git a/takwimu/templates/takwimu/contact_us_page.html b/takwimu/templates/takwimu/contact_us_page.html
index a8fc415d..fef35728 100644
--- a/takwimu/templates/takwimu/contact_us_page.html
+++ b/takwimu/templates/takwimu/contact_us_page.html
@@ -6,7 +6,7 @@
 
 <div class="bg-light py-5">
   <div class="container">
-      <h1 class="text-center display-3">Contact Us</h1>
+      <h1 class="text-center display-4">Contact Us</h1>
       <p class="text-center">We'd love to hear from you. You can reach us at:</p>
       <div class="row mt-5">
         <div class="col">
@@ -24,7 +24,7 @@ <h3>Address</h3>
         <div class="col">
           <h3>Social</h3>
           <ul class="list-unstyled">
-          {% to_list 'facebook' 'twitter' 'medium' 'youtube' 'instagram' 'github' as social_medias %}
+          {% to_list 'twitter' 'medium' 'facebook' 'github' as social_medias %}
           {% for social_media in social_medias %}
             {% if settings.takwimu.SocialMediaSetting|object_value:social_media %}
               <li>
@@ -52,6 +52,4 @@ <h3>Social</h3>
 
 {% include 'takwimu/_includes/sections/updates.html' %}
 
-
-
 {% endblock %}
diff --git a/takwimu/templates/takwimu/sdg_topic_page.html b/takwimu/templates/takwimu/sdg_topic_page.html
index 644e012f..d00e476d 100644
--- a/takwimu/templates/takwimu/sdg_topic_page.html
+++ b/takwimu/templates/takwimu/sdg_topic_page.html
@@ -3,15 +3,12 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="text-light" style="background: #074c9c url('{% static 'img/bg/profile-hero.jpg' %}') no-repeat center; background-size: cover;">
-  <div class="text-center py-3" style="background-color: rgba(7, 76, 156, 0.8)">
+<div style="background: #fff url('{% static 'img/bg/profile-hero-line.png' %}') no-repeat center; background-size: cover;">
+  <div class="text-center py-3" style="background-color: rgba(255, 255, 255, 0.9)">
     <div class="container">
       <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-transparent">
-          <li class="breadcrumb-item d-flex align-items-center">
-            <a href="/" class="text-light"><u>Home</u></a>
-          </li>
-          <li class="breadcrumb-item active text-light">
+          <li class="breadcrumb-item active">
             <div class="dropdown  d-inline">
               <button class="btn btn-primary dropdown-toggle" type="button" id="topicsSDG" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
@@ -25,22 +22,22 @@
           </li>
         </ol>
       </nav>
-      <h1 class="display-3 text-light py-2" style="font-weight: 900">Find data by SDG Indicator</h1>
-      <p class="p-4" style="font-size: 18px">
+      <h1 class="display-3 py-2">Find data by SDG Indicator</h1>
+      <p class="p-4 line-height-md">
         All Takwimu data comes with analysis from our expert team, providing you with the insights you need.
       </p>
     </div>
   </div>
 </div>
 
-<div class="container-fluid bg-secondary">
+<div class="container-fluid bg-primary">
   <div class="container py-4">
     {% include 'takwimu/_includes/sections/sdg/nav.html' %}
   </div>
 </div>
 <div class="arrow-down mx-auto"></div>
 
-<div class="explore-topic container-fluid py-2">
+<div class="explore-topic container-fluid pt-4 pb-5">
   <div class="container">
     {% include 'takwimu/_includes/sections/sdg/index.html' %}
   </div>
diff --git a/takwimu/templates/takwimu/topic_page.html b/takwimu/templates/takwimu/topic_page.html
index 1f20ca63..a2efe71e 100644
--- a/takwimu/templates/takwimu/topic_page.html
+++ b/takwimu/templates/takwimu/topic_page.html
@@ -3,15 +3,12 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="text-light" style="background: #074c9c url('{% static 'img/bg/profile-hero.jpg' %}') no-repeat center; background-size: cover;">
-  <div class="text-center py-3" style="background-color: rgba(7, 76, 156, 0.8)">
+<div style="background: #fff url('{% static 'img/bg/profile-hero-line.png' %}') no-repeat center; background-size: cover;">
+  <div class="text-center py-3" style="background-color: rgba(255, 255, 255, 0.9)">
     <div class="container">
       <nav aria-label="breadcrumb">
         <ol class="breadcrumb bg-transparent">
-          <li class="breadcrumb-item d-flex align-items-center">
-            <a href="/" class="text-light"><u>Home</u></a>
-          </li>
-          <li class="breadcrumb-item active text-light">
+          <li class="breadcrumb-item active">
             <div class="dropdown  d-inline">
               <button class="btn btn-primary dropdown-toggle" type="button" id="topicsSDG" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Data by topic
@@ -24,8 +21,8 @@
           </li>
         </ol>
       </nav>
-      <h1 class="display-3 text-light py-2" style="font-weight: 900">Find data by topic</h1>
-      <p class="p-4" style="font-size: 18px">
+      <h1 class="display-3 py-2">Find data by topic</h1>
+      <p class="p-4 line-height-md">
         All Takwimu data comes with analysis from our expert team, providing you with the insights you need.
       </p>
     </div>
@@ -37,19 +34,20 @@ <h1 class="display-3 text-light py-2" style="font-weight: 900">Find data by topi
   </div>
 </div>
 
+<div class="clearfix container text-center py-5">
+  <div class="wrapper p-3 mb-2">
+    <h1>Explore the data by country</h1>
+  </div>
+  <div class="col-lg-8 col-md-10 mx-auto tab-pane fade show active"
+    id="explore-countries" role="tabpanel" aria-labelledby="explore-countries-tab">
+    {% include 'takwimu/_includes/sections/explore/countries.html' %}
+  </div>
+</div>
+
 {% include 'takwimu/_includes/sections/support-services/button.html' %}
 
 {% include 'takwimu/_includes/sections/stories/index.html' %}
 
-<div class="clearfix container text-center py-5">
-  <div class="wrapper p-3">
-    <h4 class="display-4 font-weight-bold">Explore the data by country</h4>
-  </div>
-    <div class="col-lg-8 col-md-10 mx-auto tab-pane fade show active"
-      id="explore-countries" role="tabpanel" aria-labelledby="explore-countries-tab">
-      {% include 'takwimu/_includes/sections/explore/countries.html' %}
-    </div>
-</div>
 
 {% include 'takwimu/_includes/sections/updates.html' %}
 <style>
diff --git a/takwimu/urls.py b/takwimu/urls.py
index 0df6e275..def60191 100644
--- a/takwimu/urls.py
+++ b/takwimu/urls.py
@@ -19,8 +19,8 @@
     url(r'^$', cache_page(60 * 60)(HomePageView.as_view()), name='home'),
     url(r'^about/support-services',
         SupportServicesIndexView.as_view(),
-        name='about_support_services'),
-    url(r'^about/?$', AboutUsView.as_view(), name='about_page'),
+        name='about_supportservices'),
+    url(r'^about/?$', AboutUsView.as_view(), name='about'),
     url(r'^legal$', LegalView.as_view(), name='legal'),
     url(
         r'^{}/$'.format(PROFILES_GEOGRAPHY_REGEX),