diff --git a/src/assets/styles/_shared.scss b/src/assets/styles/_shared.scss
index 037526a98..04aee7bb2 100644
--- a/src/assets/styles/_shared.scss
+++ b/src/assets/styles/_shared.scss
@@ -63,6 +63,6 @@ pre,
 // Override DS wrapper match-content width to 1170px content with 30px gutters.
 .wrapper--match-content {
   @include respond-to-min($bp-sm-min) {
-    max-width: $grid-wrapper-width - ($grid-gutter-width * 2);
+    max-width: $grid-wrapper-width - ($grid-gutter-width * 2) !important;
   }
 }
diff --git a/src/components/Footer/back-to-top.tsx b/src/components/Footer/back-to-top.tsx
index 47eb71d5f..bc9baeff9 100644
--- a/src/components/Footer/back-to-top.tsx
+++ b/src/components/Footer/back-to-top.tsx
@@ -1,15 +1,13 @@
 import { JSX } from 'react';
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Icon } from '../Icon/icon';
-
+import Link from '../Link/link';
 export const BackToTop = (): JSX.Element => (
-  <a
-    className='a-btn a-btn--secondary o-footer__top-button'
-    data-gtm_ignore='true'
-    data-js-hook='behavior_return-to-top'
-    href='#'
-  >
-    Back to top
-    <Icon name='arrow-up' isPresentational />
-  </a>
+  <Link label="Back to top" 
+        isButton
+        className='a-btn--secondary a-btn--full-on-xs o-footer__top-button u-show-on-mobile u-mb45'
+        data-gtm_ignore='true'
+        data-js-hook='behavior_return-to-top'
+        data-testid='back-to-top'
+        href='#'
+        iconRight='arrow-up'/>
 );
diff --git a/src/components/Footer/footer-cf-gov.tsx b/src/components/Footer/footer-cf-gov.tsx
index 60f5915f5..315b3093f 100644
--- a/src/components/Footer/footer-cf-gov.tsx
+++ b/src/components/Footer/footer-cf-gov.tsx
@@ -1,6 +1,7 @@
 import { JSX } from 'react';
 import { Icon } from '../Icon/icon';
