diff --git a/client/package-lock.json b/client/package-lock.json
index 6b4cb5f6..43a242d3 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2640,8 +2640,9 @@
       "dev": true
     },
     "@trussworks/react-uswds": {
-      "version": "git+https://git@github.com/nathillardusds/react-uswds.git#42b1907d172373cbcd5730d75c335b0c98cbeccf",
-      "from": "@trussworks/react-uswds@git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr"
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.0.0.tgz",
+      "integrity": "sha512-kWLAvAbl/wvFYyM4Y9Uo8AZTOpap/aTu7ckCzz/Lq9Na8jlx5prP3zAyviK9LGHsuCEQ7bUX57/FJMtJukEuKA=="
     },
     "@trysound/sax": {
       "version": "0.1.1",
diff --git a/client/package.json b/client/package.json
index 0978686c..c2260399 100644
--- a/client/package.json
+++ b/client/package.json
@@ -71,7 +71,7 @@
     "ts-jest": "^27.0.0"
   },
   "dependencies": {
-    "@trussworks/react-uswds": "git+https://git@github.com/nathillardusds/react-uswds#nathillardusds/ssr",
+    "@trussworks/react-uswds": "^2.0.0",
     "@turf/bbox": "^6.5.0",
     "chroma-js": "^2.1.2",
     "d3-ease": "^3.0.1",
diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index 427ef78e..da8adc87 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import {
   Address,
-  Footer,
-  FooterNav,
   Logo,
-  GridContainer, Grid,
 } from '@trussworks/react-uswds';
-import {} from '@trussworks/react-uswds';
+import {NavList} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
 
 // @ts-ignore
 import whitehouseIcon from '../images/eop-seal.svg';
+import J40MainGridContainer from './J40MainGridContainer';
 
 const J40Footer = () => {
   const intl = useIntl();
@@ -58,64 +56,73 @@ const J40Footer = () => {
     },
   });
 
+  const NAVLINKS = [
+    ['Contact',
+      <Address
+        key={'footeraddress'}
+        className={'j40-footer-address'}
+        size={'big'}
+        items={[
+          '730 Jackson Pl NW',
+          'Washington, D.C. 20506',
+          '(202) 395-5750',
+        ]}
+      />,
+    ],
+    [
+      intl.formatMessage(messages.moreinfoheader),
+      <a
+        key={'whitehouselink2'}
+        href={'https://www.whitehouse.gov/'}
+        target={'_blank'}
+        rel={'noreferrer'}>Whitehouse.gov</a>,
+      <a
+        key="foialink"
+        target={'_blank'}
+        rel={'noreferrer'}
+        href={'https://www.whitehouse.gov/ceq/foia'}>
+        {intl.formatMessage(messages.foia)}
+      </a>,
+      <a
+        key={'privacylink'}
+        target={'_blank'}
+        rel={'noreferrer'}
+        href={'https://www.whitehouse.gov/privacy/'}>
+        {intl.formatMessage(messages.privacy)}
+      </a>,
+    ],
+    [
+      intl.formatMessage(messages.questionsheader),
+      <a
+        key={'contactlink'}
+        href={'https://www.usa.gov/'}>
+        {intl.formatMessage(messages.contactlink)}
+      </a>,
+    ],
+  ];
+
   // see https://designsystem.digital.gov/components/footer/
   return (
-    <>
-      <Footer
-        size="big"
-        className={'j40-footer'}
-        primary={
-          <GridContainer><Grid>
-            <FooterNav
-              aria-label={intl.formatMessage(messages.arialabelfooter)}
-              size="big" // fyi you leave this off and it silently fails...
-              links={[
-                ['Contact',
-                  <Address
-                    key={'footeraddress'}
-                    className={'j40-footer-address'}
-                    size={'big'}
-                    items={[
-                      '730 Jackson Pl NW',
-                      'Washington, D.C. 20506',
-                      '(202) 395-5750',
-                    ]}
-                  />,
-                ],
-                [
-                  intl.formatMessage(messages.moreinfoheader),
-                  <a
-                    key={'whitehouselink2'}
-                    href={'https://www.whitehouse.gov/'}
-                    target={'_blank'}
-                    rel={'noreferrer'}>Whitehouse.gov</a>,
-                  <a
-                    key="foialink"
-                    target={'_blank'}
-                    rel={'noreferrer'}
-                    href={'https://www.whitehouse.gov/ceq/foia'}>
-                    {intl.formatMessage(messages.foia)}
-                  </a>,
-                  <a
-                    key={'privacylink'}
-                    target={'_blank'}
-                    rel={'noreferrer'}
-                    href={'https://www.whitehouse.gov/privacy/'}>
-                    {intl.formatMessage(messages.privacy)}
-                  </a>,
-                ],
-                [
-                  intl.formatMessage(messages.questionsheader),
-                  <a
-                    key={'contactlink'}
-                    href={'https://www.usa.gov/'}>
-                    {intl.formatMessage(messages.contactlink)}
-                  </a>,
-                ],
-              ]}
-            />
-          </Grid></GridContainer>}
-        secondary={
+    // we cannot use trussworks Footer because it doesn't layout correct
+    // and there's no easy way to override. It comes down to the
+    // `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">
+        <J40MainGridContainer>
+          <div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
+            {NAVLINKS.map((links, i) => (
+              <div key={`linkSection-${i}`}
+                className="mobile-lg:grid-col-12 desktop:grid-col-4">
+                <NavSection links={links} />
+              </div>
+            ))}
+          </div>
+        </J40MainGridContainer>
+      </div>
+
+      <div className="usa-footer__secondary-section">
+        <J40MainGridContainer>
           <Logo
             size="medium"
             key={'logoimg'}
@@ -129,9 +136,24 @@ const J40Footer = () => {
             heading={<p
               className={'j40-footer-logo-heading'}>
               {intl.formatMessage(messages.logotitle)}</p>}
-          />}
-      />
-    </>
+          />
+        </J40MainGridContainer>
+      </div>
+    </footer>
+  );
+};
+
+const NavSection = ({
+  links,
+}: {
+  links: React.ReactNode[]
+}): 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>
   );
 };
 
