diff --git a/dapp-oeth/pages/index.js b/dapp-oeth/pages/index.js
index 66e49d6b37..ea49269274 100644
--- a/dapp-oeth/pages/index.js
+++ b/dapp-oeth/pages/index.js
@@ -21,6 +21,10 @@ export default function DApp({ locale, onLocale }) {
         </div>
       </Layout>
       <style jsx>{`
+        .home {
+          padding-top: 20px;
+        }
+
         @media (max-width: 799px) {
           .home {
             padding: 0;
diff --git a/dapp-oeth/public/images/activity-failed.svg b/dapp-oeth/public/images/activity-failed.svg
new file mode 100644
index 0000000000..e99c620cd5
--- /dev/null
+++ b/dapp-oeth/public/images/activity-failed.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C10.2873 0 6.72631 1.47459 4.10078 4.10079C1.47525 6.72632 0 10.2873 0 14C0 17.7127 1.47543 21.2737 4.10078 23.8992C6.72631 26.5254 10.2873 28 14 28C17.7135 28 21.2745 26.5254 23.9001 23.8992C26.5256 21.2737 28 17.7127 28 14C27.9966 10.2882 26.5195 6.72957 23.8949 4.10513C21.2703 1.48068 17.7118 0.004339 14 0ZM18.5017 16.4873C19.0576 17.0433 19.0576 17.945 18.5017 18.5009C17.9458 19.0568 17.0441 19.0568 16.4881 18.5009L14.0008 16.0136L11.5135 18.5009C10.9559 19.0492 10.0609 19.0458 9.50839 18.4924C8.955 17.9399 8.95161 17.0441 9.49992 16.4873L11.9873 14L9.49992 11.5127H9.49907C8.95077 10.9559 8.95416 10.0601 9.50754 9.50756C10.0601 8.95416 10.955 8.95078 11.5126 9.49908L14 11.9864L16.4873 9.49908C17.0432 8.94315 17.945 8.94315 18.5009 9.49908C19.0568 10.055 19.0568 10.9567 18.5009 11.5126L16.0135 14L18.5017 16.4873Z" fill="#FF4E4E"/>
+</svg>
diff --git a/dapp-oeth/public/images/activity-pending.svg b/dapp-oeth/public/images/activity-pending.svg
new file mode 100644
index 0000000000..a0e2b61dad
--- /dev/null
+++ b/dapp-oeth/public/images/activity-pending.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5176 10.6552L27.3592 12.3448L28.9998 9.41824" stroke="#66FE90" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.20508 20.9822L2.12132 19.8275L1.00021 23.0035" stroke="#66FE90" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.812 12.1035C25.5339 6.30018 20.4972 1.98279 14.5006 1.98279C8.50399 1.98279 3.46728 6.30018 2.18909 12.1035H1.16715C2.46332 5.76035 7.93037 0.982788 14.5006 0.982788C21.0708 0.982788 26.5378 5.76035 27.834 12.1035H26.812ZM26.2293 19.8276H27.2954C25.3848 25.1848 20.3851 29.0173 14.5006 29.0173C8.61601 29.0173 3.61637 25.1848 1.70572 19.8276H2.77188C4.63345 24.6321 9.1907 28.0173 14.5006 28.0173C19.8104 28.0173 24.3677 24.6321 26.2293 19.8276Z" fill="#66FE90"/>
+</svg>
diff --git a/dapp-oeth/public/images/activity-success.svg b/dapp-oeth/public/images/activity-success.svg
new file mode 100644
index 0000000000..fed8653a33
--- /dev/null
+++ b/dapp-oeth/public/images/activity-success.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C10.2873 0 6.72631 1.47459 4.10078 4.10079C1.47525 6.72632 0 10.2873 0 14C0 17.7127 1.47543 21.2737 4.10078 23.8992C6.72631 26.5254 10.2873 28 14 28C17.7135 28 21.2745 26.5254 23.9001 23.8992C26.5256 21.2737 28 17.7127 28 14C27.9966 10.2882 26.5195 6.72957 23.8949 4.10513C21.2703 1.48068 17.7118 0.004339 14 0ZM20.7458 11.5832L13.1762 18.5171C12.5983 19.0468 11.7 19.0086 11.1678 18.4324L7.16937 14.0977C6.91344 13.8198 6.77868 13.4519 6.79393 13.0748C6.80919 12.6977 6.9736 12.3418 7.25073 12.0858C7.82955 11.5528 8.72954 11.5892 9.26259 12.1672L12.2982 15.4588L18.8218 9.48331H18.8227C19.1006 9.22568 19.4693 9.08924 19.8481 9.1045C20.2269 9.11975 20.5846 9.28585 20.8405 9.56552C21.0964 9.84519 21.2303 10.2155 21.2125 10.5943C21.1947 10.9723 21.0272 11.3281 20.7458 11.5832Z" fill="#5BFF92"/>
+</svg>
diff --git a/dapp-oeth/public/images/activity.svg b/dapp-oeth/public/images/activity.svg
new file mode 100644
index 0000000000..40c2c79d0f
--- /dev/null
+++ b/dapp-oeth/public/images/activity.svg
@@ -0,0 +1,14 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4654 24.5466C10.4654 24.5466 14.1533 24.5466 16.5163 24.5466M10.4654 24.5466L10.4654 18.4956M10.4654 24.5466C10.4654 24.5466 19.0847 15.9273 24.6075 10.4045" stroke="url(#paint0_linear_600_10970)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5348 3.33336L17.5348 9.38433M17.5348 3.33336C17.5348 3.33336 13.8469 3.33336 11.4838 3.33336M17.5348 3.33336C17.5348 3.33336 8.91552 11.9526 3.39267 17.4755" stroke="url(#paint1_linear_600_10970)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_600_10970" x1="12.7565" y1="12.6956" x2="23.2831" y2="23.2221" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B361E6"/>
+<stop offset="1" stop-color="#6A36FC"/>
+</linearGradient>
+<linearGradient id="paint1_linear_600_10970" x1="5.68383" y1="5.62452" x2="16.2104" y2="16.1511" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B361E6"/>
+<stop offset="1" stop-color="#6A36FC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/dapp-oeth/public/images/external-link-white.svg b/dapp-oeth/public/images/external-link-white.svg
new file mode 100644
index 0000000000..ee38dffa8b
--- /dev/null
+++ b/dapp-oeth/public/images/external-link-white.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.26463 0H3.1248C2.70925 0 2.38949 0.335384 2.38949 0.734583C2.38949 1.13378 2.72521 1.46917 3.1248 1.46917H5.47443L0.215739 6.73859C-0.0719132 7.02596 -0.0719132 7.48909 0.215739 7.77645C0.359569 7.92014 0.551458 8 0.743208 8C0.934957 8 1.12685 7.92014 1.27068 7.77645L6.52937 2.52299V4.87029C6.52937 5.28542 6.86509 5.60487 7.26468 5.60487C7.68024 5.60487 8 5.26948 8 4.87029L7.99989 0.734583C7.99989 0.319445 7.68024 0.000113994 7.26469 0.000113994L7.26463 0Z" fill="#FAFBFB"/>
+</svg>
diff --git a/dapp-oeth/public/images/externalLink.png b/dapp-oeth/public/images/externalLink.png
deleted file mode 100644
index d51ad9b9ec..0000000000
Binary files a/dapp-oeth/public/images/externalLink.png and /dev/null differ
diff --git a/dapp-oeth/public/images/splitarrow.svg b/dapp-oeth/public/images/splitarrow.svg
new file mode 100644
index 0000000000..7de4d00ca2
--- /dev/null
+++ b/dapp-oeth/public/images/splitarrow.svg
@@ -0,0 +1,9 @@
+<svg width="14" height="25" viewBox="0 0 14 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48151 25C7.75431 25 8.01659 24.8937 8.209 24.7036L13.6985 19.3087C14.1005 18.9135 14.1005 18.2728 13.6985 17.8776C13.2965 17.4825 12.6446 17.4825 12.2426 17.8776L8.51055 21.546L8.51055 1.01144C8.51055 0.452561 8.05014 -1.65171e-06 7.48156 -1.62728e-06C6.91298 -1.60285e-06 6.45256 0.452561 6.45256 1.01144L6.45256 21.546L2.72054 17.8776C2.31852 17.4825 1.66665 17.4825 1.26463 17.8776C0.862606 18.2728 0.862606 18.9135 1.26463 19.3087L6.75411 24.7036C6.94651 24.8937 7.2087 25 7.48151 25Z" fill="url(#paint0_linear_600_9253)"/>
+<defs>
+<linearGradient id="paint0_linear_600_9253" x1="7.48156" y1="32.2485" x2="7.48155" y2="-11.2426" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8C66FC"/>
+<stop offset="1" stop-color="#0274F1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/dapp-oeth/src/components/AccountStatusDropdown.js b/dapp-oeth/src/components/AccountStatusDropdown.js
index db2145ef5e..837fc46f44 100644
--- a/dapp-oeth/src/components/AccountStatusDropdown.js
+++ b/dapp-oeth/src/components/AccountStatusDropdown.js
@@ -37,7 +37,7 @@ const AccountStatusDropdown = ({ className, showLogin }) => {
               setOpen(true)
             }
             event({
-              'event': 'open_account',
+              event: 'open_account',
             })
           }}
         >
@@ -68,6 +68,7 @@ const AccountStatusDropdown = ({ className, showLogin }) => {
           color: #fafbfb;
           padding: 20px 30px 20px 20px;
           min-width: 170px;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
         .dropdown-menu .dropdown-marble {
           margin-right: 18px;
diff --git a/dapp-oeth/src/components/AppFooter.js b/dapp-oeth/src/components/AppFooter.js
index 3c5bcc4ea8..7dbfe1c5eb 100644
--- a/dapp-oeth/src/components/AppFooter.js
+++ b/dapp-oeth/src/components/AppFooter.js
@@ -91,7 +91,7 @@ export default function Footer({ onLocale, locale }) {
       </footer>
       <style jsx>{`
         footer {
-          background-color: #141519;
+          background-color: #1e1f25;
           color: #828699;
           font-size: 0.75rem;
           padding: 18px 0;
diff --git a/dapp-oeth/src/components/ApySelect.js b/dapp-oeth/src/components/ApySelect.js
index 701c8a469d..ce6b3a3259 100644
--- a/dapp-oeth/src/components/ApySelect.js
+++ b/dapp-oeth/src/components/ApySelect.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import classnames from 'classnames'
 import Dropdown from 'components/Dropdown'
 import { assetRootPath } from 'utils/image'
 import { event } from '../../lib/gtm'
@@ -14,18 +15,23 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
               return (
                 <div
                   key={days}
-                  className="dropdown-item justify-content-start align-items-center"
+                  className={classnames(
+                    'dropdown-item justify-content-start align-items-center',
+                    {
+                      selected: String(days) === String(apyDays),
+                    }
+                  )}
                   onClick={(e) => {
                     e.preventDefault()
                     setApyDays(days)
                     setOpen(false)
                     event({
-                      'event': 'change_apy',
-                      'change_apy_to': days
+                      event: 'change_apy',
+                      change_apy_to: days,
                     })
                   }}
                 >
-                  {`${days}${homepage ? ' days' : 'd'}`}
+                  {`${days} day trailing APY`}
                 </div>
               )
             })}
