diff --git a/404.html b/404.html
index 53c1e76..18a82a5 100644
--- a/404.html
+++ b/404.html
@@ -63,7 +63,7 @@
     <h1>404</h1>
     <h2 data-l10n-key="title">We looked everywhere...</h2>
     <p data-l10n-key="text">but it looks like this page is missing.</p>
-    <a class="btn btn-primary" href="https://www.greenpeace.org/global/" data-l10n-key="cta">Go to homepage</a>
+    <a class="btn cta-btn" href="https://www.greenpeace.org/global/" data-l10n-key="cta">Go to homepage</a>
   </section>
 
   <script src="{{static}}404.js"></script>
diff --git a/gulpfile.js b/gulpfile.js
index 4194470..97dd240 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -43,7 +43,6 @@ const urls_json = 'urls.json';
 const js_array = [
   dest + api,
   'static/js/app.js',
-  'static/js/dropdown.js',
   'static/js/geoip.js',
   'static/js/country_list.js',
   'static/js/redirect.js'
diff --git a/index.html b/index.html
index c3a46b4..90f13c8 100644
--- a/index.html
+++ b/index.html
@@ -49,35 +49,31 @@
 
   <header>
     <div class="page-header-background">
-      <img src="static/img/image.jpg" srcset="static/img/image.jpg 1200w, static/img/image-992w.jpg 992w, static/img/image-768w.jpg 768w, static/img/image-575w.jpg 575w, static/img/image-320w.jpg 320w" class="page-header-image">
+      <img alt="Greenpeace" src="static/img/image.jpg" srcset="static/img/image.jpg 1200w, static/img/image-992w.jpg 992w, static/img/image-768w.jpg 768w, static/img/image-575w.jpg 575w, static/img/image-320w.jpg 320w" class="page-header-image">
     </div>
 
     <div>
       <img src="static/img/gp-logo.svg" alt="Greenpeace" class="logo">
     </div>
 
-    <div class="heading">
+    <h1 class="heading">
       Together we can change the world
-    </div>
+    </h1>
 
     <div id="loading">
       <div class="three-quarters" id="spinner-people">loading...</div>
     </div>
 
-    <div id="cta" class="cta">
-      <div id="dropdown" class="dropdown">
-        <a class="btn btn-primary" id="selection" href="https://www.greenpeace.org/international/">
-          <span class="truncate">Go to Greenpeace <span id="country-name">International</span></span> <i id="arrow" class="arrow arrow-down"></i>
-        </a>
-        <div id="dropdown-group" class="dropdown-group">
-        </div>
-      </div>
-      <span class="hidden-tall">or</span>
-      <a class="btn btn-secondary hidden-tall" href="#country-list" id="country">Select another country/region</a>
-    </div>
+    <nav id="cta" class="cta">
+      <a class="btn cta-btn" id="selection" href="https://www.greenpeace.org/international/">
+        <span class="truncate">Go to Greenpeace <span id="country-name">International</span></span> <i id="arrow" class="arrow arrow-down"></i>
+      </a>
+      <span class="spacer hidden-tall">or</span>
+      <a class="btn cta-btn" href="#country-list-wrapper" id="country">Select another country/region</a>
+    </nav>
   </header>
 
-  <div id="country-list" class="country-list"></div>
+  <div id="country-list-wrapper" class="country-list-wrapper"></div>
 
   <script src="static/main.js"></script>
 </body>
diff --git a/package-lock.json b/package-lock.json
index ff600c1..b91d667 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1033,9 +1033,9 @@
       "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g=="
     },
     "@greenpeace/dashdash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@greenpeace/dashdash/-/dashdash-1.1.3.tgz",
-      "integrity": "sha512-gYpb7ZSpiNx+KHv7YrU8ebOAUx3Saeyc7HPz7qgJ6rTU3HZijrfjQDecJvv99Tn2iuQITTsjF/+oyVfG5/VstA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@greenpeace/dashdash/-/dashdash-1.2.1.tgz",
+      "integrity": "sha512-5Pcza+Qg06sge3ruGsed/jkQyDaf753bb/5LUAO30mhHmAc4OtGKfineotDgNa2ZsAmHzoXwKGpVu4XZ4x0tnw==",
       "requires": {
         "postcss": "^7.0.32"
       },
