diff --git a/client/gatsby-config.js b/client/gatsby-config.js
index cae5a4d5..e6cea388 100644
--- a/client/gatsby-config.js
+++ b/client/gatsby-config.js
@@ -7,6 +7,11 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sass',
       options: {
+        sassOptions: {
+          includePaths: [
+            './node_modules/uswds',
+          ],
+        },
         cssLoaderOptions: {
           modules: {
             exportLocalsConvention: 'camelCaseOnly',
@@ -15,7 +20,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-intl`,
+      resolve: 'gatsby-plugin-intl',
       options: {
         // language JSON resource path
         path: `${__dirname}/src/intl`,
diff --git a/client/src/components/J40Aside.tsx b/client/src/components/J40Aside.tsx
index 8f97a2d1..b73b9930 100644
--- a/client/src/components/J40Aside.tsx
+++ b/client/src/components/J40Aside.tsx
@@ -9,45 +9,38 @@ const J40Aside = () => {
   return (
     <>
       <aside
-        aria-labelledby="left-sidebar"
-        className={'j40-aside desktop:grid-col-3'}
-        id="left-sidebar">
-        <section
-          className={'usa-prose grid-gap grid-container usa-section'}>
-          <h3 className={'j40-aside-title'}>Get Involved</h3>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'} src={chatIcon}
-              alt={'chat icon'}/>
-            <br/>
-          Send Feedback
-          </h5>
-          <p>Have ideas about how to acknowledge the on-the-ground
-          experiences of your community?
-          </p>
-        Email: <a href="mailto: justice40open@usds.gov">
-        justice40open@usds.gov</a>
-          <p>&nbsp;</p>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'}
-              src={githubIcon} alt={'github icon'}/>
-            <br/>
-          Join the open source community</h5>
-          <p>
-          Justice40’s code is open source, which means it is available for
-          the public to view and contribute. Anyone can view and
-          contribute on GitHub.
-          </p>
-          <p>
-            <a
-              href={'https://github.com/usds/justice40-tool/' +
-            'crisis-at-home-and-abroad/'}
-              target={'_blank'}
-              rel={'noreferrer'}
-              key={'github3'}>Check it out on GitHub</a>
-          </p>
-        </section>
+        aria-labelledby="right-sidebar"
+        className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
+        id="right-sidebar">
+        <h1>Get Involved</h1>
+        <h2><img
+          className={'flex-align-self-center width-4 j40-aside-icon'}
+          src={chatIcon} alt={'chat icon'}/>
+        Send Feedback</h2>
+        <p className={'usa-prose site-prose'}>Have ideas about how to
+        acknowledge the on-the-ground experiences of your community?
+        </p>
+      Email: <a href="mailto: justice40open@usds.gov">
+      justice40open@usds.gov</a>
+        <p>&nbsp;</p>
+        <h2>
+          <img
+            className={'flex-align-self-center width-4 j40-aside-icon'}
+            src={githubIcon} alt={'github icon'}/>
+        Join the open source community</h2>
+        <p>
+        Justice40’s code is open source, which means it is available for
+        the public to view and contribute. Anyone can view and
+        contribute on GitHub.
+        </p>
+        <p>
+          <a
+            href={'https://github.com/usds/justice40-tool/' +
+          'crisis-at-home-and-abroad/'}
+            target={'_blank'}
+            rel={'noreferrer'}
+            key={'github3'}>Check it out on GitHub</a>
+        </p>
       </aside>
     </>
   );
diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index 6210597c..5029375b 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -8,6 +8,7 @@ const J40Footer = () => {
     <>
       <Footer
         size="big"
+        className={'j40-footer'}
         primary={<></>}
         secondary={<FooterNav
           aria-label="Footer navigation"
@@ -66,13 +67,12 @@ const J40Footer = () => {
                       alt={'Whitehouse logo'}/>
                   }
                   heading={<p
-                    className={' j40-footer-logo-heading'}>
+                    className={'j40-footer-logo-heading'}>
                     Council on Environmental Quality</p>}
                 />
               </>,
               <>
                 <Address
-                  className={'j40-address-readability'}
                   key={'footeraddress'}
                   items={[
                     '730 Jackson Pl NW',
diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx
index e7456aa6..1fbd0f36 100644
--- a/client/src/components/J40Header.tsx
+++ b/client/src/components/J40Header.tsx
@@ -1,22 +1,15 @@
-import React from 'react';
-import {GovBanner,
+import React, {useState} from 'react';
+import {Link, useIntl} from 'gatsby-plugin-intl';
+import {
   Header,
-  Title,
+  NavMenuButton,
   PrimaryNav,
-  SiteAlert} from '@trussworks/react-uswds';
-import {useIntl, Link} from 'gatsby-plugin-intl';
+  SiteAlert,
+  Title,
+} from '@trussworks/react-uswds';
 import {Helmet} from 'react-helmet';
 import {useFlags} from '../contexts/FlagContext';
 
-const headerLinks = (flags: string[] | undefined) => {
-  const timelineLink = <Link key="/timeline" to="/timeline"> Timeline </Link>;
-  const links = [];
-  if (flags && flags.includes('timeline')) {
-    links.push(timelineLink);
-  }
-  return links;
-};
-
 const J40Header = () => {
   const flags = useFlags();
   const intl = useIntl();
@@ -25,29 +18,75 @@ const J40Header = () => {
     defaultMessage: 'Justice40',
     description: 'Title of the project',
   });
+
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+  const toggleMobileNav = (): void =>
+    setMobileNavOpen((prevOpen) => !prevOpen);
+
+  const headerLinks = (flags: string[] | undefined) => {
+    // static map of all possible menu items. Originally, it was all strings,
+    // but we need to handle both onsite and offsite links.
+    const menuData = new Map<string, JSX.Element>([
+      ['about',
+        <Link
+          key={'about'} className={'j40-header'}
+          to={'/'}>About</Link>],
+      ['timeline',
+        <Link
+          to={'/timeline'}
+          key={'timline'}
+          className={'j40-header'}>Timeline</Link>],
+      ['cejst',
+        <Link
+          to={'/#cejst'}
+          key={'cejst'}
+          target={'_blank'}
+          className={'j40-header'}>CEJST</Link>],
+    ]);
+
+    // select which items from the above map to show, right now it's only two
+    // possibilities so it's simple. Note: strings are used as react keys
+    const menu =
+      flags?.includes('timeline') ?
+        ['about', 'timeline', 'cejst'] :
+        ['about', 'timeline', 'cejst']; // ['about', 'cejst'];
+    // TODO: make feature flags flags work.
+    return menu.map((key) => menuData.get(key));
+  };
+
   return (
     <>
       <Helmet>
         <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
+      {/* <GovBanner/> */}
       <SiteAlert
         variant="info"
-        heading="Welcome to Justice40's Temporary Home">
-        <p>
-        While Justice40 gets up and running,
-        we are using GitHub Pages as a temporary website host. <br/>
-        To learn more about GitHub Pages, click &nbsp;
-          <a href="https://pages.github.com/">here</a>.
-        </p>
+        className={'j40-sitealert'}>
+        <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
+        up and running, we are using GitHub Pages as a temporary website
+        host. To learn more about GitHub Pages, click <a href="https://pages.github.com/">here</a>.
       </SiteAlert>
-      <GovBanner/>
-      <Header className={'j40-header'} basic={true} role={'banner'}>
+      <Header
+        basic={true} role={'banner'}
+        className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <Title className={'j40-title'}>{title}</Title>
+            <Title>{title}</Title>
+            <NavMenuButton
+              key={'mobileMenuButton'}
+              onClick={toggleMobileNav}
+              label="Menu"/>
           </div>
-          <PrimaryNav items={headerLinks(flags)} />
+          <PrimaryNav
+            items={headerLinks(flags)}
+            mobileExpanded={mobileNavOpen}
+            onToggleMobileNav={toggleMobileNav}
+            className={'j40-header'}
+          >
+          </PrimaryNav>
         </div>
       </Header>
     </>
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 0fe22eb8..81fedc54 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`J40Footer renders correctly 1`] = `
 <DocumentFragment>
   <footer
-    class="usa-footer usa-footer--big"
+    class="usa-footer usa-footer--big j40-footer"
   >
     <div
       class="usa-footer__primary-section"
@@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
                       class="grid-col-auto"
                     >
                       <p
-                        class=" j40-footer-logo-heading"
+                        class="j40-footer-logo-heading"
                       >
                         Council on Environmental Quality
                       </p>
@@ -194,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
                     class="usa-footer__secondary-link"
                   >
                     <address
-                      class="usa-footer__address j40-address-readability"
+                      class="usa-footer__address"
                     >
                       <div
                         class="usa-footer__contact-info grid-row grid-gap"
diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx
index ba83a965..8d058ff9 100644
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@@ -1,7 +1,8 @@
 import React, {ReactNode} from 'react';
-import * as styles from './layout.module.scss';
+import {GridContainer, Grid} from '@trussworks/react-uswds';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
+import J40Aside from '../components/J40Aside';
 import {URLFlagProvider} from '../contexts/FlagContext';
 
 interface ILayoutProps {
@@ -12,11 +13,20 @@ interface ILayoutProps {
 const Layout = ({children, location}: ILayoutProps) => {
   return (
     <URLFlagProvider location={location}>
-      <div className={styles.site}>
-        <J40Header />
-        <div className={styles.siteContent}>{children}</div>
-        <J40Footer />
-      </div>
+      <J40Header/>
+      <GridContainer containerSize={'desktop-lg'}
+        className={'j40-grid-container'}>
+        <Grid row>
+          <main id={'main-content'}
+            className={'usa-layout-docs desktop:grid-col-9 j40-main-content'}>
+            <section className={'usa-prose'}>
+              {children}
+            </section>
+          </main>
+          <J40Aside/>
+        </Grid>
+      </GridContainer>
+      <J40Footer/>
     </URLFlagProvider>
   );
 };
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index acc4981d..79ff5f90 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -18,11 +18,10 @@ import pollutionIcon // @ts-ignore
   from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
 // @ts-ignore
 import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
-import J40Aside from '../components/J40Aside';
 
 interface IndexPageProps {
   location: Location;
-};
+}
 
 // markup
 const IndexPage = ({location}: IndexPageProps) => {
@@ -35,126 +34,109 @@ const IndexPage = ({location}: IndexPageProps) => {
     [washIcon, 'Clean water infrastructure'],
   ];
 
-  return (
-    <Layout location={location}>
-      <main id="main-content" role="main">
-        <div className={'grid-row grid-gap-2'}>
-          <section className={'grid-container usa-section'}>
-            <div className={'desktop:grid-col'}>
-              <div className={'grid-row grid-gap'}>
-                <div className={'usa-prose text-asset-container'}>
-                  <h2>About Justice40</h2>
-                  <p>
-                    In an effort to address historical environmental injustices,
-                    President Biden created the Justice40 Initiative on January
-                    27, 2021. The Justice40 Initiative directs 40% of the
-                    benefits from federal investments in seven key areas to
-                    overburdened and underserved communities.
-                  </p>
+  return (<Layout location={location}>
+    <h2>About Justice40</h2>
+    <p>
+        In an effort to address historical environmental injustices,
+        President Biden created the Justice40 Initiative on January
+        27, 2021. The Justice40 Initiative directs 40% of the
+        benefits from federal investments in seven key areas to
+        overburdened and underserved communities.
+    </p>
 
-                  <p>
-                    Federal agencies will prioritize benefits using a new
-                    climate and economic justice screening tool. This screening
-                    tool will be a map that visualizes data to compare the
-                    cumulative impacts of environmental, climate, and economic
-                    factors. It is being developed by the Council on
-                    Environmental Quality (CEQ) with guidance from environmental
-                    justice leaders and communities affected by environmental
-                    injustices. The first version of the screening tool will be
-                    released in July 2021. However, the screening tool and data
-                    being used will be continuously updated to better reflect
-                    the lived experiences of community members.
-                  </p>
+    <p>
+        Federal agencies will prioritize benefits using a new
+        climate and economic justice screening tool. This screening
+        tool will be a map that visualizes data to compare the
+        cumulative impacts of environmental, climate, and economic
+        factors. It is being developed by the Council on
+        Environmental Quality (CEQ) with guidance from environmental
+        justice leaders and communities affected by environmental
+        injustices. The first version of the screening tool will be
+        released in July 2021. However, the screening tool and data
+        being used will be continuously updated to better reflect
+        the lived experiences of community members.
+    </p>
 
-                  <p>
-                    Read more about the Justice40 Initiative in President
-                    Biden’s <a
-                      href={'https://www.whitehouse.gov/briefing-room/' +
-                    'presidential-actions/2021/01/27/' +
-                    'executive-order-on-tackling-the-climate-' +
-                    'crisis-at-home-and-abroad/'}
-                      target={'_blank'}
-                      rel={'noreferrer'}>
-                    Executive Order on Tackling the Climate Crisis at Home and
-                    Abroad.</a>
-                  </p>
+    <p>
+        Read more about the Justice40 Initiative in President
+        Biden’s <a
+        href={'https://www.whitehouse.gov/briefing-room/' +
+        'presidential-actions/2021/01/27/' +
+        'executive-order-on-tackling-the-climate-' +
+        'crisis-at-home-and-abroad/'}
+        target={'_blank'}
+        rel={'noreferrer'}>
+        Executive Order on Tackling the Climate Crisis at Home and
+        Abroad.</a>
+    </p>
+
+    <h3>Areas of Focus</h3>
+    <div className={'grid-row grid-gap'}>
+      <div className={'j40-two-column-confine'}>
+        <ul className={'usa-icon-list j40-two-column'}>
+          {readMoreList.map((item, index) => {
+            return (
+              <li
+                key={`readmore_li_${index}`}
+                className={'usa-icon-list__item'}>
+                <div className={'usa-icon-list__icon'}>
+                  <img
+                    className={'j40-two-column-icons-spacing'}
+                    key={`readmore_img_${index}`}
+                    src={item[0]} alt={item[1] + ' icon'}/>
                 </div>
-              </div>
-
-              <div className={'grid-gap j40-two-column-confine'}>
-                <h4>Areas of Focus</h4>
-                <ul className={'usa-icon-list j40-two-column'}>
-                  {readMoreList.map((item, index) => {
-                    return (
-                      <li
-                        key={`readmore_li_${index}`}
-                        className={'usa-icon-list__item'}>
-                        <div className={'usa-icon-list__icon'}>
-                          <img
-                            className={'j40-two-column-icons-spacing'}
-                            key={`readmore_img_${index}`}
-                            src={item[0]} alt={item[1] + ' icon'}/>
-                        </div>
-                        <div
-                          className={'usa-icon-list__content'}> {item[1]} </div>
-                      </li>
-                    );
-                  })
-                  }
-                </ul>
-              </div>
-
-              <div className={'grid-row grid-gap'}>
                 <div
-                  className={'usa-prose text-asset-container'}>
-                  <h4>A Transparent, Community-First Approach</h4>
+                  className={'usa-icon-list__content'}> {item[1]} </div>
+              </li>
+            );
+          })
+          }
+        </ul>
+      </div>
+    </div>
 
-                  <p>
-                    Successful initiatives are guided by direct input from the
-                    communities they are serving. CEQ commits to transparency,
-                    inclusivity, and iteration in building this screening tool.
-                  </p>
 
-                  <p>
-                    <i>Transparent:</i> The code and data behind the screening
-                    tool are open source, meaning it is available for the public
-                    to review and contribute to. This tool is being developed
-                    publicly so that communities, academic experts, and anyone
-                    who’s interested can be involved in the tool-building
-                    process.
-                  </p>
+    <h3>A Transparent, Community-First Approach</h3>
 
-                  <p>
-                    <i>Inclusive:</i> Many areas which lack investments also
-                    lack environmental data and would be overlooked using
-                    available environmental data. CEQ is actively reaching out
-                    to groups that have historically been excluded from
-                    decision-making, such as groups in rural and tribal areas,
-                    to understand their needs and ask for their input.
-                  </p>
+    <p>
+    Successful initiatives are guided by direct input from the
+    communities they are serving. CEQ commits to transparency,
+    inclusivity, and iteration in building this screening tool.
+    </p>
 
-                  <p>
-                    <i>Iterative:</i> The initial community prioritization list
-                    provided by the screening tool is the beginning of a
-                    collaborative process in score refinement, rather than a
-                    final answer. CEQ has received recommendations on data sets
-                    from community interviews, the White House Environmental
-                    Justice Advisory Council, and through public comment, but
-                    establishing a score that is truly representative will be a
-                    long-term, ongoing process. As communities submit feedback
-                    and recommendations, CEQ will continue to improve the tools
-                    being built and the processes for stakeholder and public
-                    engagement.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </section>
-          <J40Aside/>
-        </div>
+    <p>
+      <i>Transparent:</i> The code and data behind the screening
+    tool are open source, meaning it is available for the public
+    to review and contribute to. This tool is being developed
+    publicly so that communities, academic experts, and anyone
+    who’s interested can be involved in the tool-building
+    process.
+    </p>
 
-      </main>
-    </Layout>
+    <p>
+      <i>Inclusive:</i> Many areas which lack investments also
+    lack environmental data and would be overlooked using
+    available environmental data. CEQ is actively reaching out
+    to groups that have historically been excluded from
+    decision-making, such as groups in rural and tribal areas,
+    to understand their needs and ask for their input.
+    </p>
+
+    <p>
+      <i>Iterative:</i> The initial community prioritization list
+    provided by the screening tool is the beginning of a
+    collaborative process in score refinement, rather than a
+    final answer. CEQ has received recommendations on data sets
+    from community interviews, the White House Environmental
+    Justice Advisory Council, and through public comment, but
+    establishing a score that is truly representative will be a
+    long-term, ongoing process. As communities submit feedback
+    and recommendations, CEQ will continue to improve the tools
+    being built and the processes for stakeholder and public
+    engagement.
+    </p>
+  </Layout>
   );
 };
 
diff --git a/client/src/pages/timeline.tsx b/client/src/pages/timeline.tsx
index 564e8f62..d7d751b1 100644
--- a/client/src/pages/timeline.tsx
+++ b/client/src/pages/timeline.tsx
@@ -1,81 +1,67 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import J40Aside from '../components/J40Aside';
 
 // @ts-ignore
 import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
 
 interface TimelinePageProps {
-  location: URL;
-};
+  location: Location;
+}
 
 const TimelinePage = ({location}: TimelinePageProps) => {
   return (<Layout location={location}>
-    <main id="main-content" role="main">
-      <div className={'grid-row grid-gap-2'}>
-        <section className={'grid-container usa-section'}>
-          <div className={'desktop:grid-col'}>
-            <div className={'grid-row grid-gap-lg'}>
-              <div className={'grid-gap-lg'}>
-                <h1>Timeline</h1>
-                <h2>Throughout the Process</h2>
-                <div className="grid-col">
-                  <div className="grid-row grid-gap-lg">
-                    <div className="grid-col-1">
-                      <img
-                        className={'flex-align-self-center width-4'}
-                        src={renewIcon} alt={'renew icon'}/>
-                    </div>
-                    <div className={'usa-prose 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-details={'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-details={'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-details={'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>
-              </div>
-            </div>
-          </div>
-        </section>
-        <J40Aside/>
+    <h2>Timeline</h2>
+    <h3>Throughout the Process</h3>
+    <div className="grid-col">
+      <div className="grid-row grid-gap-lg">
+        <div className="grid-col-1">
+          <img
+            className={'flex-align-self-center width-4'}
+            src={renewIcon} alt={'renew icon'}/>
+        </div>
+        <div className={'usa-prose 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>
-    </main>
+    </div>
+
+    <h3>Milestones</h3>
+    <ol className={'usa-process-list'}>
+      <li
+        className={'j40-usa-process-list__item--complete ' +
+          'usa-process-list__item padding-bottom-4 '}
+        aria-details={'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-details={'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-details={'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>
   </Layout>
   );
 };
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index b729b300..f9e21409 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -1,15 +1,42 @@
+/*
+  These are necessary for the image and font urls referenced in the source
+  files to resolve correctly.
+*/
+$theme-image-path: '../../node_modules/uswds/src/img';
+$theme-font-path: '../../node_modules/uswds/src/fonts';
+
+/*
+  Example:
+
+  The url for the hero image in the source file is not currently prefixed by
+  the $theme-image-path above.
+
+  $theme-hero-image: '#{$theme-image-path}/hero.png';
+*/
+
+// Custom USWDS changes to variables go here
+// see https://designsystem.digital.gov/documentation/settings/
+$theme-show-compile-warnings: false;
+$theme-show-notifications: false;
+
+$theme-font-role-heading: "sans";
+
+@import '../../node_modules/uswds';
+
 @import "~@trussworks/react-uswds/lib/index.css";
-@import "~@trussworks/react-uswds/lib/uswds.css";
+
+// Custom SASS/CSS goes here
+$j40-max-width: 80ex;
 
 .j40-two-column {
   overflow: hidden;
   padding: 0;
 
-  @media (min-width: 768px) {
+  @media (min-width: 40em) {
     column-count: 2;
     column-gap: 1em;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 40em) {
     column-count: 1;
     column-gap: 0;
   }
@@ -29,47 +56,129 @@
 }
 
 .j40-two-column-confine {
+  display: inline-flex;
   max-width: fit-content;
 }
 
-.j40-header {
-  background-color: #112f4e; /* todo: move color to theme */
-  color: white;
+@include at-media("mobile-lg") {
+  .j40-grid-container {
+    padding-right: 0;
+  }
 }
 
-.j40-title {
-  font-size: xx-large;
+.j40-header, .j40-primary-nav, .j40-header > li > a{
+  background-color: #112f4e; /* todo: move color to theme */
+  color: white !important;
+  z-index: 5;
+
+  .usa-nav-container {
+    max-width: ($j40-max-width*2);
+  }
+
+  span {
+    // make sure the open close cheveron is colored correctly
+    color: white;
+  }
+
+  // this is the title
+  .usa-logo__text {
+    font-size: 1.8em;
+    font-family: "serif";
+  }
+
+  .usa-current::after, :hover::after {
+    background-color: #2491ff !important;
+  }
+
+  // menu item font
+  .usa-nav__primary {
+    font-size: 1.2em;
+  }
+
+  //media (max-width: 63.99em)
+  //.usa-nav__primary a:not(.usa-button):hover {}
 }
 
 .j40-aside {
   background-color: #eff6fb;
+  padding-right: 1em;
+  padding-left: 1em;
+
+  h1 {
+    font-weight: 100;
+    font-size: 2em;
+  }
+
+  h2 {
+    font-weight: 100;
+    font-size: 1.4em;
+  }
+
+  h3 {
+    font-weight: 100;
+    font-size: 1.3em;
+  }
+
+  .j40-aside-icon {
+    display: flex;
+    margin-top: 3px;
+    margin-bottom: 12px;
+  }
 }
 
-.j40-aside-title {
-  padding-bottom: 1em;
+.j40-footer {
+  .usa-footer__contact-info {
+    justify-content: center;
+    line-height: 1.5;
+    text-align: center;
+  }
+
+  .j40-footer-logo {
+    display: inline-block;
+    text-align: center;
+  }
 }
 
-.j40-footer-logo {
-  display: inline-block;
-  text-align: center;
-}
-
-.j40-footer-logo-heading {
-}
-
-.j40-address-readability {
-  display: inline-block;
-  line-height: 1.5 !important; // trussworks issue
-  text-align: center;
+// spacing top & bottom around main content
+@include at-media("mobile-lg") {
+  .j40-main-content {
+    margin-bottom: 2rem;
+    margin-top: 2.5rem;
+  }
 }
 
 // This should really be part of uswds and use $theme-step-indicator-segment-color-complete
+// The Progress element doesn't really support color changing the line connecting progress
+// (like the Steps element does) and the checkbox.
+// The border-left-color required an !important to make work. Maybe add a feature request
+// to have the process list officially support a more Steps-like behavior
 .j40-usa-process-list__item--complete {
   &::before {
     color: white;
     background-color: #00a91c;
-    content: "✓";
   }
 
   border-left-color: #005ea2 !important; // todo: fix
 }
+
+// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
+.usa-prose {
+  h1, h2, h3, h4 {
+    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  }
+  p, div {
+    max-width: $j40-max-width;
+  }
+}
+
+.j40-sitealert {
+  p {
+    margin: 0;
+  }
+  padding-top: 0;
+  padding-bottom: 0;
+  .usa-alert:before {
+    margin-top: 12px !important;
+  }
+}
+