diff --git a/e2e/features/animation/animation-test.spec.js b/e2e/features/animation/animation-test.spec.js
index 5f178c311b..1f2d778f60 100644
--- a/e2e/features/animation/animation-test.spec.js
+++ b/e2e/features/animation/animation-test.spec.js
@@ -64,8 +64,8 @@ test('Disable playback when max frames exceeded', async () => {
   const { playButton, yearStartInput } = selectors
   await page.goto(animationGeostationary)
   await closeModal(page)
-  const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg > .downarrow').first()
-  const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg > .uparrow').first()
+  const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow').first()
+  const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg.uparrow').first()
   await animateYearDown.click()
   await expect(playButton).toHaveClass(/disabled/)
   // Playback re-enabled when frames within the max
diff --git a/e2e/features/share/share-test.spec.js b/e2e/features/share/share-test.spec.js
index 81b81fd800..3dc630f5d8 100644
--- a/e2e/features/share/share-test.spec.js
+++ b/e2e/features/share/share-test.spec.js
@@ -54,7 +54,7 @@ test('Share link clipboard with no time query string param in the page url will
   const queryString = 'http://localhost:3000/'
   await page.goto(queryString)
   await closeModal(page)
-  await page.getByRole('button', { name: '×' }).click()
+  await page.locator('.tour-close-btn').click()
   await shareToolbarButton.click()
   const minutesOffset = 40 * 60000 // 40 minutes
   let date = new Date(new Date().getTime() - minutesOffset)
diff --git a/e2e/features/timeline/date-selector-test.spec.js b/e2e/features/timeline/date-selector-test.spec.js
index b6bfd88e57..2405262c23 100644
--- a/e2e/features/timeline/date-selector-test.spec.js
+++ b/e2e/features/timeline/date-selector-test.spec.js
@@ -50,7 +50,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
   const queryString = 'http://localhost:3000/'
   await page.goto(queryString)
   await closeModal(page)
-  await page.getByRole('button', { name: '×' }).click()
+  await page.locator('.tour-close-btn').click()
   const leftArrow = await page.locator('#left-arrow-group')
   await expect(leftArrow).not.toHaveClass(/button-disabled/)
 })
@@ -59,7 +59,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
 // test.only('Right timeline arrow will be disabled by default', async () => {
 //   const queryString = 'http://localhost:3000/'
 //   await page.goto(queryString)
-//   await page.getByRole('button', { name: '×' }).click()
+//   await page.locator('.tour-close-btn').click()
 //   const rightArrow = await page.locator('#right-arrow-group')
 //   await expect(rightArrow).toHaveClass(/button-disabled/)
 // })
@@ -68,7 +68,7 @@ test('Left timeline arrow will not be disabled by default', async () => {
 // test('Now button will be disabled by default', async () => {
 //   const queryString = 'http://localhost:3000/'
 //   await page.goto(queryString)
-//   await page.getByRole('button', { name: '×' }).click()
+//   await page.locator('.tour-close-btn').click()
 //   const nowButton = page.locator('#now-button-group')
 //   await expect(nowButton).toHaveClass(/button-disabled/)
 // })
diff --git a/e2e/test-utils/global-variables/selectors.js b/e2e/test-utils/global-variables/selectors.js
index 9fde650d79..659a20c44f 100644
--- a/e2e/test-utils/global-variables/selectors.js
+++ b/e2e/test-utils/global-variables/selectors.js
@@ -15,8 +15,8 @@ module.exports = (page) => ({
   animationButtonCase: page.locator('#timeline-header .animate-button'),
   animationButton: page.locator('.animate-button'),
   playButton: page.locator('#play-button'),
-  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > div > svg > .uparrow'),
-  animateYearDown: page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg > .downarrow'),
+  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > div > svg.uparrow'),
+  animateYearDown: page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow'),
   yearStartInput: page.locator('#year-animation-widget-start'),
   monthStartInput: page.locator('#month-animation-widget-start'),
   dayStartInput: page.locator('#day-animation-widget-start'),
diff --git a/package-lock.json b/package-lock.json
index 87e430be55..c43a6aa922 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "license": "NASA-1.3",
       "dependencies": {
+        "@edsc/earthdata-react-icons": "^0.0.2",
         "@elastic/react-search-ui": "^1.21.5",
         "@elastic/react-search-ui-views": "^1.21.2",
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
@@ -2003,6 +2004,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@edsc/earthdata-react-icons": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@edsc/earthdata-react-icons/-/earthdata-react-icons-0.0.2.tgz",
+      "integrity": "sha512-2E++Sd1CQiB2RQ17Hq+/6ftjfiuiH1a3FVevNKYLLgxipefOv70q2lFEW0VyhTX4kt8rCXPLZGA0CzMnzu0srQ==",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@elastic/react-search-ui": {
       "version": "1.21.5",
       "license": "Apache-2.0",
diff --git a/package.json b/package.json
index 68eb032a8c..c3f6e45a2f 100644
--- a/package.json
+++ b/package.json
@@ -146,6 +146,7 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
+    "@edsc/earthdata-react-icons": "^0.0.2",
     "@elastic/react-search-ui": "^1.21.5",
     "@elastic/react-search-ui-views": "^1.21.2",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
diff --git a/web/.eslintrc b/web/.eslintrc
index 1790df5a14..2b60e11521 100644
--- a/web/.eslintrc
+++ b/web/.eslintrc
@@ -25,7 +25,11 @@
     },
     "import/resolver": {
       "webpack": {}
-    }
+    },
+    "import/core-modules": [
+      "@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui",
+      "@edsc/earthdata-react-icons/horizon-design-system/hds/ui"
+    ]
   },
   "rules": {
     // The following rules are cases where our base rules
diff --git a/web/fonts/Inter/Inter-Light.ttf b/web/fonts/Inter/Inter-Light.ttf
new file mode 100644
index 0000000000..acae361282
Binary files /dev/null and b/web/fonts/Inter/Inter-Light.ttf differ
diff --git a/web/fonts/Inter/Inter-Medium.ttf b/web/fonts/Inter/Inter-Medium.ttf
new file mode 100644
index 0000000000..71d90172f1
Binary files /dev/null and b/web/fonts/Inter/Inter-Medium.ttf differ
diff --git a/web/fonts/PublicSans/PublicSans-Regular.ttf b/web/fonts/PublicSans/PublicSans-Regular.ttf
new file mode 100644
index 0000000000..8afd7e0a17
Binary files /dev/null and b/web/fonts/PublicSans/PublicSans-Regular.ttf differ
diff --git a/web/fonts/PublicSans/PublicSans-VariableFont_wght.ttf b/web/fonts/PublicSans/PublicSans-VariableFont_wght.ttf
new file mode 100644
index 0000000000..bc53efc12a
Binary files /dev/null and b/web/fonts/PublicSans/PublicSans-VariableFont_wght.ttf differ
diff --git a/web/js/components/layer/product-picker/search/search-layer-row.js b/web/js/components/layer/product-picker/search/search-layer-row.js
index 611d79be9a..e3cf77e96f 100644
--- a/web/js/components/layer/product-picker/search/search-layer-row.js
+++ b/web/js/components/layer/product-picker/search/search-layer-row.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, UncontrolledTooltip } from 'reactstrap';
+import { Check } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import {
   addLayer as addLayerAction,
   removeLayer as removeLayerAction,
@@ -129,7 +130,7 @@ class SearchLayerRow extends React.Component {
         onMouseEnter={() => this.toggleDeleteIcon(true)}
         onMouseLeave={() => this.toggleDeleteIcon(false)}
       >
-        <div className={checkboxClass}>
+        <div className={checkboxClass + (!isMetadataShowing ? ' gray' : '')}>
           <input
             type="checkbox"
             id={`${encodedId}-checkbox`}
@@ -137,6 +138,9 @@ class SearchLayerRow extends React.Component {
             checked={isEnabled}
             onChange={this.toggleEnabled}
           />
+          {isEnabled && (
+            <Check class="check" size="15px" />
+          )}
         </div>
         {layerNotices && (
           <div className="layer-notice-wrapper">
diff --git a/web/js/components/layer/settings/associated-layers-toggle.js b/web/js/components/layer/settings/associated-layers-toggle.js
index 68b1763ce4..360a851193 100644
--- a/web/js/components/layer/settings/associated-layers-toggle.js
+++ b/web/js/components/layer/settings/associated-layers-toggle.js
@@ -38,6 +38,7 @@ function AssociatedLayersToggle(props) {
           <Checkbox
             id={id}
             key={id}
+            color="gray"
             title="Enable/disable this layer"
             checked={isEnabled}
             onCheck={onCheck}
diff --git a/web/js/components/layer/settings/palette.js b/web/js/components/layer/settings/palette.js
index 599206f425..2aa21b377c 100644
--- a/web/js/components/layer/settings/palette.js
+++ b/web/js/components/layer/settings/palette.js
@@ -59,6 +59,9 @@ function PaletteSelect (props) {
           name="wv-palette-radio"
           onClick={() => onChangePalette(id)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${id}`}>
           <span
             className={isInvisible ? 'checkerbox-bg wv-palettes-class' : 'wv-palettes-class'}
@@ -98,6 +101,9 @@ function PaletteSelect (props) {
           name="wv-palette-radio"
           onClick={() => onChangePalette(id)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${id}`}>
           <img src={dataURL} />
           <span className="wv-palette-label">{legend.name || 'Default'}</span>
diff --git a/web/js/components/layer/settings/vector-style.js b/web/js/components/layer/settings/vector-style.js
index 2cf757cef8..008e32f106 100644
--- a/web/js/components/layer/settings/vector-style.js
+++ b/web/js/components/layer/settings/vector-style.js
@@ -123,6 +123,9 @@ class VectorStyleSelect extends React.Component {
           name="wv-palette-radio"
           onClick={() => this.onChangeVectorStyle(vectorStyleId)}
         />
+        {isSelected && (
+          <span class="dot" />
+        )}
         <label htmlFor={`wv-palette-radio-${vectorStyleId}`}>
           <span
             className="wv-palettes-class"
diff --git a/web/js/components/timeline/timeline-controls/date-change-arrows.js b/web/js/components/timeline/timeline-controls/date-change-arrows.js
index b99f6546bd..722ab7870a 100644
--- a/web/js/components/timeline/timeline-controls/date-change-arrows.js
+++ b/web/js/components/timeline/timeline-controls/date-change-arrows.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { ArrowChevronLeft, ArrowChevronRight } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import HoverTooltip from '../../util/hover-tooltip';
 import LoadingIndicator from '../../animation-widget/loading-indicator';
 import {
@@ -84,7 +85,7 @@ class DateChangeArrows extends PureComponent {
     const rightArrowUp = () => this.onArrowUp('right');
 
     return (
-      <div>
+      <div className="arrow-group">
         {arrowDown && !tilesPreloaded && (
           <LoadingIndicator
             title="Loading ..."
@@ -107,12 +108,7 @@ class DateChangeArrows extends PureComponent {
             placement="top"
             target="left-arrow-group"
           />
-          <svg width="24" height="30">
-            <path
-              d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
-              className="arrow"
-            />
-          </svg>
+          <ArrowChevronLeft class="arrow" size="30px" />
         </div>
 
         {/* RIGHT ARROW */}
@@ -130,12 +126,7 @@ class DateChangeArrows extends PureComponent {
             placement="top"
             target="right-arrow-group"
           />
-          <svg width="24" height="30">
-            <path
-              d="M 10.240764,0 24,15 10.240764,30 0,30 13.759236,15 0,0 10.240764,0 z"
-              className="arrow"
-            />
-          </svg>
+          <ArrowChevronRight class="arrow" size="30px" />
         </div>
 
         {/* NOW BUTTON */}
diff --git a/web/js/components/tour/content-intro.js b/web/js/components/tour/content-intro.js
index aa585a6f6b..115556e68c 100644
--- a/web/js/components/tour/content-intro.js
+++ b/web/js/components/tour/content-intro.js
@@ -1,18 +1,21 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ArrowLineRightCircleFill } from '@edsc/earthdata-react-icons/horizon-design-system/earthdata/ui';
 
 function TourIntro(props) {
   return (
     <div className="tour-intro">
       <p className="intro">
         Visually explore the past and the present of this dynamic planet from a satellite&apos;s perspective.
-        Select from an array of stories below to learn more about @NAME@, the satellite imagery we provide and events occurring around the world.
+        Select from an array of stories below to learn more about @NAME@ (a part of
         {' '}
-        <a href="#" title="Start using @NAME@" onClick={props.toggleModalStart}>
+        <a href="https://www.earthdata.nasa.gov/" target="_blank" rel="noreferrer">NASA Earthdata</a>
+        ), the satellite imagery we provide and events occurring around the world.
+        {' '}
+        <a href="#" title="Start using @NAME@" onClick={props.toggleModalStart} className="start-link">
           Start using @NAME@
-          <FontAwesomeIcon icon="arrow-right" />
+          <ArrowLineRightCircleFill class="intro-arrow" size="16px" />
         </a>
       </p>
     </div>
diff --git a/web/js/components/tour/modal-tour-complete.js b/web/js/components/tour/modal-tour-complete.js
index dee35fc4c5..800d1dd9cd 100644
--- a/web/js/components/tour/modal-tour-complete.js
+++ b/web/js/components/tour/modal-tour-complete.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 
 function ModalComplete(props) {
   const {
@@ -11,7 +12,7 @@ function ModalComplete(props) {
   const { readMoreLinks } = currentStory;
   const closeBtn = (
     <button className="tour-close-btn" onClick={endTour} type="button">
-      &times;
+      <Close class="add-plus" size="14px" />
     </button>
   );
   let list;
diff --git a/web/js/components/tour/modal-tour-in-progress.js b/web/js/components/tour/modal-tour-in-progress.js
index 7f4f5564c5..b5d90fc1ea 100644
--- a/web/js/components/tour/modal-tour-in-progress.js
+++ b/web/js/components/tour/modal-tour-in-progress.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import Steps from './widget-steps';
 
 class ModalInProgress extends React.Component {
@@ -26,7 +27,7 @@ class ModalInProgress extends React.Component {
     } = this.props;
     const closeBtn = (
       <button className={isKioskModeActive ? 'd-none' : 'end-tour-close-btn'} onClick={endTour} type="button">
-        &times;
+        <Close class="add-plus" size="14px" />
       </button>
     );
     return (
diff --git a/web/js/components/tour/modal-tour-start.js b/web/js/components/tour/modal-tour-start.js
index e25f2dbfbd..5923616c67 100644
--- a/web/js/components/tour/modal-tour-start.js
+++ b/web/js/components/tour/modal-tour-start.js
@@ -8,6 +8,7 @@ import {
   InputGroup,
   InputGroupText,
 } from 'reactstrap';
+import { Close } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import Checkbox from '../util/checkbox';
 import TourIntro from './content-intro';
 import TourBoxes from './tour-boxes';
@@ -44,7 +45,7 @@ class ModalStart extends React.Component {
     const { checked } = this.state;
     const closeBtn = (
       <button className="tour-close-btn" onClick={endTour} type="button">
-        &times;
+        <Close class="add-plus" size="14px" />
       </button>
     );
     return (
@@ -58,7 +59,7 @@ class ModalStart extends React.Component {
         keyboard={false}
       >
         <ModalHeader toggle={endTour} close={closeBtn}>
-          Welcome to @NAME@!
+          Welcome to NASA @NAME@
         </ModalHeader>
 
         <Scrollbars style={{ maxHeight: `${height - 200}px` }}>
diff --git a/web/js/components/tour/tour-box.js b/web/js/components/tour/tour-box.js
index d71662fa95..c5ff9b8650 100644
--- a/web/js/components/tour/tour-box.js
+++ b/web/js/components/tour/tour-box.js
@@ -67,6 +67,8 @@ class TourBox extends React.Component {
         onClick={(e) => selectTour(e, story, index, storyId)}
       >
         <div className="tour-box-content">
+          <i className="tour-box-icon" aria-hidden="true" />
+          <div className="tour-box-gradient" />
           <div className="tour-box-header">
             <h3 className="tour-box-title">{title}</h3>
           </div>
diff --git a/web/js/components/util/arrow.js b/web/js/components/util/arrow.js
index 3c04f9e0a7..f2af282dd8 100644
--- a/web/js/components/util/arrow.js
+++ b/web/js/components/util/arrow.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ArrowFilledUp } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 
 /*
  * @function Arrow Up/Down
@@ -16,9 +17,7 @@ function Arrow({
       className={isKioskModeActive ? 'd-none' : containerClassName}
       data-interval={type}
     >
-      <svg width="25" height="8">
-        <path d="M 12.5,0 25,8 0,8 z" className={arrowClassName} />
-      </svg>
+      <ArrowFilledUp className={arrowClassName} size="18px" />
     </div>
   );
 }
diff --git a/web/js/components/util/checkbox.js b/web/js/components/util/checkbox.js
index 6c50a2dfaf..2c744024df 100644
--- a/web/js/components/util/checkbox.js
+++ b/web/js/components/util/checkbox.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Check } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import HoverTooltip from './hover-tooltip';
 /*
  * A checkbox component
@@ -33,6 +34,9 @@ export default function Checkbox (props) {
           onChange={showDisabledToolTip ? () => null : onCheck}
           tabIndex="0"
         />
+        {checked && (
+          <Check class="check" size="15px" />
+        )}
         {children}
         <label htmlFor={id}>
           <span>{label}</span>
diff --git a/web/js/containers/sidebar/footer-content.js b/web/js/containers/sidebar/footer-content.js
index 6336d755a1..fb951e52ce 100644
--- a/web/js/containers/sidebar/footer-content.js
+++ b/web/js/containers/sidebar/footer-content.js
@@ -8,6 +8,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isMobileOnly, isTablet } from 'react-device-detect';
 import googleTagManager from 'googleTagManager';
+import { Plus } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui';
 import ChartingInfo from '../../components/charting/charting-info';
 import Button from '../../components/util/button';
 import CompareModeOptions from '../../components/sidebar/compare-mode-options';
@@ -97,7 +98,12 @@ const FooterContent = React.forwardRef((props, ref) => {
           id="layers-add"
           aria-label="Add layers"
           className="layers-add red"
-          text="+ Add Layers"
+          text={(
+            <>
+              <Plus class="add-plus" size="10px" />
+              Add Layers
+            </>
+          )}
           onClick={onClickAddLayers}
         />
         )}
diff --git a/web/js/containers/sidebar/sidebar.js b/web/js/containers/sidebar/sidebar.js
index f8aef97933..3861a9dec4 100644
--- a/web/js/containers/sidebar/sidebar.js
+++ b/web/js/containers/sidebar/sidebar.js
@@ -214,7 +214,7 @@ class Sidebar extends React.Component {
       : 'Click to Reset @NAME@ to Defaults';
     const embedWVLogoLink = isEmbedModeActive ? permalink : '/';
     const mobileImgURL = 'brand/images/wv-logo-mobile.svg?v=@BUILD_NONCE@';
-    const desktopImgURL = 'brand/images/wv-logo.svg?v=@BUILD_NONCE@';
+    const wvName = !isMobile ? 'Worldview' : '';
 
     const sidebarStyle = isMobile ? {
       background: `url(${mobileImgURL}) no-repeat center rgb(40 40 40 / 85%)`,
@@ -229,11 +229,11 @@ class Sidebar extends React.Component {
       position: 'absolute',
     }
       : {
-        background: `url(${desktopImgURL}) no-repeat center rgb(40 40 40 / 85%)`,
+        background: `url(${mobileImgURL}) no-repeat 15px center/52px rgb(40 40 40 / 85%)`,
         display: 'block',
         width: '286px',
-        height: '55px',
-        padding: '5px 0',
+        height: '65px',
+        padding: '10px 76px',
         position: 'absolute',
         top: '10px',
         left: '10px',
@@ -244,6 +244,12 @@ class Sidebar extends React.Component {
         borderTopRightRadius: '5px',
         borderTopLeftRadius: '5px',
         boxSizing: 'border-box',
+        fontFamily: 'Inter',
+        fontWeight: '300',
+        fontSize: '36px',
+        textDecoration: 'none',
+        color: '#fff',
+        lineHeight: '45px',
       };
 
     return (
@@ -252,7 +258,9 @@ class Sidebar extends React.Component {
           id="wv-logo"
           className={isDistractionFreeModeActive ? 'wv-logo-distraction-free-mode' : ''}
           style={sidebarStyle}
-        />
+        >
+          {wvName}
+        </span>
       ) : (
         <a
           href={embedWVLogoLink}
@@ -261,7 +269,9 @@ class Sidebar extends React.Component {
           className={isDistractionFreeModeActive ? 'wv-logo-distraction-free-mode' : ''}
           style={sidebarStyle}
           onClick={(e) => this.handleWorldviewLogoClick(e, permalink)}
-        />
+        >
+          {wvName}
+        </a>
       )
     );
   }
diff --git a/web/scss/components/button.scss b/web/scss/components/button.scss
index a0cbf961e1..9e88d1c331 100644
--- a/web/scss/components/button.scss
+++ b/web/scss/components/button.scss
@@ -17,6 +17,7 @@
   padding: 6px 13px 7px;
   display: block;
   font-size: 13px;
+  font-weight: 500;
 }
 
 #compare-toggle-button.wv-button > span.button-text,
@@ -27,8 +28,8 @@
 }
 
 .wv-button.red {
-  background: #d54e21;
-  border-color: #d54e21;
+  background: #f64137;
+  border-color: #f64137;
 }
 
 .wv-button.black {
diff --git a/web/scss/components/checkbox.scss b/web/scss/components/checkbox.scss
index 6de011b63d..2c088ff9d3 100644
--- a/web/scss/components/checkbox.scss
+++ b/web/scss/components/checkbox.scss
@@ -15,6 +15,26 @@
     left: 0;
   }
 
+  .check {
+    position: absolute;
+    color: #fff;
+    left: 1px;
+    top: 4px;
+    pointer-events: none;
+  }
+
+  .dot {
+    position: absolute;
+    background-color: #1d67e3;
+    left: 0;
+    top: 2px;
+    pointer-events: none;
+    width: 11px;
+    height: 11px;
+    margin: 9px;
+    border-radius: 50%;
+  }
+
   label {
     color: #fff;
     cursor: pointer;
@@ -26,15 +46,16 @@
 }
 
 .wv-checkbox::before {
+  border: 1px solid #b5b5b7;
   content: "\00a0";
   display: inline-block;
-  height: 24px;
-  min-width: 24px;
-  border: 2px solid #d54f21;
-  text-align: center;
-  font-size: 15px;
-  line-height: 20px;
+  font-size: 12px;
+  height: 16px;
+  line-height: 14px;
   margin-right: 5px;
+  min-width: 16px;
+  text-align: center;
+  border-radius: 2px;
 }
 
 .wv-checkbox.gray label {
@@ -42,19 +63,24 @@
 }
 
 .wv-checkbox.gray::before {
-  border: 2px solid #808080;
+  border: 1px solid #b5b5b7;
 }
 
 .wv-checkbox.checked::before {
   color: #fff;
-  content: "\2713";
-  background-color: #d54f21;
+  background-color: #1d67e3;
+  border: 1px solid #1b50a6;
 }
 
 .wv-checkbox.gray.checked::before {
-  background-color: #808080;
+  background-color: #1d67e3;
+  border: 1px solid #2174ed;
 }
 
 .wv-checkbox.wv-checkbox-round::before {
   border-radius: 50%;
 }
+
+.wv-checkbox-round.checked::before {
+  background-color: transparent !important;
+}
diff --git a/web/scss/components/dateselector.scss b/web/scss/components/dateselector.scss
index d1d7c19a63..9e4850cce5 100644
--- a/web/scss/components/dateselector.scss
+++ b/web/scss/components/dateselector.scss
@@ -251,6 +251,8 @@
 
     svg {
       margin: 0 auto;
+      display: inline-block;
+      margin-top: -3px;
     }
 
     input {
diff --git a/web/scss/components/notifications.scss b/web/scss/components/notifications.scss
index c3da3b95ca..ab198de92d 100644
--- a/web/scss/components/notifications.scss
+++ b/web/scss/components/notifications.scss
@@ -85,7 +85,7 @@
 .wv-notify-modal h2 {
   text-transform: capitalize;
   font-size: 18px;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-weight: 700;
   color: #eee;
   padding: 0.75em 10px;
@@ -111,7 +111,7 @@
 }
 
 .wv-notify-modal p {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-size: 16px;
   line-height: 22px;
   margin: 10px;
diff --git a/web/scss/features/about.scss b/web/scss/features/about.scss
index 6e765e1ba9..4158b34553 100644
--- a/web/scss/features/about.scss
+++ b/web/scss/features/about.scss
@@ -10,8 +10,8 @@
   li,
   p {
     color: #eee;
-    font-weight: 100;
-    font-family: "Open Sans", sans-serif;
+    font-weight: 300;
+    font-family: "Public Sans", sans-serif;
   }
 
   div,
@@ -24,7 +24,7 @@
   .version {
     margin-top: 10px;
     font-size: 12px;
-    font-weight: 100;
+    font-weight: 200;
     float: right;
   }
 
diff --git a/web/scss/features/events.scss b/web/scss/features/events.scss
index 82bd68d72b..75ee56247c 100644
--- a/web/scss/features/events.scss
+++ b/web/scss/features/events.scss
@@ -362,7 +362,7 @@
 
 .cluster-marker {
   border-radius: 12px;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   width: 24px;
   height: 24px;
 }
diff --git a/web/scss/features/layer-categories.scss b/web/scss/features/layer-categories.scss
index f30b0d5a57..78da70b453 100644
--- a/web/scss/features/layer-categories.scss
+++ b/web/scss/features/layer-categories.scss
@@ -86,7 +86,7 @@
 
   & .nav-link {
     color: #333;
-    font-family: "Open Sans", sans-serif;
+    font-family: "Public Sans", sans-serif;
     font-size: 16px;
     font-weight: 300;
     text-transform: capitalize;
@@ -110,7 +110,7 @@
   & .category-breadcrumb {
     height: 30px;
     line-height: 30px;
-    font-family: "Open Sans", sans-serif;
+    font-family: "Public Sans", sans-serif;
     font-weight: 300;
     font-size: 16px;
     color: #000;
@@ -237,7 +237,7 @@
 
 .measurement-row .source-nav-item {
   cursor: pointer;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-size: 13px;
   font-weight: 300;
   padding: 8px 6px;
@@ -285,10 +285,18 @@
 
   & .wv-checkbox {
     color: #fff;
-    font: 400 13px/13px "Open Sans", sans-serif;
+    font: 400 13px/13px "Public Sans", sans-serif;
     font-weight: 400;
     display: flex;
 
+    &::before {
+      margin-top: 2px;
+    }
+
+    .check {
+      top: 3px;
+    }
+
     label {
       color: #333;
       padding-left: 5px;
diff --git a/web/scss/features/layer-coverage-panel.scss b/web/scss/features/layer-coverage-panel.scss
index 8f1282123e..3f1ff233cb 100644
--- a/web/scss/features/layer-coverage-panel.scss
+++ b/web/scss/features/layer-coverage-panel.scss
@@ -27,7 +27,6 @@
 }
 
 .timeline-layer-coverage-header-title {
-  width: 125px;
   padding: 5px;
 }
 
diff --git a/web/scss/features/layers.scss b/web/scss/features/layers.scss
index 66f679d486..23eeaba4cb 100644
--- a/web/scss/features/layers.scss
+++ b/web/scss/features/layers.scss
@@ -6,7 +6,7 @@
   & h4,
   & p,
   & span {
-    font-family: "Open Sans", sans-serif;
+    font-family: "Public Sans", sans-serif;
     font-weight: 300;
     color: #383838;
   }
@@ -141,7 +141,7 @@
   line-height: 100%;
   position: relative;
   display: block;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-weight: 300;
   margin-right: 45px;
 }
@@ -239,7 +239,7 @@
   font-size: 14px;
   line-height: 18px;
   margin: 16px 0 6px;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   margin-top: 4px;
 }
 
@@ -283,10 +283,8 @@
     }
   }
 
-  &:hover {
-    .wv-checkbox::before {
-      border-color: #f3460a;
-    }
+  .wv-checkbox::before {
+    margin-top: 3px;
   }
 
   .wv-checkbox {
@@ -332,7 +330,7 @@
 .layer-modal-content .selected-category .ui-tabs-panel p,
 .layer-modal-content .selected-category .ui-tabs-panel span {
   font-size: 11px;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-weight: 400;
   color: #bbb;
 }
@@ -351,7 +349,7 @@
 .layer-date-wrap,
 .layer-metadata a,
 .layer-metadata p {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Public Sans", sans-serif;
   font-weight: 400;
   font-size: 13px;
   line-height: 16px;
diff --git a/web/scss/features/sidebar-panel.scss b/web/scss/features/sidebar-panel.scss
index 49e2af1768..931636cce0 100644
--- a/web/scss/features/sidebar-panel.scss
+++ b/web/scss/features/sidebar-panel.scss
@@ -5,7 +5,7 @@
     float: left;
     left: 10px;
     position: absolute;
-    top: 67px;
+    top: 77px;
     height: 30px;
     padding-top: 8px;
     background: $wv-transparent-black;
@@ -583,7 +583,8 @@ li.item.productsitem.inmotion,
 
 .productsitem.layer-hidden .layer-info h4,
 .productsitem.layer-hidden .layer-info p {
-  color: #999;
+  color: #D1D1D1;
+  font-weight: 300;
 }
 
 .sidebar-panel .layer-main h4,
diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss
index de22a7d359..6193802eea 100644
--- a/web/scss/features/sidebar.scss
+++ b/web/scss/features/sidebar.scss
@@ -13,7 +13,7 @@
   width: 286px;
   background: transparent;
   left: 10px;
-  top: 65px;
+  top: 75px;
   box-sizing: border-box;
   padding: 0;
   border-top: none;
@@ -29,7 +29,7 @@
     border-left: 1px solid #333;
 
     &.nav-tabs {
-      border-bottom: 3px solid #00457b;
+      border-bottom: 3px solid #0B3D91;
 
       .disabled {
         color: #fff;
@@ -52,8 +52,8 @@
   }
 
   .nav-item .sidebar-tab.active {
-    background: #00457b;
-    border-color: #00457b;
+    background: #0B3D91;
+    border-color: #0B3D91;
     color: #fff;
     height: 32px;
   }
@@ -177,13 +177,18 @@ footer .product-buttons {
   height: 47px;
   width: auto;
   padding: 10px;
+
+  #layers-add .add-plus {
+    margin-right: 5px;
+    margin-top: -2px;
+  }
 }
 
 .wv-button {
   background-image: linear-gradient(#555, #666);
   border: 1px solid #666;
   color: #eee;
-  font-family: 'Open Sans Bold', sans-serif;
+  font-family: 'Public Sans', sans-serif;
   font-size: 1em;
   font-weight: 700;
   padding: 0;
@@ -201,10 +206,10 @@ footer .product-buttons {
 }
 
 #compare-toggle-button {
-  background-image: linear-gradient(#555, #666);
-  border: 1px solid #666;
+  background: #77777a;
+  border: 1px solid #77777a;
   color: #eee;
-  font-family: 'Open Sans Bold', sans-serif;
+  font-family: 'Public Sans', sans-serif;
   font-size: 1em;
   font-weight: 700;
   padding: 0;
@@ -217,7 +222,7 @@ footer .compare-toggle-button {
 }
 
 div#group-overlays-checkbox-case {
-  margin: 4px 0 0 4px;
+  margin: 4px 0 0 10px;
 }
 
 .layer-group-baselayers {
@@ -821,6 +826,10 @@ p.recharts-tooltip-label {
     display: flex;
     align-items: center;
 
+    .check {
+      top: unset;
+    }
+
     & label {
       display: inline;
       text-transform: capitalize;
diff --git a/web/scss/features/timeline.scss b/web/scss/features/timeline.scss
index 5c00b9715a..75df99ffa2 100644
--- a/web/scss/features/timeline.scss
+++ b/web/scss/features/timeline.scss
@@ -78,6 +78,10 @@ button:focus {
   margin-top: 2px;
 }
 
+.arrow-group {
+  margin-top: -1px;
+}
+
 #distraction-free-timeline-header,
 #timeline-header {
   display: inline-block;
@@ -135,7 +139,7 @@ button:focus {
 
   & input {
     width: 100%;
-    height: 40px;
+    height: 36px;
     color: #fff;
     opacity: 1;
     font-size: 24px;
@@ -217,18 +221,22 @@ button:focus {
 
   & .date-arrows {
     display: block;
-    height: 10px;
+    height: 12px;
     max-width: inherit;
+    width: 35px;
+    margin: auto;
+    text-align: center;
   }
 
   & .date-arrows svg {
     vertical-align: top;
-    display: block;
     margin: 0 auto;
+    margin-top: -3px;
+    display: inline-block;
   }
 
   & .date-arrows svg path {
-    fill: #666;
+    fill: #cfcfcf;
   }
 
   & .input-wrapper:hover .date-arrows:hover svg path {
@@ -250,7 +258,6 @@ button:focus {
 
   & > .button-action-group .button-disabled:hover,
   & .button-disabled:hover {
-    background-color: transparent;
     cursor: default;
   }
 
@@ -262,8 +269,12 @@ button:focus {
     margin-left: -12px;
   }
 
-  & #left-arrow-group {
-    transform: scaleX(-1);
+  & #left-arrow-group .arrow {
+    margin-left: -15px;
+  }
+
+  & #right-arrow-group .arrow {
+    margin-left: -14px;
   }
 
   & #left-arrow-group svg {
@@ -274,7 +285,7 @@ button:focus {
   & #now-button-group {
     width: 34px;
     height: 34px;
-    top: -2px;
+    margin-top: -1.5px;
 
     svg {
       left: 15px;
@@ -289,7 +300,8 @@ button:focus {
   }
 
   & > .button-action-group.button-disabled .arrow,
-  & #zoom-buttons-group .button-disabled .arrow {
+  & #zoom-buttons-group .button-disabled .arrow,
+  & #zoom-buttons-group .button-disabled .arrow path {
     fill: #4d4d4d;
   }
 
@@ -309,6 +321,7 @@ button:focus {
     width: 37px;
     top: 16px;
     right: 4px;
+    background-color: transparent;
 
     & svg {
       top: 5px;
diff --git a/web/scss/features/tour.scss b/web/scss/features/tour.scss
index 0f6da1a1bb..00e17713c3 100644
--- a/web/scss/features/tour.scss
+++ b/web/scss/features/tour.scss
@@ -31,7 +31,7 @@
 .tour-complete {
   .modal-header {
     position: relative;
-    background-color: rgb(0 69 123);
+    background-color: #0a3d91;
     padding: 6px 8px;
 
     .close {
@@ -50,7 +50,8 @@
     color: #fff;
     font-size: 24px;
     line-height: 22px;
-    font-weight: 300;
+    font-family: Inter, sans-serif;
+    font-weight: 500;
   }
 
   .modal-body {
@@ -110,82 +111,131 @@
     text-decoration: none;
     border: 1px solid #333;
 
+    .tour-box-gradient {
+      order: 2;
+      height: 16px;
+      background: linear-gradient(transparent, #000);
+    }
+
     .tour-box-header {
       width: 100%;
       color: #fff;
-      background-color: #00457b;
+      background-color: #000;
       text-align: center;
       padding: 4px;
-      order: 0;
+      order: 1;
     }
 
     .tour-box-title {
       line-height: 16px;
+      padding: 6px;
+      text-align: left;
+      margin-bottom: 0;
+      font-weight: 500;
     }
 
-    &.feature .tour-box-header {
-      background-color: #d54e21;
+    .tour-box-content {
+      height: 198px;
+      display: flex;
+      flex-flow: column-reverse nowrap;
+      justify-content: flex-start;
+      overflow: hidden;
     }
 
-    &.wildfire .tour-box-header {
-      background-color: #8d3b36;
+    .tour-box-description {
+      display: none;
+
+      p {
+        font-size: 12px;
+        font-weight: 200;
+      }
     }
 
-    &.volcano .tour-box-header {
-      background-color: #a5734b;
+    &:hover .tour-box-description {
+      display: block;
+      cursor: pointer;
+      color: #fff;
+      background-color: #000;
+      padding: 0 10px 10px;
+      order: 0;
+      margin-top: -10px;
+      z-index: 1;
     }
 
-    &.snow .tour-box-header {
-      background-color: #5a7784;
+    .tour-box-icon {
+      background-color: #fff;
+      background-image: url("../images/natural-events/icon-default.svg");
+      background-position: -1px -1px;
+      background-repeat: no-repeat;
+      background-size: 40px 40px;
+      border: 1px solid #fff;
+      border-radius: 50%;
+      height: 40px;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      width: 40px;
+      z-index: 3;
     }
 
-    &.sea-and-lake-ice .tour-box-header {
-      background-color: #328697;
+    &.wildfire .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-wildfires.svg");
     }
 
-    &.iceberg .tour-box-header {
-      background-color: #3889ad;
+    &.volcano .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-volcanoes.svg");
     }
 
-    &.water-color .tour-box-header {
-      background-color: #457d73;
+    &.snow .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-snow.svg");
     }
 
-    &.dust-and-haze .tour-box-header {
-      background-color: #a09758;
+    &.sea-and-lake-ice .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-sea-and-lake-ice.svg");
     }
 
-    &.severe-storm .tour-box-header {
-      background-color: #465a64;
+    &.iceberg .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-icebergs.svg");
     }
 
-    &.man-made .tour-box-header {
-      background-color: #3e3e3e;
+    &.water-color .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-water-color.svg");
     }
 
-    &.critical .tour-box-header {
-      background-color: #585858;
+    &.dust-and-haze .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-dust-and-haze.svg");
     }
 
-    .tour-box-content {
-      height: 198px;
-      display: flex;
-      flex-flow: column-reverse nowrap;
-      justify-content: flex-start;
-      overflow: hidden;
+    &.severe-storm .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-severe-storms.svg");
     }
 
-    .tour-box-description {
-      display: none;
+    &.man-made .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-manmade.svg");
     }
 
-    &:hover .tour-box-description {
-      display: block;
-      cursor: pointer;
-      color: #fff;
-      background-color: rgb(20 20 20 / 75%);
-      padding: 4px;
-      order: 1;
+    &.critical .tour-box-icon {
+      background-position: -4px -4px;
+      background-size: 46px 46px;
+      background-image: url("../images/natural-events/icon-critical.svg");
     }
   }
 
@@ -201,20 +251,37 @@
     color: #000;
   }
 
-  .tour-intro a {
-    color: #00457b;
+  .tour-intro .start-link {
+    color: #000;
     font-weight: 600;
+    transition: color 0.4s ease;
   }
 
   .tour-intro a:hover {
-    color: #2276ac;
+    color: #00457b;
+    text-decoration: underline;
+  }
+
+  .tour-intro .start-link:hover {
+    color: #2e2d32;
     text-decoration: none;
+
+    .intro-arrow {
+      color: #b6010a;
+    }
   }
 
   .tour-box-row {
     display: flex;
     flex-flow: row wrap;
   }
+
+  .tour-intro .intro-arrow {
+    margin-top: -3px;
+    margin-left: 4px;
+    color: #f64137;
+    transition: color 0.4s ease;
+  }
 }
 
 /* TOUR IN PROGRESS */
diff --git a/web/scss/fonts.scss b/web/scss/fonts.scss
index 5305989c2a..485d823fa9 100644
--- a/web/scss/fonts.scss
+++ b/web/scss/fonts.scss
@@ -21,3 +21,26 @@
   src: url("../fonts/DroidSansMono/DroidSansMono.ttf");
   src: local("Droid Sans Mono"), local("DroidSansMono-Regular"), url("../fonts/DroidSansMono/DroidSansMono.ttf") format("truetype");
 }
+
+@font-face { /* Inter Light */
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/Inter/Inter-Light.ttf");
+  src: local("Inter Light"), local("Inter-Light"), url("../fonts/Inter/Inter-Light.ttf") format("truetype");
+}
+
+@font-face { /* Inter Medium */
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/Inter/Inter-Medium.ttf");
+  src: local("Inter"), local("Inter-Medium"), url("../fonts/Inter/Inter-Medium.ttf") format("truetype");
+}
+
+@font-face { /* Public Sans Regular */
+  font-family: "Public Sans";
+  font-style: normal;
+  src: url("../fonts/PublicSans/PublicSans-VariableFont_wght.ttf");
+  src: local("Public Sans"), local("PublicSans-VariableFont_wght"), url("../fonts/PublicSans/PublicSans-VariableFont_wght.ttf") format("truetype");
+}
\ No newline at end of file
diff --git a/web/scss/reset.scss b/web/scss/reset.scss
index f0f3d2e4ca..c6eea9b423 100644
--- a/web/scss/reset.scss
+++ b/web/scss/reset.scss
@@ -99,7 +99,7 @@ html,
 li,
 p,
 ul {
-  font: 400 13px/13px "Open Sans", sans-serif;
+  font: 400 13px/13px "Public Sans", sans-serif;
 }
 
 h1,
diff --git a/web/scss/variables.scss b/web/scss/variables.scss
index b519dcf1e4..44f498f128 100644
--- a/web/scss/variables.scss
+++ b/web/scss/variables.scss
@@ -12,8 +12,8 @@ $wv-modal-shadow: 2px 2px 16px rgb(0 0 0 / 65%);
 $wv-tooltip-shadow: 3px 3px 6px rgb(0 0 0 / 75%);
 
 /* Fonts */
-$wv-base-font: "Open Sans", sans-serif;
-$wv-bold-font: "Open Sans Bold", sans-serif;
+$wv-base-font: "Public Sans", sans-serif;
+$wv-bold-font: "Public Sans Bold", sans-serif;
 $wv-monospace-font: "Droid Sans Mono", monospace;
 $wv-menu-font-size: 16px;
 $wv-date-text-shadow: 1px 1px 0 #111;