diff --git a/package.json b/package.json
index a32885b..ff44b86 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
-    "@greenpeace/dashdash": "^1.1.3",
+    "@greenpeace/dashdash": "^1.2.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^5.16.0",
     "fs": "0.0.1-security",
diff --git a/static/js/country_list.js b/static/js/country_list.js
index 849a8e4..5daa719 100644
--- a/static/js/country_list.js
+++ b/static/js/country_list.js
@@ -8,12 +8,12 @@ Object.entries(data).forEach(letter => {
   if ( '0' === letter[0] ) {
     international_html += `<a class="international" href="${letter[1][0].url}">${letter[1][0].name}</a>`;
   } else {
-    sublist_html += `<li><h3 class="country-group-letter">${letter[0]}</h3>
+    sublist_html += `<li class="country-list-item"><h3 class="country-group-letter">${letter[0]}</h3>
       <ul class="countries_sublist">`;
     letter[1].forEach(country => {
       const lang = country.lang;
       lang.forEach(item => {
-        sublist_html += `<li>
+        sublist_html += `<li class="countries_sublist-item">
           <a href="${item.url}">${country.name} | ${item.name}</a>
           </li>`;
       });
@@ -22,4 +22,4 @@ Object.entries(data).forEach(letter => {
   }
 });
 let countries_html = `<h2>All countries and regions</h2>${international_html}<ul class="countries_list">${sublist_html}</ul>`;
-byID('country-list').innerHTML = countries_html;
+byID('country-list-wrapper').innerHTML = countries_html;
diff --git a/static/js/dropdown.js b/static/js/dropdown.js
deleted file mode 100644
index 7ae0579..0000000
--- a/static/js/dropdown.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/* exported dropdown_toggle */
-'use strict';
-
-const dropdown_toggle = () => {
-  const selection = document.getElementById('dropdown');
-  let classes = selection.className.split(' ');
-  let existingIndex = classes.indexOf('open');
-  if (existingIndex >= 0) {
-    classes.splice(existingIndex, 1);
-  } else {
-    classes.push('open');
-  }
-  selection.className = classes.join(' ');
-  return false;
-};
diff --git a/static/js/geoip.js b/static/js/geoip.js
index b63f45b..fcf6a28 100644
--- a/static/js/geoip.js
+++ b/static/js/geoip.js
@@ -1,4 +1,4 @@
-/* global data, dropdown_toggle, byID */
+/* global data, byID */
 'use strict';
 
 // IP Geolocation
@@ -12,19 +12,9 @@ Object.entries(data).forEach(letter => {
         byID('selection').setAttribute('href', country.lang[0].url);
       } else {
         byID('selection').setAttribute('href', '#');
-        byID('arrow').style.display = 'inline-block';
-        byID('selection').classList.add('dropdown-toggle');
-        let items = ``;
-        const lang = country.lang;
-        lang.forEach(item => {
-          items += `<a class="btn btn-secondary dropdown-item" href="${item.url}">${item.name}</a>`;
-        });
-        byID('dropdown-group').innerHTML = items;
-        byID('selection').addEventListener('click', dropdown_toggle);
       }
     }
   });
 });
 
 byID('loading').style.display = 'none';