-import Footer from './footer';
+import Link from '../Link/link';
+import {WebsiteFooter} from './footer';
 
 interface FootCfGovProperties {
   cfLink?: string;
@@ -140,30 +141,25 @@ export const FooterCfGov = ({
   ];
 
   const linksCol3 = [
-    <a key='usa-gov' className='a-link a-link--icon' href='https://usa.gov/'>
-      <span className='a-link__text'>USA.gov</span>&nbsp;
-      <Icon
-        ariaLabel='External link'
-        name='external-link'
-        alt='External link'
-      />
-    </a>,
-    <a
+    <Link
+      key='usa-gov'
+      href='https://usa.gov/'
+      label='USA.gov'
+      iconRight='external-link'/>,
+    <Link
       key='inspector'
-      className='a-link a-link--icon'
       href='https://oig.federalreserve.gov/'
-    >
-      <span className='a-link__text'>Office of Inspector General</span>&nbsp;
-      <Icon
-        ariaLabel='External link'
-        name='external-link'
-        alt='External link'
-      />
-    </a>,
+      label='Office of Inspector General'
+      iconRight='external-link'/>,
+    <Link
+      key='archive'
+      href='https://archive-it.org/organizations/2800'
+      label='Public Archive'
+      iconRight='external-link'/>
   ];
 
   return (
-    <Footer
+    <WebsiteFooter
       {...properties}
       className={className}
       navLinks={navLinks}
diff --git a/src/components/Footer/footer-links.tsx b/src/components/Footer/footer-links.tsx
index aeac37676..6fc800b0b 100644
--- a/src/components/Footer/footer-links.tsx
+++ b/src/components/Footer/footer-links.tsx
@@ -16,8 +16,8 @@ export const NavLinks = ({ children }: WrapperProperties): JSXElement => {
   if (isEmptyArray(children)) return null;
 
   return (
-    <List className='o-footer__nav-list m-list--links m-list--horizontal'>
-      <ListItemBuilder itemClassname='m-list__link'>{children}</ListItemBuilder>
+    <List className='o-footer__nav-list m-list'>
+      <ListItemBuilder itemClassname='m-list__link a-link--jump'>{children}</ListItemBuilder>
     </List>
   );
 };
@@ -51,11 +51,12 @@ export const FooterLinksColumn = ({
 
   return (
     <div className='o-footer__col'>
-      <List className='o-footer__list'>
-        <ListItemBuilder itemClassname='m-list__link'>
+      <List className='o-footer__list m-list'>
+        <ListItemBuilder itemClassname='m-list__link a-link--jump'>
           {children}
         </ListItemBuilder>
       </List>
     </div>
   );
 };
+
diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index a3644630f..cf3bad60a 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,8 +1,8 @@
+@use 'sass:math';
 @use '/src/assets/styles/variables.scss' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;
-@use 'sass:math';
 
 // https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/unprocessed/css/organisms/footer.scss
 
@@ -21,38 +21,89 @@
     - cfgov-organisms
 */
 
+@mixin u-upper-hover-line() {
+  position: absolute;
+  top: -1px;
+  content: '';
+  display: block;
+  height: 1px;
+  width: 100%;
+  border-top: 1px solid currentcolor;
+}
+
 .o-footer {
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
-  padding-top: math.div(50px, $base-font-size-px) + em;
+  padding-top: math.div($grid-gutter-width * 1.5, $base-font-size-px) + rem;
 
   // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
-  padding-bottom: math.div(50px, $base-font-size-px) + em;
+  padding-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + rem;
   border-top: 5px solid var(--green);
   background: var(--gray-5);
 
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    // Tighten top spacing on mobile.
+    padding-top: math.div($grid-gutter-width, $base-font-size-px) + rem;
+
+    .m-list__link {
+      display: block;
+      box-sizing: border-box;
+      padding-top: math.div(10px, $base-font-size-px) + rem;
+      padding-bottom: math.div(10px, $base-font-size-px) + rem;
+      border-top-width: 1px;
+      border-bottom-width: 1px;
+
+      .a-link__text {
+        border-bottom: none;
+      }
+    }
+
+    // Handle the borders of jump links that are adjacent in a list.
+    .o-footer-middle-right .m-list__link:hover::before {
+      @include u-upper-hover-line;
+    }
+
+    li:has(.m-list__link) + li:has(.m-list__link) {
+      .m-list__link {
+        position: relative;
+        border-top: none;
+      }
+
+      .m-list__link:hover::before {
+        @include u-upper-hover-line;
+      }
+    }
+  }
+
   &__nav-list {
+    padding-left: 0;
+    list-style-type: none;
+
     .m-list__link {
+      margin-left: 0;
       font-size: math.div(18px, $base-font-size-px) + em;
 
       @include u-link-colors(var(--black));
 
+      // Tablet and above.
       @include respond-to-min($bp-sm-min) {
         margin-right: 1em;
 
         @include u-link-hover-border;
       }
 
+      // Desktop and above.
       @include respond-to-min($bp-med-min) {
         margin-right: math.div($grid-gutter-width, 22px) + em;
-        font-size: math.div(20px, $base-font-size-px) + em;
       }
     }
 
     .m-list__link.m-list__link--disabled {
       border-bottom: 1px dotted;
 
+      // Desktop and above.
       @include respond-to-min($bp-med-min) {
         @include u-link-no-border;
       }
@@ -60,42 +111,49 @@
   }
 
   &__list {
+    padding-left: 0;
+    list-style-type: none;
+
     .m-list__link {
+      margin-left: 0;
+
       @include u-link-colors(var(--gray-dark));
     }
   }
 
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    // This is essentially .m-list--links.
+    &__nav-list .m-list__item,
+    &__list .m-list__item {
+      margin-bottom: 0;
+    }
+  }
+
   &__pre {
     position: relative;
-    margin-bottom: math.div(45px, $base-font-size-px) + em;
-
-    .o-footer__top-button {
-      display: block;
-      width: 100%;
-      text-align: center;
-
-      // There's a standard margin between the top
-      // of the footer and the links. The button comes between
-      // that margin in the wireframes.
-      margin: -2em auto 2em;
-    }
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
 
     .o-footer__nav-list {
       margin-bottom: 0;
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
-      margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
-
       border-bottom: 1px solid var(--gray-40);
 
-      .o-footer__top-button {
-        display: none;
-      }
-
       .o-footer__nav-list {
+        padding-left: 0;
+        list-style-type: none;
+
         .m-list__item {
+          margin-left: 0;
+          display: inline-block;
+
+          // Assuming a natural space of 4px between inline block items
+          // then the space between would be 8px (4px natural + 4px added).
+          margin-right: math.div(4px, $base-font-size-px) + em;
           margin-bottom: 0;
         }
       }
@@ -115,8 +173,9 @@
       margin: 0;
     }
 
-    /* Fix doubled border in mobile view */
+    // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      // Fix doubled border in mobile view.
       .o-footer__col:nth-child(n + 2) {
         .o-footer__list {
           .m-list__item .m-list__link {
@@ -126,7 +185,9 @@
       }
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
+      
       @include u-grid-column(8);
       border-right: 1px solid var(--gray-40);
       border-left: 0;
@@ -138,7 +199,8 @@
         padding-right: math.div(
             math.div($grid-gutter-width, 2),
             $base-font-size-px
-          ) + em;
+          ) +
+          em;
       }
     }
 
@@ -151,8 +213,12 @@
   }
 
   &__middle-right {
-    /* Fix doubled border in mobile view */
+    // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      // Fix missing top line hover.
+      position: relative;
+
+      // Fix doubled border in mobile view.
       .o-footer__list {
         .m-list__item .m-list__link {
           border-top-width: 0;
@@ -160,6 +226,7 @@
       }
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       @include u-grid-column(4);
 
@@ -178,8 +245,9 @@
   }
 
   &__post {
-    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+    margin-top: math.div($grid-gutter-width * 1.5, $base-font-size-px) + em;
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       border-top: 1px solid var(--gray-40);
@@ -191,27 +259,19 @@
       margin: 0;
     }
   }
-}
-
-/* topdoc
-    name: EOF
-    eof: true
-*/
 
-.o-footer .cf-icon-svg--external-link {
-  margin-left: 3px;
-}
+  // Layout classes for the ApplicationFooter
+  &__content {
+    display: grid;
+    gap: math.div($grid-gutter-width, $base-font-size-px) + em;
 
-@media (max-width: $bp-sm-min - 1) {
-  .o-footer {
-    .m-list__link,
-    .o-footer-post,
-    .m-social-media {
-      padding-left: $space-sm;
-    }
+    @include respond-to-min($bp-sm-min) {
+      gap: math.div($grid-gutter-width * 2, $base-font-size-px) + em;;
+      grid-template-columns: 2fr 1fr;
 
-    .o-footer__top-button {
-      width: 95%;
+      .o-footer__right-column {
+        text-align: right;
+      }
     }
   }
 }
diff --git a/src/components/Footer/footer.stories.tsx b/src/components/Footer/footer.stories.tsx
index 301f9fe28..01f58f525 100644
--- a/src/components/Footer/footer.stories.tsx
+++ b/src/components/Footer/footer.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { JSX } from 'react';
-import { Footer, FooterCfGov, Icon } from '~/src/index';
+import { ApplicationFooter, Footer, FooterCfGov, Heading, Link, Paragraph } from '../../index';
 
 const meta: Meta<typeof Footer> = {
   title: 'Components (Draft)/Footers',
@@ -13,45 +12,32 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const makeLink = (label: string, isExternal?: boolean): JSX.Element => (
-  <a
-    key={label}
-    href={globalThis.location.href}
-    className={`m-list__link a-link ${isExternal ? 'a-link--icon' : ''}`}
-  >
-    <span className='a-link__text'>{label}</span>
-    {isExternal ? <Icon name='external-link' alt='External link' /> : null}
-  </a>
-);
-
-const makeSocialLink = (label: string): JSX.Element => (
-  <a key={label} href={globalThis.location.href}>
-    <Icon name={label} withBg />
-  </a>
-);
-
-export const Example: Story = {
-  args: {
-    navLinks: [makeLink('Nav 1'), makeLink('Nav 2'), makeLink('Nav 3')],
-    socialLinks: [makeSocialLink('facebook'), makeSocialLink('youtube')],
-    linksCol1: [
-      makeLink('Col1 Link 1'),
-      makeLink('Col1 Link 2'),
-      makeLink('Col1 Link 3'),
-    ],
-    linksCol2: [
-      makeLink('Col2 Link 1'),
-      makeLink('Col2 Link 2'),
-      makeLink('Col2 Link 3'),
-    ],
-    linksCol3: [
-      makeLink('Col3 Link 1', true),
-      makeLink('Col3 Link 2', true),
-      makeLink('Col3 Link 3', true),
-    ],
-  },
-};
-
 export const CFGov: Story = {
+  name: 'Website (cf.gov)',
   render: () => <FooterCfGov />,
 };
+
+export const App: Story = {
+  name: 'Application',
+  render: () => (
+    <ApplicationFooter 
+      navLinks={[
+        <Link label='Link 1' key='link_1' href='#'/>,
+        <Link label='Longer link 2' key='link_2' href='#'/>,
+      ]}
+      footerContent={
+        <>
+          <Heading type='3'>Heading</Heading>
+          <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Paragraph>
+          <Link href='#'>Link</Link>
+        </>
+    }/>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A minimal two-column footer for use in applications. The left column can contain information about the app, and the right column is for relevant links.',
+      },
+    },
+  }
+};
diff --git a/src/components/Footer/footer.test.tsx b/src/components/Footer/footer.test.tsx
index 5f59633cd..ea8bfd594 100644
--- a/src/components/Footer/footer.test.tsx
+++ b/src/components/Footer/footer.test.tsx
@@ -1,10 +1,19 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import Footer from './footer';
+import {Footer, ApplicationFooter, WebsiteFooter} from './footer';
 
 describe('Footer', () => {
+  it('Renders with content', () => {
+    render(<Footer data-testid='basic-footer'><p>Footer content</p></Footer>);
+    const basicFooter = screen.getByTestId('basic-footer');
+    expect(basicFooter).toHaveClass('o-footer');
+    expect(basicFooter).toHaveTextContent('Footer content');
+  });
+});
+
+describe('WebsiteFooter', () => {
   it('Skips empty lists', () => {
-    render(<Footer />);
+    render(<WebsiteFooter />);
 
     // List not rendered
     const list = screen.queryAllByRole('list');
@@ -34,7 +43,7 @@ describe('Footer', () => {
         Link 3
       </a>,
     ];
-    render(<Footer navLinks={navLink} />);
+    render(<WebsiteFooter navLinks={navLink} />);
 
     // // List rendered
     const list = screen.getAllByRole('list');
@@ -55,7 +64,7 @@ describe('Footer', () => {
         Link 1
       </a>,
     ];
-    render(<Footer socialLinks={socialLink} />);
+    render(<WebsiteFooter socialLinks={socialLink} />);
 
     // // List rendered
     const list = screen.getAllByRole('list');
@@ -77,7 +86,7 @@ describe('Footer', () => {
       </a>,
     ];
     render(
-      <Footer
+      <WebsiteFooter
         linksCol1={socialLink}
         linksCol2={socialLink}
         linksCol3={socialLink}
@@ -94,3 +103,43 @@ describe('Footer', () => {
     expect(items.length).toEqual(expectedItemCount);
   });
 });
+
+describe('ApplicationFooter', () => {
+  it('Renders content and navLinks', () => {
+    const expectedClassName = /o-footer__list/g;
+    const expectedItemCount = 3;
+
+    const navLinks = [
+      <a href='/' className='link1' key='link1'>
+        Link 1
+      </a>,
+      <a href='/' className='link2' key='link2'>
+        Link 2
+      </a>,
+      <a href='/' className='link3' key='link3'>
+        Link 3
+      </a>,
+    ];
+    const content = (<h3>About this app</h3>)
+    render(<ApplicationFooter navLinks={navLinks} footerContent={content}/>);
+
+    // Nav links rendered
+    const list = screen.getAllByRole('list');
+    expect(list.length).toEqual(1);
+    expect(list[0].className).toMatch(expectedClassName);
+    const items = screen.getAllByRole('listitem');
+    expect(items.length).toEqual(expectedItemCount);
+
+    // Footer content rendered
+    const contentSection = screen.getByTestId('footer-content');
+    expect(contentSection).toHaveTextContent('About this app');
+
+    // Tagline rendered
+    const tagline = screen.getByTestId('footer-tagline');
+    expect(tagline).toBeInTheDocument();
+
+    // Back to top button rendered
+    const backToTop = screen.getByTestId('back-to-top');
+    expect(backToTop).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Footer/footer.tsx b/src/components/Footer/footer.tsx
index 565c62c49..b722548d2 100644
--- a/src/components/Footer/footer.tsx
+++ b/src/components/Footer/footer.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { JSX } from 'react';
+import { JSX, ReactNode } from 'react';
 import type { HTMLProps } from 'react';
 import { BackToTop } from './back-to-top';
 import { FooterBanner } from './footer-banner';
@@ -8,6 +8,29 @@ import './footer.scss';
 import './social-media.scss';
 
 interface FooterProperties extends HTMLProps<HTMLElement> {
+  children?: ReactNode
+}
+
+export function Footer({
+  children,
+  className,
+  ...properties
+}: FooterProperties): JSX.Element {
+  const classes = ['o-footer', className];
+
+  return (
+    <footer
+      className={classnames(classes)}
+      data-js-hook='state_atomic_init'
+      {...properties}>
+      <div className='wrapper wrapper--match-content'>
+        {children}
+      </div>
+    </footer>
+  );
+}
+
+interface WebsiteFooterProperties extends HTMLProps<HTMLElement> {
   navLinks?: JSX.Element[];
   socialLinks?: JSX.Element[];
   linksCol1?: JSX.Element[];
@@ -18,7 +41,7 @@ interface FooterProperties extends HTMLProps<HTMLElement> {
 /**
  * Simply define the anchor elements for each section to compose your Footer
  */
-export default function Footer({
+export function WebsiteFooter({
   navLinks = [],
   socialLinks = [],
   linksCol1 = [],
@@ -26,16 +49,12 @@ export default function Footer({
   linksCol3 = [],
   className,
   ...properties
-}: FooterProperties): JSX.Element {
-  const classes = ['o-footer', className];
+}: WebsiteFooterProperties): JSX.Element {
 
   return (
-    <footer
-      className={classnames(classes)}
-      data-js-hook='state_atomic_init'
-      {...properties}
-    >
-      <div className='wrapper wrapper--match-content'>
+    <Footer
+      className={className}
+      {...properties}>
         <div className='o-footer__pre'>
           <BackToTop />
           <NavLinks>{navLinks}</NavLinks>
@@ -50,9 +69,41 @@ export default function Footer({
         <div className='o-footer__middle-right'>
           <FooterLinksColumn>{linksCol3}</FooterLinksColumn>
         </div>
+        <FooterBanner />
+    </Footer>
+  );
+}
+
+interface ApplicationFooterProperties extends HTMLProps<HTMLElement> {
+  footerContent?: JSX.Element | string;
+  navLinks?: JSX.Element[];
+}
 
+/**
+ * A minimal two-column footer for use in applications. 
+ * The left column can contain information about the app, 
+ * and the right column is for relevant links.
+ */
+export function ApplicationFooter({
+  footerContent,
+  navLinks = [],
+  className,
+  ...properties
+}: ApplicationFooterProperties): JSX.Element {
+  return (
+    <Footer
+      className={className}
+      {...properties}>
+        <BackToTop />
+        <div className='o-footer__content'>
+          <div className='o-footer__left-column'>
+            <div data-testid='footer-content'>{footerContent}</div>
+          </div>
+          <div className='o-footer__right-column'>
+            <FooterLinksColumn>{navLinks}</FooterLinksColumn>
+          </div>
+        </div>
         <FooterBanner />
-      </div>
-    </footer>
+    </Footer>
   );
 }
diff --git a/src/index.ts b/src/index.ts
index 3a0810699..093156319 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,7 +13,7 @@ export { Divider } from './components/Divider/divider';
 export { Expandable } from './components/Expandable/expandable';
 export { ExpandableGroup } from './components/Expandable/expandable-group';
 export { Fieldset } from './components/Fieldset/fieldset';
-export { default as Footer } from './components/Footer/footer';
+export { Footer, WebsiteFooter, ApplicationFooter } from './components/Footer/footer';
 export { FooterCfGov } from './components/Footer/footer-cf-gov';
 export { default as Grid } from './components/Grid';
 export { Header } from './components/Header/header';