diff --git a/app.js b/app.js
index 8e1e68a..842f21c 100644
--- a/app.js
+++ b/app.js
@@ -14,7 +14,7 @@ const categories = require('./routes/categories')
 const about = require('./routes/about')
 const settings = require('./routes/settings')
 const sitemap = require('./routes/sitemap')
-const {initClient} = require('./services/contentful')
+const { initClient, getSpace } = require('./services/contentful')
 const breadcrumb = require('./lib/breadcrumb')
 const app = express()
 
@@ -31,21 +31,58 @@ app.use(cookieParser())
 app.use(express.static(path.join(__dirname, 'public')))
 app.use(breadcrumb())
 
-// Pass custom helpers to all our templates
-app.use(function (req, res, next) {
+// Pass our application state and custom helpers to all our templates
+app.use(async function (req, res, next) {
+  // Inject ucstom helpers
   res.locals.helpers = helpers
+
+  // Express query string
   const qs = url.parse(req.url).query
   res.locals.queryString = qs ? `?${qs}` : ''
   res.locals.query = req.query
   res.locals.currentPath = req.path
-  // Allow setting of credentials via query parameters
+
+  // Allow setting of API credentials via query parameters
+  let settings = req.cookies.theExampleAppSettings
+
   const { space_id, preview_access_token, delivery_access_token } = req.query
   if (space_id && preview_access_token && delivery_access_token) { // eslint-disable-line camelcase
-    const settings = {space: space_id, cda: delivery_access_token, cpa: preview_access_token}
+    settings = {space: space_id, cda: delivery_access_token, cpa: preview_access_token}
     res.cookie('theExampleAppSettings', settings, { maxAge: 900000, httpOnly: true })
-    initClient(settings)
-  } else {
-    initClient(req.cookies.theExampleAppSettings)
+  }
+
+  initClient(settings)
+  res.locals.settings = settings
+
+  // Manage language and API type state and make it globally available
+  const apis = [
+    {
+      id: 'cda',
+      label: 'Delivery (published content)'
+    },
+    {
+      id: 'cpa',
+      label: 'Preview (draft content)'
+    }
+  ]
+
+  res.locals.currentApi = apis
+    .find((api) => api.id === (req.query.api || 'cda'))
+
+  // Get enabled locales from Contentful
+  const space = await getSpace()
+  res.locals.locales = space.locales
+
+  const defaultLocale = res.locals.locales
+    .find((locale) => locale.default)
+
+  if (req.query.locale) {
+    res.locals.currentLocale = space.locales
+      .find((locale) => locale.code === req.query.locale)
+  }
+
+  if (!res.locals.currentLocale) {
+    res.locals.currentLocale = defaultLocale
   }
 
   next()
diff --git a/assets/stylesheets/global/header.css b/assets/stylesheets/global/header.css
index 83ff5f0..46d9028 100644
--- a/assets/stylesheets/global/header.css
+++ b/assets/stylesheets/global/header.css
@@ -27,22 +27,11 @@
     justify-content: space-between;
     align-items: center;
 
-    margin-bottom: calc(var(--grid-gutter) / 2);
-
     @media (--breakpoint-desktop) {
       flex: 0 1 auto;
       flex-direction: row;
       margin-bottom: 0;
     }
-
-    & div + div {
-      margin: calc(var(--grid-gutter) / 2) 0 0;
-
-
-      @media (--breakpoint-desktop) {
-        margin: 0 0 0 calc(var(--grid-gutter) / 2);
-      }
-    }
   }
 
   @element upper-second {
@@ -56,14 +45,6 @@
       flex: 0 1 auto;
       flex-direction: row;
     }
-
-    & div + div {
-      margin: calc(var(--grid-gutter) / 2) 0 0;
-
-      @media (--breakpoint-desktop) {
-        margin: 0 0 0 calc(var(--grid-gutter) / 2);
-      }
-    }
   }
 
   @element upper-link {
@@ -73,6 +54,11 @@
 
   @element upper-copy {
     display: inline-flex;
+    margin: 0 0 calc(var(--grid-gutter) / 2);
+
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
   }
 
   @element upper-icon {
@@ -107,6 +93,10 @@
       height: auto;
       margin-right: calc(var(--grid-gutter) / 2);
     }
+
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
   }
 
   @element logo {
@@ -134,52 +124,98 @@
 
     @media (--breakpoint-desktop) {
       flex: 0 0 auto;
+      flex-direction: row;
+    }
+  }
+
+  @element controls_group {
+    flex: 0 0 auto;
+    position: relative;
+
+    display: flex;
+    margin: 0 0 calc(var(--grid-gutter) / 2);
+    padding: 0 calc(var(--grid-gutter) / 2);
+
+    border: none;
+    background: var(--color-palette-blue-medium);
+    border-radius: var(--border-radius);
+    color: inherit;
+
+    &:last-child {
+      margin: 0;
     }
 
-    & form {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+    @media (--breakpoint-desktop) {
+      margin: 0 calc(var(--grid-gutter) / 2) 0 0;
+    }
+  }
 
-      @media (--breakpoint-desktop) {
-        justify-content: flex-end;
-      }
+  @element controls_label {
+    position: relative;
+    z-index: 1;
+    font-family: var(--font-medium);
+    cursor: pointer;
+  }
 
-      & .group {
-        flex: 0 0 auto;
-        display: flex;
-        padding: 0 calc(var(--grid-gutter) / 2);
-        margin: 0;
+  @element controls_dropdown {
+    position: absolute;
+    z-index: 2;
+    box-sizing: border-box;
 
-        border: none;
-        background: var(--color-palette-blue-medium);
-        border-radius: var(--border-radius);
-        color: inherit;
+    width: 260px;
+    max-width: 90vw;
+    margin: calc(var(--grid-gutter) / 2 - 4px) 0 0;
 
-        & + .group {
-          margin-left: var(--grid-gutter)
-        }
+    opacity: 0;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
 
-        & select,
-        & label {
-          flex: 0 0 auto;
-          display: inline-block;
-          margin-top: 0;
-          margin-bottom: 0;
+    transition: 0.3s opacity ease;
+    pointer-events: none;
 
-          color: inherit;
-          font-weight: normal;
-          font-family: var(--font-medium);
-          font-size: 0.8em;
+    @modifier active {
+      opacity: 1;
+      pointer-events: all;
 
-          background: transparent;
-          border: none;
-        }
+      &:before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: -5px;
+        width: 10px;
+        height: 10px;
 
-        & select {
-          margin-top: 2px;
-        }
+        background-color: inherit;
+        transform: translateX(-50%) rotate(45deg);
       }
     }
   }
+
+  @element controls_help_text {
+    padding: calc(var(--grid-gutter) / 2);
+    color: var(--color-text-grey);
+  }
+
+  @element controls_button {
+    box-sizing: border-box;
+    height: auto;
+    width: 100%;
+    margin: 0;
+
+    border-radius: 0;
+    background: var(--header-dropdown-bg);
+
+    color: var(--header-dropdown-btn-color);
+    font-size: 1em;
+
+    &:hover {
+      background: var(--header-dropdown-bg-hover);
+      color: var(--header-dropdown-btn-color);
+    }
+
+    @modifier active {
+      background: var(--header-dropdown-bg-active);
+    }
+  }
 }
diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css
index b1604c8..2b15ee1 100644
--- a/assets/stylesheets/layout/layout-sidebar.css
+++ b/assets/stylesheets/layout/layout-sidebar.css
@@ -40,8 +40,9 @@
     padding-top: calc(var(--grid-gutter) / 4);
 
     @media (--breakpoint-desktop) {
-      flex: 0 1 auto;
-      width: var(--layout-sidebar-content-width);
+      flex: 0 1 var(--layout-sidebar-content-width);
+      width: 100%;
+      box-sizing: border-box;
       margin-left: var(--grid-gutter);
     }
 
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index 04d7767..bae8656 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -58,6 +58,11 @@
   --cta-bg-hover: var(--color-palette-blue-medium);
   --cta-radius: 3px;
 
+  --header-dropdown-btn-color: #263545;
+  --header-dropdown-bg: #fff;
+  --header-dropdown-bg-active: #d3dce0;
+  --header-dropdown-bg-hover: #e5ebed;
+
   --module-copy-emphasized-bg: #8091a5;
   --module-copy-emphasized-color: #c3cfd5;
   --module-copy-emphasized-headlines-color: #fff;
diff --git a/helpers.js b/helpers.js
index 690db2c..3ee18aa 100644
--- a/helpers.js
+++ b/helpers.js
@@ -15,4 +15,3 @@ function removeIvalidDataURL (content) {
   let regex = /data:\S+;base64\S*/gm
   return content.replace(regex, '#')
 }
-
diff --git a/public/scripts/hoverintent.min.js b/public/scripts/hoverintent.min.js
new file mode 100755
index 0000000..4b58e5b
--- /dev/null
+++ b/public/scripts/hoverintent.min.js
@@ -0,0 +1 @@
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.hoverintent=e()}}(function(){return function e(t,n,o){function r(u,f){if(!n[u]){if(!t[u]){var s="function"==typeof require&&require;if(!f&&s)return s(u,!0);if(i)return i(u,!0);var c=new Error("Cannot find module '"+u+"'");throw c.code="MODULE_NOT_FOUND",c}var a=n[u]={exports:{}};t[u][0].call(a.exports,function(e){var n=t[u][1][e];return r(n||e)},a,a.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[function(e,t,n){"use strict";var o=e("xtend");t.exports=function(e,t,n){function r(e,t){return p&&(p=clearTimeout(p)),d=0,n.call(e,t)}function i(e){c=e.clientX,a=e.clientY}function u(e,n){if(p&&(p=clearTimeout(p)),Math.abs(v-c)+Math.abs(l-a)<y.sensitivity)return d=1,t.call(e,n);v=c,l=a,p=setTimeout(function(){u(e,n)},y.interval)}function f(t){return p&&(p=clearTimeout(p)),e.removeEventListener("mousemove",i,!1),1!==d&&(v=t.clientX,l=t.clientY,e.addEventListener("mousemove",i,!1),p=setTimeout(function(){u(e,t)},y.interval)),this}function s(t){return p&&(p=clearTimeout(p)),e.removeEventListener("mousemove",i,!1),1===d&&(p=setTimeout(function(){r(e,t)},y.timeout)),this}var c,a,v,l,m={},d=0,p=0,y={sensitivity:7,interval:100,timeout:0};return m.options=function(e){return y=o({},y,e),m},m.remove=function(){e&&(e.removeEventListener("mouseover",f,!1),e.removeEventListener("mouseout",s,!1))},e&&(e.addEventListener("mouseover",f,!1),e.addEventListener("mouseout",s,!1)),m}},{xtend:2}],2:[function(e,t,n){function o(){for(var e={},t=0;t<arguments.length;t++){var n=arguments[t];for(var o in n)r.call(n,o)&&(e[o]=n[o])}return e}t.exports=o;var r=Object.prototype.hasOwnProperty},{}]},{},[1])(1)});
diff --git a/public/scripts/index.js b/public/scripts/index.js
index 8f498c7..758b493 100644
--- a/public/scripts/index.js
+++ b/public/scripts/index.js
@@ -1,4 +1,40 @@
 document.addEventListener('DOMContentLoaded', () => {
+  // Header dropdowns
+  const controls = document.querySelectorAll('.header__controls_group')
+
+  controls.forEach((control) => {
+    const ref = control.querySelector('.header__controls_label')
+    const dropdownRef = control.querySelector('.header__controls_dropdown')
+
+    let popper = null
+
+    hoverintent(control, null, () => {
+      if (popper) {
+        dropdownRef.classList.remove('header__controls_dropdown--active')
+        window.setTimeout(popper.destroy, 500)
+      }
+    }).options({
+      sensitivity: 10,
+      interval: 150,
+      timeout: 300
+    })
+
+    ref.addEventListener('click', (e) => {
+      dropdownRef.classList.add('header__controls_dropdown--active')
+      popper = new Popper(
+        e.target,
+        dropdownRef,
+        {
+            // popper options here
+        }
+      )
+    })
+  })
+  // const apiRef =
+  // const apiDropdownRef = document.querySelector('#control-api .header__controls_dropdown')
+
+  // const apiTooltip =
+
   // Init highlight.js
   hljs.initHighlightingOnLoad()
 
diff --git a/public/scripts/popper.min.js b/public/scripts/popper.min.js
new file mode 100644
index 0000000..4553f65
--- /dev/null
+++ b/public/scripts/popper.min.js
@@ -0,0 +1,5 @@
+/*
+ Copyright (C) Federico Zivolo 2017
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=window.getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e||-1!==['HTML','BODY','#document'].indexOf(e.nodeName))return window.document.body;var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll)/.test(r+s+p)?e:n(o(e))}function r(e){var o=e&&e.offsetParent,i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===t(o,'position')?r(o):o:window.document.documentElement}function p(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||r(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function d(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return window.document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,a=document.createRange();a.setStart(i,0),a.setEnd(n,0);var l=a.commonAncestorContainer;if(e!==l&&t!==l||i.contains(n))return p(l)?l:r(l);var f=s(e);return f.host?d(f.host,t):d(e,s(t).host)}function a(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',i=e.nodeName;if('BODY'===i||'HTML'===i){var n=window.document.documentElement,r=window.document.scrollingElement||n;return r[o]}return e[o]}function l(e,t){var o=2<arguments.length&&void 0!==arguments[2]&&arguments[2],i=a(t,'top'),n=a(t,'left'),r=o?-1:1;return e.top+=i*r,e.bottom+=i*r,e.left+=n*r,e.right+=n*r,e}function f(e,t){var o='x'===t?'Left':'Top',i='Left'==o?'Right':'Bottom';return+e['border'+o+'Width'].split('px')[0]+ +e['border'+i+'Width'].split('px')[0]}function m(e,t,o,i){return X(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],ne()?o['offset'+e]+i['margin'+('Height'===e?'Top':'Left')]+i['margin'+('Height'===e?'Bottom':'Right')]:0)}function c(){var e=window.document.body,t=window.document.documentElement,o=ne()&&window.getComputedStyle(t);return{height:m('Height',e,t,o),width:m('Width',e,t,o)}}function h(e){return de({},e,{right:e.left+e.width,bottom:e.top+e.height})}function g(e){var o={};if(ne())try{o=e.getBoundingClientRect();var i=a(e,'top'),n=a(e,'left');o.top+=i,o.left+=n,o.bottom+=i,o.right+=n}catch(e){}else o=e.getBoundingClientRect();var r={left:o.left,top:o.top,width:o.right-o.left,height:o.bottom-o.top},p='HTML'===e.nodeName?c():{},s=p.width||e.clientWidth||r.right-r.left,d=p.height||e.clientHeight||r.bottom-r.top,l=e.offsetWidth-s,m=e.offsetHeight-d;if(l||m){var g=t(e);l-=f(g,'x'),m-=f(g,'y'),r.width-=l,r.height-=m}return h(r)}function u(e,o){var i=ne(),r='HTML'===o.nodeName,p=g(e),s=g(o),d=n(e),a=t(o),f=+a.borderTopWidth.split('px')[0],m=+a.borderLeftWidth.split('px')[0],c=h({top:p.top-s.top-f,left:p.left-s.left-m,width:p.width,height:p.height});if(c.marginTop=0,c.marginLeft=0,!i&&r){var u=+a.marginTop.split('px')[0],b=+a.marginLeft.split('px')[0];c.top-=f-u,c.bottom-=f-u,c.left-=m-b,c.right-=m-b,c.marginTop=u,c.marginLeft=b}return(i?o.contains(d):o===d&&'BODY'!==d.nodeName)&&(c=l(c,o)),c}function b(e){var t=window.document.documentElement,o=u(e,t),i=X(t.clientWidth,window.innerWidth||0),n=X(t.clientHeight,window.innerHeight||0),r=a(t),p=a(t,'left'),s={top:r-o.top+o.marginTop,left:p-o.left+o.marginLeft,width:i,height:n};return h(s)}function y(e){var i=e.nodeName;return'BODY'===i||'HTML'===i?!1:'fixed'===t(e,'position')||y(o(e))}function w(e,t,i,r){var p={top:0,left:0},s=d(e,t);if('viewport'===r)p=b(s);else{var a;'scrollParent'===r?(a=n(o(e)),'BODY'===a.nodeName&&(a=window.document.documentElement)):'window'===r?a=window.document.documentElement:a=r;var l=u(a,s);if('HTML'===a.nodeName&&!y(s)){var f=c(),m=f.height,h=f.width;p.top+=l.top-l.marginTop,p.bottom=m+l.top,p.left+=l.left-l.marginLeft,p.right=h+l.left}else p=l}return p.left+=i,p.top+=i,p.right-=i,p.bottom-=i,p}function E(e){var t=e.width,o=e.height;return t*o}function v(e,t,o,i,n){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var p=w(o,i,r,n),s={top:{width:p.width,height:t.top-p.top},right:{width:p.right-t.right,height:p.height},bottom:{width:p.width,height:p.bottom-t.bottom},left:{width:t.left-p.left,height:p.height}},d=Object.keys(s).map(function(e){return de({key:e},s[e],{area:E(s[e])})}).sort(function(e,t){return t.area-e.area}),a=d.filter(function(e){var t=e.width,i=e.height;return t>=o.clientWidth&&i>=o.clientHeight}),l=0<a.length?a[0].key:d[0].key,f=e.split('-')[1];return l+(f?'-'+f:'')}function x(e,t,o){var i=d(t,o);return u(o,i)}function O(e){var t=window.getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight),n={width:e.offsetWidth+i,height:e.offsetHeight+o};return n}function L(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function S(e,t,o){o=o.split('-')[0];var i=O(e),n={width:i.width,height:i.height},r=-1!==['right','left'].indexOf(o),p=r?'top':'left',s=r?'left':'top',d=r?'height':'width',a=r?'width':'height';return n[p]=t[p]+t[d]/2-i[d]/2,n[s]=o===s?t[s]-i[a]:t[L(s)],n}function T(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function C(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var i=T(e,function(e){return e[t]===o});return e.indexOf(i)}function N(t,o,i){var n=void 0===i?t:t.slice(0,C(t,'name',i));return n.forEach(function(t){t.function&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var i=t.function||t.fn;t.enabled&&e(i)&&(o.offsets.popper=h(o.offsets.popper),o.offsets.reference=h(o.offsets.reference),o=i(o,t))}),o}function k(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=x(this.state,this.popper,this.reference),e.placement=v(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.offsets.popper=S(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position='absolute',e=N(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function W(e,t){return e.some(function(e){var o=e.name,i=e.enabled;return i&&o===t})}function B(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length-1;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof window.document.body.style[r])return r}return null}function P(){return this.state.isDestroyed=!0,W(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.left='',this.popper.style.position='',this.popper.style.top='',this.popper.style[B('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function D(e,t,o,i){var r='BODY'===e.nodeName,p=r?window:e;p.addEventListener(t,o,{passive:!0}),r||D(n(p.parentNode),t,o,i),i.push(p)}function H(e,t,o,i){o.updateBound=i,window.addEventListener('resize',o.updateBound,{passive:!0});var r=n(e);return D(r,'scroll',o.updateBound,o.scrollParents),o.scrollElement=r,o.eventsEnabled=!0,o}function A(){this.state.eventsEnabled||(this.state=H(this.reference,this.options,this.state,this.scheduleUpdate))}function M(e,t){return window.removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function I(){this.state.eventsEnabled&&(window.cancelAnimationFrame(this.scheduleUpdate),this.state=M(this.reference,this.state))}function R(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function U(e,t){Object.keys(t).forEach(function(o){var i='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&R(t[o])&&(i='px'),e.style[o]=t[o]+i})}function Y(e,t){Object.keys(t).forEach(function(o){var i=t[o];!1===i?e.removeAttribute(o):e.setAttribute(o,t[o])})}function F(e,t,o){var i=T(e,function(e){var o=e.name;return o===t}),n=!!i&&e.some(function(e){return e.name===o&&e.enabled&&e.order<i.order});if(!n){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return n}function j(e){return'end'===e?'start':'start'===e?'end':e}function K(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=le.indexOf(e),i=le.slice(o+1).concat(le.slice(0,o));return t?i.reverse():i}function q(e,t,o,i){var n=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+n[1],p=n[2];if(!r)return e;if(0===p.indexOf('%')){var s;switch(p){case'%p':s=o;break;case'%':case'%r':default:s=i;}var d=h(s);return d[t]/100*r}if('vh'===p||'vw'===p){var a;return a='vh'===p?X(document.documentElement.clientHeight,window.innerHeight||0):X(document.documentElement.clientWidth,window.innerWidth||0),a/100*r}return r}function G(e,t,o,i){var n=[0,0],r=-1!==['right','left'].indexOf(i),p=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=p.indexOf(T(p,function(e){return-1!==e.search(/,|\s/)}));p[s]&&-1===p[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var d=/\s*,\s*|\s+/,a=-1===s?[p]:[p.slice(0,s).concat([p[s].split(d)[0]]),[p[s].split(d)[1]].concat(p.slice(s+1))];return a=a.map(function(e,i){var n=(1===i?!r:r)?'height':'width',p=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,p=!0,e):p?(e[e.length-1]+=t,p=!1,e):e.concat(t)},[]).map(function(e){return q(e,n,t,o)})}),a.forEach(function(e,t){e.forEach(function(o,i){R(o)&&(n[t]+=o*('-'===e[i-1]?-1:1))})}),n}function z(e,t){var o,i=t.offset,n=e.placement,r=e.offsets,p=r.popper,s=r.reference,d=n.split('-')[0];return o=R(+i)?[+i,0]:G(i,p,s,d),'left'===d?(p.top+=o[0],p.left-=o[1]):'right'===d?(p.top+=o[0],p.left+=o[1]):'top'===d?(p.left+=o[0],p.top-=o[1]):'bottom'===d&&(p.left+=o[0],p.top+=o[1]),e.popper=p,e}for(var V=Math.min,_=Math.floor,X=Math.max,Q=['native code','[object MutationObserverConstructor]'],J=function(e){return Q.some(function(t){return-1<(e||'').toString().indexOf(t)})},Z='undefined'!=typeof window,$=['Edge','Trident','Firefox'],ee=0,te=0;te<$.length;te+=1)if(Z&&0<=navigator.userAgent.indexOf($[te])){ee=1;break}var i,oe=Z&&J(window.MutationObserver),ie=oe?function(e){var t=!1,o=0,i=document.createElement('span'),n=new MutationObserver(function(){e(),t=!1});return n.observe(i,{attributes:!0}),function(){t||(t=!0,i.setAttribute('x-index',o),++o)}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},ee))}},ne=function(){return void 0==i&&(i=-1!==navigator.appVersion.indexOf('MSIE 10')),i},re=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},pe=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),se=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},de=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},ae=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],le=ae.slice(3),fe={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},me=function(){function t(o,i){var n=this,r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};re(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(n.update)},this.update=ie(this.update.bind(this)),this.options=de({},t.Defaults,r),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=o.jquery?o[0]:o,this.popper=i.jquery?i[0]:i,this.options.modifiers={},Object.keys(de({},t.Defaults.modifiers,r.modifiers)).forEach(function(e){n.options.modifiers[e]=de({},t.Defaults.modifiers[e]||{},r.modifiers?r.modifiers[e]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return de({name:e},n.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(t){t.enabled&&e(t.onLoad)&&t.onLoad(n.reference,n.popper,n.options,t,n.state)}),this.update();var p=this.options.eventsEnabled;p&&this.enableEventListeners(),this.state.eventsEnabled=p}return pe(t,[{key:'update',value:function(){return k.call(this)}},{key:'destroy',value:function(){return P.call(this)}},{key:'enableEventListeners',value:function(){return A.call(this)}},{key:'disableEventListeners',value:function(){return I.call(this)}}]),t}();return me.Utils=('undefined'==typeof window?global:window).PopperUtils,me.placements=ae,me.Defaults={placement:'bottom',eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],i=t.split('-')[1];if(i){var n=e.offsets,r=n.reference,p=n.popper,s=-1!==['bottom','top'].indexOf(o),d=s?'left':'top',a=s?'width':'height',l={start:se({},d,r[d]),end:se({},d,r[d]+r[a]-p[a])};e.offsets.popper=de({},p,l[i])}return e}},offset:{order:200,enabled:!0,fn:z,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||r(e.instance.popper);e.instance.reference===o&&(o=r(o));var i=w(e.instance.popper,e.instance.reference,t.padding,o);t.boundaries=i;var n=t.priority,p=e.offsets.popper,s={primary:function(e){var o=p[e];return p[e]<i[e]&&!t.escapeWithReference&&(o=X(p[e],i[e])),se({},e,o)},secondary:function(e){var o='right'===e?'left':'top',n=p[o];return p[e]>i[e]&&!t.escapeWithReference&&(n=V(p[o],i[e]-('right'===e?p.width:p.height))),se({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';p=de({},p,s[t](e))}),e.offsets.popper=p,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=_,p=-1!==['top','bottom'].indexOf(n),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]<r(i[d])&&(e.offsets.popper[d]=r(i[d])-o[a]),o[d]>r(i[s])&&(e.offsets.popper[d]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){if(!F(e.instance.modifiers,'arrow','keepTogether'))return e;var i=o.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var n=e.placement.split('-')[0],r=e.offsets,p=r.popper,s=r.reference,d=-1!==['left','right'].indexOf(n),a=d?'height':'width',l=d?'Top':'Left',f=l.toLowerCase(),m=d?'left':'top',c=d?'bottom':'right',g=O(i)[a];s[c]-g<p[f]&&(e.offsets.popper[f]-=p[f]-(s[c]-g)),s[f]+g>p[c]&&(e.offsets.popper[f]+=s[f]+g-p[c]);var u=s[f]+s[a]/2-g/2,b=t(e.instance.popper,'margin'+l).replace('px',''),y=u-h(e.offsets.popper)[f]-b;return y=X(V(p[a]-g,y),0),e.arrowElement=i,e.offsets.arrow={},e.offsets.arrow[f]=Math.round(y),e.offsets.arrow[m]='',e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(W(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=w(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),i=e.placement.split('-')[0],n=L(i),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case fe.FLIP:p=[i,n];break;case fe.CLOCKWISE:p=K(i);break;case fe.COUNTERCLOCKWISE:p=K(i,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(i!==s||p.length===d+1)return e;i=e.placement.split('-')[0],n=L(i);var a=e.offsets.popper,l=e.offsets.reference,f=_,m='left'===i&&f(a.right)>f(l.left)||'right'===i&&f(a.left)<f(l.right)||'top'===i&&f(a.bottom)>f(l.top)||'bottom'===i&&f(a.top)<f(l.bottom),c=f(a.left)<f(o.left),h=f(a.right)>f(o.right),g=f(a.top)<f(o.top),u=f(a.bottom)>f(o.bottom),b='left'===i&&c||'right'===i&&h||'top'===i&&g||'bottom'===i&&u,y=-1!==['top','bottom'].indexOf(i),w=!!t.flipVariations&&(y&&'start'===r&&c||y&&'end'===r&&h||!y&&'start'===r&&g||!y&&'end'===r&&u);(m||b||w)&&(e.flipped=!0,(m||b)&&(i=p[d+1]),w&&(r=j(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=de({},e.offsets.popper,S(e.instance.popper,e.offsets.reference,e.placement)),e=N(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[p?'left':'top']=r[o]-(s?n[p?'width':'height']:0),e.placement=L(t),e.offsets.popper=h(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!F(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=T(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,i=t.y,n=e.offsets.popper,p=T(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==p&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,d,a=void 0===p?t.gpuAcceleration:p,l=r(e.instance.popper),f=g(l),m={position:n.position},c={left:_(n.left),top:_(n.top),bottom:_(n.bottom),right:_(n.right)},h='bottom'===o?'top':'bottom',u='right'===i?'left':'right',b=B('transform');if(d='bottom'==h?-f.height+c.bottom:c.top,s='right'==u?-f.width+c.right:c.left,a&&b)m[b]='translate3d('+s+'px, '+d+'px, 0)',m[h]=0,m[u]=0,m.willChange='transform';else{var y='bottom'==h?-1:1,w='right'==u?-1:1;m[h]=d*y,m[u]=s*w,m.willChange=h+', '+u}var E={"x-placement":e.placement};return e.attributes=de({},E,e.attributes),e.styles=de({},m,e.styles),e.arrowStyles=de({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return U(e.instance.popper,e.styles),Y(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&U(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,i,n){var r=x(n,t,e),p=v(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',p),U(t,{position:'absolute'}),o},gpuAcceleration:void 0}}},me});
+//# sourceMappingURL=popper.min.js.map
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 77cd077..7bf2aa3 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -932,9 +932,11 @@ input[type="reset"]:focus,
 
   .layout-sidebar__content {
     -webkit-box-flex: 0;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
-    width: 732px;
+        -ms-flex: 0 1 732px;
+            flex: 0 1 732px;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     margin-left: 22px;
   }
 }
@@ -1035,8 +1037,6 @@ input[type="reset"]:focus,
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-
-    margin-bottom: 11px;
 }
 
 @media (min-width: 700px) {
@@ -1053,17 +1053,6 @@ input[type="reset"]:focus,
   }
 }
 
-.header__upper-first div + div {
-  margin: 11px 0 0;
-}
-
-@media (min-width: 700px) {
-
-  .header__upper-first div + div {
-    margin: 0 0 0 11px;
-  }
-}
-
 .header__upper-second {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 auto;
@@ -1096,17 +1085,6 @@ input[type="reset"]:focus,
   }
 }
 
-.header__upper-second div + div {
-  margin: 11px 0 0;
-}
-
-@media (min-width: 700px) {
-
-  .header__upper-second div + div {
-    margin: 0 0 0 11px;
-  }
-}
-
 .header__upper-link {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
@@ -1120,6 +1098,14 @@ input[type="reset"]:focus,
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+    margin: 0 0 11px;
+}
+
+@media (min-width: 700px) {
+
+  .header__upper-copy {
+    margin: 0 11px 0 0;
+  }
 }
 
 .header__upper-icon {
@@ -1164,6 +1150,13 @@ input[type="reset"]:focus,
   margin-right: 11px;
 }
 
+@media (min-width: 700px) {
+
+  .header__title {
+    margin: 0 11px 0 0;
+  }
+}
+
 .header__logo {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1213,66 +1206,116 @@ input[type="reset"]:focus,
     -webkit-box-flex: 0;
         -ms-flex: 0 0 auto;
             flex: 0 0 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
   }
 }
 
-.header__controls form {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+.header__controls_group {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    position: relative;
+
+    display: -webkit-box;
+
+    display: -ms-flexbox;
+
+    display: flex;
+    margin: 0 0 11px;
+    padding: 0 11px;
+
+    border: none;
+    background: #3c80cf;
+    border-radius: 4px;
+    color: inherit;
+}
+
+.header__controls_group:last-child {
+  margin: 0;
 }
 
 @media (min-width: 700px) {
 
-  .header__controls form {
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+  .header__controls_group {
+    margin: 0 11px 0 0;
   }
 }
 
-.header__controls form .group {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0 11px;
-  margin: 0;
-  border: none;
-  background: #3c80cf;
-  border-radius: 4px;
-  color: inherit;
+.header__controls_label {
+    position: relative;
+    z-index: 1;
+    font-family: 'robotomedium', Helvetica, sans-serif;
+    cursor: pointer;
 }
 
-.header__controls form .group + .group {
-  margin-left: 22px;
+.header__controls_dropdown {
+    position: absolute;
+    z-index: 2;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+
+    width: 260px;
+    max-width: 90vw;
+    margin: 7px 0 0;
+
+    opacity: 0;
+    background: #fff;
+    border-radius: 2px;
+    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
+            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
+
+    -webkit-transition: 0.3s opacity ease;
+
+    transition: 0.3s opacity ease;
+    pointer-events: none;
 }
 
-.header__controls form .group select,
-        .header__controls form .group label {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  display: inline-block;
-  margin-top: 0;
-  margin-bottom: 0;
-  color: inherit;
-  font-weight: normal;
-  font-family: 'robotomedium', Helvetica, sans-serif;
-  font-size: 0.8em;
-  background: transparent;
-  border: none;
+.header__controls_dropdown--active {
+      opacity: 1;
+      pointer-events: all;
 }
 
-.header__controls form .group select {
-  margin-top: 2px;
+.header__controls_dropdown--active:before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -5px;
+  width: 10px;
+  height: 10px;
+  background-color: inherit;
+  -webkit-transform: translateX(-50%) rotate(45deg);
+          transform: translateX(-50%) rotate(45deg);
+}
+
+.header__controls_help_text {
+    padding: 11px;
+    color: #8091a5;
+}
+
+.header__controls_button {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    height: auto;
+    width: 100%;
+    margin: 0;
+
+    border-radius: 0;
+    background: #fff;
+
+    color: #263545;
+    font-size: 1em;
+}
+
+.header__controls_button:hover {
+  background: #e5ebed;
+  color: #263545;
+}
+
+.header__controls_button--active {
+      background: #d3dce0;
 }
 
 .footer {
diff --git a/routes/about.js b/routes/about.js
index 21090e1..5c70513 100644
--- a/routes/about.js
+++ b/routes/about.js
@@ -5,7 +5,7 @@ const router = express.Router()
 
 /* GET the about landing page. */
 router.get('/', catchErrors(async function (req, res, next) {
-  const landingPage = await getLandingPage('about', req.query.locale, req.query.api)
+  const landingPage = await getLandingPage('about', res.locals.currentLocale.code, res.locals.currentLocale.id)
   res.render('landingPage', { title: 'About', landingPage })
 }))
 
diff --git a/routes/courses.js b/routes/courses.js
index c9f0ea2..85f951e 100644
--- a/routes/courses.js
+++ b/routes/courses.js
@@ -8,8 +8,8 @@ router.get('/', catchErrors(async function (req, res, next) {
   // we get all the entries with the content type `course`
   let courses = []
   let categories = []
-  courses = await getCourses(req.query.locale, req.query.api)
-  categories = await getCategories(req.query.locale, req.query.api)
+  courses = await getCourses(res.locals.currentLocale.code, res.locals.currentLocale.id)
+  categories = await getCategories(res.locals.currentLocale.code, res.locals.currentLocale.id)
   res.render('courses', { title: `All Courses (${courses.length})`, categories, courses })
 }))
 
@@ -22,7 +22,7 @@ router.get('/categories/:category', catchErrors(async function (req, res, next)
   try {
     categories = await getCategories()
     activeCategory = categories.find((category) => category.fields.slug === req.params.category)
-    courses = await getCoursesByCategory(activeCategory.sys.id, req.query.locale, req.query.api)
+    courses = await getCoursesByCategory(activeCategory.sys.id, res.locals.currentLocale.code, res.locals.currentLocale.id)
   } catch (e) {
     console.log('Error ', e)
   }
@@ -31,7 +31,7 @@ router.get('/categories/:category', catchErrors(async function (req, res, next)
 
 /* GET course detail. */
 const courseRoute = catchErrors(async function (req, res, next) {
-  let course = await getCourse(req.params.slug, req.query.locale, req.query.api)
+  let course = await getCourse(req.params.slug, res.locals.currentLocale.code, res.locals.currentLocale.id)
   const lessons = course.fields.lessons
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
@@ -47,13 +47,13 @@ router.get('/:slug/lessons', courseRoute)
 
 /* GET course lesson detail. */
 router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next) {
-  let course = await getCourse(req.params.cslug, req.query.locale, req.query.api)
+  let course = await getCourse(req.params.cslug, res.locals.currentLocale.code, res.locals.currentLocale.id)
   const lessons = course.fields.lessons
   const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
   const lesson = lessons[lessonIndex]
   const nextLesson = lessons[lessonIndex + 1] || null
   const cookie = req.cookies.visitedLessons
-  let visitedLessons = cookie ||  []
+  let visitedLessons = cookie || []
   visitedLessons.push(lesson.sys.id)
   visitedLessons = [...new Set(visitedLessons)]
   res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
diff --git a/routes/index.js b/routes/index.js
index 9b41ad9..5738d1f 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -5,7 +5,7 @@ const router = express.Router()
 
 /* GET the home landing page. */
 router.get('/', catchErrors(async function (req, res, next) {
-  const landingPage = await getLandingPage('home', req.query.locale, req.query.api)
+  const landingPage = await getLandingPage('home', res.locals.currentLocale.code, res.locals.currentLocale.id)
   let title = landingPage.fields.title
   if (!title || landingPage.fields.slug === 'home') {
     title = 'The Example App'
diff --git a/services/contentful.js b/services/contentful.js
index 40350d9..8032cb1 100644
--- a/services/contentful.js
+++ b/services/contentful.js
@@ -23,6 +23,11 @@ exports.initClient = (options) => {
   })
 }
 
+exports.getSpace = assert((api = `cda`) => {
+  const client = api === 'cda' ? cdaClient : cpaClient
+  return client.getSpace()
+}, 'Space')
+
 exports.getCourses = assert((locale = 'en-US', api = `cda`) => {
   // to get all the courses we request all the entries
   // with the content_type `course` from Contentful
diff --git a/views/layout.pug b/views/layout.pug
index 2caedde..de2f133 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -30,17 +30,34 @@ html
                     | View on Github
 
                 .header__controls
-                  form(action='' method='get')
-                    .group
-                      label(for='api') API:
-                      select(name='api' onChange='this.form.submit()')
-                        option(value='cda' selected=query.api === 'cda') Content Delivery API
-                        option(value='cpa' selected=query.api === 'cpa') Content Preview API
-                    .group
-                      label(for='locale') Locale:
-                      select(name='locale' onChange='this.form.submit()')
-                        option(value='en-US' selected=query.locale === 'en-US') English
-                        option(value='de-DE' selected=query.locale === 'de-DE') German
+                    .header__controls_group
+                      form(action='' method='get')
+                        .header__controls_label API: #{currentApi.label}
+                        .header__controls_dropdown
+                          .header__controls_help_text View the published or draft content by simply switching between the Deliver and Preview APIs.
+                          button.header__controls_button(
+                            type='submit'
+                            name='api'
+                            value='cda'
+                            class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
+                          ) Delivery (published content)
+                          button.header__controls_button(
+                            type='submit'
+                            name='api'
+                            value='cpa'
+                            class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
+                          ) Preview (draft content)
+                        input(type='hidden' name='locale' value=currentLocale.code)
+
+                    .header__controls_group
+                      form(action='' method='get')
+                        input(type='hidden' name='api' value=currentApi.id)
+                        .header__controls_label Locale: #{currentLocale.name}
+                        .header__controls_dropdown
+                          .header__controls_help_text Working with multiple languages? You can query the Content Delivery API for a specific locale.
+                          each locale in locales
+                            button.header__controls_button(type='submit' name='locale' value=locale.code class=`${locale.code === currentLocale.code ? 'header__controls_button--active' : ''}`)= `${locale.name} (${locale.code})`
+
           .header__lower-wrapper
             .header__lower.layout-centered
               .header__logo
@@ -93,4 +110,6 @@ html
                     img(src='/images/icon-twitter.svg' alt='Our Twitter profile')
   script(src='/scripts/highlight.pack.js')
   script(src='/scripts/textFit.min.js')
+  script(src='/scripts/popper.min.js')
+  script(src='/scripts/hoverintent.min.js')
   script(src='/scripts/index.js')