diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md
index 65da264c0b..59de80be91 100644
--- a/packages/components/psammead-navigation/CHANGELOG.md
+++ b/packages/components/psammead-navigation/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 8.0.0 | [PR#3900](https://github.com/bbc/psammead/pull/3900) Migrate to Emotion. |
 | 7.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-styles, @bbc/psammead-visually-hidden-text |
 | 7.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 7.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles |
diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json
index cbd9e90753..960e44ca27 100644
--- a/packages/components/psammead-navigation/package-lock.json
+++ b/packages/components/psammead-navigation/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json
index a1b9a23cbe..3495824015 100644
--- a/packages/components/psammead-navigation/package.json
+++ b/packages/components/psammead-navigation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0",
-    "styled-components": "^4.3.2",
+    "@emotion/styled": "^10.0.27",
     "prop-types": "^15.7.2"
   },
   "keywords": [
diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap
index 00061ae1c7..5575b905c4 100644
--- a/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-navigation/src/DropdownNavigation/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AMP Menu Button should render correctly 1`] = `
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: left;
+  height: 2.75rem;
+  width: 2.75rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -25,7 +71,7 @@ exports[`AMP Menu Button should render correctly 1`] = `
   </amp-state>
   <button
     aria-expanded="false"
-    class="MenuButton-ukxuly-6 dGlJrg"
+    class="emotion-2 emotion-3"
     data-amp-bind-aria-expanded="menuState.expanded ? \\"true\\" : \\"false\\""
     dir="ltr"
     on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),other-element.toggleVisibility"
@@ -81,6 +127,52 @@ exports[`AMP Menu Button should render rtl correctly 1`] = `
   margin: 0;
 }
 
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: right;
+  height: 3.125rem;
+  width: 3.125rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 3.125rem;
+    width: 3.125rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 <div>
   <amp-state
     id="menuState"
@@ -93,7 +185,7 @@ exports[`AMP Menu Button should render rtl correctly 1`] = `
   </amp-state>
   <button
     aria-expanded="false"
-    class="MenuButton-ukxuly-6 dEgmnw"
+    class="emotion-2 emotion-3"
     data-amp-bind-aria-expanded="menuState.expanded ? \\"true\\" : \\"false\\""
     dir="rtl"
     on="tap:AMP.setState({ menuState: { expanded: !menuState.expanded }}),other-element.toggleVisibility"
@@ -137,6 +229,52 @@ exports[`AMP Menu Button should render rtl correctly 1`] = `
 `;
 
 exports[`Canonical Closed menu button should render correctly 1`] = `
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: left;
+  height: 2.75rem;
+  width: 2.75rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -152,7 +290,7 @@ exports[`Canonical Closed menu button should render correctly 1`] = `
 <div>
   <button
     aria-expanded="false"
-    class="MenuButton-ukxuly-6 dGlJrg"
+    class="emotion-2 emotion-3"
     dir="ltr"
     type="button"
   >
@@ -190,10 +328,56 @@ exports[`Canonical Closed menu button should render rtl correctly 1`] = `
   margin: 0;
 }
 
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: right;
+  height: 3.125rem;
+  width: 3.125rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 3.125rem;
+    width: 3.125rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 <div>
   <button
     aria-expanded="false"
-    class="MenuButton-ukxuly-6 dEgmnw"
+    class="emotion-2 emotion-3"
     dir="rtl"
     type="button"
   >
@@ -219,6 +403,52 @@ exports[`Canonical Closed menu button should render rtl correctly 1`] = `
 `;
 
 exports[`Canonical Open menu button should render correctly 1`] = `
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: left;
+  height: 2.75rem;
+  width: 2.75rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -234,7 +464,7 @@ exports[`Canonical Open menu button should render correctly 1`] = `
 <div>
   <button
     aria-expanded="true"
-    class="MenuButton-ukxuly-6 dGlJrg"
+    class="emotion-2 emotion-3"
     dir="ltr"
     type="button"
   >
