diff --git a/src/components/ButtonGroup/ButtonGroup-v2.module.css b/src/components/ButtonGroup/ButtonGroup-v2.module.css
new file mode 100644
index 000000000..630c4e430
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup-v2.module.css
@@ -0,0 +1,28 @@
+/*------------------------------------*\
+    # BUTTON GROUP
+\*------------------------------------*/
+
+/**
+ * A group of buttons displayed in an organized fashion.
+ */
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  gap: 0.5rem;
+}
+
+.button-group--horizontal {
+  flex-direction: row-reverse;
+}
+
+.button-group--vertical {
+  flex-direction: column;
+  align-content: center;
+}
+
+.button-group--horizontal-progressive {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx b/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx
new file mode 100644
index 000000000..6d4701170
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup-v2.stories.tsx
@@ -0,0 +1,60 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { ButtonGroup } from './ButtonGroup-v2';
+import { ButtonV2 as Button } from '../Button';
+
+export default {
+  title: 'Components/V2/ButtonGroup',
+  component: ButtonGroup,
+  args: {
+    orientation: 'horizontal',
+    children: (
+      <>
+        <Button rank="primary">Button 1</Button>
+        <Button rank="secondary">Button 2</Button>
+      </>
+    ),
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: null,
+      },
+    },
+  },
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof ButtonGroup>;
+
+export const Default: StoryObj<Args> = {};
+
+export const Vertical: StoryObj<Args> = {
+  args: {
+    buttonLayout: 'vertical',
+  },
+};
+
+export const HorizontalProgressive: StoryObj<Args> = {
+  args: {
+    buttonLayout: 'horizontal-progressive',
+  },
+};
+
+export const WithFiveButtons: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+        <Button>Button 4</Button>
+        <Button rank="primary">Button 5</Button>
+      </>
+    ),
+  },
+};
diff --git a/src/components/ButtonGroup/ButtonGroup-v2.tsx b/src/components/ButtonGroup/ButtonGroup-v2.tsx
new file mode 100644
index 000000000..679010ae0
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup-v2.tsx
@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import styles from './ButtonGroup-v2.module.css';
+
+type ButtonGroupProps = {
+  // Component API
+  /**
+   * The buttons. Should not be wrapped in another element – we just want the buttons.
+   */
+  children: ReactNode;
+  /**
+   * Additional classnames passed in for styling.
+   *
+   * This will be applied to the container we're placing around the buttons.
+   */
+  className?: string;
+  // Design API
+  /**
+   * Whether the buttons should be laid out horizontally or stacked vertically (along with relative button position).
+   */
+  buttonLayout?: 'horizontal' | 'vertical' | 'horizontal-progressive';
+};
+
+/**
+ * `import {ButtonGroup} from "@chanzuckerberg/eds";`
+ *
+ * A container for buttons grouped together horizontally or vertically.
+ */
+export function ButtonGroup({
+  children,
+  className,
+  buttonLayout = 'horizontal',
+}: ButtonGroupProps) {
+  const componentClassName = clsx(
+    styles['button-group'],
+    buttonLayout && styles[`button-group--${buttonLayout}`],
+    className,
+  );
+
+  return <div className={componentClassName}>{children}</div>;
+}
diff --git a/src/components/ButtonGroup/index.ts b/src/components/ButtonGroup/index.ts
index 6c6477b12..02bd9b97a 100644
--- a/src/components/ButtonGroup/index.ts
+++ b/src/components/ButtonGroup/index.ts
@@ -1 +1,2 @@
 export { ButtonGroup as default } from './ButtonGroup';
