diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 14fde3f51..6143d4eb4 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -6,11 +6,11 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
    [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
    [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
-   [app.main.ui.ds.foundations.text :refer [text*]]
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
deleted file mode 100644
index 615d3729e..000000000
--- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Heading } = Components;
-const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
-
-const typographyList = {
-  display: {
-    name: "Display",
-    id: "display",
-    size: "36px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleLarge: {
-    name: "Title large",
-    id: "title-large",
-    size: "24px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleMedium: {
-    name: "Title medium",
-    id: "title-medium",
-    size: "20px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleSmall: {
-    name: "Title small",
-    id: "title-small",
-    size: "14px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  headlineLarge: {
-    name: "Headline large",
-    id: "headline-large",
-    size: "18px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineMedium: {
-    name: "Headline medium",
-    id: "headline-medium",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineSmall: {
-    name: "Headline small",
-    id: "headline-small",
-    size: "12px",
-    weight: "500",
-    line: "1.2",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  bodyLarge: {
-    name: "Body large",
-    id: "body-large",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodyMedium: {
-    name: "Body medium",
-    id: "body-medium",
-    size: "14px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodySmall: {
-    name: "Body small",
-    id: "body-small",
-    size: "12px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  codeFont: {
-    name: "Code font",
-    id: "code-font",
-    size: "12px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Roboto Mono",
-  },
-};
-
-export const typographyIds = Object.values(typographyList).map(x => x.id);
-
-export default {
-  title: "Foundations/Typography",
-  component: Components.StoryHeader,
-};
-
-export const AllTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryHeader>
-        <h1>All Typography</h1>
-        <p>Hover on a heading to see its ID</p>
-      </StoryHeader>
-      {Object.values(typographyList).map(
-        ({ id, name, size, weight, line, font }) => (
-          <StoryGridRow title={id} key={id}>
-            <Heading level="1" typography={id}>
-              {name} - {weight} - {size}/{line} {font}
-            </Heading>
-          </StoryGridRow>
-        ),
-      )}
-    </StoryWrapper>
-  ),
-  parameters: {
-    backgrounds: { disable: true },
-  },
-};
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.cljs b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/heading.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
index 59c8e3dde..374ae545f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.heading
+(ns app.main.ui.ds.foundations.typography.heading
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
@@ -25,7 +25,6 @@
   (assert (or (valid-level? level)
               (nil? level))
           (dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
-
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.mdx b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
similarity index 88%
rename from frontend/src/app/main/ui/ds/foundations/heading.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
index 52e3bb120..ffda6ede4 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
@@ -11,7 +11,7 @@ This component will add a heading tag element to our code.
 
 This components accepts to props:
 
-- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.). 
+- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `level / typography`;
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.scss b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/heading.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.scss
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
index 67cdb3a98..28336b90f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Heading } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Heading",
diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/text.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/text.cljs
index 0372a0b0f..e5e24907c 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.text
+(ns app.main.ui.ds.foundations.typography.text
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
diff --git a/frontend/src/app/main/ui/ds/foundations/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.mdx
index 0f526cf27..76c61a625 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
@@ -10,7 +10,7 @@ This component will add a text element to our code that will match the tag prop.
 
 This components accepts to props:
 
-- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.). 
+- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `tag / typography`
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.text :refer [text*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:
diff --git a/frontend/src/app/main/ui/ds/foundations/text.scss b/frontend/src/app/main/ui/ds/foundations/typography/text.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/text.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/text.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.scss
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
index 271a09960..31cceaa5d 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Text } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Text",
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
similarity index 73%
rename from frontend/src/app/main/ui/ds/foundations/typography.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
index e36d29271..a3fae5d15 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.mdx
+++ b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
@@ -1,8 +1,7 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as TypographyStories from "./typography.stories";
+import { Canvas, Meta } from "@storybook/blocks";
 import Components from "@target/components";
 
-<Meta of={TypographyStories} />
+<Meta title="Foundations/Typography" />
 
 # Typography
 
@@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements.
 Typographic colours are used in text elements such as headers
 and body and in the various components that make up the tool...
 
-The colours used in typography are the Foreground colours such 
+The colours used in typography are the Foreground colours such
 `--color-foreground-primary` or `--color-foreground-secondary`
 but different colours can be applied in specific component
 applications with their own styles, such as buttons.
@@ -55,7 +54,7 @@ for exceptions based on the size of the components.
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title large `title-large`
@@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title medium `title-medium`
@@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Title small `title-small`
@@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
 Uses the same size as body (large).
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Headline
@@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
 ### Headline large `headline-large`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Headline medium `headline-medium`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 
 ### Headline small `headline-small`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Body
@@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
 Generic content.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Body medium `body-medium`
@@ -123,7 +122,7 @@ Generic content.
 Default UI font. Most commonly used for body text.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 
@@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Code font `code-font`
@@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
 Default style for rendering code blocks.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
+  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
 </Canvas>
 
 ## Fonts