-byID('cta').classList.add('open');
diff --git a/static/js/redirect.js b/static/js/redirect.js
index 097ff37..a5f9a3c 100644
--- a/static/js/redirect.js
+++ b/static/js/redirect.js
@@ -28,9 +28,8 @@ function redirectFromCookie(cookie, location) {
   const nroName = urls[urlList.indexOf(nroUrl)][1];
 
   // Redirect with spinner and link
-  byID('cta').innerHTML = `<div id="dropdown" class="dropdown">
-    <a id="selection" class="btn btn-primary solo" href="${nroUrl}">Redirecting to <span class="nro-name">Greenpeace ${nroName}</span></a>
-    </div>`;
+  byID('cta').innerHTML = `<a id="selection" class="btn cta-btn" href="${nroUrl}">
+    Redirecting to <span class="nro-name">Greenpeace ${nroName}</span></a>`;
   try {
     window.location.replace(nroUrl);
   } catch (e) {
@@ -38,4 +37,4 @@ function redirectFromCookie(cookie, location) {
   }
 }
 
-redirectFromCookie(document.cookie, document.location);
\ No newline at end of file
+redirectFromCookie(document.cookie, document.location);
diff --git a/static/scss/404.scss b/static/scss/404.scss
index c8883d2..9f4f73d 100644
--- a/static/scss/404.scss
+++ b/static/scss/404.scss
@@ -1,4 +1,5 @@
 // Global
+@import "master-theme/assets/src/scss/base/tokens";
 @import "master-theme/assets/src/scss/base/variables";
 @import "master-theme/assets/src/scss/base/colors";
 @import "master-theme/assets/src/scss/base/mixins";
diff --git a/static/scss/base/_404.scss b/static/scss/base/_404.scss
index 6243372..557254e 100644
--- a/static/scss/base/_404.scss
+++ b/static/scss/base/_404.scss
@@ -1,5 +1,5 @@
 body {
-  background-color: $white;
+  background-color: var(--white);
 }
 
 header {
@@ -7,12 +7,12 @@ header {
   height: auto;
 
   .top-navigation {
-    background: $white;
+    background: var(--white);
     height: 68px;
 
     .site-logo {
       position: relative;
-      padding: 0 24px;
+      padding: 0 $sp-3;
       margin: auto 0;
 
       .logo {
@@ -25,7 +25,7 @@ header {
   .page-header-background {
     position: relative;
     height: auto;
-    margin-top: 3.375rem;
+    margin-top: $sp-7;
     width: 100%;
 
     .page-header-image {
@@ -34,26 +34,25 @@ header {
   }
 }
 
-.btn-primary {
-  background-color: rgb(255, 225, 0);
-  color: black;
+.cta-btn {
+  background-color: var(--p4-action-yellow-500);
+  color: var(--grey-900);
 
   &:visited {
-    background-color: rgb(255, 225, 0);
-    color: black;
+    background-color: var(--p4-action-yellow-500);
+    color: var(--grey-900);
   }
 
   &:active,
   &:hover {
-    background-color: #fece00;
-    color: black;
+    background-color: var(--p4-action-yellow-600);
+    color: var(--grey-900);
   }
 }
 
 section {
-  padding: 24px;
-  color: black;
-  font-family: $roboto;
+  padding: $sp-3;
+  color: var(--grey-900);
   box-sizing: border-box;
 
   h1 {
@@ -72,12 +71,12 @@ section {
   p {
     font-size: $font-size-xl;
     font-weight: 400;
-    margin: 8px 0;
+    margin: $sp-1 0;
     line-height: 1;
   }
 
   .btn {
-    margin-top: 24px;
+    margin-top: $sp-3;
   }
 }
 
@@ -85,7 +84,7 @@ section {
   header {
     .top-navigation .site-logo {
       text-align: left;
-      padding: 0 60px;
+      padding: 0 $sp-7x;
     }
 
     .page-header-background {
@@ -98,14 +97,14 @@ section {
   }
 
   section {
-    padding: 40px 60px;
+    padding: $sp-5 $sp-7x;
 
     h1 {
       font-size: 90px;
     }
 
     .btn {
-      margin-top: 32px;
+      margin-top: $sp-4;
     }
   }
 }
@@ -127,11 +126,10 @@ section {
   section {
     position: absolute;
     top: 25%;
-    color: white;
+    color: var(--white);
 
     &.maintenance {
-      color: black;
-      background-color: #f6f4ef;
+      color: var(--grey-900);
       opacity: 0.9;
     }
 
@@ -144,7 +142,7 @@ section {
     }
 
     .btn {
-      margin-top: 40px;
+      margin-top: $sp-5;
     }
   }
 }
diff --git a/static/scss/base/_body.scss b/static/scss/base/_body.scss
index 82ea20a..d4d2012 100644
--- a/static/scss/base/_body.scss
+++ b/static/scss/base/_body.scss
@@ -9,13 +9,11 @@ html {
 }
 
 body {
-  color: $grey-80;
-  font-family: $lora;
+  font-family: var(--font-family-tertiary);
   font-size: 16px;
-  line-height: 20px;
+  line-height: var(--line-height-s--font-family-tertiary);
   position: relative;
   overflow-y: hidden;
-  background-color: #ecf1f3;
 }
 
 :root {
diff --git a/static/scss/layout/_country_list.scss b/static/scss/layout/_country_list.scss
index dde0100..8015eae 100644
--- a/static/scss/layout/_country_list.scss
+++ b/static/scss/layout/_country_list.scss
@@ -1,10 +1,12 @@
-.country-list {
+.country-list-wrapper {
   line-height: 1.5;
   width: 100%;
-  color: #3d3d3d;
-  font-family: $roboto;
-  margin: 60px auto;
-  padding: 0 15px;
+  color: var(--grey-900);
+  font-family: var(--font-family-tertiary);
+  font-size: var(--font-size-m--font-family-tertiary);
+  margin: $sp-7 auto;
+  padding: 0 $sp-4;
+  box-sizing: border-box;
 
   @include small-and-up {
     max-width: 540px;
@@ -23,23 +25,26 @@
   }
 
   h2 {
-    font-size: 1.5rem;
+    font-size: 22px;
     line-height: 1.5;
-    margin-bottom: 20px;
+    margin: 0 0 $sp-6 0;
+    text-align: center;
+    font-weight: var(--font-weight-regular);
   }
 
   a {
-    color: #3d3d3d;
-    text-decoration: underline;
+    color: var(--grey-900);
+    text-decoration: none;
+    font-size: 17px;
 
     &:hover {
-      font-weight: 700;
+      text-decoration: underline;
     }
   }
 
-  > ul {
-    margin-top: 1.5em;
-    padding: 0 0 2em;
+  .countries_list {
+    margin-top: $sp-3;
+    padding: 0;
 
     @include medium-and-up {
       column-count: 2;
@@ -50,27 +55,36 @@
     }
   }
 
-  li {
-    position: relative;
+  .country-list-item {
     list-style: none;
-    padding-left: 2em;
     break-inside: avoid;
 
-    ul {
-      break-inside: avoid;
-      padding: 0;
-      margin: 0 1em 1.2em 0;
+    .country-group-letter {
+      font-family: var(--font-family-primary);
+      margin: 0 0 $sp-1 0;
+      font-size: var(--font-size-l--font-family-primary);
+      line-height: var(--line-height-l--font-family-primary);
+      font-weight: var(--font-weight-regular);
     }
 
-    li {
-      position: relative;
+    .countries_sublist {
       break-inside: avoid;
+      padding: 0;
+      margin: 0 $sp-1 $sp-1x 0;
+
+      .countries_sublist-item {
+        list-style: none;
+        position: relative;
+        break-inside: avoid;
+
+        &:not(:last-child) {
+          margin-bottom: $sp-1;
+        }
+      }
     }
-  }
 
-  .country-group-letter {
-    line-height: 1.5;
-    font-weight: bold;
-    color: grey;
+    &:not(:last-child) {
+      margin-bottom: $sp-4;
+    }
   }
 }
diff --git a/static/scss/layout/_header.scss b/static/scss/layout/_header.scss
index 9390269..7e47fdf 100644
--- a/static/scss/layout/_header.scss
+++ b/static/scss/layout/_header.scss
@@ -36,30 +36,22 @@ header {
   }
 
   .heading {
-    color: white;
-    font-family: $roboto;
-    font-size: 1.4rem;
-    font-weight: bold;
-    margin: 20px 16px 40px 16px;
+    color: var(--white);
+    font-size: 32px;
     text-align: center;
-    line-height: normal;
 
     @include small-and-up {
-      font-size: 3rem;
-    }
-
-    @include large-and-up {
-      line-height: inherit;
-      margin: 30px 16px 60px 16px;
+      font-size: 48px;
+      margin: 40px $sp-2;
     }
   }
 
   .cta {
     text-transform: uppercase;
-    font-family: $roboto;
     font-size: 0.875rem;
     font-weight: 700;
-    display: none;
+    display: flex;
+    justify-content: center;
     flex-direction: column;
     text-align: center;
     align-items: center;
@@ -69,108 +61,33 @@ header {
       flex-direction: row;
     }
 
-    &.open {
-      display: flex;
-    }
-
-    .btn {
+    .cta-btn {
       width: $btn-width;
       max-width: 85vw;
-      padding: 16px;
+      padding: $sp-2;
       margin: 10px auto;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
+      box-shadow: 0 2px 5px rgba($grey-900, .25);
       line-height: inherit;
-      font-weight: 700;
+      font-weight: var(--font-weight-regular);
+      background-color: var(--p4-action-yellow-500);
+      color: var(--grey-900);
 
-      @include medium-and-up {
-        margin: 0 12px;
+      &:visited {
+        background-color: var(--p4-action-yellow-500);
       }
-    }
-
-    .btn-primary {
-      background-color: $orange;
-      color: white;
-    }
-
-    .btn-secondary {
-      background-color: #e8e8ec;
-      border-color: #e8e8ec;
-      color: black;
 
-      &:active {
-        background-color: #e8e8ec !important;
-        border-color: #e8e8ec !important;
+      &:active,
+      &:hover {
+        background-color: var(--p4-action-yellow-600);
       }
-    }
-
-    .btn.solo {
-      min-width: $btn-width;
-      width: inherit;
-    }
-
-    .nro-name {
-      white-space: nowrap;
-    }
-
-    i.arrow {
-      display: none;
-      border: solid white;
-      border-width: 0 3px 3px 0;
-      padding: 3px;
-      vertical-align: .2em;
-      margin-left: 12px;
-      transform: rotate(45deg);
-      transition-property: transform;
-      transition-duration: 100ms;
-      transition-timing-function: linear;
-    }
-
-    .dropdown-group {
-      display: none;
-      position: absolute;
-      z-index: 99;
-      width: $btn-width;
-      max-width: 85vw;
-      margin: -10px 0 10px 0;
 
       @include medium-and-up {
-        margin: 0 12px 0 12px;
+        margin: 0 $sp-1x;
       }
     }
 
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-
-    .dropdown.open .dropdown-group {
-      display: block;
-    }
-
-    .dropdown.open .arrow {
-      transform: rotate(-135deg);
-      vertical-align: 0;
-    }
-
-    .dropdown-item {
-      display: inline-block;
-      box-shadow: none;
-      color: #3d3d3d;
-      font-weight: 400;
-      text-align: left;
-      text-transform: initial;
-      padding-left: 20px;
-      margin: 0;
-      width: calc(#{$btn-width} - 4px);
-      max-width: calc(85vw - 4px);
-
-      &:not(:first-child) {
-        margin-top: -6px;
-      }
-    }
-
-    .dropdown-item:hover {
-      font-weight: 700;
+    .nro-name {
+      white-space: nowrap;
     }
 
     .truncate {
@@ -188,6 +105,12 @@ header {
       }
     }
 
+    .spacer {
+      margin: 0 28px;
+      font-family: var(--font-family-primary);
+      font-size: 18px;
+    }
+
     .hidden-tall {
       @media (min-height: 2000px) {
         display: none;
diff --git a/static/scss/master-theme b/static/scss/master-theme
index 2fe3859..cbc24b3 160000
--- a/static/scss/master-theme
+++ b/static/scss/master-theme
@@ -1 +1 @@
-Subproject commit 2fe38592c2eb60d888f5fcad15ec20c52b92c31f
+Subproject commit cbc24b3ebef225b42ef1f1aef64ab3c853f0c1e8
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 897bee1..433b3ef 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -1,4 +1,5 @@
 // Global
+@import "master-theme/assets/src/scss/base/tokens";
 @import "master-theme/assets/src/scss/base/variables";
 @import "master-theme/assets/src/scss/base/colors";
 @import "master-theme/assets/src/scss/base/mixins";