diff --git a/android/android.js b/android/android.js
index c40c11eb..63348194 100644
--- a/android/android.js
+++ b/android/android.js
@@ -69,7 +69,7 @@ function body(main) {
     */
     return html`
       <body
-        class="flex flex-col items-center font-sans bg-blue-lightest h-screen"
+        class="flex flex-col items-center font-sans bg-grey-lightest h-screen"
       >
         ${state.cache(Header, 'header').render()} ${main(state, emit)}
       </body>
diff --git a/app/main.css b/app/main.css
index 2ea31d0e..7248f7c2 100644
--- a/app/main.css
+++ b/app/main.css
@@ -13,8 +13,15 @@ a {
   text-decoration: none;
 }
 
+body {
+  background-image: url('../assets/bg.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 .btn {
-  @apply bg-blue;
+  @apply bg-blue-dark;
   @apply text-white;
   @apply font-semibold;
   @apply cursor-pointer;
@@ -24,11 +31,11 @@ a {
 }
 
 .btn:hover {
-  @apply bg-blue-dark;
+  @apply bg-blue-darker;
 }
 
 .btn:focus {
-  @apply bg-blue-dark;
+  @apply bg-blue-darker;
 }
 
 .checkbox {
@@ -46,7 +53,7 @@ a {
 }
 
 .checkbox > label::before {
-  @apply bg-blue-lightest;
+  /* @apply bg-grey-lightest; */
   @apply border;
   @apply rounded-sm;
 
@@ -58,14 +65,17 @@ a {
 }
 
 .checkbox > label:hover::before {
-  @apply border-blue;
+  @apply border-blue-dark;
 }
 
 .checkbox > input:focus + label::before {
-  @apply border-blue;
+  @apply border-blue-dark;
 }
 
 .checkbox > input:checked + label::before {
+  @apply bg-blue-dark;
+  @apply border-blue-dark;
+
   background-image: url('../assets/lock.svg');
   background-position: center;
   background-size: 1.25rem;
@@ -77,6 +87,9 @@ a {
 }
 
 .checkbox > input:disabled + label::before {
+  @apply bg-blue-dark;
+  @apply border-blue-dark;
+
   background-image: url('../assets/lock.svg');
   background-position: center;
   background-size: 1.25rem;
@@ -116,11 +129,11 @@ footer li:hover {
 }
 
 .header-logo {
-  background-image: url('../assets/send_logo_white.svg');
+  background-image: url('../assets/logo.svg');
   background-position: left;
   background-repeat: no-repeat;
-  background-size: 1.8rem;
-  padding-left: 2.4rem;
+  background-size: 2.25rem;
+  padding-left: 3rem;
   text-decoration: none;
 }
 
@@ -220,7 +233,7 @@ progress::-moz-progress-bar {
 
 @screen md {
   .header-logo {
-    background-image: url('../assets/send_logo.svg');
+    background-image: url('../assets/logo.svg');
   }
 
   .main {
@@ -234,10 +247,6 @@ progress::-moz-progress-bar {
     max-height: 40rem;
     width: calc(100% - 3rem);
   }
-
-  .main > section {
-    @apply shadow-md;
-  }
 }
 
 @tailwind utilities;
@@ -245,3 +254,14 @@ progress::-moz-progress-bar {
 .word-break-all {
   word-break: break-all;
 }
+
+@responsive {
+  .shadow-light {
+    box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
+  }
+
+  .shadow-big {
+    box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1),
+      0 2px 16px 0 rgba(12, 12, 13, 0.05);
+  }
+}
diff --git a/app/ui/account.js b/app/ui/account.js
index cb67b540..21b6e5d4 100644
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -62,7 +62,7 @@ class Account extends Component {
       return html`
         <send-account>
           <button
-            class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
+            class="p-2 border rounded border-white text-white hover:bg-white hover:text-black md:text-blue-dark md:border-blue-dark md:hover:text-white md:hover:bg-blue-dark"
             onclick="${e => this.login(e)}"
           >
             ${translate('signInMenuOption')}
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index e6f65f33..66d8ed40 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -29,7 +29,7 @@ function password(state) {
   const MAX_LENGTH = 32;
 
   return html`
-    <div class="my-2 px-4">
+    <div class="my-2 px-1">
       <div class="checkbox inline-block mr-3">
         <input
           id="add-password"
@@ -46,7 +46,7 @@ function password(state) {
         id="password-input"
         class="${state.archive.password
           ? ''
-          : 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
+          : 'invisible'} border rounded-sm focus:border-blue-dark leading-normal my-2 py-1 px-2 h-8"
         autocomplete="off"
         maxlength="${MAX_LENGTH}"
         type="password"
@@ -126,7 +126,7 @@ function archiveDetails(translate, archive) {
         ${archive.open ? 'open' : ''}
         ontoggle="${toggled}"
       >
-        <summary
+        <summary class="text-blue-dark text-sm cursor-pointer"
           >${translate('fileCount', {
             num: archive.manifest.files.length
           })}</summary
@@ -149,7 +149,7 @@ module.exports = function(state, emit, archive) {
     platform() !== 'android'
       ? html`
           <button
-            class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
+            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
             onclick=${copy}
           >
             <img src="${assets.get('copy-16.svg')}" class="mr-2" />
@@ -158,7 +158,7 @@ module.exports = function(state, emit, archive) {
         `
       : html`
           <button
-            class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
+            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
             onclick=${share}
           >
             <img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
@@ -168,10 +168,10 @@ module.exports = function(state, emit, archive) {
     platform() === 'web'
       ? html`
           <a
-            class="flex items-end text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
+            class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
             href="${archive.url}"
           >
-            <img src="${assets.get('download.svg')}" class="mr-1" />
+            <img src="${assets.get('dl.svg')}" class="mr-2" />
             ${state.translate('downloadButtonLabel')}
           </a>
         `
@@ -181,7 +181,7 @@ module.exports = function(state, emit, archive) {
   return html`
   <send-archive
     id="archive-${archive.id}"
-    class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
+    class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
     <p class="w-full">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <input
@@ -235,11 +235,11 @@ module.exports.wip = function(state, emit) {
         Array.from(state.archive.files)
           .reverse()
           .map(f => fileInfo(f, remove(f))),
-        'list-reset overflow-y-auto px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
-        'bg-white px-2 mt-3 border border-grey-light rounded'
+        'bg-grey-lightest rounded-t list-reset overflow-y-auto px-4 md:h-full md:max-h-half-screen',
+        'bg-white px-2 my-2 shadow-light rounded'
       )}
       <div
-        class="flex-grow flex items-end p-4 bg-blue-lightest mb-6 font-medium"
+        class="flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-6 font-medium"
       >
         <input
           id="file-upload"
@@ -265,7 +265,7 @@ module.exports.wip = function(state, emit) {
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
         id="upload-btn"
-        class="btn rounded flex-no-shrink"
+        class="btn rounded-lg flex-no-shrink"
         title="${state.translate('uploadFilesButton')}"
         onclick="${upload}"
       >
@@ -319,7 +319,7 @@ module.exports.uploading = function(state, emit) {
   return html`
   <send-upload-area
     id="${archive.id}"
-    class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
+    class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
     <p class="w-full">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@@ -334,10 +334,10 @@ module.exports.uploading = function(state, emit) {
         expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
       })}
     </div>
-    <div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
+    <div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
     <progress class="my-3" value="${progress}">${progressPercent}</progress>
     <button
-      class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium"
+      class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
       onclick=${cancel}>
       ${state.translate('uploadingPageCancel')}
     </button>
@@ -353,7 +353,7 @@ module.exports.uploading = function(state, emit) {
 module.exports.empty = function(state, emit) {
   return html`
     <send-upload-area
-      class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
+      class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full"
       onclick="${e => {
         if (e.target.tagName !== 'LABEL') {
           document.getElementById('file-upload').click();
@@ -362,7 +362,7 @@ module.exports.empty = function(state, emit) {
     >
       <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
       <div
-        class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
+        class="pt-6 pb-2 text-center text-lg font-bold capitalize tracking-wide"
       >
         ${state.translate('uploadDropDragMessage')}
       </div>
@@ -380,7 +380,7 @@ module.exports.empty = function(state, emit) {
       <label
         for="file-upload"
         role="button"
-        class="btn rounded flex items-center mt-4"
+        class="btn rounded-lg flex items-center mt-4"
         title="${state.translate('addFilesButton')}"
       >
         ${state.translate('addFilesButton')}
@@ -402,7 +402,7 @@ module.exports.preview = function(state, emit) {
     archive.open = true;
   }
   return html`
-  <send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 w-full md:w-4/5">
+  <send-archive class="flex flex-col max-h-full bg-white rounded shadow-light p-4 w-full md:w-4/5">
     <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@@ -415,7 +415,7 @@ module.exports.preview = function(state, emit) {
     </div>
     <button
       id="download-btn"
-      class="btn rounded mt-4 w-full flex-no-shrink"
+      class="btn rounded-lg mt-4 w-full flex-no-shrink"
       title="${state.translate('downloadButtonLabel')}"
       onclick=${download}>
       ${state.translate('downloadButtonLabel')}
@@ -434,7 +434,7 @@ module.exports.downloading = function(state) {
   const progress = state.transfer.progressRatio;
   const progressPercent = percent(progress);
   return html`
-  <send-archive class="flex flex-col bg-white border border-grey-light p-4 w-full md:w-4/5">
+  <send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full md:w-4/5">
     <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@@ -442,7 +442,7 @@ module.exports.downloading = function(state) {
         archive.size
       )}</div>
     </p>
-    <div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
+    <div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
     <progress class="my-3" value="${progress}">${progressPercent}</progress>
   </send-archive>`;
 };
diff --git a/app/ui/blank.js b/app/ui/blank.js
index 8eb4e26c..837f8c40 100644
--- a/app/ui/blank.js
+++ b/app/ui/blank.js
@@ -3,7 +3,9 @@ const html = require('choo/html');
 module.exports = function() {
   return html`
     <main class="main relative">
-      <section class="h-full w-full p-6 md:flex md:flex-row z-10">
+      <section
+        class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg md:shadow-big"
+      >
         <div class="md:mr-6 md:w-1/2 w-full"></div>
         <div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>
       </section>
diff --git a/app/ui/body.js b/app/ui/body.js
index c208acf9..08bf26bd 100644
--- a/app/ui/body.js
+++ b/app/ui/body.js
@@ -13,7 +13,7 @@ module.exports = function body(main) {
   return function(state, emit) {
     const b = html`
       <body
-        class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest"
+        class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest"
       >
         ${banner(state, emit)} ${state.cache(Header, 'header').render()}
         ${main(state, emit)} ${state.cache(Footer, 'footer').render()}
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
index 52415d87..1f8c9465 100644
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -18,7 +18,7 @@ module.exports = function(name, url) {
           value="${url}"
           readonly="true"
         />
-        <button class="btn rounded w-full flex-no-shrink" onclick="${copy}">
+        <button class="btn rounded-lg w-full flex-no-shrink" onclick="${copy}">
           ${state.translate('copyUrlFormButton')}
         </button>
         <a
diff --git a/app/ui/download.js b/app/ui/download.js
index 8c62e438..896d5e0b 100644
--- a/app/ui/download.js
+++ b/app/ui/download.js
@@ -145,7 +145,9 @@ module.exports = function(state, emit) {
   return html`
     <main class="main container">
       ${state.modal && modal(state, emit)}
-      <section class="relative h-full w-full p-6 md:flex md:flex-row">
+      <section
+        class="relative h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
+      >
         ${content}
       </section>
     </main>
diff --git a/app/ui/expiryOptions.js b/app/ui/expiryOptions.js
index 3f15d619..a34bac0c 100644
--- a/app/ui/expiryOptions.js
+++ b/app/ui/expiryOptions.js
@@ -6,7 +6,7 @@ const selectbox = require('./selectbox');
 
 module.exports = function(state, emit) {
   const el = html`
-    <div class="px-4">
+    <div class="px-1">
       ${raw(
         state.translate('frontPageExpireInfo', {
           downloadCount:
diff --git a/app/ui/footer.js b/app/ui/footer.js
index 818c6f8e..8d2f4ffb 100644
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@@ -19,7 +19,7 @@ class Footer extends Component {
     const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
     return html`
       <footer
-        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between bg-grey-lightest"
+        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between"
       >
         <a
           class="mozilla-logo pb-10 md:pb-0 m-2"
diff --git a/app/ui/header.js b/app/ui/header.js
index 36eeacba..077cd3ff 100644
--- a/app/ui/header.js
+++ b/app/ui/header.js
@@ -21,21 +21,21 @@ class Header extends Component {
       platform() === 'android'
         ? html`
             <a class="header-logo">
-              <h1 class="text-2xl text-white md:text-black font-normal">
-                Firefox <b>Send</b>
+              <h1 class="text-3xl text-white md:text-black font-normal">
+                <b>Firefox</b> Send
               </h1>
             </a>
           `
         : html`
             <a class="header-logo" href="/">
-              <h1 class="text-2xl text-white md:text-black font-normal">
-                Firefox <b>Send</b>
+              <h1 class="text-3xl text-white md:text-black font-normal">
+                <b>Firefox</b> Send
               </h1>
             </a>
           `;
     return html`
       <header
-        class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20"
+        class="relative flex-none flex flex-row items-center justify-between bg-black w-full px-6 h-16 z-20 md:bg-transparent"
       >
         ${title} ${this.account.render()}
       </header>
diff --git a/app/ui/home.js b/app/ui/home.js
index 67fbf58b..51b53801 100644
--- a/app/ui/home.js
+++ b/app/ui/home.js
@@ -22,16 +22,18 @@ module.exports = function(state, emit) {
       ? intro(state)
       : list(
           archives,
-          'list-reset h-full overflow-y-auto w-full',
-          'mb-3 w-full'
+          'list-reset p-2 h-full overflow-y-auto w-full',
+          'mb-4 w-full'
         );
 
   return html`
     <main class="main relative">
       ${state.modal && modal(state, emit)}
-      <section class="h-full w-full p-6 md:flex md:flex-row z-10">
-        <div class="md:mr-6 md:w-1/2 w-full">${left}</div>
-        <div class="md:w-1/2 mt-6 md:mt-0 w-full">${right}</div>
+      <section
+        class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg md:shadow-big"
+      >
+        <div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div>
+        <div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
       </section>
     </main>
   `;
diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js
index f7e9d79c..399ad11b 100644
--- a/app/ui/okDialog.js
+++ b/app/ui/okDialog.js
@@ -5,7 +5,7 @@ module.exports = function(message) {
     return html`
       <send-ok-dialog class="flex flex-col max-w-xs p-4">
         <div class="text-center m-8 leading-normal">${message}</div>
-        <button class="btn rounded w-full flex-no-shrink" onclick="${close}">
+        <button class="btn rounded-lg w-full flex-no-shrink" onclick="${close}">
           ${state.translate('okButton')}
         </button>
       </send-ok-dialog>
diff --git a/app/ui/selectbox.js b/app/ui/selectbox.js
index a281bf22..4d0e4d4a 100644
--- a/app/ui/selectbox.js
+++ b/app/ui/selectbox.js
@@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
   return html`
     <select
       id="${htmlId}"
-      class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
+      class="appearance-none cursor-pointer border rounded-sm bg-grey-lightest hover:border-blue-dark focus:border-blue-dark px-2 py-1 my-2 h-8"
       onchange="${choose}"
     >
       ${options.map(
diff --git a/app/ui/signupDialog.js b/app/ui/signupDialog.js
index e6e9d57d..da9ea74c 100644
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@@ -32,7 +32,7 @@ module.exports = function(trigger) {
           id="email-submit"
           type="submit" />
       </form>
-      <label class="btn rounded w-full flex flex-no-shrink items-center justify-center" for="email-submit">
+      <label class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" for="email-submit">
         ${state.translate('signInMenuOption')}
       </label>
       <button
diff --git a/assets/addfiles.svg b/assets/addfiles.svg
index 79ad3404..9ae975fa 100644
--- a/assets/addfiles.svg
+++ b/assets/addfiles.svg
@@ -3,7 +3,7 @@
     <polygon id="addfiles-a" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
   </defs>
   <g fill="none" fill-rule="evenodd">
-    <path fill="#4285F4" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
-    <use fill="#4285F4" xlink:href="#addfiles-a"/>
+    <path fill="#0060df" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
+    <use fill="#0060df" xlink:href="#addfiles-a"/>
   </g>
 </svg>
diff --git a/assets/arrow-r.svg b/assets/arrow-r.svg
new file mode 100644
index 00000000..a0669c3a
--- /dev/null
+++ b/assets/arrow-r.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>D8471D57-B56D-4AA0-B2BD-A1A6D29ABA2C</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M11.983616,7.98361603 C11.9835405,7.63002294 11.8430152,7.29093967 11.5929494,7.04094936 L7.59294936,3.04094936 C7.06977751,2.53565308 6.23816966,2.54287953 5.72385793,3.05719126 C5.2095462,3.57150299 5.20231975,4.40311085 5.70761603,4.92628269 L8.76494936,7.98361603 L5.70761603,11.0409494 C5.20231975,11.5641212 5.2095462,12.3957291 5.72385793,12.9100408 C6.23816966,13.4243525 7.06977751,13.431579 7.59294936,12.9262827 L11.5929494,8.92628269 C11.8430152,8.67629239 11.9835405,8.33720911 11.983616,7.98361603 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Send_Home-With-Files" transform="translate(-773.000000, -257.000000)">
+            <g id="List-Item-1" transform="translate(744.000000, 168.000000)">
+                <g id="Expand-Icon" transform="translate(24.000000, 87.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Shape" fill="#0060DF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/bg.svg b/assets/bg.svg
new file mode 100644
index 00000000..02457110
--- /dev/null
+++ b/assets/bg.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1440px" height="909px" viewBox="0 0 1440 909" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>71CDA8D6-6870-4A28-B45F-707A97F95302</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0.791595976" width="1440" height="938.017204"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Send_Home-Spec">
+            <g id="Pattern-3">
+                <g id="bg-shapes-01" transform="translate(0.000000, -0.791596)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Mask" fill-opacity="0" fill="#FFFFFF" xlink:href="#path-1"></use>
+                    <g mask="url(#mask-2)" fill="#FFFFFF" fill-rule="nonzero">
+                        <g transform="translate(-41.000000, -205.881720)">
+                            <ellipse id="Oval" cx="43.4808403" cy="716.468133" rx="43.4511199" ry="43.6380065"></ellipse>
+                            <path d="M398.104382,765.687158 C432.728564,765.687158 460.784554,737.505523 460.784554,702.737394 C460.784554,667.96429 432.723611,639.787629 398.104382,639.787629 C284.468706,639.787629 192.023625,546.944935 192.023625,432.820504 C192.023625,318.696074 284.468706,225.853379 398.104382,225.853379 C432.728564,225.853379 460.784554,197.671744 460.784554,162.903615 C460.784554,128.135486 432.723611,99.9538503 398.104382,99.9538503 C215.34913,99.9538503 66.6583273,249.284183 66.6583273,432.825479 C66.6583273,616.366775 215.34913,765.687158 398.104382,765.687158 Z" id="Path"></path>
+                            <path d="M107.784833,1107.52553 L220.731988,994.092583 C225.670516,989.132814 228.444413,982.402054 228.444413,975.387737 C228.444413,968.37342 225.670516,961.642661 220.731988,956.682892 L107.784833,843.254918 C97.4966464,832.922481 80.8185889,832.922481 70.5304019,843.254918 C60.2422149,853.587355 60.2422149,870.337147 70.5304019,880.669584 L164.852817,975.392712 L70.5304019,1070.11087 C60.2422149,1080.4433 60.2422149,1097.19309 70.5304019,1107.52553 C75.6769721,1112.69424 82.4135798,1115.2761 89.1600944,1115.2761 C95.8967021,1115.27113 102.643217,1112.68926 107.784833,1107.52553 Z" id="Path"></path>
+                            <path d="M1243.53296,742.3701 L1551.67595,432.907005 C1565.14873,419.376274 1572.71935,401.017629 1572.71935,381.87353 C1572.71935,362.729432 1565.14873,344.370786 1551.67595,330.840055 L1243.53296,21.3769605 C1215.46119,-6.80507938 1169.96447,-6.80507938 1141.8927,21.3769605 C1113.83136,49.5590004 1113.83136,95.2618701 1141.8927,123.44391 L1399.22598,381.87353 L1141.8927,640.30315 C1113.83136,668.48519 1113.83136,714.18806 1141.8927,742.3701 C1155.92859,756.466356 1174.3181,763.509248 1192.71283,763.509248 C1211.09713,763.509248 1229.49707,756.46112 1243.53296,742.3701 Z" id="Path"></path>
+                            <ellipse id="Oval" cx="1417.39037" cy="673.515125" rx="30" ry="30.1290323"></ellipse>
+                            <path d="M1068.44288,969.593673 C1068.44288,985.323653 1081.13346,998.068816 1096.79607,998.068816 C1112.45869,998.068816 1125.14927,985.323653 1125.14927,969.593673 C1125.14927,917.971285 1166.96577,875.969952 1218.37203,875.969952 C1269.77829,875.969952 1311.59479,917.96631 1311.59479,969.593673 C1311.59479,985.323653 1324.28537,998.068816 1339.94799,998.068816 C1355.6106,998.068816 1368.30118,985.323653 1368.30118,969.593673 C1368.30118,886.571023 1301.04408,819.019668 1218.37203,819.019668 C1135.69998,819.019668 1068.44288,886.566048 1068.44288,969.593673 Z" id="Path"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/copy-16.svg b/assets/copy-16.svg
index 507f199f..8c07fbc6 100644
--- a/assets/copy-16.svg
+++ b/assets/copy-16.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0060df" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
\ No newline at end of file
diff --git a/assets/dl.svg b/assets/dl.svg
new file mode 100644
index 00000000..ae4a06f1
--- /dev/null
+++ b/assets/dl.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>728D143F-562C-4AE5-80DA-9DBBD9D647D8</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Send_Sending" transform="translate(-770.000000, -481.000000)" fill="#0060DF">
+            <g id="List-Item-3" transform="translate(744.000000, 350.000000)">
+                <g id="Download-Icon" transform="translate(26.000000, 131.000000)">
+                    <path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z" id="Fill-1"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/lock.svg b/assets/lock.svg
index bf4b6249..d4e16c96 100644
--- a/assets/lock.svg
+++ b/assets/lock.svg
@@ -1,4 +1,4 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z" fill="#0A84FF" fill-opacity="1"></path></svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z" fill="#FFFFFF" fill-opacity="1"></path></svg>
\ No newline at end of file
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 00000000..d3d94d78
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="36px" viewBox="0 0 40 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>6EF867FA-4ABB-444A-A5BB-8FA5D52E0EEB</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <linearGradient x1="71.1627137%" y1="8.3795633%" x2="23.6307692%" y2="89.0750207%" id="linearGradient-1">
+            <stop stop-color="#FF980E" offset="0%"></stop>
+            <stop stop-color="#FF7139" offset="20.75%"></stop>
+            <stop stop-color="#FF5854" offset="36.33%"></stop>
+            <stop stop-color="#FF4F5E" offset="45.63%"></stop>
+            <stop stop-color="#FF3750" offset="69.29%"></stop>
+            <stop stop-color="#F92261" offset="85.75%"></stop>
+            <stop stop-color="#F5156C" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="71.1627137%" y1="8.3795633%" x2="23.6307692%" y2="89.0750207%" id="linearGradient-2">
+            <stop stop-color="#FFF44F" stop-opacity="0.8" offset="0%"></stop>
+            <stop stop-color="#FFF44F" stop-opacity="0" offset="75%"></stop>
+        </linearGradient>
+        <linearGradient x1="14.3945107%" y1="105.534329%" x2="62.8615752%" y2="24.3294529%" id="linearGradient-3">
+            <stop stop-color="#3A8EE6" offset="0%"></stop>
+            <stop stop-color="#5C79F0" offset="23.59%"></stop>
+            <stop stop-color="#9059FF" offset="62.93%"></stop>
+            <stop stop-color="#C139E6" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="62.8713604%" y1="29.0228725%" x2="42.5369928%" y2="60.7429512%" id="linearGradient-4">
+            <stop stop-color="#6E008B" stop-opacity="0.5" offset="0%"></stop>
+            <stop stop-color="#C846CB" stop-opacity="0" offset="50%"></stop>
+        </linearGradient>
+        <linearGradient x1="73.7626536%" y1="58.1514822%" x2="20.9130221%" y2="45.4476366%" id="linearGradient-5">
+            <stop stop-color="#6A2BEA" stop-opacity="0" offset="13.6%"></stop>
+            <stop stop-color="#662CE6" stop-opacity="0.09459748" offset="29.95%"></stop>
+            <stop stop-color="#592FDB" stop-opacity="0.1926" offset="46.89%"></stop>
+            <stop stop-color="#4534C9" stop-opacity="0.2923" offset="64.1%"></stop>
+            <stop stop-color="#283BAF" stop-opacity="0.393" offset="81.5%"></stop>
+            <stop stop-color="#03448D" stop-opacity="0.4936" offset="98.9%"></stop>
+            <stop stop-color="#00458B" stop-opacity="0.5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Send_Home-Spec" transform="translate(-24.000000, -31.000000)">
+            <g id="Header" transform="translate(24.000000, 24.000000)">
+                <g id="Send" transform="translate(0.000000, 7.000000)">
+                    <g id="FF_Send_Logo">
+                        <g id="Group">
+                            <g>
+                                <path d="M18.4801773,0.309677419 C8.4846097,0.309677419 0.34868259,8.28387097 0.34868259,18.0774194 C0.34868259,19.1225806 1.20101781,19.9741935 2.24706558,19.9741935 L16.5817943,19.9741935 L16.5817943,25.1612903 L16.5817943,25.1612903 L16.5817943,29.4193548 L12.1264056,25.0064516 C11.390298,24.2709677 10.1892801,24.2709677 9.41442994,25.0064516 C8.67832225,25.7419355 8.67832225,26.9419355 9.41442994,27.716129 L17.1241894,35.4193548 C17.162932,35.4580645 17.2016745,35.4967742 17.2791595,35.5354839 C17.2791595,35.5354839 17.2791595,35.5354839 17.317902,35.5354839 C17.3566445,35.5741935 17.395387,35.6129032 17.4341295,35.6129032 C17.4341295,35.6129032 17.4341295,35.6129032 17.472872,35.6129032 C17.5116145,35.6516129 17.5503571,35.6516129 17.5890996,35.6903226 C17.5890996,35.6903226 17.5890996,35.6903226 17.6278421,35.6903226 C17.6665846,35.7290323 17.7440696,35.7290323 17.7828121,35.7677419 C17.7828121,35.7677419 17.7828121,35.7677419 17.7828121,35.7677419 C17.8215546,35.8064516 17.8990396,35.8064516 17.9377822,35.8064516 C17.9377822,35.8064516 17.9377822,35.8064516 17.9377822,35.8064516 C17.9765247,35.8064516 18.0540097,35.8451613 18.0927522,35.8451613 C18.0927522,35.8451613 18.1314947,35.8451613 18.1314947,35.8451613 C18.1702372,35.8451613 18.2089797,35.8451613 18.2864647,35.883871 C18.3639498,35.883871 18.4026923,35.883871 18.4801773,35.883871 C18.5576623,35.883871 18.5964048,35.883871 18.6738898,35.883871 C18.7126324,35.883871 18.7513749,35.883871 18.8288599,35.8451613 C18.8288599,35.8451613 18.8676024,35.8451613 18.8676024,35.8451613 C18.9063449,35.8451613 18.9838299,35.8064516 19.0225724,35.8064516 C19.0225724,35.8064516 19.0225724,35.8064516 19.0225724,35.8064516 C19.0613149,35.8064516 19.1388,35.7677419 19.1775425,35.7290323 C19.1775425,35.7290323 19.1775425,35.7290323 19.1775425,35.7290323 C19.216285,35.6903226 19.29377,35.6903226 19.3325125,35.6516129 C19.3325125,35.6516129 19.3325125,35.6516129 19.3325125,35.6516129 C19.371255,35.6129032 19.4099975,35.6129032 19.44874,35.5741935 C19.44874,35.5741935 19.44874,35.5741935 19.4874826,35.5741935 C19.5262251,35.5354839 19.5649676,35.4967742 19.6037101,35.4967742 C19.6037101,35.4967742 19.6037101,35.4967742 19.6424526,35.4967742 C19.6811951,35.4580645 19.7199376,35.4193548 19.7974226,35.3806452 L27.5071821,27.6774194 C28.2432898,26.9419355 28.2432898,25.7419355 27.5071821,24.9677419 C26.7710744,24.2322581 25.5700566,24.2322581 24.7952064,24.9677419 L20.3785603,29.4193548 L20.3785603,20.0129032 L34.713289,20.0129032 C35.7593368,20.0129032 36.611672,19.1612903 36.611672,18.116129 C36.611672,8.28387097 28.4757449,0.309677419 18.4801773,0.309677419 Z M4.26167611,16.1806452 C5.23023886,9.40645161 11.2353279,4.14193548 18.4801773,4.14193548 C25.7250267,4.14193548 31.6913732,9.40645161 32.659936,16.1806452 L4.26167611,16.1806452 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+                                <path d="M18.4801773,0.309677419 C8.4846097,0.309677419 0.34868259,8.28387097 0.34868259,18.0774194 C0.34868259,19.1225806 1.20101781,19.9741935 2.24706558,19.9741935 L16.5817943,19.9741935 L16.5817943,25.1612903 L16.5817943,25.1612903 L16.5817943,29.4193548 L12.1264056,25.0064516 C11.390298,24.2709677 10.1892801,24.2709677 9.41442994,25.0064516 C8.67832225,25.7419355 8.67832225,26.9419355 9.41442994,27.716129 L17.1241894,35.4193548 C17.162932,35.4580645 17.2016745,35.4967742 17.2791595,35.5354839 C17.2791595,35.5354839 17.2791595,35.5354839 17.317902,35.5354839 C17.3566445,35.5741935 17.395387,35.6129032 17.4341295,35.6129032 C17.4341295,35.6129032 17.4341295,35.6129032 17.472872,35.6129032 C17.5116145,35.6516129 17.5503571,35.6516129 17.5890996,35.6903226 C17.5890996,35.6903226 17.5890996,35.6903226 17.6278421,35.6903226 C17.6665846,35.7290323 17.7440696,35.7290323 17.7828121,35.7677419 C17.7828121,35.7677419 17.7828121,35.7677419 17.7828121,35.7677419 C17.8215546,35.8064516 17.8990396,35.8064516 17.9377822,35.8064516 C17.9377822,35.8064516 17.9377822,35.8064516 17.9377822,35.8064516 C17.9765247,35.8064516 18.0540097,35.8451613 18.0927522,35.8451613 C18.0927522,35.8451613 18.1314947,35.8451613 18.1314947,35.8451613 C18.1702372,35.8451613 18.2089797,35.8451613 18.2864647,35.883871 C18.3639498,35.883871 18.4026923,35.883871 18.4801773,35.883871 C18.5576623,35.883871 18.5964048,35.883871 18.6738898,35.883871 C18.7126324,35.883871 18.7513749,35.883871 18.8288599,35.8451613 C18.8288599,35.8451613 18.8676024,35.8451613 18.8676024,35.8451613 C18.9063449,35.8451613 18.9838299,35.8064516 19.0225724,35.8064516 C19.0225724,35.8064516 19.0225724,35.8064516 19.0225724,35.8064516 C19.0613149,35.8064516 19.1388,35.7677419 19.1775425,35.7290323 C19.1775425,35.7290323 19.1775425,35.7290323 19.1775425,35.7290323 C19.216285,35.6903226 19.29377,35.6903226 19.3325125,35.6516129 C19.3325125,35.6516129 19.3325125,35.6516129 19.3325125,35.6516129 C19.371255,35.6129032 19.4099975,35.6129032 19.44874,35.5741935 C19.44874,35.5741935 19.44874,35.5741935 19.4874826,35.5741935 C19.5262251,35.5354839 19.5649676,35.4967742 19.6037101,35.4967742 C19.6037101,35.4967742 19.6037101,35.4967742 19.6424526,35.4967742 C19.6811951,35.4580645 19.7199376,35.4193548 19.7974226,35.3806452 L27.5071821,27.6774194 C28.2432898,26.9419355 28.2432898,25.7419355 27.5071821,24.9677419 C26.7710744,24.2322581 25.5700566,24.2322581 24.7952064,24.9677419 L20.3785603,29.4193548 L20.3785603,20.0129032 L34.713289,20.0129032 C35.7593368,20.0129032 36.611672,19.1612903 36.611672,18.116129 C36.611672,8.28387097 28.4757449,0.309677419 18.4801773,0.309677419 Z M4.26167611,16.1806452 C5.23023886,9.40645161 11.2353279,4.14193548 18.4801773,4.14193548 C25.7250267,4.14193548 31.6913732,9.40645161 32.659936,16.1806452 L4.26167611,16.1806452 Z" id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+                                <path d="M20.3785603,4.25806452 C26.7323319,5.10967742 31.7688582,9.98709677 32.659936,16.1806452 L24.2140688,16.1806452 C22.1219732,16.1806452 20.4173028,17.883871 20.4173028,19.9741935 L20.4173028,19.9741935 L34.713289,19.9741935 C35.7593368,19.9741935 36.611672,19.1225806 36.611672,18.0774194 C36.611672,11.3032258 31.8076008,7.97419355 27.7396372,6.07741935 C23.9816137,4.33548387 20.3785603,4.25806452 20.3785603,4.25806452 Z" id="Path" fill="url(#linearGradient-3)"></path>
+                                <path d="M32.582451,15.7548387 C33.8609538,16.8 35.1781991,17.8064516 36.4179595,18.8903226 C36.534187,18.6580645 36.611672,18.3870968 36.611672,18.0774194 C36.611672,11.3032258 31.8076008,7.97419355 27.7396372,6.07741935 C23.9816137,4.33548387 20.3785603,4.25806452 20.3785603,4.25806452 C26.5773619,5.07096774 31.5364032,9.79354839 32.582451,15.7548387 Z" id="Path" fill="url(#linearGradient-4)"></path>
+                            </g>
+                            <path d="M32.3499959,16.1806452 L24.2140688,16.1806452 C22.1219732,16.1806452 20.4173028,17.883871 20.4173028,19.9741935 L34.713289,19.9741935 C35.2944267,19.9741935 35.8368218,19.7032258 36.1855044,19.2774194 C34.9070016,18.2322581 33.6284987,17.2258065 32.3499959,16.1806452 Z" id="Path" fill="url(#linearGradient-5)" opacity="0.9"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/tailwind.js b/tailwind.js
index 8d160bdc..d9dacae0 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -49,10 +49,10 @@ const colors = {
   'grey-darkest': '#3d4852',
   'grey-darker': '#606f7b',
   'grey-dark': '#8795a1',
-  grey: '#b8c2cc',
+  grey: '#B1B1B3',
   'grey-light': '#dae1e7',
   'grey-lighter': '#f1f5f8',
-  'grey-lightest': '#f8fafc',
+  'grey-lightest': '#F9F9FA',
   white: '#ffffff',
 
   'red-darkest': '#3b0d0c',