@@ -44,7 +50,11 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
           }}
         >
           {`${apyDays} day trailing`}
-          <div className="downcaret">
+          <div
+            className={classnames('downcaret', {
+              opened: open,
+            })}
+          >
             <img
               className="apy-select-icon"
               src={assetRootPath('/images/downcaret.png')}
@@ -78,26 +88,39 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
         }
 
         .dropdown-menu {
-          margin-right: 200px;
+          margin-right: 0;
           background-color: #1e1f25;
           color: #fafbfb;
           font-size: 16px;
-          min-width: 98px;
-          top: 100%;
-          left: 0;
-          padding: 5px;
+          min-width: 140px;
+          top: 115%;
+          left: -20px;
           border: solid 1px #141519;
+          padding: 0;
+          overflow: hidden;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .dropdown-item {
+          display: flex;
+          align-items: center;
           color: #fafbfb;
-          padding: 3px 5px 3px 10px;
+          padding: 10px 16px;
           line-height: 20px;
           cursor: pointer;
+          border-bottom: solid 1px #141519;
+          font-size: 12px;
+        }
+
+        .dropdown-item.selected {
+          color: #828699;
+        }
+        .dropdown-item:nth-child(:last-child) {
+          border-bottom: none;
         }
 
         .dropdown-item:hover {
-          background-color: rgba(255, 255, 255, 0.1);
+          background-color: #24252b;
         }
 
         .downcaret {
@@ -110,6 +133,11 @@ const ApySelect = ({ apyDayOptions, apyDays, setApyDays, nav, homepage }) => {
           margin: 0 8px;
           background-color: rgba(255, 255, 255, 0.1);
           border-radius: 20px;
+          transition: transform 0.2s ease-in;
+        }
+
+        .downcaret.opened {
+          transform: rotate(180deg);
         }
 
         .apy-select-icon {
diff --git a/dapp-oeth/src/components/GetOUSD.js b/dapp-oeth/src/components/GetOUSD.js
index b552d1f765..f8db112422 100644
--- a/dapp-oeth/src/components/GetOUSD.js
+++ b/dapp-oeth/src/components/GetOUSD.js
@@ -98,8 +98,10 @@ const GetOUSD = ({
 
         .btn-nav {
           color: #fafbfb;
-          font-size: 0.8125rem;
-          font-weight: normal;
+          font-size: 16px;
+          font-weight: 500;
+          letter-spacing: 0em;
+          text-align: left;
         }
 
         @media (max-width: 992px) {
diff --git a/dapp-oeth/src/components/IPFSDappLink.js b/dapp-oeth/src/components/IPFSDappLink.js
index a3510b4ed6..c8c6b0f0d4 100644
--- a/dapp-oeth/src/components/IPFSDappLink.js
+++ b/dapp-oeth/src/components/IPFSDappLink.js
@@ -34,6 +34,11 @@ export default function IPFSDappLink({ css }) {
           margin-right: 10px;
           background-color: #1e1f25;
           color: #fafbfb;
+          font-size: 16px;
+          font-weight: 500;
+          letter-spacing: 0em;
+          text-align: left;
+          height: 42px;
         }
 
         .ipfs-link span {
diff --git a/dapp-oeth/src/components/MissionControl.js b/dapp-oeth/src/components/MissionControl.js
index 55a11b8a3b..d7c5d72186 100644
--- a/dapp-oeth/src/components/MissionControl.js
+++ b/dapp-oeth/src/components/MissionControl.js
@@ -10,6 +10,10 @@ const MissionControl = ({}) => {
         <SwapHomepage />
       </div>
       <style jsx>{`
+        .swap-contain {
+          margin-top: 18px;
+        }
+
         @media (max-width: 767px) {
           .swap-contain {
             padding: 0 8px;
diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js
index faa75dbba2..abbcb9bfc6 100644
--- a/dapp-oeth/src/components/Nav.js
+++ b/dapp-oeth/src/components/Nav.js
@@ -198,27 +198,27 @@ const TransactionActivityDropdown = () => {
             !lastProcessedTransaction?.mined ? (
               <img
                 className="activity-icon rotating"
-                src={assetRootPath('/images/activity-pending.png')}
+                src={assetRootPath('/images/activity-pending.svg')}
                 alt="Transaction activity pending"
               />
             ) : lastProcessedTransaction?.mined &&
               !lastProcessedTransaction?.isError ? (
               <img
                 className="activity-icon "
-                src={assetRootPath('/images/activity-success.png')}
+                src={assetRootPath('/images/activity-success.svg')}
                 alt="Transaction activity success"
               />
             ) : (
               <img
                 className="activity-icon"
-                src={assetRootPath('/images/activity-failed.png')}
+                src={assetRootPath('/images/activity-failed.svg')}
                 alt="Transaction activity failed"
               />
             )
           ) : (
             <img
               className="activity-icon"
-              src={assetRootPath('/images/activity.png')}
+              src={assetRootPath('/images/activity.svg')}
               alt="Transaction activity button"
             />
           )}
@@ -257,6 +257,7 @@ const TransactionActivityDropdown = () => {
           color: #fafbfb;
           padding: 20px 30px 20px 20px;
           min-width: 170px;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .dropdown-menu .dropdown-marble {
@@ -548,7 +549,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
         }
 
         .banner.burn {
-          background-color: #141519;
+          background-color: #1e1f25;
           border: solid 1px;
           border-radius: 5px;
         }
@@ -588,7 +589,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
         }
 
         .navbar.lightBg {
-          background: #141519;
+          background: #1e1f25;
           display: block;
         }
 
diff --git a/dapp-oeth/src/components/_AccountStatusContent.js b/dapp-oeth/src/components/_AccountStatusContent.js
index b72abb13f0..48de29f995 100644
--- a/dapp-oeth/src/components/_AccountStatusContent.js
+++ b/dapp-oeth/src/components/_AccountStatusContent.js
@@ -208,6 +208,7 @@ const AccountStatusContent = ({ className, onOpen }) => {
           border: solid 1px #141519;
           background-color: #1e1f25;
           color: #fafbfb;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .account-status-content {
diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js
index 5d985ec63f..e7d5eb089a 100644
--- a/dapp-oeth/src/components/buySell/BalanceHeader.js
+++ b/dapp-oeth/src/components/buySell/BalanceHeader.js
@@ -71,7 +71,7 @@ const BalanceHeader = ({
         setBalanceEmphasised(false)
       },
       // non even duration number so more of the decimals in oethBalance animate
-      duration: 1985,
+      duration: 0,
       id: 'header-balance-ousd-animation',
       stepTime: 30,
     })
diff --git a/dapp-oeth/src/components/buySell/SettingsDropdown.js b/dapp-oeth/src/components/buySell/SettingsDropdown.js
index c86644f758..947b0c5ed5 100644
--- a/dapp-oeth/src/components/buySell/SettingsDropdown.js
+++ b/dapp-oeth/src/components/buySell/SettingsDropdown.js
@@ -98,8 +98,8 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
             const newOpenState = !settingsOpen
             setSettingsOpen(newOpenState)
             if (!settingsOpen) {
-              event({ 
-                'event': 'open_settings'
+              event({
+                event: 'open_settings',
               })
             }
           }}
@@ -121,6 +121,7 @@ const SettingsDropdown = ({ setPriceToleranceValue, priceToleranceValue }) => {
           border: solid 1px #141519;
           background-color: #1e1f25;
           color: #fafbfb;
+          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
         }
 
         .settings-icon {
diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
index 667c1e5be1..13ff542d0f 100644
--- a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
+++ b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
@@ -182,20 +182,26 @@ const TokenSelectionModal = ({
                   </div>
                 </div>
                 <div className="balances">
-                  <span className="eth">
-                    {formatCurrencyMinMaxDecimals(balance, {
-                      minDecimals: 2,
-                      maxDecimals: 18,
-                      truncate: true,
-                    })}
-                  </span>
-                  <span className="usd">
-                    $
-                    {formatCurrency(
-                      parseFloat(coinBalances?.[token]) * conversion,
-                      2
-                    )}
-                  </span>
+                  {token === 'mix' ? (
+                    <span className="eth">-</span>
+                  ) : (
+                    <>
+                      <span className="eth">
+                        {formatCurrencyMinMaxDecimals(balance, {
+                          minDecimals: 2,
+                          maxDecimals: 18,
+                          truncate: true,
+                        })}
+                      </span>
+                      <span className="usd">
+                        $
+                        {formatCurrency(
+                          parseFloat(coinBalances?.[token]) * conversion,
+                          2
+                        )}
+                      </span>
+                    </>
+                  )}
                 </div>
               </button>
             )
@@ -302,7 +308,7 @@ const TokenSelectionModal = ({
         }
 
         .selectable:hover {
-          background-color: #141519;
+          background-color: #1e1f25;
         }
       `}</style>
     </>
@@ -333,7 +339,7 @@ const CoinSelect = ({
         </div>
         <style jsx>{`
           .coin-select {
-            padding: 8px;
+            padding: 4px;
             font-size: 18px;
             background-color: rgba(255, 255, 255, 0.1);
             border-radius: 30px;
@@ -349,7 +355,7 @@ const CoinSelect = ({
             .coin-select {
               width: fit-content;
               min-height: 32px;
-              padding: 6px;
+              padding: 4px;
               margin-top: 16px;
             }
           }
@@ -391,7 +397,7 @@ const CoinSelect = ({
       </button>
       <style jsx>{`
         .coin-select {
-          padding: 8px;
+          padding: 4px;
           border-radius: 30px;
           border: solid 1px #141519;
           color: #fafbfb;
@@ -432,7 +438,7 @@ const CoinSelect = ({
           .coin-select {
             width: fit-content;
             min-height: 32px;
-            padding: 6px;
+            padding: 4px;
             margin-top: 16px;
           }
 
@@ -476,7 +482,7 @@ const SwapCurrencyPill = ({
     'sfrxeth',
   ]
 
-  const coinRedeemOptions = ['oeth', 'mix', 'eth']
+  const coinRedeemOptions = ['mix', 'eth']
 
   const { active } = useWeb3React()
 
@@ -584,7 +590,6 @@ const SwapCurrencyPill = ({
       : null
 
   const coinSplits = bottomItem && selectedSwap && selectedSwap.coinSplits
-  console.log(bottomItem, selectedSwap)
 
   const maxBalanceSet =
     topItem &&
@@ -623,6 +628,7 @@ const SwapCurrencyPill = ({
           >
             {topItem && (
               <input
+                inputMode="numeric"
                 className="action-input"
                 type="text"
                 value={truncateDecimals(coinValue, 18)}
diff --git a/dapp-oeth/src/components/buySell/SwapHomepage.js b/dapp-oeth/src/components/buySell/SwapHomepage.js
index 3df94eee69..fdd583591a 100644
--- a/dapp-oeth/src/components/buySell/SwapHomepage.js
+++ b/dapp-oeth/src/components/buySell/SwapHomepage.js
@@ -16,7 +16,6 @@ import ContractsTable from 'components/buySell/ContractsTable'
 import useSwapEstimator from 'hooks/useSwapEstimator'
 import withIsMobile from 'hoc/withIsMobile'
 import ApproveSwap from 'components/buySell/ApproveSwap'
-import analytics from 'utils/analytics'
 import { formatCurrencyMinMaxDecimals, removeCommas } from '../../utils/math'
 import { event } from '../../../lib/gtm'
 
@@ -38,7 +37,7 @@ const SwapHomepage = ({
   const [swapMode, setSwapMode] = useState(
     process.browser && localStorage.getItem(lastSelectedSwapModeKey) !== null
       ? localStorage.getItem(lastSelectedSwapModeKey)
-      : 'redeem'
+      : 'mint'
   )
   const [buyErrorToDisplay, setBuyErrorToDisplay] = useState(false)
 
diff --git a/dapp-oeth/src/components/buySell/_PillArrow.js b/dapp-oeth/src/components/buySell/_PillArrow.js
index 27c83098d4..723336a707 100644
--- a/dapp-oeth/src/components/buySell/_PillArrow.js
+++ b/dapp-oeth/src/components/buySell/_PillArrow.js
@@ -42,11 +42,11 @@ const PillArrow = ({ swapMode, setSwapMode }) => {
           className="caret-background position-absolute d-flex align-items-center justify-content-center"
           onClick={() => {
             setSwapMode(swapMode === 'mint' ? 'redeem' : 'mint')
-            event({'event': 'change_input_output'})
+            event({ event: 'change_input_output' })
           }}
         >
           <img
-            src={assetRootPath('/images/splitarrow.png')}
+            src={assetRootPath('/images/splitarrow.svg')}
             alt="swap arrow"
             style={{ height: 25, width: 14 }}
           />
diff --git a/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js b/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js
index b99581ee3c..f907628cda 100644
--- a/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js
+++ b/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js
@@ -126,7 +126,7 @@ const ActivityItem = ({ transaction, states = {}, visual }) => {
                   rel="noreferrer"
                 >
                   <img
-                    src={assetRootPath('/images/externalLink.png')}
+                    src={assetRootPath('/images/external-link-white.svg')}
                     alt="Navigate to Etherscan"
                   />
                 </a>
@@ -923,7 +923,7 @@ const SidePanelTransactionMessage = ({ transaction, animate = false }) => {
         .line {
           width: 65px;
           height: 1px;
-          background-color: #141519;
+          background-color: #1e1f25;
           margin-bottom: 14px;
           opacity: 1;
           transition: opacity 0.3s ease-out 0.4s;
diff --git a/dapp-oeth/src/components/wrap/WrapHomepage.js b/dapp-oeth/src/components/wrap/WrapHomepage.js
index ac6a62fde8..b9bde22e77 100644
--- a/dapp-oeth/src/components/wrap/WrapHomepage.js
+++ b/dapp-oeth/src/components/wrap/WrapHomepage.js
@@ -26,6 +26,7 @@ import {
   displayCurrency,
   calculateSwapAmounts,
 } from '../../utils/math'
+import { assetRootPath } from '../../utils/image'
 
 const lastSelectedSwapModeKey = 'last_user_selected_wrap_mode'
 
@@ -173,9 +174,9 @@ const WrapHomepage = ({
     const wrapTokenAmount = swapMode === 'mint' ? inputAmount : wrapEstimate
     // mint = wrap
     event({
-      'event': 'wrap_started',
-      'wrap_token': wrapTokenUsed,
-      'wrap_amount': wrapTokenAmount
+      event: 'wrap_started',
+      wrap_token: wrapTokenUsed,
+      wrap_amount: wrapTokenAmount,
     })
 
     const metadata = swapMetadata()
@@ -210,12 +211,12 @@ const WrapHomepage = ({
 
       await rpcProvider.waitForTransaction(result.hash)
       event({
-        'event': 'wrap_complete',
-        'wrap_type': swapMode,
-        'wrap_token': wrapTokenUsed,
-        'wrap_amount': wrapTokenAmount,
-        'wrap_address': '',
-        'wrap_tx': ''
+        event: 'wrap_complete',
+        wrap_type: swapMode,
+        wrap_token: wrapTokenUsed,
+        wrap_amount: wrapTokenAmount,
+        wrap_address: '',
+        wrap_tx: '',
       })
     } catch (e) {
       const metadata = swapMetadata()
@@ -223,19 +224,19 @@ const WrapHomepage = ({
       if (e.code !== 4001) {
         await storeTransactionError(swapMode, 'oeth')
         event({
-          'event': 'wrap_failed',
-          'wrap_type': swapMode,
-          'wrap_token': wrapTokenUsed,
-          'wrap_amount': wrapTokenAmount,
-          'wrap_address' : ''
+          event: 'wrap_failed',
+          wrap_type: swapMode,
+          wrap_token: wrapTokenUsed,
+          wrap_amount: wrapTokenAmount,
+          wrap_address: '',
         })
       } else {
         event({
-          'event': 'wrap_rejected',
-          'wrap_type': swapMode,
-          'wrap_token': wrapTokenUsed,
-          'wrap_amount': wrapTokenAmount,
-          'wrap_address': ''
+          event: 'wrap_rejected',
+          wrap_type: swapMode,
+          wrap_token: wrapTokenUsed,
+          wrap_amount: wrapTokenAmount,
+          wrap_address: '',
         })
       }
 
@@ -255,6 +256,25 @@ const WrapHomepage = ({
     <>
       {process.browser && (
         <div className="wrap-homepage d-flex flex-column mt-4">
+          <div className="wrap-help">
+            <p className="info">
+              Wrapped wOETH is a non-rebasing tokenized vault that appreciates
+              in value instead of growing in number.
+            </p>
+            <a
+              href="https://oeth.com"
+              className="btn-blue learn-more"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span className="text">Learn more</span>
+              <img
+                className="icon"
+                src={assetRootPath('/images/external-link-white.svg')}
+                alt="Navigate to OETH home page"
+              />
+            </a>
+          </div>
           <div className="wrap-wrapper">
             <p className="title">Wrap</p>
             <div className="swap-wrapper d-flex flex-column flex-grow">
@@ -302,6 +322,52 @@ const WrapHomepage = ({
             swappingGloballyDisabled={wrappingGloballyDisabled}
           />
           <style jsx>{`
+            .wrap-help {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              border: solid 1px #141519;
+              border-radius: 10px;
+              background-color: #1e1f25;
+              min-height: 115px;
+              margin: 10px 0 18px 0;
+              color: #fafafb;
+              padding: 28px 40px;
+            }
+
+            .wrap-help .info {
+              font-size: 12px;
+              font-weight: 400;
+              line-height: 20px;
+              letter-spacing: 0em;
+              text-align: left;
+            }
+
+            .wrap-help .learn-more {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: center;
+              border-radius: 100px;
+              height: 32px;
+              font-size: 12px;
+              font-weight: 500;
+              line-height: 20px;
+              letter-spacing: 0em;
+              text-align: left;
+              width: 113px;
+            }
+
+            .wrap-help .learn-more .text {
+              width: 65px;
+              margin-right: 8px;
+              flex-shrink: 0;
+            }
+
+            .wrap-help .learn-more .icon {
+              flex-shrink: 0;
+            }
+
             .wrap-wrapper {
               border: solid 1px #141519;
               border-radius: 10px;
@@ -341,6 +407,10 @@ const WrapHomepage = ({
               .wrap-homepage .title {
                 padding: 16px;
               }
+
+              .wrap-help {
+                padding: 16px;
+              }
             }
           `}</style>
         </div>
diff --git a/dapp-oeth/src/components/wrap/WrapOETHPill.js b/dapp-oeth/src/components/wrap/WrapOETHPill.js
index ef3f10b239..89d565c2c0 100644
--- a/dapp-oeth/src/components/wrap/WrapOETHPill.js
+++ b/dapp-oeth/src/components/wrap/WrapOETHPill.js
@@ -236,6 +236,7 @@ const WrapOETHPill = ({
           >
             {topItem && (
               <input
+                inputMode="numeric"
                 type="text"
                 value={truncateDecimals(coinValue, 18)}
                 placeholder="0.00"
diff --git a/dapp-oeth/src/utils/math.js b/dapp-oeth/src/utils/math.js
index 7384e30dd5..439532b90a 100644
--- a/dapp-oeth/src/utils/math.js
+++ b/dapp-oeth/src/utils/math.js
@@ -99,6 +99,11 @@ export function formatCurrencyMinMaxDecimals(
  */
 export function truncateDecimals(value, decimals = 6) {
   if (!value) return value
+
+  if (value === '.') {
+    return '0.'
+  }
+
   const [whole, fraction] = value.toString().split('.')
 
   if (!fraction || fraction.length <= decimals) {
diff --git a/dapp-oeth/styles/globals.css b/dapp-oeth/styles/globals.css
index 50302dc563..9e5327f45e 100644
--- a/dapp-oeth/styles/globals.css
+++ b/dapp-oeth/styles/globals.css
@@ -33,18 +33,18 @@ body {
 }
 
 ::-webkit-scrollbar-corner {
-  background: #141519;
+  background: #1e1f25;
 }
 
 ::-webkit-scrollbar-track {
-  background: #141519;
+  background: #1e1f25;
   border-radius: 20px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #1e1f25;
+  background-color: #101113;
   border-radius: 20px;
-  border: 1px #141519;
+  border: 1px #101113;
 }
 
 a {