diff --git a/app/ui/promo.js b/app/ui/promo.js
index c49d32a5..6533b2e2 100644
--- a/app/ui/promo.js
+++ b/app/ui/promo.js
@@ -15,18 +15,18 @@ class Promo extends Component {
   createElement() {
     return html`
       <send-promo
-        class="w-full flex-none flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3 hidden md:flex"
+        class="w-full flex-row items-center content-center justify-center bg-white text-grey-darkest px-4 py-3 flex border-b border-grey-banner leading-normal"
       >
         <div class="flex items-center mx-auto">
           <img
             src="${assets.get('master-logo.svg')}"
-            class="w-6"
+            class="w-6 h-6"
             alt="Firefox"
           />
-          <span class="ml-3">
+          <span class="ml-2 sm:ml-4 text-xs sm:text-base">
             ${this.state.translate('trailheadPromo')}${' '}
             <a
-              class="text-blue"
+              class="underline text-blue-dark"
               href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy"
               >${this.state.translate('learnMore')}</a
             >
diff --git a/tailwind.js b/tailwind.js
index f2593def..5a24b05b 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -51,6 +51,7 @@ const colors = {
   'grey-dark': '#8795a1',
   grey: '#B1B1B3',
   'grey-light': '#dae1e7',
+  'grey-banner': '#f0f0f4',
   'grey-transparent': 'hsla(250, 13%, 9%, .2)',
   'grey-lighter': '#f1f5f8',
   'grey-lightest': '#F9F9FA',