diff --git a/client/src/components/J40MainGridContainer.tsx b/client/src/components/J40MainGridContainer.tsx
index 9b9de73f..af5e7166 100644
--- a/client/src/components/J40MainGridContainer.tsx
+++ b/client/src/components/J40MainGridContainer.tsx
@@ -14,7 +14,7 @@ const J40MainGridContainer = ({
   children,
   fullWidth = false,
   blueBackground = false,
-  className = 'j40-grid-container '}: ILayoutProps) => {
+  className = ''}: ILayoutProps) => {
   // is it a blue background strip?
   className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
 
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 5b74762e..712afcd0 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -3,148 +3,138 @@
 exports[`J40Footer renders correctly 1`] = `
 <DocumentFragment>
   <footer
-    class="usa-footer usa-footer--big j40-footer"
+    class="j40-footer"
   >
     <div
       class="usa-footer__primary-section"
     >
       <div
-        class="grid-container"
+        class="grid-container-desktop-lg j40-grid-container "
         data-testid="gridContainer"
       >
         <div
-          class=""
-          data-testid="grid"
+          class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
         >
-          <nav
-            aria-label="Footer navigation"
-            class="usa-footer__nav"
+          <div
+            class="mobile-lg:grid-col-12 desktop:grid-col-4"
           >
-            <div
-              class="grid-row grid-gap-4"
+            <section
+              class="usa-footer__primary-content"
             >
-              <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
+              <h4
+                class="padding-top-1 padding-bottom-0"
               >
-                <section
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
-                >
-                  <h4
-                    class="usa-footer__primary-link"
-                  >
-                    Contact
-                  </h4>
-                  <ul
-                    class="usa-list usa-list--unstyled"
-                  >
-                    <li
-                      class="usa-footer__secondary-link"
-                    >
-                      <address
-                        class="usa-footer__address j40-footer-address"
-                      >
-                        <div
-                          class="usa-footer__contact-info grid-row grid-gap"
-                        >
-                          <div
-                            class="grid-col-auto"
-                          >
-                            730 Jackson Pl NW
-                          </div>
-                          <div
-                            class="grid-col-auto"
-                          >
-                            Washington, D.C. 20506
-                          </div>
-                          <div
-                            class="grid-col-auto"
-                          >
-                            (202) 395-5750
-                          </div>
-                        </div>
-                      </address>
-                    </li>
-                  </ul>
-                </section>
-              </div>
-              <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
+                Contact
+              </h4>
+              <ul
+                class="usa-list usa-list--unstyled padding-bottom-4"
               >
-                <section
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                <li
+                  class="usa-footer__secondary-link"
                 >
-                  <h4
-                    class="usa-footer__primary-link"
+                  <address
+                    class="usa-footer__address j40-footer-address"
                   >
-                    More information
-                  </h4>
-                  <ul
-                    class="usa-list usa-list--unstyled"
-                  >
-                    <li
-                      class="usa-footer__secondary-link"
+                    <div
+                      class="usa-footer__contact-info grid-row grid-gap"
                     >
-                      <a
-                        href="https://www.whitehouse.gov/"
-                        rel="noreferrer"
-                        target="_blank"
+                      <div
+                        class="grid-col-auto"
                       >
-                        Whitehouse.gov
-                      </a>
-                    </li>
-                    <li
-                      class="usa-footer__secondary-link"
-                    >
-                      <a
-                        href="https://www.whitehouse.gov/ceq/foia"
-                        rel="noreferrer"
-                        target="_blank"
+                        730 Jackson Pl NW
+                      </div>
+                      <div
+                        class="grid-col-auto"
                       >
-                        Freedom of Information Act (FOIA)
-                      </a>
-                    </li>
-                    <li
-                      class="usa-footer__secondary-link"
-                    >
-                      <a
-                        href="https://www.whitehouse.gov/privacy/"
-                        rel="noreferrer"
-                        target="_blank"
+                        Washington, D.C. 20506
+                      </div>
+                      <div
+                        class="grid-col-auto"
                       >
-                        Privacy Policy
-                      </a>
-                    </li>
-                  </ul>
-                </section>
-              </div>
-              <div
-                class="mobile-lg:grid-col-6 desktop:grid-col-3"
+                        (202) 395-5750
+                      </div>
+                    </div>
+                  </address>
+                </li>
+              </ul>
+            </section>
+          </div>
+          <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
-                  class="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                More information
+              </h4>
+              <ul
+                class="usa-list usa-list--unstyled padding-bottom-4"
+              >
+                <li
+                  class="usa-footer__secondary-link"
                 >
-                  <h4
-                    class="usa-footer__primary-link"
+                  <a
+                    href="https://www.whitehouse.gov/"
+                    rel="noreferrer"
+                    target="_blank"
                   >
-                    Have a question about government services?
-                  </h4>
-                  <ul
-                    class="usa-list usa-list--unstyled"
+                    Whitehouse.gov
+                  </a>
+                </li>
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    href="https://www.whitehouse.gov/ceq/foia"
+                    rel="noreferrer"
+                    target="_blank"
                   >
-                    <li
-                      class="usa-footer__secondary-link"
-                    >
-                      <a
-                        href="https://www.usa.gov/"
-                      >
-                        Find a contact at USA.gov
-                      </a>
-                    </li>
-                  </ul>
-                </section>
-              </div>
-            </div>
-          </nav>
+                    Freedom of Information Act (FOIA)
+                  </a>
+                </li>
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    href="https://www.whitehouse.gov/privacy/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Privacy Policy
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </div>
+          <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"
+              >
+                Have a question about government services?
+              </h4>
+              <ul
+                class="usa-list usa-list--unstyled padding-bottom-4"
+              >
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    href="https://www.usa.gov/"
+                  >
+                    Find a contact at USA.gov
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </div>
         </div>
       </div>
     </div>
@@ -152,7 +142,8 @@ exports[`J40Footer renders correctly 1`] = `
       class="usa-footer__secondary-section"
     >
       <div
-        class="grid-container"
+        class="grid-container-desktop-lg j40-grid-container "
+        data-testid="gridContainer"
       >
         <div
           class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"