diff --git a/apps/docs/content/components/Footnotes/images/anatomy.png b/apps/docs/content/components/Footnotes/images/anatomy.png
new file mode 100644
index 000000000..0b8361ab6
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/anatomy.png differ
diff --git a/apps/docs/content/components/Footnotes/images/do-position.png b/apps/docs/content/components/Footnotes/images/do-position.png
new file mode 100644
index 000000000..20540fb6d
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/do-position.png differ
diff --git a/apps/docs/content/components/Footnotes/images/do-use-disclaimer.png b/apps/docs/content/components/Footnotes/images/do-use-disclaimer.png
new file mode 100644
index 000000000..0551963e4
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/do-use-disclaimer.png differ
diff --git a/apps/docs/content/components/Footnotes/images/do-use-return-urls.png b/apps/docs/content/components/Footnotes/images/do-use-return-urls.png
new file mode 100644
index 000000000..4c5dd4891
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/do-use-return-urls.png differ
diff --git a/apps/docs/content/components/Footnotes/images/dont-use-disclaimer.png b/apps/docs/content/components/Footnotes/images/dont-use-disclaimer.png
new file mode 100644
index 000000000..69341a865
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/dont-use-disclaimer.png differ
diff --git a/apps/docs/content/components/Footnotes/images/dont-use-return-urls.png b/apps/docs/content/components/Footnotes/images/dont-use-return-urls.png
new file mode 100644
index 000000000..4ba605d12
Binary files /dev/null and b/apps/docs/content/components/Footnotes/images/dont-use-return-urls.png differ
diff --git a/apps/docs/content/components/Footnotes/index.mdx b/apps/docs/content/components/Footnotes/index.mdx
new file mode 100644
index 000000000..53826324b
--- /dev/null
+++ b/apps/docs/content/components/Footnotes/index.mdx
@@ -0,0 +1,72 @@
+---
+title: Footnotes
+description: Use footnotes to display contextual information and cite sources in the page content.
+---
+
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
+
+import anatomy from './images/anatomy.png'
+import doPosition from './images/do-position.png'
+import doReturnLinks from './images/do-use-return-urls.png'
+import dontReturnLinks from './images/dont-use-return-urls.png'
+import doUseDisclaimer from './images/do-use-disclaimer.png'
+import dontUseDisclaimer from './images/dont-use-disclaimer.png'
+
+## Anatomy
+
+<img
+  src={anatomy}
+  alt="Footnotes as an ordered list of citations, with visual indicators marking items and return urls"
+/>
+
+## Usage
+
+### Position
+
+Footnotes should generally appear at the bottom of the page.
+
+<DoDontContainer stacked>
+  <Do>
+    <img src={doPosition} alt="" />
+    <Caption>Place footnotes towards the end of a page.</Caption>
+  </Do>
+</DoDontContainer>
+
+### Return links
+
+Citations in the format of a numbered list should feature both a local description and a link to return the user to the original context.
+
+<DoDontContainer>
+  <Do>
+    <img src={doReturnLinks} alt="" />
+    <Caption>
+      Include sufficient descriptions for each citation, alongside a return
+      link.
+    </Caption>
+  </Do>
+  <Dont>
+    <img src={dontReturnLinks} alt="" />
+    <Caption>
+      Don't require users to manually locate the original context for each
+      citation.
+    </Caption>
+  </Dont>
+</DoDontContainer>
+
+### Paragraphs
+
+Use paragraphs to present disclaimers or similar types of content.
+
+<DoDontContainer>
+  <Do>
+    <img alt="" src={doUseDisclaimer} />
+    <Caption>Use paragraphs for context-agnostic items of text.</Caption>
+  </Do>
+  <Dont>
+    <img alt="" src={dontUseDisclaimer} />
+    <Caption>
+      Don't use paragraphs to represent citations or numbered lists.
+    </Caption>
+  </Dont>
+</DoDontContainer>
diff --git a/apps/docs/content/components/Footnotes.mdx b/apps/docs/content/components/Footnotes/react.mdx
similarity index 97%
rename from apps/docs/content/components/Footnotes.mdx
rename to apps/docs/content/components/Footnotes/react.mdx
index bce7a6ebb..1eda13f1a 100644
--- a/apps/docs/content/components/Footnotes.mdx
+++ b/apps/docs/content/components/Footnotes/react.mdx
@@ -7,8 +7,10 @@ description: Use footnotes to display contextual information and cite sources in
 ---
 
 import {Label} from '@primer/react'
-import {PropTableValues} from '../../src/components'
+import {PropTableValues} from '../../../src/components'
 import {Link} from '@primer/react-brand'
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
 
 ```js
 import {Footnotes} from '@primer/react-brand'
diff --git a/apps/docs/scripts/components-with-animation.js b/apps/docs/scripts/components-with-animation.js
index 82af28c9a..8ae0ca290 100644
--- a/apps/docs/scripts/components-with-animation.js
+++ b/apps/docs/scripts/components-with-animation.js
@@ -10,8 +10,8 @@ export const supportedComponents = [
   'Label',
   'Pillar',
   'SectionIntro',
-  'Statistic',
   'Stack',
+  'Statistic',
   'Testimonial',
   'Text',
   'Timeline',