diff --git a/.changeset/fix-modalPadding.md b/.changeset/fix-modalPadding.md
new file mode 100644
index 000000000..e9e70eede
--- /dev/null
+++ b/.changeset/fix-modalPadding.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Modal): Fixed bottom padding on the Modal header.
diff --git a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
index 4608706b4..232207001 100644
--- a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
@@ -9,6 +9,7 @@ import { DatePicker } from '../DatePicker';
 import { ButtonGroup, ButtonGroupAlignment } from '../ButtonGroup';
 import { Container } from '../Container';
 import { NativeSelect } from '../NativeSelect';
+import { Paragraph } from '../Paragraph';
 import { Spacer } from '../Spacer';
 import { Combobox } from '../Combobox';
 import {
@@ -40,7 +41,7 @@ export const Default = () => {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.right}>
           <Button color={ButtonColor.secondary}>Cancel</Button>
           <Button>Save</Button>
@@ -70,11 +71,11 @@ export const LongContentWithScrolling = () => {
   return (
     <>
       <Modal header="Modal Title" onClose={onModalClose} isOpen={showModal}>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/">linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <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
@@ -82,12 +83,12 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        </Paragraph>
+        <Paragraph>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/"> some more linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <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
@@ -95,12 +96,12 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        </Paragraph>
+        <Paragraph>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <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
@@ -108,7 +109,7 @@ export const LongContentWithScrolling = () => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={onModalShow} ref={buttonRef}>
         Show Modal
@@ -184,10 +185,10 @@ export const ModalContentUpdate = () => {
         <div id="attachToMe">
           {page === 1 && (
             <>
-              <p>Page one</p>
-              <p>
+              <Paragraph noTopMargin>Page one</Paragraph>
+              <Paragraph>
                 This is <a href="/">linked text</a> in the modal
-              </p>
+              </Paragraph>
               <Toggle
                 checked={!goToNextPageEnabled}
                 id="goToNextPageEnabled"
@@ -202,6 +203,7 @@ export const ModalContentUpdate = () => {
               />
 
               {showHidden && <Button>Hidden Button</Button>}
+              <Spacer size={10} />
               <Button disabled={!goToNextPageEnabled} onClick={goToPage2}>
                 Go to Page 2
               </Button>
@@ -210,11 +212,11 @@ export const ModalContentUpdate = () => {
 
           {page === 2 && (
             <>
-              <p>Page two</p>
-              <p>
+              <Paragraph noTopMargin>Page two</Paragraph>
+              <Paragraph>
                 <Button color={ButtonColor.secondary}>Random button 1</Button>{' '}
                 <Button color={ButtonColor.secondary}>Random button 2</Button>
-              </p>
+              </Paragraph>
               <Button onClick={goToPage1}>Go to Page 1</Button>
             </>
           )}
@@ -248,11 +250,13 @@ export const NoHeaderOrFocusableContent = () => {
         onClose={onModalNoFocusClose}
         isOpen={showModalNoFocus}
       >
-        <p>This modal has no header and nothing focusable.</p>
-        <p>
+        <Paragraph noTopMargin>
+          This modal has no header and nothing focusable.
+        </Paragraph>
+        <Paragraph>
           Consider the usability implications before implementing a modal like
           this. A modal should have something actionable inside it.
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={onModalNoFocusShow} ref={buttonRef}>
         Show Modal with nothing focusable
@@ -276,16 +280,16 @@ export const ModalInAModal = () => {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <a href="/">linked text</a> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           This is <a href="/"> some more linked text</a> in the modal
-        </p>
+        </Paragraph>
         <Combobox
           id="comboboxId3"
           isMulti
@@ -311,9 +315,9 @@ export const ModalInAModal = () => {
           ]}
           isClearable
         />
-        <p>
+        <Paragraph>
           <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal
@@ -324,7 +328,7 @@ export const ModalInAModal = () => {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <p>This is modal 2</p>
+        <Paragraph noTopMargin>This is modal 2</Paragraph>
         <NativeSelect fieldId="">
           <option>1</option>
           <option>2</option>
@@ -418,10 +422,12 @@ export const Inverse = () => {
         isOpen={showModal}
         isInverse
       >
-        <p>This is an inverse modal, doing modal things.</p>
-        <p>
+        <Paragraph noTopMargin>
+          This is an inverse modal, doing modal things.
+        </Paragraph>
+        <Paragraph>
           <Button isInverse>This is a button</Button>
-        </p>
+        </Paragraph>
       </Modal>
       <Container isInverse style={{ padding: '12px' }}>
         <Button onClick={() => setShowModal(true)} ref={buttonRef} isInverse>
diff --git a/packages/react-magma-dom/src/components/Modal/Modal.tsx b/packages/react-magma-dom/src/components/Modal/Modal.tsx
index 69c76d94a..127e1d01e 100644
--- a/packages/react-magma-dom/src/components/Modal/Modal.tsx
+++ b/packages/react-magma-dom/src/components/Modal/Modal.tsx
@@ -160,6 +160,17 @@ const ModalContent = styled.div<ModalProps & { isExiting?: boolean }>`
   }
 `;
 
+const ModalHeader = styled.div<{ theme?: ThemeInterface }>`
+  padding: ${props => props.theme.spaceScale.spacing05}
+    ${props => props.theme.spaceScale.spacing05} 0
+    ${props => props.theme.spaceScale.spacing05};
+  @media (min-width: ${props => props.theme.breakpoints.small}px) {
+    padding: ${props => props.theme.spaceScale.spacing06}
+      ${props => props.theme.spaceScale.spacing06} 0
+      ${props => props.theme.spaceScale.spacing06};
+  }
+`;
+
 const ModalWrapper = styled.div<{ theme?: ThemeInterface }>`
   padding: ${props => props.theme.spaceScale.spacing05};
   @media (min-width: ${props => props.theme.breakpoints.small}px) {
@@ -366,7 +377,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                 theme={theme}
               >
                 {header && (
-                  <ModalWrapper theme={theme}>
+                  <ModalHeader theme={theme}>
                     {header && (
                       <H1
                         id={headingId}
@@ -380,7 +391,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                         {header}
                       </H1>
                     )}
-                  </ModalWrapper>
+                  </ModalHeader>
                 )}
                 <ModalWrapper ref={bodyRef} theme={theme}>
                   {children}
diff --git a/website/react-magma-docs/src/pages/api/modal.mdx b/website/react-magma-docs/src/pages/api/modal.mdx
index b670e794e..7135a58f0 100644
--- a/website/react-magma-docs/src/pages/api/modal.mdx
+++ b/website/react-magma-docs/src/pages/api/modal.mdx
@@ -27,7 +27,13 @@ This can be done by supplementing the button label or link text with "(opens mod
 
 ```tsx
 import React from 'react';
-import { Button, Hyperlink, Modal, VisuallyHidden } from 'react-magma-dom';
+import {
+  Button,
+  Hyperlink,
+  Modal,
+  Paragraph,
+  VisuallyHidden,
+} from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const buttonRef = React.useRef();
@@ -40,17 +46,17 @@ export function Example() {
   return (
     <>
       <Modal header="Modal Title" onClose={handleOnClose} isOpen={showModal}>
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph noMargins>This is a modal, doing modal things.</Paragraph>
+        <Paragraph>
           This is <Hyperlink to="#">linked text</Hyperlink> in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           <Button>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph>
           This is <Hyperlink to="#">some more linked text</Hyperlink> in the
           modal
-        </p>
+        </Paragraph>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal
@@ -72,6 +78,7 @@ import {
   ButtonSize,
   Modal,
   ModalSize,
+  Paragraph,
   VisuallyHidden,
   ButtonGroup,
 } from 'react-magma-dom';
@@ -92,7 +99,9 @@ export function Example() {
         }}
         isOpen={showSmallModal}
       >
-        <p>This is a small modal, doing small modal things.</p>
+        <Paragraph noMargins>
+          This is a small modal, doing small modal things.
+        </Paragraph>
       </Modal>
 
       <Modal
@@ -104,7 +113,9 @@ export function Example() {
         }}
         isOpen={showLargeModal}
       >
-        <p>This is a large modal, doing large modal things.</p>
+        <Paragraph noMargins>
+          This is a large modal, doing large modal things.
+        </Paragraph>
       </Modal>
 
       <ButtonGroup>
@@ -142,6 +153,7 @@ import {
   Button,
   Modal,
   ModalSize,
+  Paragraph,
   VisuallyHidden,
   ButtonGroup,
   ButtonGroupAlignment,
@@ -162,7 +174,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>This modal has no header.</p>
+        <Paragraph noTopMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModal(false)}>OK</Button>
         </ButtonGroup>
@@ -176,7 +188,7 @@ export function Example() {
         }}
         isOpen={showModalHeader}
       >
-        <p>This modal has no header.</p>
+        <Paragraph noTopMargin>This modal has no header.</Paragraph>
         <ButtonGroup alignment={ButtonGroupAlignment.center}>
           <Button onClick={() => setShowModalHeader(false)}>OK</Button>
         </ButtonGroup>
@@ -202,7 +214,7 @@ The close button can be hidden by using the `isCloseButtonHidden` prop. If this
 
 ```tsx
 import React from 'react';
-import { Button, Modal } from 'react-magma-dom';
+import { Button, Modal, Paragraph } from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const buttonRef = React.useRef();
@@ -218,7 +230,9 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>The standard modal close button is hidden.</p>
+        <Paragraph noTopMargin>
+          The standard modal close button is hidden.
+        </Paragraph>
         <Button onClick={() => setShowModal(false)}>Close this Dialog</Button>
       </Modal>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
@@ -235,7 +249,7 @@ If you would like to add a custom close button to the `Modal` be sure not to use
 
 ```tsx
 import React from 'react';
-import { Button, Modal, VisuallyHidden } from 'react-magma-dom';
+import { Button, Modal, Paragraph, VisuallyHidden } from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const [magmaCloseCalledTimes, setMagmaCloseCalledTimes] = React.useState(0);
@@ -261,12 +275,12 @@ export function Example() {
         Lorem ipsum dolar sit amet
         <Button onClick={customCloseModal}>Close Modal</Button>
       </Modal>
-      <p>
+      <Paragraph noMargins>
         <strong>Magma Close Called Times:</strong> {magmaCloseCalledTimes}
-      </p>
-      <p>
+      </Paragraph>
+      <Paragraph>
         <strong>Internal Close Called Times:</strong> {internalCloseCalledTimes}
-      </p>
+      </Paragraph>
       <Button onClick={() => setShowModal(true)} ref={buttonRef}>
         Show Modal <VisuallyHidden>(opens modal dialog)</VisuallyHidden>
       </Button>
@@ -281,7 +295,13 @@ Although we don't recommend using nested modals, the ability for one nested moda
 
 ```tsx
 import React from 'react';
-import { Button, Modal, ModalSize, VisuallyHidden } from 'react-magma-dom';
+import {
+  Button,
+  Modal,
+  ModalSize,
+  Paragraph,
+  VisuallyHidden,
+} from 'react-magma-dom';
 export function Example() {
   const [showModal, setShowModal] = React.useState(false);
   const [showModal2, setShowModal2] = React.useState(false);
@@ -295,7 +315,7 @@ export function Example() {
         }}
         isOpen={showModal}
       >
-        <p>This is a modal, doing modal things.</p>
+        <Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
 
         <Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
       </Modal>
@@ -309,7 +329,7 @@ export function Example() {
         onClose={() => setShowModal2(false)}
         isOpen={showModal2}
       >
-        <p>This is modal 2</p>
+        <Paragraph noMargins>This is modal 2</Paragraph>
       </Modal>
     </>
   );
@@ -324,6 +344,7 @@ import {
   Button,
   Hyperlink,
   Modal,
+  Paragraph,
   VisuallyHidden,
   Card,
   CardBody,
@@ -343,24 +364,26 @@ export function Example() {
         isOpen={showModal}
         isInverse
       >
-        <p>This is a modal, doing modal things.</p>
-        <p>
+        <Paragraph isInverse noMargins>
+          This is a modal, doing modal things.
+        </Paragraph>
+        <Paragraph isInverse>
           This is{' '}
           <Hyperlink to="#" isInverse>
             linked text
           </Hyperlink>{' '}
           in the modal
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph isInverse>
           <Button isInverse>This is a button</Button>
-        </p>
-        <p>
+        </Paragraph>
+        <Paragraph isInverse>
           This is{' '}
           <Hyperlink to="#" isInverse>
             some more linked text
           </Hyperlink>{' '}
           in the modal
-        </p>
+        </Paragraph>
       </Modal>
       <Card isInverse>
         <CardBody>