diff --git a/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx b/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx
index b91e75a3e..9ebf0ff89 100644
--- a/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx
+++ b/src/components/compensations/components/yearlyBonuses/YearlyBonuses.tsx
@@ -31,10 +31,10 @@ const YearlyBonuses = ({ bonuses, locale }: YearlyBonusesProps) => {
             .map((bonus) => (
               <tr key={bonus._key}>
                 <th>
-                  <Text type={"small"}>{bonus.year}</Text>
+                  <Text type={"bodySmall"}>{bonus.year}</Text>
                 </th>
                 <td className={styles.bonusCell}>
-                  <Text type={"small"}>
+                  <Text type={"bodySmall"}>
                     {formatAsCurrency(
                       bonus.bonus,
                       locale.locale,
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index a677a7d8b..fb5769ec0 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -20,7 +20,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
           <SanitySharedImage image={customerCase.image} />
         </div>
         <div className={styles.ingress}>
-          <Text type={"bodyLarge"}>{customerCase.description}</Text>
+          <Text type={"bodyBig"}>{customerCase.description}</Text>
           <div className={styles.projectInfo}>
             <div className={styles.projectInfoItem}>
               <Text>Kunde</Text>
diff --git a/src/components/forms/checkbox/Checkbox.tsx b/src/components/forms/checkbox/Checkbox.tsx
index 0c02491c9..1e0648a82 100644
--- a/src/components/forms/checkbox/Checkbox.tsx
+++ b/src/components/forms/checkbox/Checkbox.tsx
@@ -47,7 +47,7 @@ const Checkbox = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"
diff --git a/src/components/forms/inputField/InputField.tsx b/src/components/forms/inputField/InputField.tsx
index 24ceede44..6898b9b2f 100644
--- a/src/components/forms/inputField/InputField.tsx
+++ b/src/components/forms/inputField/InputField.tsx
@@ -74,7 +74,7 @@ const InputField = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"
diff --git a/src/components/forms/inputTextArea/InputTextArea.tsx b/src/components/forms/inputTextArea/InputTextArea.tsx
index 1180d57c3..4e82c195e 100644
--- a/src/components/forms/inputTextArea/InputTextArea.tsx
+++ b/src/components/forms/inputTextArea/InputTextArea.tsx
@@ -48,7 +48,7 @@ const InputTextArea = ({
       {error && (
         <span>
           <Text
-            type="small"
+            type="bodySmall"
             className={styles.error}
             id={hintID}
             aria-live="assertive"
diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
index c0ddd0654..282e683dd 100644
--- a/src/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -22,7 +22,7 @@ export default function LanguageSwitcher({
           return null;
         }
         const linkText = (
-          <Text type={"small"}>{pathTranslation._key.toUpperCase()}</Text>
+          <Text type={"bodySmall"}>{pathTranslation._key.toUpperCase()}</Text>
         );
         return (
           <Fragment key={pathTranslation._key}>
diff --git a/src/components/legal/Legal.tsx b/src/components/legal/Legal.tsx
index 162d7a864..60a2c0b8d 100644
--- a/src/components/legal/Legal.tsx
+++ b/src/components/legal/Legal.tsx
@@ -67,7 +67,7 @@ const Legal = ({ document }: { document: LegalDocument }) => {
               <RichText value={document.richText} />
             ) : (
               <section className={styles.document}>
-                <Text type="body">
+                <Text type="bodyNormal">
                   It appears that this legal document is missing some
                   information. Please visit the studio to add the necessary
                   details.
diff --git a/src/components/richText/RichText.tsx b/src/components/richText/RichText.tsx
index 1ae76fdbf..acd79337b 100644
--- a/src/components/richText/RichText.tsx
+++ b/src/components/richText/RichText.tsx
@@ -32,7 +32,7 @@ const myPortableTextComponents: Partial<PortableTextReactComponents> = {
         {children}
       </Text>
     ),
-    normal: ({ children }) => <Text type="body">{children}</Text>,
+    normal: ({ children }) => <Text type="bodyNormal">{children}</Text>,
     blockquote: ({ children }) => (
       <blockquote className={`${styles.blockquote} ${textStyles.body}`}>
         {children}
diff --git a/src/components/sections/article/Article.tsx b/src/components/sections/article/Article.tsx
index b85bd6687..5d7594bf7 100644
--- a/src/components/sections/article/Article.tsx
+++ b/src/components/sections/article/Article.tsx
@@ -24,7 +24,7 @@ const Article = ({ article }: ArticleProps) => {
         )}
         <div className={styles.content}>
           <div>
-            <Text type="caption">{article.tag}</Text>
+            <Text type="labelSmall">{article.tag}</Text>
             <Text type="h2">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}
diff --git a/src/components/sections/callout/Callout.tsx b/src/components/sections/callout/Callout.tsx
index 98355f8a4..4bf164098 100644
--- a/src/components/sections/callout/Callout.tsx
+++ b/src/components/sections/callout/Callout.tsx
@@ -11,7 +11,7 @@ interface CalloutProps {
 }
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
+  block: ({ children }) => <Text type="bodyXl">{children}</Text>,
 };
 
 const Callout = ({ callout }: CalloutProps) => {
diff --git a/src/components/sections/grid/Grid.tsx b/src/components/sections/grid/Grid.tsx
index e90429dbf..3c6378a07 100644
--- a/src/components/sections/grid/Grid.tsx
+++ b/src/components/sections/grid/Grid.tsx
@@ -58,5 +58,5 @@ const Element = ({
 };
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="small">{children}</Text>,
+  block: ({ children }) => <Text type="bodySmall">{children}</Text>,
 };
diff --git a/src/components/sections/hero/Hero.tsx b/src/components/sections/hero/Hero.tsx
index ff4f4f7f2..664908122 100644
--- a/src/components/sections/hero/Hero.tsx
+++ b/src/components/sections/hero/Hero.tsx
@@ -20,12 +20,12 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
     >
       {isLanding ? (
         <div className={styles.secondary}>
-          <Text type="display" className={styles.title}>
+          <Text type="h1" className={styles.title}>
             {hero.basicTitle}
           </Text>
           {hero.description && (
             <div className={styles.description}>
-              <Text type="bodyLarge">{hero.description}</Text>
+              <Text type="bodyBig">{hero.description}</Text>
             </div>
           )}
           <ul className={styles.cta}>
@@ -46,9 +46,7 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
       ) : (
         <div className={styles.primary}>
           <Text type="h1">{hero.basicTitle}</Text>
-          {hero.description && (
-            <Text type="bodySuperLarge">{hero.description}</Text>
-          )}
+          {hero.description && <Text type="bodyXl">{hero.description}</Text>}
         </div>
       )}
     </div>
diff --git a/src/components/sections/logoSalad/LogoSalad.tsx b/src/components/sections/logoSalad/LogoSalad.tsx
index ecc443036..f66df6b53 100644
--- a/src/components/sections/logoSalad/LogoSalad.tsx
+++ b/src/components/sections/logoSalad/LogoSalad.tsx
@@ -11,7 +11,7 @@ interface LogoSaladProps {
 }
 
 const myPortableTextComponents: Partial<PortableTextReactComponents> = {
-  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
+  block: ({ children }) => <Text type="bodyXl">{children}</Text>,
 };
 
 export const LogoSalad = ({ logoSalad }: LogoSaladProps) => {
diff --git a/src/components/text/Text.stories.tsx b/src/components/text/Text.stories.tsx
index a618517b1..d77b7ccdd 100644
--- a/src/components/text/Text.stories.tsx
+++ b/src/components/text/Text.stories.tsx
@@ -10,15 +10,29 @@ const meta: Meta<typeof Text> = {
       control: {
         type: "select",
         options: [
-          "display",
+          "desktopLink",
           "h1",
           "h2",
           "h3",
-          "bodySuperLarge",
-          "bodyLarge",
-          "body",
-          "small",
-          "caption",
+          "h4",
+          "h5",
+          "h6",
+          "h7",
+          "labelSmall",
+          "labelLight",
+          "labelRegular",
+          "labelSemibold",
+          "labelBold",
+          "quoteItalic",
+          "quoteNormal",
+          "bodyExtraSmall",
+          "bodySmall",
+          "bodyNormal",
+          "bodySmall",
+          "bodyBig",
+          "bodyXl",
+          "mobileH1",
+          "mobileBodyNormal",
         ],
       },
     },
@@ -31,9 +45,9 @@ const meta: Meta<typeof Text> = {
 export default meta;
 type Story = StoryObj<typeof Text>;
 
-export const Display: Story = {
+export const DesktopLink: Story = {
   args: {
-    type: "display",
+    type: "desktopLink",
     children: "This is a display text",
   },
 };
@@ -59,37 +73,114 @@ export const H3: Story = {
   },
 };
 
-export const BodySuperLarge: Story = {
+export const H4: Story = {
   args: {
-    type: "bodySuperLarge",
-    children: "This is a Body Super Large text",
+    type: "h4",
+    children: "This is an H4 text",
   },
 };
 
-export const BodyLarge: Story = {
+export const H5: Story = {
   args: {
-    type: "bodyLarge",
-    children: "This is a Body Large text",
+    type: "h5",
+    children: "This is an H5 text",
   },
 };
 
-export const Body: Story = {
+export const H6: Story = {
   args: {
-    type: "body",
-    children: "This is a Body text",
+    type: "h6",
+    children: "This is an H6 text",
+  },
+};
+
+export const H7: Story = {
+  args: {
+    type: "h7",
+    children: "This is an H7 text",
+  },
+};
+
+export const LabelSmall: Story = {
+  args: {
+    type: "labelSmall",
+    children: "This is a Label Small text",
+  },
+};
+
+export const LabelLight: Story = {
+  args: {
+    type: "labelLight",
+    children: "This is a Label Light text",
+  },
+};
+
+export const LabelRegular: Story = {
+  args: {
+    type: "labelRegular",
+    children: "This is a Label Regular text",
+  },
+};
+
+export const LabelSemibold: Story = {
+  args: {
+    type: "labelSemibold",
+    children: "This is a Label Semibold text",
+  },
+};
+
+export const QuoteItalic: Story = {
+  args: {
+    type: "quoteItalic",
+    children: "This is a Quote Italic text",
   },
 };
 
-export const Small: Story = {
+export const QuoteNormal: Story = {
   args: {
-    type: "small",
+    type: "quoteNormal",
+    children: "This is a Quote Normal text",
+  },
+};
+
+export const BodySmall: Story = {
+  args: {
+    type: "bodySmall",
     children: "This is a Small text",
   },
 };
 
-export const Caption: Story = {
+export const BodyNormal: Story = {
+  args: {
+    type: "bodyNormal",
+    children: "This is a Body text",
+  },
+};
+
+export const BodyBig: Story = {
+  args: {
+    type: "bodyBig",
+    children: "This is a Body Super Large text",
+  },
+};
+
+export const BodyXl: Story = {
+  args: {
+    type: "bodyXl",
+    children: "This is a Body Large text",
+  },
+};
+
+export const MobileH1: Story = {
+  args: {
+    type: "mobileH1",
+    children: "This is a Mobile H1 text",
+  },
+};
+
+export const MobileBodyNormal: Story = {
   args: {
-    type: "caption",
-    children: "This is a Caption text",
+    type: "mobileBodyNormal",
+    children: "This is a Mobile Body text",
   },
 };
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
index ce8902217..8d9b0ebf0 100644
--- a/src/components/text/Text.tsx
+++ b/src/components/text/Text.tsx
@@ -1,42 +1,82 @@
 import styles from "./text.module.css";
 
 export type TextType =
-  | "display"
   | "h1"
   | "h2"
   | "h3"
-  | "bodySuperLarge"
-  | "bodyLarge"
-  | "body"
-  | "small"
-  | "caption";
+  | "h4"
+  | "h5"
+  | "h6"
+  | "h7"
+  | "desktopLink"
+  | "labelSmall"
+  | "labelLight"
+  | "labelRegular"
+  | "labelSemibold"
+  | "labelBold"
+  | "quoteItalic"
+  | "quoteNormal"
+  | "bodyExtraSmall"
+  | "bodySmall"
+  | "bodyNormal"
+  | "bodySmall"
+  | "bodyBig"
+  | "bodyXl"
+  | "mobileH1"
+  | "mobileBodyNormal";
 
 const elementMap: { [key in TextType]: string } = {
-  display: "h1",
   h1: "h1",
   h2: "h2",
   h3: "h3",
-  bodySuperLarge: "p",
-  bodyLarge: "p",
-  body: "p",
-  small: "p",
-  caption: "p",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  h7: "h7",
+  desktopLink: "p",
+  labelSmall: "p",
+  labelLight: "p",
+  labelRegular: "p",
+  labelSemibold: "p",
+  labelBold: "p",
+  quoteItalic: "p",
+  quoteNormal: "p",
+  bodyExtraSmall: "p",
+  bodySmall: "p",
+  bodyNormal: "p",
+  bodyBig: "p",
+  bodyXl: "p",
+  mobileH1: "h1",
+  mobileBodyNormal: "p",
 };
 
 const classMap: { [key in TextType]?: string } = {
-  display: styles.display,
   h1: styles.h1,
   h2: styles.h2,
   h3: styles.h3,
-  bodySuperLarge: styles.bodySuperLarge,
-  bodyLarge: styles.bodyLarge,
-  body: styles.body,
-  small: styles.small,
-  caption: styles.caption,
+  h4: styles.h4,
+  h5: styles.h5,
+  h6: styles.h6,
+  h7: styles.h7,
+  desktopLink: styles.desktopLink,
+  labelSmall: styles.labelSmall,
+  labelLight: styles.labelLight,
+  labelRegular: styles.labelRegular,
+  labelSemibold: styles.labelSemibold,
+  labelBold: styles.labelBold,
+  quoteItalic: styles.quoteItalic,
+  quoteNormal: styles.quoteNormal,
+  bodyExtraSmall: styles.bodyExtraSmall,
+  bodySmall: styles.bodySmall,
+  bodyNormal: styles.bodyNormal,
+  bodyBig: styles.bodyBig,
+  bodyXl: styles.bodyXl,
+  mobileH1: styles.mobileH1,
+  mobileBodyNormal: styles.mobileBodyNormal,
 };
 
 const Text = ({
-  type = "body",
+  type = "bodyNormal",
   children,
   id,
   className,
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index dda66385a..0f56e2db5 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -1,37 +1,40 @@
-.display,
+.desktopLink,
 .h1,
 .h2,
 .h3,
-.bodySuperLarge {
+.h4,
+.h5,
+.h6,
+.h7,
+.bodyXl {
   color: var(--primary-black);
   font-family: var(--font-britti-sans);
 }
 
-.bodyLarge,
-.body,
-.small,
-.caption,
+.bodyBig,
+.bodyNormal,
+.labelSmall,
+.labelLight,
+.labelRegular,
+.labelSemibold,
+.labelBold,
+.quoteItalic,
+.quoteNormal,
+.bodyExtraSmall,
+.bodySmall,
+.bodyNormal,
+.bodyBig,
 .list {
   color: var(--primary-black);
   font-family: var(--font-britti-sans);
   line-height: 140%;
 }
 
-.display {
-  font-size: 3.75rem;
-  line-height: 100%;
-  font-weight: 500;
-
-  @media (min-width: 1024px) {
-    font-size: 5.25rem;
-    line-height: normal;
-  }
-}
-
 .h1 {
-  font-size: 3.125rem;
+  font-size: 4.5rem;
+  font-style: normal;
   font-weight: 500;
-  line-height: 110%;
+  line-height: 120%;
 
   @media (min-width: 1024px) {
     font-size: 4.25rem;
@@ -58,7 +61,20 @@
   }
 }
 
-.bodySuperLarge {
+/* TODO: we need to add sizes og h4-h7 */
+
+.desktopLink {
+  font-size: 10rem;
+  line-height: 100%;
+  font-weight: 500;
+
+  @media (min-width: 1024px) {
+    font-size: 5.25rem;
+    line-height: normal;
+  }
+}
+
+.bodyXl {
   font-size: 2.125rem;
   font-weight: 500;
 
@@ -67,7 +83,7 @@
   }
 }
 
-.bodyLarge {
+.bodyBig {
   font-size: 1.5rem;
   font-weight: 400;
 
@@ -76,7 +92,7 @@
   }
 }
 
-.body {
+.bodyNormal {
   font-size: 1.25rem;
   font-weight: 400;
 
@@ -85,7 +101,7 @@
   }
 }
 
-.small {
+.bodySmall {
   font-size: 1rem;
   font-weight: 400;
 
@@ -94,7 +110,7 @@
   }
 }
 
-.caption {
+.labelSmall {
   font-size: 1rem;
   font-weight: 500;
   color: var(--primary-dark);
@@ -103,3 +119,5 @@
     font-size: 1.125rem;
   }
 }
+
+/* TODO: We need to add media sizes to all text styles */
diff --git a/studio/schemas/fields/text.ts b/studio/schemas/fields/text.ts
index 0aca30990..a2f8a243d 100644
--- a/studio/schemas/fields/text.ts
+++ b/studio/schemas/fields/text.ts
@@ -69,7 +69,7 @@ export const richTextID = "richText";
 
 export const richText = defineField({
   name: richTextID,
-  title: "Body",
+  title: "BodyNormal",
   type: "array",
   of: [
     {