diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
index ac017b79f..67cdb3a98 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
@@ -1,54 +1,34 @@
 import * as React from "react";
 import Components from "@target/components";
+import { typographyIds } from "./typography.stories";
 
 const { Heading } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
+const { StoryWrapper } = Components.storybook;
 
 export default {
-  title: "Foundations/Heading",
+  title: "Foundations/Typography/Heading",
   component: Components.Heading,
+  argTypes: {
+    level: {
+      options: [1, 2, 3, 4, 5, 6],
+      control: { type: "select" },
+    },
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    },
+  },
 };
 
-export const Levels = {
-  render: () => (
+export const AnyHeading = {
+  name: "Heading",
+  render: ({level, typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / display"}>
-        <Heading level="1" typography="display">
-          h1 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"2 / display"}>
-        <Heading level="2" typography="display">
-          h2 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"3 / display"}>
-        <Heading level="3" typography="display">
-          h3 / display
-        </Heading>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};
-
-export const HeadingTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / title-large"}>
-        <Heading level="1" typography="title-large">
-          h1 / title-large
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / title-medium"}>
-        <Heading level="1" typography="title-medium">
-          h1 / title-medium
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / code-font"}>
-        <Heading level="1" typography="code-font">
-          h1 / code-font
-        </Heading>
-      </StoryGridRow>
+      <Heading level={level} typography={typography} {...args}>Lorem ipsum</Heading>
     </StoryWrapper>
   ),
+  args: {
+    level: 1,
+    typography: "display",
+  }
 };
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
index 761a7076a..615d3729e 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
@@ -106,6 +106,8 @@ const typographyList = {
   },
 };
 
+export const typographyIds = Object.values(typographyList).map(x => x.id);
+
 export default {
   title: "Foundations/Typography",
   component: Components.StoryHeader,