@@ -273,10 +503,56 @@ exports[`Canonical Open menu button should render rtl correctly 1`] = `
   margin: 0;
 }
 
+.emotion-2 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  float: right;
+  height: 3.125rem;
+  width: 3.125rem;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.25rem #FFFFFF;
+}
+
+.emotion-2:hover::after,
+.emotion-2:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-2 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (min-width:20rem) {
+  .emotion-2 {
+    height: 3.125rem;
+    width: 3.125rem;
+  }
+}
+
+.emotion-2 svg {
+  vertical-align: middle;
+}
+
 <div>
   <button
     aria-expanded="true"
-    class="MenuButton-ukxuly-6 dEgmnw"
+    class="emotion-2 emotion-3"
     dir="rtl"
     type="button"
   >
@@ -303,7 +579,7 @@ exports[`Canonical Open menu button should render rtl correctly 1`] = `
 `;
 
 exports[`Dropdown navigation should render correctly when closed 1`] = `
-.emotion-0 {
+.emotion-12 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -315,63 +591,142 @@ exports[`Dropdown navigation should render correctly when closed 1`] = `
   margin: 0;
 }
 
+.emotion-42 {
+  background-color: #222222;
+  clear: both;
+  overflow: hidden;
+  height: 0;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  -webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);
+  transition-timing-function: cubic-bezier(0,0,0.58,1);
+  visibility: hidden;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-42 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion:reduce) {
+  .emotion-42 {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+
+.emotion-40 {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0.5rem;
+  border-bottom: 0.125rem solid #3F3F42;
+}
+
+.emotion-2 {
+  padding: 0.75rem 0;
+  border-bottom: 0.0625rem solid #3F3F42;
+}
+
+.emotion-2:last-child {
+  padding-bottom: 1rem;
+  border: 0;
+}
+
+.emotion-0 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FFFFFF;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+.emotion-0:hover,
+.emotion-0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-14 {
+  border-left: 0.25rem solid #FFFFFF;
+  padding-left: 0.5rem;
+}
+
 <div>
   <div
-    class="StyledDropdown-ukxuly-0 NlGZD"
+    class="emotion-42 emotion-43"
     height="0"
   >
     <ul
-      class="DropdownUl-ukxuly-2 louIo"
+      class="emotion-40 emotion-41"
       role="list"
     >
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin"
         >
           Home
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/3d5d5e30-dd50-4041-96d5-c970b20005b9"
         >
           Nigeria
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/d2c2ba68-f9ad-4185-a6d1-7f6437256735"
         >
           Africa
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/world"
         >
           <span
-            class="StyledCurrentLink-ukxuly-5 ecIXaD"
+            class="emotion-14 emotion-15"
             dir="ltr"
             role="text"
           >
             <span
-              class="emotion-0 emotion-1"
+              class="emotion-12 emotion-13"
             >
               Current page
               , 
@@ -381,55 +736,55 @@ exports[`Dropdown navigation should render correctly when closed 1`] = `
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/media/video"
         >
           Video
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/media/audio"
         >
           Audio
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/sport"
         >
           Sport
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/1c3b60a9-14eb-484b-a750-9f5b1aeaac31"
         >
           Entertainment
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/popular/read"
         >
           Most popular
@@ -441,7 +796,7 @@ exports[`Dropdown navigation should render correctly when closed 1`] = `
 `;
 
 exports[`Dropdown navigation should render correctly when open 1`] = `
-.emotion-0 {
+.emotion-12 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -453,63 +808,143 @@ exports[`Dropdown navigation should render correctly when open 1`] = `
   margin: 0;
 }
 