+export { ButtonGroup as ButtonGroupV2 } from './ButtonGroup-v2';
diff --git a/src/components/Modal/Modal-v2.module.css b/src/components/Modal/Modal-v2.module.css
new file mode 100755
index 000000000..95badd40a
--- /dev/null
+++ b/src/components/Modal/Modal-v2.module.css
@@ -0,0 +1,212 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # MODAL
+\*------------------------------------*/
+
+/**
+ * The modal wrapper and overlay which takes up the entire screen.
+ */
+.modal,
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh; /* TODO-AH: make sure this doesn't spill out of the container */
+  width: 100%;
+}
+
+/**
+ * The inverted background of the modal to provide contrast with the actual modal.
+ */
+.modal__overlay {
+  /* TODO-AH: opacity of color based on 50% */
+  background-color: var(--eds-theme-color-background-utility-overlay-low-emphasis);
+  opacity: 0.5;
+}
+
+/**
+ * The modal container which positions the modal in the center of the screen.
+ */
+.modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+
+  /**
+   * Ensures modal is above other components. This is not a design token for now since we need to align on 
+   * z-indeces across the system
+   */
+  z-index: 1050;
+}
+
+/**
+ * Modal transition animations.
+ */
+.modal__transition--enter {
+  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.modal__transition--enterFrom {
+  opacity: 0;
+}
+
+.modal__transition--enterTo {
+  opacity: 1;
+}
+
+.modal__transition--leave {
+  transition: opacity var(--eds-anim-fade-long) var(--eds-anim-ease);
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.modal__transition--leaveFrom {
+  opacity: 1;
+}
+
+.modal__transition--leaveTo {
+  opacity: 0;
+}
+
+/**
+ * The content of the modal, which can wrap header, body, and footer.
+ */
+.modal__content {
+  position: relative;
+  height: 43.125rem;
+  max-height: 90vh;
+  overflow: hidden;
+  
+  /** 
+  * This transparent border is for Window High Contrast Mode, which removes all
+  * background colors but makes borders 100% opacity black. Without this, the
+  * modal would have no clear boundary. 
+  */
+  border: var(--eds-theme-form-border-width) transparent var(--eds-theme-color-background-utility-container);
+  
+  display: flex;
+  flex-direction: column;
+  
+  width: 22.5rem;
+
+  background-color: var(--eds-theme-color-background-utility-container);
+}
+
+/**
+ * The medium modal size used for the md modal.
+ * Also used for the lg modal size for when the screen size is smaller than 75rem.
+ */
+.modal__content--md {
+  @media all and (min-width: $eds-bp-md) {
+    width: 42rem;
+  }
+}
+
+/**
+ * The large modal size used for the lg/default modal.
+ */
+.modal__content--lg {
+  @media all and (min-width: $eds-bp-xl) {
+    width: 64rem;
+    --modal-horizontal-padding: 4rem;
+  }
+}
+
+/**
+ * Allows scrolling of the modal content except for sticky footer.
+ * This functionality is our intended scroll behavior but consuming teams can 
+ * style the body content as they wish to handle overflow in various ways.
+ */
+.modal__content--scrollable {
+  overflow: auto;
+}
+
+/**
+ * The modal close button.
+ * TODO-AH: this should be a `Button`
+ */
+.modal__close-button {
+  border: 0;
+  background-color: transparent;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 3rem;
+  height: 3rem;
+
+  cursor: pointer;
+
+  z-index: 1;
+
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+/**
+ * The modal close icon that resides in the close button.
+ */
+.modal__close-icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+/*------------------------------------*\
+    # MODAL BODY
+\*------------------------------------*/
+
+/**
+ * The body of the modal
+ */
+ .modal-body {
+  flex: 1;
+  padding: 0 2rem;
+}
+
+/*------------------------------------*\
+    # MODAL FOOTER
+\*------------------------------------*/
+
+/**
+ * Footer for the modal.
+ */
+ .modal-footer {
+  width: 100%;
+  z-index: 1000;
+
+  padding: 1.5rem 2rem;
+
+  background-color: var(--eds-theme-color-background-utility-container);
+}
+
+.modal-footer--sticky {
+  position: sticky;
+  bottom: 0;
+
+  /* TODO-AH: bring in scrollwrapper to handle show/hide of visible elevation (and which box shadow to apply) */
+  box-shadow: var(--eds-box-shadow-xl);
+}
+
+/*------------------------------------*\
+    # MODAL HEADER
+\*------------------------------------*/
+
+/**
+ * Header for the modal.
+ */
+ .modal-header {
+  width: 100%;
+
+  padding: 1.5rem 2rem;
+}
+
+.modal-sub-title {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
\ No newline at end of file
diff --git a/src/components/Modal/Modal-v2.stories.tsx b/src/components/Modal/Modal-v2.stories.tsx
new file mode 100644
index 000000000..6d15715d3
--- /dev/null
+++ b/src/components/Modal/Modal-v2.stories.tsx
@@ -0,0 +1,478 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+import { useState } from 'react';
+
+import { Modal, ModalContent } from './Modal-v2';
+import { Heading, Text } from '../../';
+import { chromaticViewports, storybookViewports } from '../../util/viewports';
+import { ButtonV2 as Button } from '../Button';
+import { ButtonGroupV2 as ButtonGroup } from '../ButtonGroup';
+import { TooltipV2 as Tooltip } from '../Tooltip';
+
+export default {
+  title: 'Components/V2/Modal',
+  component: Modal,
+  parameters: {
+    // The modal is initially closed for most of these stories,
+    // which renders testing it for visual regressions unhelpful.
+    chromatic: { disableSnapshot: true },
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    // For some reason, storybook is not able to pick up the doc.s automatically. Adding manually.
+    children: {
+      control: {
+        type: null,
+      },
+      description:
+        'Contains the sub-components for a Modal, including `.Header` , `.Title` , `.Body` , `.Footer` , `.Stepper`',
+    },
+    open: {
+      type: 'boolean',
+      description: 'Whether or not the modal is visible.',
+    },
+    hideCloseButton: {
+      description:
+        'Hides the close button in the top right of the modal. **Default is `false`**.',
+      type: 'boolean',
+    },
+    isScrollable: {
+      description:
+        'Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.',
+      type: 'boolean',
+    },
+  },
+  decorators: [(Story) => <div className="p-8">{Story()}</div>],
+} as Meta<typeof Modal>;
+
+type Args = React.ComponentProps<typeof Modal>;
+type Story = StoryObj<typeof Modal>;
+type InteractiveArgs = Omit<Args, 'onClose' | 'open'>;
+
+/**
+ * Wrapper for triggering `Modal` with a button
+ * @param args
+ * @returns
+ */
+function InteractiveExample(args: InteractiveArgs) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} rank="primary">
+        Open the modal
+      </Button>
+
+      <Modal {...args} onClose={() => setOpen(false)} open={open} />
+    </>
+  );
+}
+
+/**
+ * Clicking on a trigger item (in this case `Button`) will cause a modal to open.
+ *
+ * **Note**: this only works from certain screens in Storybook. If it doesn't work as expected, view from the
+ * "docs" sub-page.
+ */
+export const Default: StoryObj<Args> = {
+  render: (args) => (
+    <InteractiveExample {...args}>
+      <Modal.Header>
+        <Modal.Title>Modal Title</Modal.Title>
+        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="fpo h-full w-full">Modal Content</div>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup>
+          {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+          <Tooltip text="Tooltip should spawn on top of modal">
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </Tooltip>
+          <Button onClick={() => {}} rank="secondary">
+            Secondary
+          </Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </InteractiveExample>
+  ),
+};
+
+/**
+ * Modals can contain long, scrollable text. This is not recommended, however.
+ */
+export const WithLongTextScrollable: StoryObj<InteractiveArgs> = {
+  args: {
+    isScrollable: true,
+  },
+  render: (args) => (
+    <InteractiveExample {...args}>
+      <Modal.Header>
+        <Modal.Title>Modal Title</Modal.Title>
+        <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+      </Modal.Header>
+      <Modal.Body>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam
+          diam quis dolor maximus, non tincidunt lacus facilisis. Praesent ac
+          vestibulum diam. Sed ac orci fringilla, ullamcorper quam nec,
+          elementum turpis. Orci varius natoque penatibus et magnis dis
+          parturient montes, nascetur ridiculus mus. Curabitur et vulputate leo.
+          Phasellus convallis ante at augue iaculis, quis consectetur dolor
+          placerat. Nulla ornare malesuada elit eu faucibus. Mauris ultricies
+          tincidunt eleifend. Aliquam erat volutpat. Morbi nec ipsum sed sem
+          facilisis tristique nec et ligula. Vivamus id feugiat sapien.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Nam ac tincidunt arcu. Nam non metus sem. Morbi eleifend metus vel
+          venenatis accumsan. Vestibulum pharetra, ante quis sollicitudin
+          aliquam, orci ex pretium ipsum, congue rhoncus dui orci sed velit.
+          Cras ac leo vel massa rutrum auctor eget sed orci. Aenean id nisi
+          consectetur, dapibus tellus ut, finibus metus. Integer tristique est
+          vitae lectus suscipit, ut vulputate est fringilla. Donec pharetra
+          facilisis erat at venenatis. Etiam faucibus dignissim leo eget congue.
+          Sed vehicula imperdiet neque id gravida. Proin volutpat tortor quis
+          quam molestie, faucibus condimentum ante sagittis. Suspendisse sit
+          amet luctus tellus. Suspendisse a sapien hendrerit eros dictum
+          faucibus. Vivamus pretium vel sem faucibus tristique. Integer iaculis
+          pellentesque nunc ac pellentesque.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Integer mollis, urna eget sollicitudin laoreet, nunc elit facilisis
+          urna, ut finibus est mi eu quam. Nam ac venenatis massa. Vestibulum
+          suscipit ac ligula venenatis scelerisque. Fusce rutrum nulla lectus,
+          sed dignissim ipsum faucibus sodales. Suspendisse id aliquet quam.
+          Maecenas facilisis mauris dolor, id accumsan ex vehicula in. In nisl
+          ligula, fringilla in enim nec, lobortis sollicitudin purus. Aliquam
+          vehicula euismod enim quis finibus. Fusce ornare tortor malesuada,
+          consequat magna quis, porta dolor. Donec quis nisl ac sem dictum
+          semper quis vel turpis. Proin sed leo in ante rhoncus pellentesque a
+          eu urna. Phasellus consequat lectus et hendrerit luctus. Lorem ipsum
+          dolor sit amet, consectetur adipiscing elit.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" preset="body-lg">
+          Suspendisse vitae eros elit. Maecenas id urna tempus, tempus turpis
+          id, blandit turpis. Fusce augue quam, pellentesque et suscipit
+          consectetur, pharetra in mi. Suspendisse non ultricies purus. Integer
+          dignissim condimentum sem ac porta. Vivamus viverra congue massa,
+          vitae fermentum est scelerisque et. Duis a urna vitae odio semper
+          dictum a sed nisl. In fringilla hendrerit massa, at luctus arcu
+          tincidunt nec. Donec gravida, mauris sit amet porta lobortis, justo
+          sem vehicula ipsum, at pretium sem leo sed libero. Morbi tristique
+          rhoncus suscipit. Nullam at malesuada sapien. Nam in egestas tellus.
+          Nulla quis metus dui. Suspendisse sit amet nisi at lectus ultricies
+          egestas.
+        </Text>
+        <Heading as="h3">Title text</Heading>
+        <Text as="p" className="mb-0" preset="body-lg">
+          Integer pulvinar felis sit amet dignissim fermentum. Nulla sodales
+          enim mi, varius feugiat sapien congue eget. Morbi vitae ipsum non
+          ligula eleifend molestie. Aenean bibendum tortor sapien, quis volutpat
+          ante ultricies id. Morbi varius dolor ac ante posuere, sit amet
+          tincidunt lectus pulvinar. Proin id efficitur neque. Nullam vel
+          feugiat dui. Curabitur imperdiet lacinia eros, ac iaculis odio.
+          Praesent quis pretium sapien, quis posuere lectus. Proin eleifend
+          purus nec massa aliquam commodo. Quisque auctor suscipit ex sed
+          tristique. Sed eget ultrices est. Suspendisse nunc justo, dapibus at
+          eros ac, rutrum vestibulum est.
+        </Text>
+      </Modal.Body>
+      <Modal.Footer>
+        <ButtonGroup>
+          {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+          <Tooltip text="Tooltip should spawn on top of modal">
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
+          </Tooltip>
+          <Button onClick={() => {}} rank="secondary">
+            Secondary
+          </Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </InteractiveExample>
+  ),
+};
+
+/**
+ * The default modal experience's Content area (the modal itself). The following stories show how the modal
+ * will render in various contexts and with various props set.
+ *
+ * When viewing code, This will use `<Header>` directly, to demonstrate composition. When building `Modal`s, use
+ * `Modal.Title` instead.
+ *
+ * **NOTE**: The order of the buttons puts the primary to the far bottom and right of the modal, per
+ * macOS conventions and style guide.
+ */
+export const ContentDefault: Story = {
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+  args: {
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Tooltip text="Tooltip should spawn on top of modal">
+              <Button onClick={() => {}} rank="primary">
+                Primary Action
+              </Button>
+            </Tooltip>
+            <Button onClick={() => {}} rank="secondary">
+              Secondary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+    hideCloseButton: false,
+    open: true,
+  },
+  parameters: {
+    // This story shows the modal content by default, for visual regression testing purposes.
+    chromatic: { disableSnapshot: false },
+  },
+};
+
+/**
+ * `Modal` provides `size`, which allows control over the natural width of the modal. This does not affect the contents
+ * of the modal.
+ */
+export const Medium: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'md',
+  },
+};
+
+/**
+ * `Modal` also allows for `small`.
+ */
+export const Small: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'sm',
+  },
+};
+
+/**
+ * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
+ * Make sure to match the Button width style by using `isFullWidth`.
+ */
+export const LayoutVertical: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'md',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup buttonLayout="vertical">
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Tooltip text="Tooltip should spawn on top of modal">
+              <Button isFullWidth onClick={() => {}} rank="primary">
+                Primary Action
+              </Button>
+            </Tooltip>
+            <Button isFullWidth onClick={() => {}} rank="secondary">
+              Secondary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Buttons can have a vertical alignment in the footer. For this, use `ButtonGroup` with the `buttonLayout` = `vertical`.
+ * Make sure to match the Button width style by using `isFullWidth`.
+ */
+export const LayoutVerticalWithTertiary: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'md',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup buttonLayout="vertical">
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Tooltip text="Tooltip should spawn on top of modal">
+              <Button isFullWidth onClick={() => {}} rank="primary">
+                Primary Action
+              </Button>
+            </Tooltip>
+            <Button isFullWidth onClick={() => {}} rank="tertiary">
+              Tertiary
+            </Button>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Modals can have destructive behavior. Use the 'critical' button variant.
+ */
+export const WithCriticalButton: Story = {
+  ...ContentDefault,
+  args: {
+    ...ContentDefault.args,
+    size: 'md',
+    children: (
+      <>
+        <Modal.Header>
+          <Heading as="h2">Modal Title</Heading>
+          <Modal.SubTitle>Modal Sub-title</Modal.SubTitle>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fpo h-full w-full">Modal Content</div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ButtonGroup>
+            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
+            <Tooltip text="Tooltip should spawn on top of modal">
+              <Button onClick={() => {}} rank="primary" variant="critical">
+                Critical Action
+              </Button>
+            </Tooltip>
+          </ButtonGroup>
+        </Modal.Footer>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="absolute h-full w-full bg-utility-overlay-lowEmphasis opacity-50" />
+      <ModalContent
+        {...args}
+        data-testid="non-interactive"
+        onClose={() => {}}
+      />
+    </div>
+  ),
+};
+
+/**
+ * This shows the responsive layout in a mobile viewport
+ */
+export const Mobile: Story = {
+  ...ContentDefault,
+  parameters: {
+    ...ContentDefault.parameters,
+    viewport: {
+      defaultViewport: 'googlePixel2',
+    },
+    chromatic: {
+      disableSnapshot: false,
+      viewports: [chromaticViewports.googlePixel2],
+    },
+  },
+};
+
+/**
+ * This shows the responsive layout in a mobile (landscape) viewport
+ */
+export const MobileLandscape: Story = {
+  ...ContentDefault,
+  parameters: {
+    ...ContentDefault.parameters,
+    viewport: {
+      defaultViewport: 'mobilelandscape',
+      viewports: {
+        mobilelandscape: {
+          name: 'Mobile Landscape',
+          styles: {
+            width: '896px',
+            height: '414px',
+          },
+        },
+      },
+      /**
+       * Chromatic sets viewport height to 900px, hence won't snap as necessary
+       */
+      chromatic: { disableSnapshot: true },
+    },
+  },
+};
+
+/**
+ * This shows the responsive layout in a tablet viewport
+ */
+export const Tablet: Story = {
+  ...ContentDefault,
+  parameters: {
+    ...ContentDefault.parameters,
+    viewport: {
+      defaultViewport: 'ipadMini',
+      viewports: {
+        mobilelandscape: storybookViewports.ipadMini,
+      },
+    },
+    chromatic: {
+      disableSnapshot: false,
+      viewports: [chromaticViewports.ipadMini],
+    },
+  },
+};
diff --git a/src/components/Modal/Modal-v2.tsx b/src/components/Modal/Modal-v2.tsx
new file mode 100644
index 000000000..72be4dbd8
--- /dev/null
+++ b/src/components/Modal/Modal-v2.tsx
@@ -0,0 +1,434 @@
+import { Dialog, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import type { MutableRefObject, ReactNode } from 'react';
+import React from 'react';
+
+import type { ExtractProps } from '../../util/utility-types';
+import type { Size } from '../../util/variant-types';
+import Heading from '../Heading';
+import { Icon } from '../Icon/Icon';
+import Text from '../Text';
+
+import styles from './Modal-v2.module.css';
+
+type ModalContentProps = {
+  // Component API
+  /**
+   * Optional aria-label for the modal.
+   *
+   * If undefined, the headingText of the Modal.Header will be used.
+   * If there is no Modal.Header, an aria-label is required.
+   */
+  'aria-label'?: string;
+  /**
+   * Additional classnames passed in for styling.
+   */
+  className?: string;
+  /**
+   * Contents of the modal.
+   */
+  children: ReactNode;
+  /**
+   * Hides the close button in the top right of the modal.
+   *
+   * **Default is `false`**.
+   */
+  hideCloseButton?: boolean;
+  /**
+   * A ref to an element that should receive focus when the modal first opens.
+   *
+   * If undefined, the first focusable element (usually the close button) will be used.
+   *
+   * ```
+   * const inputFieldRef = useRef();
+   *
+   * <Modal initialFocus={inputFieldRef}>
+   *   ...
+   *   <InputField ref={inputFieldRef} />
+   * </Modal>
+   * ```
+   */
+  initialFocus?: MutableRefObject<HTMLElement | null>;
+  /**
+   * Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.
+   * Also adds border and shadow to the footer indicate sticky status and tabindex to body for keyboard scrolling.
+   * Prop should be dependent on whether content overflows at the mobile level.
+   * Tabindex for keyboard scroll is on the body, however, due to focus outline
+   * not having high contrast on the brand header and being overlapped by the footer.
+   *
+   * **Default is `false`**.
+   */
+  isScrollable?: boolean;
+  /**
+   * Method called when the close button is clicked. Use this to hide the modal.
+   * This should be used to also reset the `open` state.
+   * @see https://headlessui.com/react/dialog
+   *
+   * This is required even if you don't have a close button so the ESC key can close the modal.
+   *
+   * ```
+   * const [isOpen, setIsOpen] = useState(true);
+   * // ....
+   *
+   * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+   *  ...
+   * </Modal>
+   * ```
+   */
+  onClose: () => void;
+  // Design API
+  /**
+   * Max size of the modal. Defaults to 'lg'.
+   * Will still break responsively.
+   *
+   * **Default is `"lg"`**.
+   */
+  size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+};
+
+type ModalProps = ModalContentProps & {
+  /**
+   * Whether or not the modal is visible. Recommend using `useState` to set this
+   * variable instead of a boolean literal, to avoid component control issues.
+   * @see https://headlessui.com/react/dialog
+   *
+   * ```
+   * const [isOpen, setIsOpen] = useState(true);
+   * // ....
+   *
+   * <Modal open={isOpen}>
+   *  ...
+   * </Modal>
+   * ```
+   */
+  open: boolean;
+  /**
+   * Additional classnames passed in for the modal container.
+   */
+  modalContainerClassName?: string;
+};
+
+type ModalTitleProps = ExtractProps<typeof Heading> & {
+  // Component API
+  /**
+   * Contents for the modal title.
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+};
+
+type ModalSubTitleProps = ExtractProps<typeof Text> & {
+  // Component API
+  /**
+   * Contents for the modal title.
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+};
+
+type ModalBodyProps = {
+  // Component API
+  /**
+   * Child node(s) that can be nested inside component. `Modal.Header`,
+   * `Modal.Body`, and `Model.Footer` are the only permissible children of the Modal.
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  // Design API
+  /**
+   * Toggles focusable variant of the modal. Used to attach a tabIndex for keyboard scrolling
+   * and focus indicator outline.
+   * Scrolling functionality exists on Modal since the header also needs to scroll.
+   * Defaults to false since modal default is not scrollable.
+   */
+  isFocusable?: boolean;
+};
+
+type ModalHeaderProps = {
+  // Component API
+  /**
+   * Child node(s) to place inside the Modal header.
+   * Should include the <Modal.Title>
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  // Design API
+};
+
+type ModalFooterProps = {
+  // Component API
+  /**
+   * Child node(s) to place inside the Modal footer.
+   */
+  children: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  // Design API
+  /**
+   * Toggles sticky variant of the footer. If modal is scrollable, footer is sticky.
+   * Also adds border and shadow to indicate sticky status.
+   * Defaults to false since modal default is not scrollable.
+   */
+  isSticky?: boolean;
+};
+
+type Context = {
+  isScrollable?: boolean;
+};
+
+const ModalContext = React.createContext<Context>({});
+
+function childrenHaveModalTitle(children?: ReactNode): boolean {
+  const childrenArray = React.Children.toArray(children);
+  return childrenArray.some((child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return false;
+    } else if (
+      'props' in child &&
+      child.type &&
+      typeof child.type !== 'string' &&
+      (child.type?.name === 'ModalTitle' || child.type?.name === 'Modal.Title')
+    ) {
+      return true;
+    } else if ('props' in child && child.props.children) {
+      return childrenHaveModalTitle(child.props.children);
+    }
+    return false;
+  });
+}
+
+/**
+ * The actual modal, without the dark overlay behind it.
+ *
+ * This is only exported for testing purposes; please do not import and use this directly.
+ */
+export const ModalContent = (props: ModalContentProps) => {
+  const {
+    children,
+    className,
+    hideCloseButton = false,
+    isScrollable,
+    onClose,
+    size = 'lg',
+    ...other
+  } = props;
+
+  const componentClassName = clsx(
+    styles['modal__content'],
+    isScrollable && styles['modal__content--scrollable'],
+    (size === 'md' || size === 'lg') && styles['modal__content--md'],
+    size === 'lg' && styles['modal__content--lg'],
+    className,
+  );
+
+  const closeIconClassName = clsx(styles['modal__close-icon']);
+
+  return (
+    <ModalContext.Provider value={{ isScrollable }}>
+      <div className={componentClassName} {...other}>
+        {!hideCloseButton && (
+          <button className={styles['modal__close-button']} onClick={onClose}>
+            <Icon
+              className={closeIconClassName}
+              name="close"
+              purpose="informative"
+              size="1.5rem"
+              title="close modal"
+            />
+          </button>
+        )}
+
+        {children}
+      </div>
+    </ModalContext.Provider>
+  );
+};
+
+/**
+ * `import {Modal} from "@chanzuckerberg/eds";`
+ *
+ * EDS Wrapper for the HeadlessUI Dialog component
+ * @see https://headlessui.dev/react/dialog
+ *
+ * NOTE: You must have at least one focusable element in the modal contents, for keyboard
+ * accessibility reasons. (The close button counts as a focusable element.) Use `initialFocus`
+ * to choose a different element.
+ *
+ */
+export const Modal = (props: ModalProps) => {
+  const {
+    'aria-label': ariaLabel,
+    initialFocus,
+    modalContainerClassName,
+    onClose,
+    open,
+    ...rest
+  } = props;
+  const { children } = rest;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const hasModalTitle = childrenHaveModalTitle(children);
+    if (!hasModalTitle && !ariaLabel) {
+      throw new Error(
+        "You must use the Modal.Title helper component or pass in an aria-label when using the Modal. The Modal uses the Modal.Title to describe the modal to screen readers using aria-labelledby. If you're not using the Modal.Title component, you can pass in an aria-label instead.",
+      );
+    }
+  }
+
+  const componentClassName = clsx(styles['modal'], modalContainerClassName);
+
+  return (
+    <Transition
+      as={React.Fragment}
+      enter={styles['modal__transition--enter']}
+      enterFrom={styles['modal__transition--enterFrom']}
+      enterTo={styles['modal__transition--enterTo']}
+      leave={styles['modal__transition--leave']}
+      leaveFrom={styles['modal__transition--leaveFrom']}
+      leaveTo={styles['modal__transition--leaveTo']}
+      show={open}
+    >
+      <Dialog
+        aria-label={ariaLabel}
+        className={componentClassName}
+        initialFocus={initialFocus}
+        // Passing onClose to the Dialog allows it to close the modal when the ESC key is triggered.
+        onClose={onClose}
+      >
+        <Dialog.Overlay className={styles['modal__overlay']} />
+
+        <ModalContent onClose={onClose} {...rest} />
+      </Dialog>
+    </Transition>
+  );
+};
+
+/**
+ * Component defines the body of the modal.
+ */
+const ModalBody = ({
+  children,
+  className,
+  isFocusable,
+  ...other
+}: ModalBodyProps) => (
+  <div
+    className={clsx(styles['modal-body'], className)}
+    // This element is tabbable to allow keyboard users to scroll long content.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={isFocusable ? 0 : undefined}
+    {...other}
+  >
+    {children}
+  </div>
+);
+
+/**
+ * Component defines the Footer section of the modal.
+ */
+const ModalFooter = ({
+  children,
+  className,
+  isSticky = false,
+  ...other
+}: ModalFooterProps) => {
+  return (
+    <div
+      className={clsx(
+        styles['modal-footer'],
+        isSticky && styles['modal-footer--sticky'],
+        className,
+      )}
+      {...other}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Component defines the Header section of the modal.
+ */
+const ModalHeader = ({ children, className, ...other }: ModalHeaderProps) => {
+  const componentClassName = clsx(styles['modal-header'], className);
+  return (
+    <div className={componentClassName} {...other}>
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Component defines the Title section of the modal.
+ */
+const ModalTitle = ({
+  children,
+  className,
+  preset = 'headline-md',
+  ...other
+}: ModalTitleProps) => (
+  <Dialog.Title as={React.Fragment}>
+    <Heading as="h2" className={className} preset={preset} {...other}>
+      {children}
+    </Heading>
+  </Dialog.Title>
+);
+
+const ModalSubTitle = ({
+  children,
+  className,
+  preset = 'headline-sm',
+  ...other
+}: ModalSubTitleProps) => {
+  const componentClassName = clsx(styles['modal-sub-title'], className);
+  return (
+    <Text as="div" className={componentClassName} preset={preset} {...other}>
+      {children}
+    </Text>
+  );
+};
+
+/**
+ * Variations of the subcomponent to pass props from parent Modal component.
+ * Same prop passed directly to subcomponent has priority over prop passed from Modal component.
+ */
+const VariantModalHeader = (props: ModalHeaderProps) => {
+  return <ModalHeader {...props} />;
+};
+
+const FocusableModalBody = (props: ModalBodyProps) => {
+  const { isScrollable } = React.useContext(ModalContext);
+  return <ModalBody isFocusable={isScrollable} {...props} />;
+};
+
+const StickyModalFooter = (props: ModalFooterProps) => {
+  const { isScrollable } = React.useContext(ModalContext);
+  return <ModalFooter isSticky={isScrollable} {...props} />;
+};
+
+Modal.displayName = 'Modal';
+VariantModalHeader.displayName = 'Modal.Header';
+ModalTitle.displayName = 'Modal.Title';
+ModalSubTitle.displayName = 'Modal.SubTitle';
+FocusableModalBody.displayName = 'Modal.Body';
+StickyModalFooter.displayName = 'Modal.Footer';
+
+Modal.Header = VariantModalHeader;
+Modal.Title = ModalTitle;
+Modal.SubTitle = ModalSubTitle;
+Modal.Body = FocusableModalBody;
+Modal.Footer = StickyModalFooter;
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 48f35c717..2736f369c 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1 +1,2 @@
 export { Modal as default } from './Modal';
+export { Modal as ModalV2 } from './Modal-v2';