diff --git a/.changeset/tiny-colts-attack.md b/.changeset/tiny-colts-attack.md
new file mode 100644
index 0000000000..e185d2f65b
--- /dev/null
+++ b/.changeset/tiny-colts-attack.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/data-visualization-library": minor
+"@twilio-paste/core": minor
+---
+
+[Data Visualization]: added a new helper function, applyPasteHighchartsModules, that applies any number of modules to Highcharts setting accesibility required.
diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
index a8206afc4b..f75e26094c 100644
--- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
@@ -2,6 +2,9 @@
 
 exports[`usePasteHighChartsTheme hook should return a deepmerged options object when options are passed 1`] = `
 Object {
+  "accessibility": Object {
+    "description": "This chart shows the solar employment growth by sector from 2010 to 2016.",
+  },
   "chart": Object {
     "backgroundColor": "rgb(255, 255, 255)",
   },
diff --git a/packages/paste-libraries/data-visualization/__test__/modules.spec.tsx b/packages/paste-libraries/data-visualization/__test__/modules.spec.tsx
new file mode 100644
index 0000000000..cc0bcc48c4
--- /dev/null
+++ b/packages/paste-libraries/data-visualization/__test__/modules.spec.tsx
@@ -0,0 +1,40 @@
+import { applyPasteHighchartsModules } from "../src";
+
+type MockHighcarts = {
+  modules: Set<string>;
+};
+
+let mockHighcarts: MockHighcarts;
+
+const a11yModule = (highcharts: MockHighcarts): void => {
+  highcharts.modules.add("accessibility");
+};
+
+const exportingModule = (highcharts: MockHighcarts): void => {
+  highcharts.modules.add("exporting");
+};
+
+const sankeyModule = (highcharts: MockHighcarts): void => {
+  highcharts.modules.add("sankeyModule");
+};
+
+describe("applyPasteHighchartsModules hook", () => {
+  beforeEach(() => {
+    mockHighcarts = {
+      modules: new Set(),
+    };
+  });
+
+  it("should fail when Highcarts is not present", () => {
+    expect(applyPasteHighchartsModules).toThrow(
+      "[applyPasteHighchartsModules]: Must provide highcharts into this function.",
+    );
+  });
+
+  it("should apply modules", () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    applyPasteHighchartsModules(mockHighcarts, a11yModule, exportingModule, sankeyModule);
+    expect(mockHighcarts.modules).toEqual(new Set(["accessibility", "exporting", "sankeyModule"]));
+  });
+});
diff --git a/packages/paste-libraries/data-visualization/src/applyPasteHighchartsModules.tsx b/packages/paste-libraries/data-visualization/src/applyPasteHighchartsModules.tsx
new file mode 100644
index 0000000000..51b0dec4e1
--- /dev/null
+++ b/packages/paste-libraries/data-visualization/src/applyPasteHighchartsModules.tsx
@@ -0,0 +1,23 @@
+import Highcharts from "highcharts";
+
+/**
+ * A hook to apply any Highcharts modules iwth accessibility being mandatory.
+ */
+export const applyPasteHighchartsModules = (
+  highcharts: typeof Highcharts,
+  accessibilityModule: (highcharts: typeof Highcharts) => void,
+  ...rest: Array<(highcharts: typeof Highcharts) => void>
+): void => {
+  if (highcharts === undefined) {
+    throw new Error("[applyPasteHighchartsModules]: Must provide highcharts into this function.");
+  }
+
+  if (accessibilityModule === undefined) {
+    throw new Error(
+      '[applyPasteHighchartsModules]: Must provide accessibility module into this function. You can do this using `import HighchartsAccessibility Module from "highcharts/modules/accessibility"`',
+    );
+  }
+
+  accessibilityModule(highcharts);
+  rest.forEach((module) => module(highcharts));
+};
diff --git a/packages/paste-libraries/data-visualization/src/index.tsx b/packages/paste-libraries/data-visualization/src/index.tsx
index 12beb29afc..3a3b156f7e 100644
--- a/packages/paste-libraries/data-visualization/src/index.tsx
+++ b/packages/paste-libraries/data-visualization/src/index.tsx
@@ -1 +1,2 @@
 export { usePasteHighchartsTheme } from "./usePasteHighchartsTheme";
+export { applyPasteHighchartsModules } from "./applyPasteHighchartsModules";
diff --git a/packages/paste-libraries/data-visualization/stories/index.stories.tsx b/packages/paste-libraries/data-visualization/stories/index.stories.tsx
index e86bf752ae..05d60b0c55 100644
--- a/packages/paste-libraries/data-visualization/stories/index.stories.tsx
+++ b/packages/paste-libraries/data-visualization/stories/index.stories.tsx
@@ -3,10 +3,11 @@ import { Stack } from "@twilio-paste/stack";
 /* eslint-disable import/no-extraneous-dependencies */
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
 import * as React from "react";
 /* eslint-enable */
 
-import { usePasteHighchartsTheme } from "../src";
+import { applyPasteHighchartsModules, usePasteHighchartsTheme } from "../src";
 import { basicAreaChartOptions } from "./options/basicAreaChartOptions";
 import { columnChartOptions } from "./options/columnChartOptions";
 import { lineChartOptions } from "./options/lineChartOptions";
@@ -19,12 +20,28 @@ export default {
   title: "Libraries/data-visualization",
   parameters: {
     chromatic: { disableSnapshot: true },
+    a11y: {
+      // no need to a11y check composition of a11y checked components
+      disable: true,
+    },
   },
 } as Meta;
 
 export const LineChart: StoryFn = () => {
   const themedLineChartOptions = usePasteHighchartsTheme(lineChartOptions);
 
+  return (
+    <Stack orientation="vertical" spacing="space100">
+      <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} key="chart1" />
+      <HighchartsReact highcharts={Highcharts} options={lineChartOptions} key="chart2" />
+    </Stack>
+  );
+};
+
+export const LineChartWithAccessibility: StoryFn = () => {
+  applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule);
+  const themedLineChartOptions = usePasteHighchartsTheme(lineChartOptions);
+
   return (
     <Stack orientation="vertical" spacing="space100">
       <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />
diff --git a/packages/paste-libraries/data-visualization/stories/options/lineChartOptions.ts b/packages/paste-libraries/data-visualization/stories/options/lineChartOptions.ts
index 40ce455ca2..63a99c4b4d 100644
--- a/packages/paste-libraries/data-visualization/stories/options/lineChartOptions.ts
+++ b/packages/paste-libraries/data-visualization/stories/options/lineChartOptions.ts
@@ -3,6 +3,9 @@
 import type Highcharts from "highcharts";
 
 export const lineChartOptions: Highcharts.Options = {
+  accessibility: {
+    description: "This chart shows the solar employment growth by sector from 2010 to 2016.",
+  },
   title: {
     text: "Solar Employment Growth by Sector, 2010-2016",
   },
diff --git a/packages/paste-website/src/component-examples/DataVisualizationExamples.tsx b/packages/paste-website/src/component-examples/DataVisualizationExamples.tsx
index 423b508f98..1f8aa31328 100644
--- a/packages/paste-website/src/component-examples/DataVisualizationExamples.tsx
+++ b/packages/paste-website/src/component-examples/DataVisualizationExamples.tsx
@@ -65,6 +65,9 @@ export const LineChartCaption = (): JSX.Element => (
 export const LineChartOptions = {
   title: { text: "Solar Employment Growth by Sector, 2010-2016" },
   subtitle: { text: "Source: thesolarfoundation.com" },
+  accessibility: {
+    description: "This chart shows the solar employment growth by sector from 2010 to 2016.",
+  },
   chart: {
     // this controls animation of updates, to disable animation on initial render you have to disable animation on the series
     animation: !inCypress(),
@@ -100,6 +103,7 @@ export const LineChartOptions = {
 
 export const LineChartExample = `
 const LineChartExample = () => {
+  applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule);
   const themedLineChartOptions = usePasteHighchartsTheme(LineChartOptions);
   return <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />;
 };