+.emotion-40 {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0.5rem;
+  border-bottom: 0.125rem solid #3F3F42;
+}
+
+.emotion-2 {
+  padding: 0.75rem 0;
+  border-bottom: 0.0625rem solid #3F3F42;
+}
+
+.emotion-2:last-child {
+  padding-bottom: 1rem;
+  border: 0;
+}
+
+.emotion-0 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FFFFFF;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+.emotion-0:hover,
+.emotion-0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-14 {
+  border-left: 0.25rem solid #FFFFFF;
+  padding-left: 0.5rem;
+}
+
+.emotion-42 {
+  background-color: #222222;
+  clear: both;
+  overflow: hidden;
+  height: 0;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  -webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);
+  transition-timing-function: cubic-bezier(0,0,0.58,1);
+  visibility: visible;
+  height: 0px;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-42 {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion:reduce) {
+  .emotion-42 {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+
 <div>
   <div
-    class="StyledDropdown-ukxuly-0 bDaiUd"
+    class="emotion-42 emotion-43"
     height="0"
   >
     <ul
-      class="DropdownUl-ukxuly-2 louIo"
+      class="emotion-40 emotion-41"
       role="list"
     >
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin"
         >
           Home
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/3d5d5e30-dd50-4041-96d5-c970b20005b9"
         >
           Nigeria
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/d2c2ba68-f9ad-4185-a6d1-7f6437256735"
         >
           Africa
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/world"
         >
           <span
-            class="StyledCurrentLink-ukxuly-5 ecIXaD"
+            class="emotion-14 emotion-15"
             dir="ltr"
             role="text"
           >
             <span
-              class="emotion-0 emotion-1"
+              class="emotion-12 emotion-13"
             >
               Current page
               , 
@@ -519,55 +954,55 @@ exports[`Dropdown navigation should render correctly when open 1`] = `
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/media/video"
         >
           Video
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/media/audio"
         >
           Audio
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/sport"
         >
           Sport
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/topics/1c3b60a9-14eb-484b-a750-9f5b1aeaac31"
         >
           Entertainment
         </a>
       </li>
       <li
-        class="StyledDropdownLi-ukxuly-3 dIsymM"
+        class="emotion-2 emotion-3"
         role="listitem"
       >
         <a
-          class="StyledDropdownLink-ukxuly-4 ktYDFV"
+          class="emotion-0 emotion-1"
           href="/pidgin/popular/read"
         >
           Most popular
diff --git a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx
index dce8f509dc..570c1754f2 100644
--- a/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx
+++ b/packages/components/psammead-navigation/src/DropdownNavigation/index.jsx
@@ -1,5 +1,5 @@
 import React, { cloneElement, useRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
 import { shape, string, bool, func, oneOf, node } from 'prop-types';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import { navigationIcons } from '@bbc/psammead-assets/svgs';
@@ -79,13 +79,17 @@ export const AmpDropdown = styled.div`
   }
 `;
 
-export const DropdownUl = styled.ul.attrs({ role: 'list' })`
+export const DropdownUl = styled.ul`
   list-style-type: none;
   margin: 0;
   padding: 0 ${GEL_SPACING};
   border-bottom: 0.125rem solid ${C_SHADOW};
 `;
 
+DropdownUl.defaultProps = {
+  role: 'list',
+};
+
 const StyledDropdownLi = styled.li`
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid ${C_SHADOW};
@@ -108,10 +112,14 @@ const StyledDropdownLink = styled.a`
   }
 `;
 
-const StyledCurrentLink = styled.span.attrs({ role: 'text' })`
+const StyledCurrentLink = styled.span`
   ${({ dir }) => getStyles(dir)}
 `;
 
