diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/text.cljs
index 180ee703f..0372a0b0f 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/text.cljs
@@ -17,12 +17,12 @@
 
 (mf/defc text*
   {::mf/props :obj}
-  [{:keys [tag typography children class] :rest props}]
+  [{:keys [as typography children class] :rest props}]
 
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
-  (let [tag (or tag "p")
+  (let [as (or as "p")
         class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
                                                       :title-large-typography (= typography t/title-large)
                                                       :title-medium-typography (= typography t/title-medium)
@@ -35,5 +35,5 @@
                                                       :body-small-typography (= typography t/body-small)
                                                       :code-font-typography (= typography t/code-font)))
         props (mf/spread-props props {:class class})]
-    [:> tag props
+    [:> as props
      children]))
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
index 703522c3f..271a09960 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
+++ b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
@@ -1,54 +1,40 @@
 import * as React from "react";
 import Components from "@target/components";
+import { typographyIds } from "./typography.stories";
 
 const { Text } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
+const { StoryWrapper } = Components.storybook;
 
 export default {
-  title: "Foundations/Text",
-  component: Components.Text,
+  title: "Foundations/Typography/Text",
+  component: Text,
+  argTypes: {
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    }
+  }
 };
 
-export const TextTags = {
-  render: () => (
+export const Default = {
+  render: ({typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"span / title-large"}>
-        <Text tag="span" typography="title-large">
-          span / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"div / title-large"}>
-        <Text tag="div" typography="title-large">
-          div / Title large
-        </Text>
-      </StoryGridRow>
+      <Text typography={typography} {...args}>Lorem ipsum</Text>
     </StoryWrapper>
   ),
+  args: {
+    typography: "display"
+  }
 };
 
-export const TypographyParagraph = {
-  render: () => (
+export const CustomTag = {
+  render: ({typography, ...args}) => (
     <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / title-medium"}>
-        <Text tag="p" typography="title-medium">
-          p / Title medium
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / code-font"}>
-        <Text tag="p" typography="code-font">
-          p / Code font
-        </Text>
-      </StoryGridRow>
+      <Text typography={typography} {...args}>Lorem ipsum</Text>
     </StoryWrapper>
   ),
-};
+  args: {
+    typography: "display",
+    as: "li"
+  }
+}