diff --git a/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx b/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx
index 1a8e20c622..2db6e7782e 100644
--- a/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx
+++ b/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx
@@ -43,7 +43,7 @@ export const NormalizedComponentHeader: React.FC<React.PropsWithChildren<Normali
     githubUrl,
     storybookUrl,
     Feature,
-    shoudShowInPageNav = true,
+    shouldShowInPageNav = true,
   } = merge(normalizedData, props);
 
   const componentPageBasePath = getPackagePath(categoryRoute, Feature);
@@ -64,7 +64,7 @@ export const NormalizedComponentHeader: React.FC<React.PropsWithChildren<Normali
       githubUrl={githubUrl}
       storybookUrl={storybookUrl}
     >
-      {shoudShowInPageNav ? (
+      {shouldShowInPageNav ? (
         <PageHeaderInPageNavigation>
           <InPageNavigation aria-label="Component page navigation">
             <Link href={componentPageNavLinks.GUIDELINES} legacyBehavior passHref>
diff --git a/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx b/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx
index ec55e71bde..1728bb481f 100644
--- a/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx
+++ b/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx
@@ -1,20 +1,20 @@
 export const meta = {
-  title: 'Data visualization library',
-  package: '@twilio-paste/data-visualization-library',
-  description: 'A library that helps theme data visualizations with Paste tokens.',
-  slug: '/core/libraries/data-visualization/',
+  title: "Data visualization library",
+  package: "@twilio-paste/data-visualization-library",
+  description: "A library that helps theme data visualizations with Paste tokens.",
+  slug: "/core/libraries/data-visualization/",
 };
 
-import {PageHeaderSeparator} from '@twilio-paste/page-header';
-import {Separator} from '@twilio-paste/separator';
-import DefaultLayout from '../../../../layouts/DefaultLayout';
-import packageJson from '@twilio-paste/data-visualization-library/package.json';
-import Changelog from '@twilio-paste/data-visualization-library/CHANGELOG.md';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-import {usePasteHighchartsTheme} from '@twilio-paste/data-visualization-library';
-import {SidebarCategoryRoutes} from '../../../../constants';
-import {getNavigationData} from '../../../../utils/api';
+import { PageHeaderSeparator } from "@twilio-paste/page-header";
+import { Separator } from "@twilio-paste/separator";
+import DefaultLayout from "../../../../layouts/DefaultLayout";
+import packageJson from "@twilio-paste/data-visualization-library/package.json";
+import Changelog from "@twilio-paste/data-visualization-library/CHANGELOG.md";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import { usePasteHighchartsTheme } from "@twilio-paste/data-visualization-library";
+import { SidebarCategoryRoutes } from "../../../../constants";
+import { getNavigationData } from "../../../../utils/api";
 
 export default DefaultLayout;
 
@@ -40,7 +40,7 @@ export const getStaticProps = async () => {
   description={props.data.description}
 >
   <PageHeaderSeparator>
-    <Separator orientation="horizontal"/>
+    <Separator orientation="horizontal" />
   </PageHeaderSeparator>
 </GenericHeader>
 
@@ -63,32 +63,32 @@ yarn add @twilio-paste/data-visualization-library - or - yarn add @twilio-paste/
 This is a React Hook to take a Highcharts config and add Paste colors and fonts.
 
 ```jsx
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-import {usePasteHighchartsTheme} from '@twilio-paste/data-visualization-library';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import { usePasteHighchartsTheme } from "@twilio-paste/data-visualization-library";
 
 const LineChartOptions = {
-  title: {text: 'Solar Employment Growth by Sector, 2010-2016'},
-  subtitle: {text: 'Source: thesolarfoundation.com'},
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
   series: [
     {
-      name: 'Installation',
+      name: "Installation",
       data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
     },
     {
-      name: 'Manufacturing',
+      name: "Manufacturing",
       data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
     },
     {
-      name: 'Sales & Distribution',
+      name: "Sales & Distribution",
       data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
     },
     {
-      name: 'Project Development',
+      name: "Project Development",
       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
     },
     {
-      name: 'Other',
+      name: "Other",
       data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
     },
   ],
@@ -109,6 +109,24 @@ The hook adds [the following styles](https://github.com/twilio-labs/paste/blob/4
 
 To learn more about the configurations available, check out [the Highcharts API documentation](https://api.highcharts.com/highcharts/).
 
+### applyPasteHighchartsModules
+
+This is a helper function to initiate Highcharts modules that are not included by default. The [accessibility](https://www.highcharts.com/docs/accessibility/accessibility-module) module is a mandatory module, but you can pass as many other modules as you want. This hook should be used at the component level where the Highcharts namespace is passed to HighchartsReact.
+
+```jsx
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
+import HighchartsExportingModule from "highcharts/modules/exporting";
+import { applyPasteHighchartsModules } from "@twilio-paste/data-visualization-library";
+
+applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule, HighchartsExportingModule);
+
+const LineChartExample = () => {
+  return <HighchartsReact highcharts={Highcharts} />;
+};
+```
+
 <ChangelogRevealer>
   <Changelog />
 </ChangelogRevealer>
@@ -116,3 +134,4 @@ To learn more about the configurations available, check out [the Highcharts API
 </content>
 
 </contentwrapper>
+```
diff --git a/packages/paste-website/src/pages/foundations/data-visualization/index.mdx b/packages/paste-website/src/pages/foundations/data-visualization/index.mdx
index 9ea6decd8c..b6ee8d6104 100644
--- a/packages/paste-website/src/pages/foundations/data-visualization/index.mdx
+++ b/packages/paste-website/src/pages/foundations/data-visualization/index.mdx
@@ -1,35 +1,36 @@
 export const meta = {
-  title: 'Data Visualization',
-  description: 'Data visualizations help communicate patterns and relationships in a data set.',
-  slug: '/foundations/data-visualization/',
+  title: "Data Visualization",
+  description: "Data visualizations help communicate patterns and relationships in a data set.",
+  slug: "/foundations/data-visualization/",
 };
 
-import Image from 'next/image';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-import {usePasteHighchartsTheme} from '@twilio-paste/data-visualization-library';
-
-import {Box} from '@twilio-paste/box';
-import {Heading} from '@twilio-paste/heading';
-import {Text} from '@twilio-paste/text';
-import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';
-import {PageHeaderSeparator} from '@twilio-paste/page-header';
-import {Separator} from '@twilio-paste/separator';
-
-import {ResponsiveImage} from '../../../components/ResponsiveImage';
-import {SidebarCategoryRoutes} from '../../../constants';
+import Image from "next/image";
+import Highcharts from "highcharts";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
+import HighchartsReact from "highcharts-react-official";
+import { applyPasteHighchartsModules, usePasteHighchartsTheme } from "@twilio-paste/data-visualization-library";
+
+import { Box } from "@twilio-paste/box";
+import { Heading } from "@twilio-paste/heading";
+import { Text } from "@twilio-paste/text";
+import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout";
+import { PageHeaderSeparator } from "@twilio-paste/page-header";
+import { Separator } from "@twilio-paste/separator";
+
+import { ResponsiveImage } from "../../../components/ResponsiveImage";
+import { SidebarCategoryRoutes } from "../../../constants";
 import {
   LineChartExample,
   LineChartOptions,
   DataVizColorSwatches,
   PieChartCaption,
   LineChartCaption,
-} from '../../../component-examples/DataVisualizationExamples';
-import FigmaColors from '../../../assets/images/foundations/data-visualization/figma-colors.png';
-import PieChart from '../../../assets/images/foundations/data-visualization/pie-chart.png';
-import LineChart from '../../../assets/images/foundations/data-visualization/line-chart.png';
-import DefaultLayout from '../../../layouts/DefaultLayout';
-import {getNavigationData} from '../../../utils/api';
+} from "../../../component-examples/DataVisualizationExamples";
+import FigmaColors from "../../../assets/images/foundations/data-visualization/figma-colors.png";
+import PieChart from "../../../assets/images/foundations/data-visualization/pie-chart.png";
+import LineChart from "../../../assets/images/foundations/data-visualization/line-chart.png";
+import DefaultLayout from "../../../layouts/DefaultLayout";
+import { getNavigationData } from "../../../utils/api";
 
 export default DefaultLayout;
 
@@ -42,14 +43,12 @@ export const getStaticProps = async () => {
   };
 };
 
-
 <GenericHeader name={meta.title} description={meta.description} categoryRoute={SidebarCategoryRoutes.FOUNDATIONS}>
   <PageHeaderSeparator>
-    <Separator orientation="horizontal"/>
+    <Separator orientation="horizontal" />
   </PageHeaderSeparator>
 </GenericHeader>
 
-
 <contentwrapper>
 
 <PageAside data={mdxHeadings} />
@@ -66,7 +65,20 @@ This foundation page was created to help establish a familiar and accessible use
 
 The easiest way to use the data visualization tokens in your charts is to use `usePasteHighchartsTheme` from the [data visualization library package](/core/libraries/data-visualization) with [Highcharts](https://www.highcharts.com/). The `usePasteHighchartsTheme` hook takes an object of Highchart configurations and returns a new object with Paste colors and fonts.
 
-<LivePreview scope={{Highcharts, HighchartsReact, usePasteHighchartsTheme, LineChartOptions}} language="jsx" noInline>
+Be sure to include the [Highcharts Accessibility module](/foundations/data-visualization#adding-highcharts-accessibility-module) to ensure that your charts are accessible to all users.
+
+<LivePreview
+  scope={{
+    Highcharts,
+    HighchartsReact,
+    usePasteHighchartsTheme,
+    LineChartOptions,
+    HighchartsAccessibilityModule,
+    applyPasteHighchartsModules,
+  }}
+  language="jsx"
+  noInline
+>
   {LineChartExample}
 </LivePreview>
 
@@ -77,7 +89,7 @@ To get started incorporating our data visualization design tools into your own T
 The [color palette](#color-palettes) used for data visualizations are available as color styles in both the [Default Theme](https://www.figma.com/file/OZKRQFOkOAl413m5JVIYE6/Paste-Default-Theme) and [Dark Theme](https://www.figma.com/file/TZMBaCxXkX8u5aVRVYboid/Paste-Dark-Theme?node-id=0%3A1) libraries.
 
 <Box maxWidth="size30" paddingBottom="space110" marginX="auto">
-  <Image src={FigmaColors} placeholder="blur" style={{width: '100%', height: '100%'}} />
+  <Image src={FigmaColors} placeholder="blur" style={{ width: "100%", height: "100%" }} />
 </Box>
 
 ## Color palettes
@@ -134,6 +146,26 @@ Shapes can also be used in combination with color-coded data points. Using shape
 
 <LineChartCaption />
 
+### Adding Highcharts Accessibility module
+
+Highcharts by default does not include its [Accessibility](https://www.highcharts.com/docs/accessibility/accessibility-module) module. Every Highcharts license includes the Accessibility module which adheres to the WCAG 2.1 standard and adds enhanced keyboard navigation and screen reader functionality.
+
+A helper function `applyPasteHighchartsModules` is available from the [data visualization library package](/core/libraries/data-visualization#applypastehighchartsmodules), which applies additional modules to Highcharts. This function should be called at the component level where the Highcharts namespace is passed to HighchartsReact.
+
+```jsx
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
+import HighchartsExportingModule from "highcharts/modules/exporting";
+import { applyPasteHighchartsModules } from "@twilio-paste/data-visualization-library";
+
+applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule, HighchartsExportingModule);
+
+const LineChartExample = () => {
+  return <HighchartsReact highcharts={Highcharts} />;
+};
+```
+
 </content>
 
 </contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx b/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx
index a274efdf2d..7eb84b75c9 100644
--- a/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx
@@ -48,7 +48,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/combobox"
   storybookUrl="/?path=/story/primitives-combobox--dropdown-combobox"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx b/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx
index cb7b7f5cf8..dc67e79dc2 100644
--- a/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx
@@ -47,7 +47,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/disclosure"
   storybookUrl="/?path=/story/primitives-disclosure--basic-example"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx b/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx
index 1df33e097c..6f07e28aa0 100644
--- a/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx
@@ -54,7 +54,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/listbox"
   storybookUrl="/?path=/story/primitives-listbox--vertical-listbox"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx b/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx
index 7931d09e66..868be05147 100644
--- a/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx
@@ -48,7 +48,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/menu"
   storybookUrl="/?path=/story/primitives-menu--simple-menu"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx b/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx
index 0d23eb9928..8b1becce9e 100644
--- a/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx
@@ -38,7 +38,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/modal-dialog"
   storybookUrl="/?path=/story/primitives-modaldialog--custom-overlay-and-content"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx b/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx
index f4c30b9c24..c4bf46d7d4 100644
--- a/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx
@@ -50,7 +50,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/non-modal-dialog"
   storybookUrl="/?path=/story/primitives-non-modal-dialog--simple-non-modal-dialog"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx b/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx
index 006cf39285..cb0ab1e312 100644
--- a/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx
@@ -41,7 +41,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/tabs"
   storybookUrl="/?path=/story/primitives-tabs--horizontal-tabs"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx b/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx
index c314a21392..6e23b1e14d 100644
--- a/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx
+++ b/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx
@@ -44,7 +44,7 @@ export const getStaticProps = async () => {
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/tooltip"
   storybookUrl="/?path=/story/primitives-tooltip--simple-tooltip"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
 />
 
 <contentwrapper>
diff --git a/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx b/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx
index 95221efc6e..02f70aa222 100644
--- a/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx
+++ b/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx
@@ -30,7 +30,7 @@ export const getStaticProps = async () => {
   categoryRoute={SidebarCategoryRoutes.TOKENS}
   githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-design-tokens"
   data={props.data}
-  shoudShowInPageNav={false}
+  shouldShowInPageNav={false}
   shouldShowVersion
 />
 
diff --git a/packages/paste-website/src/utils/api.ts b/packages/paste-website/src/utils/api.ts
index 9e75a431c3..c012229a41 100644
--- a/packages/paste-website/src/utils/api.ts
+++ b/packages/paste-website/src/utils/api.ts
@@ -98,7 +98,7 @@ export const getNavigationData = async (): Promise<Feature[]> => {
 export const getFeature = async (feature: string): Promise<Feature> => {
   const data = fs.readFileSync(path.resolve(process.cwd(), "data/feature-data.json"), "utf8");
 
-  return JSON.parse(data).find((item: Feature) => item.Feature === feature);
+  return JSON.parse(data).find((item: Feature) => item.Feature.toLowerCase() === feature.toLowerCase());
 };
 
 export const getAllFeatures = async (): Promise<Feature[]> => {