diff --git a/.changeset/fast-pandas-behave.md b/.changeset/fast-pandas-behave.md
new file mode 100644
index 000000000..ce17a47a5
--- /dev/null
+++ b/.changeset/fast-pandas-behave.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+feat(ui): add FormattedText component. Update: Removed package 'tailwindcss-typography' and added SCSS file to rebuild this behavior.
diff --git a/commitlint.config.js b/commitlint.config.js
index 166b25d3c..c0be888fb 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -4,7 +4,7 @@ module.exports = {
     "type-enum": [
       2,
       "always",
-      ["build", "chore", "fix", "feat", "publish", "release", "refactor", "research", "style", "test"],
+      ["build", "chore", "fix", "feat", "merge", "publish", "release", "refactor", "research", "style", "test"],
     ], // Enforces the type to be one of the specified values
     "scope-enum": [
       2,
@@ -25,6 +25,7 @@ module.exports = {
         "juno",
         "k8s",
         "message-provider",
+        "main",
         "npm",
         "oauth",
         "supernova",
diff --git a/packages/ui-components/rollup.config.js b/packages/ui-components/rollup.config.js
index 80d276804..cc222eb04 100644
--- a/packages/ui-components/rollup.config.js
+++ b/packages/ui-components/rollup.config.js
@@ -59,7 +59,10 @@ const plugins = [
     ],
   }),
 
-  nodeResolve(),
+  nodeResolve({
+    browser: true, // Ensure resolution is for browser environment
+    preferBuiltins: false, // Avoid Node.js built-in modules like 'tty'
+  }),
   babel({
     babelHelpers: "bundled",
   }),
diff --git a/packages/ui-components/src/components/FormattedText/FormattedText.component.tsx b/packages/ui-components/src/components/FormattedText/FormattedText.component.tsx
new file mode 100644
index 000000000..d281afff6
--- /dev/null
+++ b/packages/ui-components/src/components/FormattedText/FormattedText.component.tsx
@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import "./formatted-text.scss"
+
+export interface FormattedTextProps {
+  /** Add custom class name */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * A very basic layout container with padding.
+ */
+export const FormattedText = ({
+  className = "", // Default value for className
+  children = null, // Default value for children
+  ...props
+}: FormattedTextProps) => {
+  return (
+    <div className={`formatted-text-container ${className} `} {...props}>
+      {children}
+    </div>
+  )
+}
+
+FormattedText.defaultProps = {
+  className: "",
+  children: null,
+}
diff --git a/packages/ui-components/src/components/FormattedText/FormattedText.stories.tsx b/packages/ui-components/src/components/FormattedText/FormattedText.stories.tsx
new file mode 100644
index 000000000..4f2bc035f
--- /dev/null
+++ b/packages/ui-components/src/components/FormattedText/FormattedText.stories.tsx
@@ -0,0 +1,188 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { FormattedText } from "./FormattedText.component"
+import { FormattedTextProps } from "./FormattedText.component"
+
+// Remove the import statement for "ComponentStory"
+export default {
+  title: "Components/FormattedText",
+  component: FormattedText,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A layout element for styling text content. By default, all texts are displayed with predefined sizes and spacing.",
+      },
+    },
+  },
+}
+
+const Template = (args: FormattedTextProps) => (
+  <FormattedText {...args}>
+    <h1>Headline 1</h1>
+    <h2>Headline 2</h2>
+    <h3>Headline 3</h3>
+    <h4>Headline 4</h4>
+    <h5>Headline 5</h5>
+    <article>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint:
+      </p>
+      <ul>
+        <li>
+          Consectetur adipiscing elit
+          <a href="https://ui.juno.global.cloud.sap" rel="nofollow">
+            Link
+          </a>
+        </li>
+        <li>Incididunt ut labore et dolore magna aliqua.</li>
+        <li>Nostrud exercitation ullamco laboris</li>
+        <li>Mollit anim id est laborum</li>
+        <li>Nostrud exercitation ullamco laboris</li>
+        <li>Ponsectetur adipiscing elit, sed do eiusmod</li>
+        <li>Gullamco laboris nisi ut aliquip ex ea commodo</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>
+          Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+          cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </li>
+      </ul>
+      <div>
+        <h2>Concepts</h2>
+        <table>
+          <tr>
+            <th>Book Name</th>
+            <th>Author Name</th>
+            <th>Genre</th>
+          </tr>
+          <tr>
+            <td>The Book Thief</td>
+            <td>Markus Zusak</td>
+            <td>Historical Fiction</td>
+          </tr>
+          <tr>
+            <td>The Cruel Prince</td>
+            <td>Holly Black</td>
+            <td>Fantasy</td>
+          </tr>
+          <tr>
+            <td>The Silent Patient</td>
+            <td> Alex Michaelides</td>
+            <td>Psychological Fiction</td>
+          </tr>
+        </table>
+      </div>
+      <div>
+        <h3>Alerts</h3>
+      </div>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
+        <code>Some code</code>.
+      </p>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h4>h4: Labels</h4>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
+        <code>Some code</code> and
+        <code>more code</code> in <code>code code code ...</code>.
+      </p>
+    </article>
+    <article>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <ol>
+        <li>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </p>
+        </li>
+        <li>
+          <p>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </li>
+        <li>
+          <p>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+          </p>
+        </li>
+        <li>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </p>
+        </li>
+      </ol>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <h4>h4: Nisi ut aliquip</h4>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h4>h4: Commodo consequat</h4>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <h5>h5: Duis aute irure dolor in reprehenderit</h5>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </article>
+  </FormattedText>
+)
+
+export const Basic = {
+  render: Template,
+
+  parameters: {
+    docs: {
+      description: {
+        story: "A basic FormattedTextcomponent with various text elements.",
+      },
+    },
+  },
+
+  args: {},
+}
diff --git a/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
new file mode 100644
index 000000000..4df41c9d4
--- /dev/null
+++ b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest" // Import expect from vitest
+import { FormattedText } from "./index"
+
+describe("FormattedText", () => {
+  it("renders a custom className as passed", () => {
+    render(<FormattedText className="my-class" data-testid="my-pagination" />)
+    const element = screen.getByTestId("my-pagination")
+    expect(element).not.toBeNull() // Check if element exists
+    expect(element.className).toContain("my-class") // Check class name contains "my-class"
+  })
+
+  it("renders all props as passed", () => {
+    render(<FormattedText data-testid="my-pagination" data-lolol="123-456" />)
+    const element = screen.getByTestId("my-pagination")
+    expect(element).not.toBeNull() // Check if element exists
+    expect(element.getAttribute("data-lolol")).toBe("123-456") // Check attribute value
+  })
+})
diff --git a/packages/ui-components/src/components/FormattedText/formatted-text.scss b/packages/ui-components/src/components/FormattedText/formatted-text.scss
new file mode 100644
index 000000000..889d4dbf0
--- /dev/null
+++ b/packages/ui-components/src/components/FormattedText/formatted-text.scss
@@ -0,0 +1,221 @@
+.formatted-text-container {
+  font-size: 1rem;
+  line-height: round(28 / 16);
+
+  p {
+    font-size: 1rem;
+    line-height: 150%;
+    margin-top: 1.25rem; // rem(20)
+    margin-bottom: 1.25rem; // rem(20)
+  }
+
+  a {
+    color: var(--color-accent);
+
+    &:hover {
+      color: var(--color-text-default); // Desired hover color
+    }
+  }
+
+  [class~="lead"] {
+    font-size: 1.25rem; // rem(20)
+    line-height: round(32 / 20);
+    margin-top: 1.5rem; // rem(24)
+    margin-bottom: 1.5rem; // rem(24)
+  }
+
+  blockquote {
+    margin-top: 2rem; // rem(32)
+    margin-bottom: 2rem; // rem(32)
+    padding-inline-start: 1.25rem; // rem(20)
+  }
+
+  h1 {
+    font-size: 1.69rem;
+    font-weight: 700;
+    line-height: 160%;
+    margin-top: 0;
+    margin-bottom: 2rem; // rem(32)
+    line-height: round(40 / 36);
+  }
+
+  h2 {
+    font-size: 1.56rem;
+    font-weight: 700;
+    line-height: 160%;
+    margin-top: 3rem; // rem(48)
+    margin-bottom: 1.5rem; // rem(24)
+  }
+
+  h3 {
+    font-size: 1.44rem;
+    font-weight: 700;
+    line-height: 160%;
+    margin-top: 1rem;
+    margin-bottom: 0.75rem; // rem(12)
+  }
+
+  h4 {
+    font-size: 1.28rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 160%;
+    margin-top: 1.5rem; // rem(24)
+    margin-bottom: 0.5rem; // rem(8)
+  }
+
+  h5 {
+    font-size: 1.03rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 160%;
+  }
+
+  img,
+  picture,
+  video {
+    margin-top: 2rem; // rem(32)
+    margin-bottom: 2rem; // rem(32)
+  }
+
+  picture > img {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  kbd {
+    font-size: 0.875rem; // rem(14)
+    border-radius: 0.3125rem; // rem(5)
+    padding: 0.1875rem 0.375rem; // rem(3) rem(6)
+  }
+
+  code {
+    font-family: IBM Plex Mono;
+    font-size: 0.875rem;
+    background-color: var(--color-background-lvl-2);
+    border-radius: 0.25rem; // 4px
+    font-weight: 400;
+    margin: 0 0.125rem; // 2px
+  }
+
+  h2 code {
+    font-size: 1.3125rem; // rem(21)
+  }
+
+  h3 code {
+    font-size: 1.125rem; // rem(18)
+  }
+
+  pre {
+    font-size: 0.875rem; // rem(14)
+    line-height: round(24 / 14);
+    margin-top: 1.5rem; // rem(24)
+    margin-bottom: 1.5rem; // rem(24)
+    border-radius: 0.375rem; // rem(6)
+    padding: 0.75rem 1rem; // rem(12) rem(16)
+  }
+
+  ol,
+  ul {
+    margin-top: 1.25rem; // rem(20)
+    margin-bottom: 1.25rem; // rem(20)
+    padding-inline-start: 1.625rem; // rem(26)
+  }
+
+  li {
+    margin-top: 0.5rem; // rem(8)
+    margin-bottom: 0.5rem; // rem(8)
+    line-height: 160%;
+  }
+
+  ol > li,
+  ul > li {
+    padding-inline-start: 0.375rem; // rem(6)
+  }
+
+  ol > li {
+    list-style-type: decimal;
+  }
+
+  ul > li {
+    list-style-type: disc;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.75rem; // rem(12)
+    margin-bottom: 0.75rem; // rem(12)
+  }
+
+  dl {
+    margin-top: 1.25rem; // rem(20)
+    margin-bottom: 1.25rem; // rem(20)
+  }
+
+  dt {
+    margin-top: 1.25rem; // rem(20)
+  }
+
+  dd {
+    margin-top: 0.5rem; // rem(8)
+    padding-inline-start: 1.625rem; // rem(26)
+  }
+
+  hr {
+    margin-top: 3rem; // rem(48)
+    margin-bottom: 3rem; // rem(48)
+  }
+
+  table {
+    font-size: 0.875rem; // rem(14)
+    line-height: round(24 / 14);
+    text-align: left;
+  }
+
+  thead,
+  th {
+    padding: 0.5rem 0.5rem;
+    text-align: left;
+  }
+
+  tbody,
+  td,
+  tfoot,
+  td {
+    padding: 0.5rem 0.5rem;
+  }
+  tr {
+    border-bottom: 1px solid var(--color-background-lvl-2);
+  }
+  tr:nth-child(even) {
+  }
+  tr:nth-child(odd) {
+    // --tw-bg-opacity: 1;
+    // background-color: rgba(var(--color-background-lvl-1-raw), var(--tw-bg-opacity));
+  }
+  th,
+  thead {
+    background-color: var(--color-background-lvl-1);
+  }
+
+  figure {
+    margin-top: 2rem; // rem(32)
+    margin-bottom: 2rem; // rem(32)
+  }
+
+  figcaption {
+    font-size: 0.875rem; // rem(14)
+    line-height: round(20 / 14);
+    margin-top: 0.75rem; // rem(12)
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/packages/ui-components/src/components/FormattedText/index.ts b/packages/ui-components/src/components/FormattedText/index.ts
new file mode 100644
index 000000000..ffddf3912
--- /dev/null
+++ b/packages/ui-components/src/components/FormattedText/index.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { FormattedText } from "./FormattedText.component"
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
index 5cea9863a..f0a740409 100644
--- a/packages/ui-components/src/index.js
+++ b/packages/ui-components/src/index.js
@@ -42,6 +42,7 @@ export { FilterInput } from "./components/FilterInput/index.js"
 export { FilterPill } from "./components/FilterPill/index.js"
 export { Filters } from "./components/Filters/index.js"
 export { Form } from "./components/Form/index.js"
+export { FormattedText } from "./components/FormattedText/"
 export { FormRow } from "./components/FormRow/index.js"
 export { FormSection } from "./components/FormSection/index.js"
 export { Grid } from "./components/Grid"