Attempt to merge Lighthouse Fix branch from Nat (#758)

* Add a11y tests in cypress for methodology page - update cypress to version 8.5 - add HTML lang the <head> element - change process list headings to h4 - add alt tag to download image icon - move <GovBanner> into <Header> - add documentation around a11y testing * Add cypress a11y tests for cejst page - add alt icon for mapIntro page - change legend to be a normal div - add a class that mimics the h4 styles - remove superfluous styles * Add cypress a11y tests for contact and 404 page * Update snapshots * Move static text in footer to copy folder * Add cypress a11y test to About page - add required h1 tag - updates snapshot * Add site_url.xml and modify robots.txt file - adds plugins for robots.txt and sitemap - remove env.local and will add env.production - modifiy all yml files (docker and GHA) to specify new env variables - refactor env variables to either DATA_SOURCE, SITE_URL or PATH_PREFIX - set defaults for env variables in gatsby-config - remove timeline component - will add blank index page - update README on info on env variables * Add plugin to allow custom env vars - allows system env vars, ie, DATA_SOURCE on client-side application * Update displayed URLs in GHA to new CDN (d29) - also updates the blank index.html * Correct spacing * Set SITE_URL to new CDN for robots.txt * Remove SITE_URL as this is set by GHA * Update README around docker and env vars
2025-08-16 05:01:39 -07:00 · 2021-10-04 08:43:33 -07:00 · 2021-10-04 08:43:33 -07:00 · 72d80a5803
commit 72d80a5803
parent 52aa0e3123
32 changed files with 999 additions and 748 deletions
--- a/client/src/components/DownloadPacket/index.tsx
+++ b/client/src/components/DownloadPacket/index.tsx
@ -29,7 +29,7 @@ const DownloadPacket = () => {
            <div className={styles.downloadBoxButtonContainer}>
              <a data-cy={'download-link'} href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
                <Button className={styles.downloadBoxButton} type="button">
-                  <div><img src={downloadIcon} /> </div>
+                  <div><img src={downloadIcon} alt={'download icon for download package'}/> </div>
                  <div className={styles.downloadPacketText}>
                    {intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT)}
                  </div>
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@ -16,7 +16,8 @@ const J40Footer = () => {
  const intl = useIntl();

  const NAVLINKS = [
-    ['Contact',
+    [
+      intl.formatMessage(COMMON_COPY.FOOTER.CONTACT),
      <Address
        key={'footeraddress'}
        className={'j40-footer-address'}
@ -70,9 +71,9 @@ const J40Footer = () => {
    // `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
    // `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
    <footer className={'j40-footer'}>
-      <div className="usa-footer__primary-section pb">
+      <div className="usa-footer__primary-section pb2">
        <J40MainGridContainer>
-          <div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
+          <div className={'grid-row tablet-lg:grid-col4'}>
            {NAVLINKS.map((links, i) => (
              <div key={`linkSection-${i}`}
                className="mobile-lg:grid-col-12 desktop:grid-col-4">
@ -95,7 +96,11 @@ const J40Footer = () => {
                src={whitehouseIcon}
                alt={intl.formatMessage(COMMON_COPY.FOOTER.LOGO_ALT)}/>
            }
-            heading={<h5>{intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}</h5>}
+            heading={
+              <div className={'j40-footer-ceq-font'}>
+                {intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}
+              </div>
+            }
          />
        </J40MainGridContainer>
      </div>
@ -110,9 +115,9 @@ const NavSection = ({
 }): React.ReactElement => {
  const [primaryLinkOrHeading, ...secondaryLinks] = links;
  return (
-    <section className={'usa-footer__primary-content'}>
-      <h4 className="padding-top-1 padding-bottom-0">{primaryLinkOrHeading}</h4>
-      <NavList className={'padding-bottom-4'} type="footerSecondary" items={secondaryLinks} />
+    <section>
+      <div className="j40-h4">{primaryLinkOrHeading}</div>
+      <NavList type="footerSecondary" items={secondaryLinks} />
    </section>
  );
 };
--- a/client/src/components/J40Header.tsx
+++ b/client/src/components/J40Header.tsx
@ -74,10 +74,10 @@ const J40Header = () => {

  return (
    <>
-      <GovBanner/>
      <Header
        basic={true} role={'banner'}
        className={'usa-header j40-header'}>
+        <GovBanner/>
        <div className="usa-nav-container">
          <div className="usa-navbar">
            {/* Removing h1 from logo ease transition to USWDS tokens in headers */}
--- a/client/src/components/MapLegend/index.tsx
+++ b/client/src/components/MapLegend/index.tsx
@ -10,9 +10,9 @@ const MapLegend = () => {
    <div className={styles.legendContainer}>
      <div className={styles.colorSwatch} />
      <div>
-        <h4>
+        <div className={'j40-h4'}>
          {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
-        </h4>
+        </div>
        <p className={'secondary'}>
          {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_DESCRIPT)}
        </p>
--- a/client/src/components/MapLegend/tests/snapshots/mapLegend.test.tsx.snap
+++ b/client/src/components/MapLegend/tests/snapshots/mapLegend.test.tsx.snap
@ -5,9 +5,11 @@ exports[`rendering of the MapLegend checks if snapshots have changed 1`] = `
  <div>
    <div />
    <div>
-      <h4>
+      <div
+        class="j40-h4"
+      >
        Draft community of focus
-      </h4>
+      </div>
      <p
        class="secondary"
      >
--- a/client/src/components/snapshots/J40Footer.spec.tsx.snap
+++ b/client/src/components/snapshots/J40Footer.spec.tsx.snap
@ -6,28 +6,26 @@ exports[`J40Footer renders correctly 1`] = `
    class="j40-footer"
  >
    <div
-      class="usa-footer__primary-section pb"
+      class="usa-footer__primary-section pb2"
    >
      <div
        class="grid-container-desktop-lg"
        data-testid="gridContainer"
      >
        <div
-          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
+          class="grid-row tablet-lg:grid-col4"
        >
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Contact
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -67,16 +65,14 @@ exports[`J40Footer renders correctly 1`] = `
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                More information
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -118,16 +114,14 @@ exports[`J40Footer renders correctly 1`] = `
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Have a question about government services?
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -168,9 +162,11 @@ exports[`J40Footer renders correctly 1`] = `
          <div
            class="mobile-lg:grid-col-auto"
          >
-            <h5>
+            <div
+              class="j40-footer-ceq-font"
+            >
              Council on Environmental Quality
-            </h5>
+            </div>
          </div>
        </div>
      </div>
--- a/client/src/components/snapshots/mapInfoPanel.test.tsx.snap
+++ b/client/src/components/snapshots/mapInfoPanel.test.tsx.snap
@ -13,6 +13,7 @@ exports[`simulate app starting up, no click on map should match the snapshot of
      </header>
      <div>
        <img
+          alt="icon showing a lightbulb"
          src="test-file-stub"
        />
        <div>
--- a/client/src/components/snapshots/scoreStepsList.test.tsx.snap
+++ b/client/src/components/snapshots/scoreStepsList.test.tsx.snap
@ -27,12 +27,12 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
    <li
      class="usa-process-list__item"
    >
-      <h4
+      <h3
        class="usa-process-list__heading"
        data-testid="processListHeading"
      >
        Gather datasets
-      </h4>
+      </h3>
      <p>
         
      </p>
@ -78,12 +78,12 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
    <li
      class="usa-process-list__item"
    >
-      <h4
+      <h3
        class="usa-process-list__heading"
        data-testid="processListHeading"
      >
        Determine communites of focus
-      </h4>
+      </h3>
      <p>
         
      </p>
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@ -14,7 +14,9 @@ const Layout = ({children, location, title}: ILayoutProps) => {
  // @ts-ignore
  return (
    <>
-      <Helmet title={title} defer={false}>
+      <Helmet defer={false}>
+        <html lang="en"/>
+        <title>{title}</title>
        <script async
          type="text/javascript"
          id="_fed_an_ua_tag"
--- a/client/src/components/mapIntroduction.tsx
+++ b/client/src/components/mapIntroduction.tsx
@ -15,7 +15,7 @@ const MapIntroduction = () => {
        {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
      </header>
      <div className={styles.mapIntroText}>
-        <img className={styles.mapIntroLightbulb} src={lightbulbIcon} />
+        <img className={styles.mapIntroLightbulb} src={lightbulbIcon} alt={'icon showing a lightbulb'}/>
        <div className={styles.didYouKnowBox}>
          <div className={styles.didYouKnow}>
            {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.DID_YOU_KNOW)}
--- a/client/src/components/scoreStepsList.tsx
+++ b/client/src/components/scoreStepsList.tsx
@ -33,7 +33,7 @@ const ScoreStepsList = () => {
        {/* Step 1 */}
        <ProcessListItem>

-          <ProcessListHeading type="h4">
+          <ProcessListHeading type="h3">
            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)}
          </ProcessListHeading>
          <p>{' '}</p>
@ -70,7 +70,7 @@ const ScoreStepsList = () => {
        {/* Step 2 */}
        <ProcessListItem>

-          <ProcessListHeading type="h4">
+          <ProcessListHeading type="h3">
            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)}
          </ProcessListHeading>

--- a/client/src/data/blankCEJST/index.html
+++ b/client/src/data/blankCEJST/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <!-- your content here... -->
+</body>
+</html>
--- a/client/src/data/constants.tsx
+++ b/client/src/data/constants.tsx
@ -1,10 +1,17 @@
+
 import {LngLatBoundsLike} from 'maplibre-gl';
 import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';

 const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
 export const featureURLForTilesetName = (tilesetName :string ) : string => {
+  // The feature tile base URL can either point locally or the CDN.
+  // This is selected based on the DATA_SOURCE env variable.
+  const featureTileBaseURL = process.env.DATA_SOURCE === 'local' ?
+    process.env.GATSBY_LOCAL_TILES_BASE_URL :
+    process.env.GATSBY_CDN_TILES_BASE_URL;
+
  return [
-    process.env.GATSBY_DATA_ROOT_PATH,
+    featureTileBaseURL,
    process.env.GATSBY_DATA_PIPELINE_SCORE_PATH,
    process.env.GATSBY_MAP_TILES_PATH,
    tilesetName,
--- a/client/src/data/copy/about.tsx
+++ b/client/src/data/copy/about.tsx
@ -6,6 +6,11 @@ export const PAGE = defineMessages({
    defaultMessage: 'About',
    description: 'about page title text',
  },
+  HEADING: {
+    id: 'index.heading.about.us',
+    defaultMessage: 'About us',
+    description: 'main heading for about page',
+  },
  HEADING_1: {
    id: 'index.heading.screentool',
    defaultMessage: 'The screening tool',
--- a/client/src/data/copy/common.tsx
+++ b/client/src/data/copy/common.tsx
@ -104,6 +104,11 @@ export const FOOTER = defineMessages({
    defaultMessage: 'Find a contact at USA.gov',
    description: 'Footer find contact link text',
  },
+  CONTACT: {
+    id: 'footer.contactheader',
+    defaultMessage: 'Contact',
+    description: 'Footer column header',
+  },
 });

 export const FOOTER_CEQ_ADDRESS = {
--- a/client/src/pages/snapshots/contact.test.tsx.snap
+++ b/client/src/pages/snapshots/contact.test.tsx.snap
@ -2,142 +2,142 @@

 exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
 <DocumentFragment>
-  <section
-    class="usa-banner"
-    data-testid="govBanner"
-  >
-    <div
-      class="usa-accordion"
-    >
-      <header
-        class="usa-banner__header"
-      >
-        <div
-          class="usa-banner__inner"
-        >
-          <div
-            class="grid-col-auto"
-          >
-            <img
-              alt="U.S. flag"
-              class="usa-banner__header-flag"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
-            />
-          </div>
-          <div
-            class="grid-col-fill tablet:grid-col-auto"
-          >
-            <p
-              class="usa-banner__header-text"
-            >
-              An official website of the United States government
-            </p>
-            <p
-              aria-hidden="true"
-              class="usa-banner__header-action"
-            >
-              Here’s how you know
-            </p>
-          </div>
-          <button
-            aria-controls="gov-banner"
-            aria-expanded="false"
-            class="usa-accordion__button usa-banner__button"
-            type="button"
-          >
-            <span
-              class="usa-banner__button-text"
-            >
-              Here’s how you know
-            </span>
-          </button>
-        </div>
-      </header>
-      <div
-        class="usa-banner__content usa-accordion__content"
-        hidden=""
-        id="gov-banner"
-      >
-        <div
-          class="grid-row grid-gap-lg"
-        >
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Official websites use .gov
-                </strong>
-                <br />
-                A 
-                <strong>
-                  .gov
-                </strong>
-                 website belongs to an official government organization in the United States.
-              </p>
-            </div>
-          </div>
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Secure .gov websites use HTTPS
-                </strong>
-                <br />
-                A 
-                <strong>
-                  lock (
-                  <span
-                    class="icon-lock"
-                  >
-                    <img
-                      alt="lock"
-                      class="usa-banner__lock-image"
-                      role="img"
-                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
-                      title="Lock"
-                    />
-                  </span>
-                  )
-                </strong>
-                 or 
-                <strong>
-                  https://
-                </strong>
-                 means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
  <header
    class="usa-header usa-header--basic usa-header j40-header"
    data-testid="header"
    role="banner"
  >
+    <section
+      class="usa-banner"
+      data-testid="govBanner"
+    >
+      <div
+        class="usa-accordion"
+      >
+        <header
+          class="usa-banner__header"
+        >
+          <div
+            class="usa-banner__inner"
+          >
+            <div
+              class="grid-col-auto"
+            >
+              <img
+                alt="U.S. flag"
+                class="usa-banner__header-flag"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
+              />
+            </div>
+            <div
+              class="grid-col-fill tablet:grid-col-auto"
+            >
+              <p
+                class="usa-banner__header-text"
+              >
+                An official website of the United States government
+              </p>
+              <p
+                aria-hidden="true"
+                class="usa-banner__header-action"
+              >
+                Here’s how you know
+              </p>
+            </div>
+            <button
+              aria-controls="gov-banner"
+              aria-expanded="false"
+              class="usa-accordion__button usa-banner__button"
+              type="button"
+            >
+              <span
+                class="usa-banner__button-text"
+              >
+                Here’s how you know
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          class="usa-banner__content usa-accordion__content"
+          hidden=""
+          id="gov-banner"
+        >
+          <div
+            class="grid-row grid-gap-lg"
+          >
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Official websites use .gov
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    .gov
+                  </strong>
+                   website belongs to an official government organization in the United States.
+                </p>
+              </div>
+            </div>
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Secure .gov websites use HTTPS
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    lock (
+                    <span
+                      class="icon-lock"
+                    >
+                      <img
+                        alt="lock"
+                        class="usa-banner__lock-image"
+                        role="img"
+                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                        title="Lock"
+                      />
+                    </span>
+                    )
+                  </strong>
+                   or 
+                  <strong>
+                    https://
+                  </strong>
+                   means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
    <div
      class="usa-nav-container"
    >
@ -316,28 +316,26 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    class="j40-footer"
  >
    <div
-      class="usa-footer__primary-section pb"
+      class="usa-footer__primary-section pb2"
    >
      <div
        class="grid-container-desktop-lg"
        data-testid="gridContainer"
      >
        <div
-          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
+          class="grid-row tablet-lg:grid-col4"
        >
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Contact
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -377,16 +375,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                More information
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -428,16 +424,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Have a question about government services?
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -478,9 +472,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-auto"
          >
-            <h5>
+            <div
+              class="j40-footer-ceq-font"
+            >
              Council on Environmental Quality
-            </h5>
+            </div>
          </div>
        </div>
      </div>
--- a/client/src/pages/snapshots/index.test.tsx.snap
+++ b/client/src/pages/snapshots/index.test.tsx.snap
@ -2,142 +2,142 @@

 exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
 <DocumentFragment>
-  <section
-    class="usa-banner"
-    data-testid="govBanner"
-  >
-    <div
-      class="usa-accordion"
-    >
-      <header
-        class="usa-banner__header"
-      >
-        <div
-          class="usa-banner__inner"
-        >
-          <div
-            class="grid-col-auto"
-          >
-            <img
-              alt="U.S. flag"
-              class="usa-banner__header-flag"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
-            />
-          </div>
-          <div
-            class="grid-col-fill tablet:grid-col-auto"
-          >
-            <p
-              class="usa-banner__header-text"
-            >
-              An official website of the United States government
-            </p>
-            <p
-              aria-hidden="true"
-              class="usa-banner__header-action"
-            >
-              Here’s how you know
-            </p>
-          </div>
-          <button
-            aria-controls="gov-banner"
-            aria-expanded="false"
-            class="usa-accordion__button usa-banner__button"
-            type="button"
-          >
-            <span
-              class="usa-banner__button-text"
-            >
-              Here’s how you know
-            </span>
-          </button>
-        </div>
-      </header>
-      <div
-        class="usa-banner__content usa-accordion__content"
-        hidden=""
-        id="gov-banner"
-      >
-        <div
-          class="grid-row grid-gap-lg"
-        >
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Official websites use .gov
-                </strong>
-                <br />
-                A 
-                <strong>
-                  .gov
-                </strong>
-                 website belongs to an official government organization in the United States.
-              </p>
-            </div>
-          </div>
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Secure .gov websites use HTTPS
-                </strong>
-                <br />
-                A 
-                <strong>
-                  lock (
-                  <span
-                    class="icon-lock"
-                  >
-                    <img
-                      alt="lock"
-                      class="usa-banner__lock-image"
-                      role="img"
-                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
-                      title="Lock"
-                    />
-                  </span>
-                  )
-                </strong>
-                 or 
-                <strong>
-                  https://
-                </strong>
-                 means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
  <header
    class="usa-header usa-header--basic usa-header j40-header"
    data-testid="header"
    role="banner"
  >
+    <section
+      class="usa-banner"
+      data-testid="govBanner"
+    >
+      <div
+        class="usa-accordion"
+      >
+        <header
+          class="usa-banner__header"
+        >
+          <div
+            class="usa-banner__inner"
+          >
+            <div
+              class="grid-col-auto"
+            >
+              <img
+                alt="U.S. flag"
+                class="usa-banner__header-flag"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
+              />
+            </div>
+            <div
+              class="grid-col-fill tablet:grid-col-auto"
+            >
+              <p
+                class="usa-banner__header-text"
+              >
+                An official website of the United States government
+              </p>
+              <p
+                aria-hidden="true"
+                class="usa-banner__header-action"
+              >
+                Here’s how you know
+              </p>
+            </div>
+            <button
+              aria-controls="gov-banner"
+              aria-expanded="false"
+              class="usa-accordion__button usa-banner__button"
+              type="button"
+            >
+              <span
+                class="usa-banner__button-text"
+              >
+                Here’s how you know
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          class="usa-banner__content usa-accordion__content"
+          hidden=""
+          id="gov-banner"
+        >
+          <div
+            class="grid-row grid-gap-lg"
+          >
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Official websites use .gov
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    .gov
+                  </strong>
+                   website belongs to an official government organization in the United States.
+                </p>
+              </div>
+            </div>
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Secure .gov websites use HTTPS
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    lock (
+                    <span
+                      class="icon-lock"
+                    >
+                      <img
+                        alt="lock"
+                        class="usa-banner__lock-image"
+                        role="img"
+                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                        title="Lock"
+                      />
+                    </span>
+                    )
+                  </strong>
+                   or 
+                  <strong>
+                    https://
+                  </strong>
+                   means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
    <div
      class="usa-nav-container"
    >
@ -284,6 +284,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
      class="grid-container-desktop-lg"
      data-testid="gridContainer"
    >
+      <h1>
+        About us
+      </h1>
      <div
        class="grid-row grid-gap-lg j40-aboutcard-container "
        data-testid="grid"
@ -629,28 +632,26 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    class="j40-footer"
  >
    <div
-      class="usa-footer__primary-section pb"
+      class="usa-footer__primary-section pb2"
    >
      <div
        class="grid-container-desktop-lg"
        data-testid="gridContainer"
      >
        <div
-          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
+          class="grid-row tablet-lg:grid-col4"
        >
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Contact
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -690,16 +691,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                More information
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -741,16 +740,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Have a question about government services?
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -791,9 +788,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-auto"
          >
-            <h5>
+            <div
+              class="j40-footer-ceq-font"
+            >
              Council on Environmental Quality
-            </h5>
+            </div>
          </div>
        </div>
      </div>
--- a/client/src/pages/snapshots/methodology.test.tsx.snap
+++ b/client/src/pages/snapshots/methodology.test.tsx.snap
@ -2,142 +2,142 @@

 exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
 <DocumentFragment>
-  <section
-    class="usa-banner"
-    data-testid="govBanner"
-  >
-    <div
-      class="usa-accordion"
-    >
-      <header
-        class="usa-banner__header"
-      >
-        <div
-          class="usa-banner__inner"
-        >
-          <div
-            class="grid-col-auto"
-          >
-            <img
-              alt="U.S. flag"
-              class="usa-banner__header-flag"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
-            />
-          </div>
-          <div
-            class="grid-col-fill tablet:grid-col-auto"
-          >
-            <p
-              class="usa-banner__header-text"
-            >
-              An official website of the United States government
-            </p>
-            <p
-              aria-hidden="true"
-              class="usa-banner__header-action"
-            >
-              Here’s how you know
-            </p>
-          </div>
-          <button
-            aria-controls="gov-banner"
-            aria-expanded="false"
-            class="usa-accordion__button usa-banner__button"
-            type="button"
-          >
-            <span
-              class="usa-banner__button-text"
-            >
-              Here’s how you know
-            </span>
-          </button>
-        </div>
-      </header>
-      <div
-        class="usa-banner__content usa-accordion__content"
-        hidden=""
-        id="gov-banner"
-      >
-        <div
-          class="grid-row grid-gap-lg"
-        >
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Official websites use .gov
-                </strong>
-                <br />
-                A 
-                <strong>
-                  .gov
-                </strong>
-                 website belongs to an official government organization in the United States.
-              </p>
-            </div>
-          </div>
-          <div
-            class="usa-banner__guidance tablet:grid-col-6"
-          >
-            <img
-              alt=""
-              aria-hidden="true"
-              class="usa-banner__icon usa-media-block__img"
-              role="img"
-              src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
-            />
-            <div
-              class="usa-media-block__body"
-            >
-              <p>
-                <strong>
-                  Secure .gov websites use HTTPS
-                </strong>
-                <br />
-                A 
-                <strong>
-                  lock (
-                  <span
-                    class="icon-lock"
-                  >
-                    <img
-                      alt="lock"
-                      class="usa-banner__lock-image"
-                      role="img"
-                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
-                      title="Lock"
-                    />
-                  </span>
-                  )
-                </strong>
-                 or 
-                <strong>
-                  https://
-                </strong>
-                 means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
  <header
    class="usa-header usa-header--basic usa-header j40-header"
    data-testid="header"
    role="banner"
  >
+    <section
+      class="usa-banner"
+      data-testid="govBanner"
+    >
+      <div
+        class="usa-accordion"
+      >
+        <header
+          class="usa-banner__header"
+        >
+          <div
+            class="usa-banner__inner"
+          >
+            <div
+              class="grid-col-auto"
+            >
+              <img
+                alt="U.S. flag"
+                class="usa-banner__header-flag"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
+              />
+            </div>
+            <div
+              class="grid-col-fill tablet:grid-col-auto"
+            >
+              <p
+                class="usa-banner__header-text"
+              >
+                An official website of the United States government
+              </p>
+              <p
+                aria-hidden="true"
+                class="usa-banner__header-action"
+              >
+                Here’s how you know
+              </p>
+            </div>
+            <button
+              aria-controls="gov-banner"
+              aria-expanded="false"
+              class="usa-accordion__button usa-banner__button"
+              type="button"
+            >
+              <span
+                class="usa-banner__button-text"
+              >
+                Here’s how you know
+              </span>
+            </button>
+          </div>
+        </header>
+        <div
+          class="usa-banner__content usa-accordion__content"
+          hidden=""
+          id="gov-banner"
+        >
+          <div
+            class="grid-row grid-gap-lg"
+          >
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Official websites use .gov
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    .gov
+                  </strong>
+                   website belongs to an official government organization in the United States.
+                </p>
+              </div>
+            </div>
+            <div
+              class="usa-banner__guidance tablet:grid-col-6"
+            >
+              <img
+                alt=""
+                aria-hidden="true"
+                class="usa-banner__icon usa-media-block__img"
+                role="img"
+                src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
+              />
+              <div
+                class="usa-media-block__body"
+              >
+                <p>
+                  <strong>
+                    Secure .gov websites use HTTPS
+                  </strong>
+                  <br />
+                  A 
+                  <strong>
+                    lock (
+                    <span
+                      class="icon-lock"
+                    >
+                      <img
+                        alt="lock"
+                        class="usa-banner__lock-image"
+                        role="img"
+                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
+                        title="Lock"
+                      />
+                    </span>
+                    )
+                  </strong>
+                   or 
+                  <strong>
+                    https://
+                  </strong>
+                   means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
    <div
      class="usa-nav-container"
    >
@ -333,6 +333,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                      >
                        <div>
                          <img
+                            alt="download icon for download package"
                            src="test-file-stub"
                          />
                           
@ -1018,12 +1019,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
            <li
              class="usa-process-list__item"
            >
-              <h4
+              <h3
                class="usa-process-list__heading"
                data-testid="processListHeading"
              >
                Gather datasets
-              </h4>
+              </h3>
              <p>
                 
              </p>
@ -1069,12 +1070,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
            <li
              class="usa-process-list__item"
            >
-              <h4
+              <h3
                class="usa-process-list__heading"
                data-testid="processListHeading"
              >
                Determine communites of focus
-              </h4>
+              </h3>
              <p>
                 
              </p>
@ -1120,28 +1121,26 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    class="j40-footer"
  >
    <div
-      class="usa-footer__primary-section pb"
+      class="usa-footer__primary-section pb2"
    >
      <div
        class="grid-container-desktop-lg"
        data-testid="gridContainer"
      >
        <div
-          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
+          class="grid-row tablet-lg:grid-col4"
        >
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Contact
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -1181,16 +1180,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                More information
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -1232,16 +1229,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-12 desktop:grid-col-4"
          >
-            <section
-              class="usa-footer__primary-content"
-            >
-              <h4
-                class="padding-top-1 padding-bottom-0"
+            <section>
+              <div
+                class="j40-h4"
              >
                Have a question about government services?
-              </h4>
+              </div>
              <ul
-                class="usa-list usa-list--unstyled padding-bottom-4"
+                class="usa-list usa-list--unstyled"
              >
                <li
                  class="usa-footer__secondary-link"
@ -1282,9 +1277,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
          <div
            class="mobile-lg:grid-col-auto"
          >
-            <h5>
+            <div
+              class="j40-footer-ceq-font"
+            >
              Council on Environmental Quality
-            </h5>
+            </div>
          </div>
        </div>
      </div>
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@ -41,7 +41,7 @@ const IndexPage = ({location}: IndexPageProps) => {
      </J40MainGridContainer>

      <J40MainGridContainer>
-
+        <h1>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
        <AboutCardsContainer>
          <AboutCard
            size={'large'}
--- a/client/src/pages/timeline.tsx
+++ b/client/src/pages/timeline.tsx
@ -1,66 +0,0 @@
-import * as React from 'react';
-import Layout from '../components/layout';
-
-// THIS COMPONENT IS NOT BEING USED
-
-// @ts-ignore
-// import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
-
-interface TimelinePageProps {
-  location: Location;
-}
-
-const TimelinePage = ({location}: TimelinePageProps) => {
-  return (<Layout location={location} title={'Timeline'}>
-    <section>
-      {/* <h1>Timelin</h1>
-      <h2>Throughout the Process</h2>
-      <div className="grid-col">
-        <div className="grid-row grid-gap-lg">
-          <div className="grid-col-1">
-            <img
-              className={''}
-              src={renewIcon} alt={'renew icon'}/>
-          </div>
-          <div className={'text-asset-container ' +
-          'grid-col-fill'}>
-            <p>Continuously engage with stakeholders and community
-              members to get feedback on the screening tool, scoring,
-              and overall process.</p>
-            <p>Continuously source data that meets data principles as
-              defined through community input.</p>
-          </div>
-        </div>
-      </div>
-
-      <h2>Milestones</h2>
-      <ol className={'usa-process-list'}>
-        <li
-          className={'j40-usa-process-list__item--complete ' +
-            'usa-process-list__item padding-bottom-4 '}
-          aria-label={'milestone 1 done'}>
-          <h4 className={'usa-process-list__heading'}>Milestone 1</h4>
-          <p className={'margin-top-05'}>
-            Publish data principles on this site by June 2021.</p>
-        </li>
-        <li
-          className={'usa-process-list__item padding-bottom-4'}
-          aria-label={'milestone 2 next'}>
-          <h4 className={'usa-process-list__heading'}>Milestone 2</h4>
-          <p>Make the first version of a screening tool
-            available by July 2021.</p>
-        </li>
-        <li
-          className={'usa-process-list__item padding-bottom-4'}
-          aria-label={'milestone 3'}>
-          <h4 className={'usa-process-list__heading'}>Milestone 3</h4>
-          <p>Create a public scorecard to ensure accountability of
-              investments by February 2022.</p>
-        </li>
-      </ol> */}
-    </section>
-  </Layout>
-  );
-};
-
-export default TimelinePage;
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@ -60,7 +60,7 @@ h3 {
  @include j40-element('lg', 2, 'bold', 4 );
 }

-h4 {
+h4, .j40-h4 {
  @include j40-element('sm', 1, 'bold', 3 );
 }

@ -94,8 +94,9 @@ p.flush {
  @include u-margin-bottom(3)
 }

-
-
+.j40-footer-ceq-font {
+  @include j40-element('lg', 2, 'bold', 0 );
+}

 /***************** LAYOUT STYLES **************************************************************
 This section will outline styles for components that are on each page. These 
@ -213,7 +214,7 @@ components include:
 */ 
 .j40-footer {

-  .usa-footer__primary-section.pb{
+  .usa-footer__primary-section.pb2{
    @include u-padding-bottom(2);
  }