+StyledCurrentLink.defaultProps = {
+  role: 'text',
+};
+
 export const DropdownLi = ({
   children,
   script,
@@ -151,7 +159,7 @@ DropdownLi.defaultProps = {
   dir: 'ltr',
 };
 
-const iconBorder = css`
+const iconBorder = `
   content: '';
   position: absolute;
   left: 0;
diff --git a/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx b/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
index 7f51e7bea3..68a02d14c6 100644
--- a/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
+++ b/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
 import { node, oneOf } from 'prop-types';
 import { GEL_SPACING_SEXT } from '@bbc/gel-foundations/spacings';
 import {
@@ -35,7 +35,7 @@ const StyledScrollableNav = styled.div`
         width: 6rem;
       }
       position: absolute;
-      ${({ dir }) => css`
+      ${({ dir }) => `
         ${dir === 'ltr' ? 'right' : 'left'}: 0;
       `}
       bottom: 0;
diff --git a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
index 4dbb986f67..8e4fda4db1 100644
--- a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,122 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation should render correctly 1`] = `
+.emotion-24 {
+  position: relative;
+  background-color: #B80000;
+  border-top: 0.0625rem solid #FFFFFF;
+}
+
+.emotion-24 .emotion-7::after {
+  left: 0;
+}
+
+.emotion-22 {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.emotion-20 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-20 {
+    overflow: hidden;
+  }
+}
+
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-6:last-child {
+    margin-right: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    width: 80rem;
+    border-bottom: 0.0625rem solid #eab3b3;
+    z-index: -1;
+  }
+}
+
+.emotion-4 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-4 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-4:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  border-bottom: 0.3125rem solid #FFFFFF;
+}
+
+.emotion-4:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -13,31 +129,85 @@ exports[`Navigation should render correctly 1`] = `
   margin: 0;
 }
 
+.emotion-8 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-8 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-8:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.emotion-8:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
 <div>
   <nav
-    class="StyledNav-sc-158x7z5-5 dWucaK"
+    class="emotion-24 emotion-25"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="NavWrapper-sc-158x7z5-0 ermFdP"
+      class="emotion-22 emotion-23"
     >
       <ul
-        class="StyledUnorderedList-sc-158x7z5-1 ckFfoH"
+        class="emotion-20 emotion-21"
         role="list"
       >
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 hndaIO"
+            class="emotion-4 emotion-5"
             data-navigation="test_navigation"
             href="/igbo"
           >
             <span
-              class="StyledSpan-sc-158x7z5-4 ktTFbu"
+              class="emotion-2 emotion-3"
               role="text"
             >
               <span
@@ -51,12 +221,12 @@ exports[`Navigation should render correctly 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/egwuregwu"
           >
@@ -64,12 +234,12 @@ exports[`Navigation should render correctly 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/media/video"
           >
@@ -77,12 +247,12 @@ exports[`Navigation should render correctly 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/popular/read"
           >
@@ -96,6 +266,112 @@ exports[`Navigation should render correctly 1`] = `
 `;
 
 exports[`Navigation should render correctly when ampOpenClass prop is provided 1`] = `
+.emotion-22 {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.emotion-20 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-20 {
+    overflow: hidden;
+  }
+}
+
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-6:last-child {
+    margin-right: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    width: 80rem;
+    border-bottom: 0.0625rem solid #eab3b3;
+    z-index: -1;
+  }
+}
+
+.emotion-4 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-4 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-4:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  border-bottom: 0.3125rem solid #FFFFFF;
+}
+
+.emotion-4:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -108,31 +384,101 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
   margin: 0;
 }
 
+.emotion-8 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-8 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-8:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.emotion-8:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-24 {
+  position: relative;
+  background-color: #B80000;
+  border-top: 0.0625rem solid #FFFFFF;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-24.is-open {
+    background-color: #222222;
+  }
+}
+
+.emotion-24 .emotion-7::after {
+  left: 0;
+}
+
 <div>
   <nav
-    class="StyledNav-sc-158x7z5-5 jcZqgR"
+    class="emotion-24 emotion-25"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="NavWrapper-sc-158x7z5-0 ermFdP"
+      class="emotion-22 emotion-23"
     >
       <ul
-        class="StyledUnorderedList-sc-158x7z5-1 ckFfoH"
+        class="emotion-20 emotion-21"
         role="list"
       >
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 hndaIO"
+            class="emotion-4 emotion-5"
             data-navigation="test_navigation"
             href="/igbo"
           >
             <span
-              class="StyledSpan-sc-158x7z5-4 ktTFbu"
+              class="emotion-2 emotion-3"
               role="text"
             >
               <span
@@ -146,12 +492,12 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/egwuregwu"
           >
@@ -159,12 +505,12 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/media/video"
           >
@@ -172,12 +518,12 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/popular/read"
           >
@@ -191,6 +537,112 @@ exports[`Navigation should render correctly when ampOpenClass prop is provided 1
 `;
 
 exports[`Navigation should render correctly when isOpen is true 1`] = `
+.emotion-22 {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.emotion-20 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-20 {
+    overflow: hidden;
+  }
+}
+
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-6:last-child {
+    margin-right: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    width: 80rem;
+    border-bottom: 0.0625rem solid #eab3b3;
+    z-index: -1;
+  }
+}
+
+.emotion-4 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-4 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-4:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  border-bottom: 0.3125rem solid #FFFFFF;
+}
+
+.emotion-4:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -203,31 +655,95 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
   margin: 0;
 }
 
+.emotion-8 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-8 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-8:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.emotion-8:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-24 {
+  position: relative;
+  background-color: #222222;
+  border-top: 0.0625rem solid #FFFFFF;
+}
+
+.emotion-24 .emotion-7::after {
+  left: 0;
+}
+
 <div>
   <nav
-    class="StyledNav-sc-158x7z5-5 dEbGfi"
+    class="emotion-24 emotion-25"
     dir="ltr"
     role="navigation"
   >
     <div
-      class="NavWrapper-sc-158x7z5-0 ermFdP"
+      class="emotion-22 emotion-23"
     >
       <ul
-        class="StyledUnorderedList-sc-158x7z5-1 ckFfoH"
+        class="emotion-20 emotion-21"
         role="list"
       >
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 hndaIO"
+            class="emotion-4 emotion-5"
             data-navigation="test_navigation"
             href="/igbo"
           >
             <span
-              class="StyledSpan-sc-158x7z5-4 ktTFbu"
+              class="emotion-2 emotion-3"
               role="text"
             >
               <span
@@ -241,12 +757,12 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/egwuregwu"
           >
@@ -254,12 +770,12 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/media/video"
           >
@@ -267,12 +783,12 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
           </a>
         </li>
         <li
-          class="StyledListItem-sc-158x7z5-3 hfeLtA"
+          class="emotion-6 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <a
-            class="StyledLink-sc-158x7z5-2 isJjNp"
+            class="emotion-8 emotion-5"
             data-navigation="test_navigation"
             href="/igbo/popular/read"
           >
@@ -286,6 +802,122 @@ exports[`Navigation should render correctly when isOpen is true 1`] = `
 `;
 
 exports[`Scrollable Navigation should render correctly 1`] = `
+.emotion-24 {
+  position: relative;
+  background-color: #B80000;
+  border-top: 0.0625rem solid #FFFFFF;
+}
+
+.emotion-24 .emotion-7::after {
+  left: 0;
+}
+
+.emotion-22 {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.emotion-20 {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+@media (min-width:37.5rem) {
+  .emotion-20 {
+    overflow: hidden;
+  }
+}
+
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-6:last-child {
+    margin-right: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-6::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    width: 80rem;
+    border-bottom: 0.0625rem solid #eab3b3;
+    z-index: -1;
+  }
+}
+
+.emotion-4 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-4 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-4 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-4:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  border-bottom: 0.3125rem solid #FFFFFF;
+}
+
+.emotion-4:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+.emotion-2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
 .emotion-0 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -298,35 +930,129 @@ exports[`Scrollable Navigation should render correctly 1`] = `
   margin: 0;
 }
 
+.emotion-8 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #FDFDFD;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .emotion-8 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-8 {
+    padding: 0.75rem 0.5rem;
+  }
+}
+
+.emotion-8:hover::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+.emotion-8:focus::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-bottom: 0.25rem solid #FFFFFF;
+  top: 0;
+  border: 0.25rem solid #FFFFFF;
+}
+
+@media (max-width:37.4375rem) {
+  .emotion-26 {
+    white-space: nowrap;
+    overflow-x: scroll;
+    -webkit-scroll-behavior: auto;
+    -moz-scroll-behavior: auto;
+    -ms-scroll-behavior: auto;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-scrollbar-width: none;
+    -moz-scrollbar-width: none;
+    -ms-scrollbar-width: none;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .emotion-26::-webkit-scrollbar {
+    display: none;
+  }
+
+  .emotion-26:after {
+    content: ' ';
+    height: 100%;
+    width: 3rem;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    overflow: hidden;
+    pointer-events: none;
+    background: linear-gradient( to right,rgba(184,0,0,0) 0%,rgba(184,0,0,1) 100% );
+  }
+
+@media (min-width:25rem) {
+    .emotion-26:after {
+      width: 6rem;
+    }
+}
+}
+
 <div>
   <div
-    class="StyledScrollableNav-sc-1nc6e54-0 hGNZJz"
+    class="emotion-26 emotion-27"
     dir="ltr"
   >
     <nav
-      class="StyledNav-sc-158x7z5-5 dWucaK"
+      class="emotion-24 emotion-25"
       dir="ltr"
       role="navigation"
     >
       <div
-        class="NavWrapper-sc-158x7z5-0 ermFdP"
+        class="emotion-22 emotion-23"
       >
         <ul
-          class="StyledUnorderedList-sc-158x7z5-1 ckFfoH"
+          class="emotion-20 emotion-21"
           role="list"
         >
           <li
-            class="StyledListItem-sc-158x7z5-3 hfeLtA"
+            class="emotion-6 emotion-7"
             dir="ltr"
             role="listitem"
           >
             <a
-              class="StyledLink-sc-158x7z5-2 hndaIO"
+              class="emotion-4 emotion-5"
               data-navigation="test_navigation"
               href="/igbo"
             >
               <span
-                class="StyledSpan-sc-158x7z5-4 ktTFbu"
+                class="emotion-2 emotion-3"
                 role="text"
               >
                 <span
@@ -340,12 +1066,12 @@ exports[`Scrollable Navigation should render correctly 1`] = `
             </a>
           </li>
           <li
-            class="StyledListItem-sc-158x7z5-3 hfeLtA"
+            class="emotion-6 emotion-7"
             dir="ltr"
             role="listitem"
           >
             <a
-              class="StyledLink-sc-158x7z5-2 isJjNp"
+              class="emotion-8 emotion-5"
               data-navigation="test_navigation"
               href="/igbo/egwuregwu"
             >
@@ -353,12 +1079,12 @@ exports[`Scrollable Navigation should render correctly 1`] = `
             </a>
           </li>
           <li
-            class="StyledListItem-sc-158x7z5-3 hfeLtA"
+            class="emotion-6 emotion-7"
             dir="ltr"
             role="listitem"
           >
             <a
-              class="StyledLink-sc-158x7z5-2 isJjNp"
+              class="emotion-8 emotion-5"
               data-navigation="test_navigation"
               href="/igbo/media/video"
             >
@@ -366,12 +1092,12 @@ exports[`Scrollable Navigation should render correctly 1`] = `
             </a>
           </li>
           <li
-            class="StyledListItem-sc-158x7z5-3 hfeLtA"
+            class="emotion-6 emotion-7"
             dir="ltr"
             role="listitem"
           >
             <a
-              class="StyledLink-sc-158x7z5-2 isJjNp"
+              class="emotion-8 emotion-5"
               data-navigation="test_navigation"
               href="/igbo/popular/read"
             >
diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx
index daa32d99c4..0a0b046ddd 100644
--- a/packages/components/psammead-navigation/src/index.jsx
+++ b/packages/components/psammead-navigation/src/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
 import { shape, string, node, bool, oneOf } from 'prop-types';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import {
@@ -46,7 +46,7 @@ const StyledUnorderedList = styled.ul`
   }
 `;
 
-const ListItemBorder = css`
+const ListItemBorder = `
   content: '';
   position: absolute;
   left: 0;
@@ -72,7 +72,7 @@ const StyledLink = styled.a`
     ${ListItemBorder}
     ${({ currentLink }) =>
       currentLink &&
-      css`
+      `
         border-bottom: ${CURRENT_ITEM_HOVER_BORDER} solid ${C_WHITE};
       `}
   }
@@ -91,7 +91,7 @@ const StyledListItem = styled.li`
 
   @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
     &:last-child {
-      ${({ dir }) => css`
+      ${({ dir }) => `
         margin-${dir === 'ltr' ? 'right' : 'left'}: ${GEL_SPACING_SEXT}; 
       `}
     }
@@ -206,7 +206,7 @@ const StyledNav = styled.nav`
   ${({ isOpen }) => `background-color: ${isOpen ? C_EBON : C_POSTBOX};`}
   ${({ ampOpenClass }) =>
     ampOpenClass &&
-    css`
+    `
       &.${ampOpenClass} {
         @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
           background-color: ${C_EBON};
@@ -216,7 +216,7 @@ const StyledNav = styled.nav`
   border-top: 0.0625rem solid ${C_WHITE};
 
   ${StyledListItem} {
-    ${({ dir }) => css`
+    ${({ dir }) => `
       &::after {
         ${dir === 'ltr' ? 'left' : 'right'}: 0;
       }
diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx
index 3ff8766e80..115287c082 100644
--- a/packages/components/psammead-navigation/src/index.stories.jsx
+++ b/packages/components/psammead-navigation/src/index.stories.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import {
   color,
   select,