diff --git a/.changeset/nice-moons-watch.md b/.changeset/nice-moons-watch.md
new file mode 100644
index 000000000..fe03d2c25
--- /dev/null
+++ b/.changeset/nice-moons-watch.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate NativeSelect, NativeSelectionOption and NativeSelectOptionGroup components to TypeScript
diff --git a/.changeset/shaggy-pots-repeat.md b/.changeset/shaggy-pots-repeat.md
new file mode 100644
index 000000000..e1c0496ce
--- /dev/null
+++ b/.changeset/shaggy-pots-repeat.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate Form, FormRow and FormSection components to TypeScript
diff --git a/packages/ui-components/src/components/FilterInput/FilterInput.component.js b/packages/ui-components/src/components/FilterInput/FilterInput.component.js
index 69fd626d1..4a748642d 100644
--- a/packages/ui-components/src/components/FilterInput/FilterInput.component.js
+++ b/packages/ui-components/src/components/FilterInput/FilterInput.component.js
@@ -5,8 +5,8 @@
 
 import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
-import { NativeSelect } from "../NativeSelect/NativeSelect.component"
-import { NativeSelectOption } from "../NativeSelectOption/NativeSelectOption.component"
+import { NativeSelect } from "../../deprecated_js/NativeSelect/NativeSelect.component"
+import { NativeSelectOption } from "../../deprecated_js/NativeSelectOption/NativeSelectOption.component"
 import { TextInput } from "../../deprecated_js/TextInput/TextInput.component"
 import { Icon } from "../../deprecated_js/Icon/Icon.component"
 
diff --git a/packages/ui-components/src/components/Form/Form.component.js b/packages/ui-components/src/components/Form/Form.component.js
deleted file mode 100644
index e85a6f8b3..000000000
--- a/packages/ui-components/src/components/Form/Form.component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-
-const formStyles = `
-	jn-mb-8
-`
-
-const formHeading = `
-	jn-text-2xl
-	jn-font-bold
-	jn-mb-4
-`
-
-/** A Form to hold FormSections and/or FormGroups with an optional title. */
-export const Form = ({ title = null, className = "", children = null, ...props }) => {
-  return (
-    <form className={`juno-form ${formStyles} ${className}`} {...props}>
-      {title ? <h1 className={`juno-form-heading ${formHeading}`}>{title}</h1> : ""}
-      {children}
-    </form>
-  )
-}
-
-Form.propTypes = {
-  /** Title to be rendered in the Form`. */
-  title: PropTypes.string,
-  /** Custom className */
-  className: PropTypes.string,
-  /** Children to render in the form */
-  children: PropTypes.node,
-}
diff --git a/packages/ui-components/src/components/Form/Form.component.tsx b/packages/ui-components/src/components/Form/Form.component.tsx
new file mode 100644
index 000000000..422f037c0
--- /dev/null
+++ b/packages/ui-components/src/components/Form/Form.component.tsx
@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactNode, FormHTMLAttributes } from "react"
+
+const formBaseStyles = `
+  jn-mb-8
+`
+
+const formTitleStyles = `
+  jn-text-2xl
+  jn-font-bold
+  jn-mb-4
+`
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /**
+   * Title for the form.
+   */
+  title?: string
+
+  /**
+   * Additional CSS classes to apply to the form for custom styling.
+   */
+  className?: string
+
+  /**
+   * Content to render inside the form.
+   * This can include FormSections, FormGroups, and other form elements.
+   */
+  children?: ReactNode
+}
+
+/**
+ * A Form component used to encapsulate FormSections and/or FormGroups.
+ * Can be used to build complex forms with structured sections.
+ */
+export const Form: React.FC<FormProps> = ({ title = "", className = "", children, ...props }) => {
+  return (
+    <form className={`juno-form ${formBaseStyles} ${className}`} {...props}>
+      {title ? <h1 className={`juno-form-heading ${formTitleStyles}`}>{title}</h1> : null}
+      {children}
+    </form>
+  )
+}
diff --git a/packages/ui-components/src/components/Form/Form.stories.js b/packages/ui-components/src/components/Form/Form.stories.tsx
similarity index 59%
rename from packages/ui-components/src/components/Form/Form.stories.js
rename to packages/ui-components/src/components/Form/Form.stories.tsx
index 30d3abbff..5e229095e 100644
--- a/packages/ui-components/src/components/Form/Form.stories.js
+++ b/packages/ui-components/src/components/Form/Form.stories.tsx
@@ -4,20 +4,31 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
-import { Form } from "./index.js"
-import { FormRow } from "../FormRow/index.js"
-import { FormSection } from "../FormSection/index.js"
-import { FormHint } from "../../deprecated_js/FormHint/index.js"
-import { TextInput } from "../../deprecated_js/TextInput/index.js"
-import { Select } from "../../deprecated_js/Select/index.js"
-import { SelectOption } from "../../deprecated_js/SelectOption/index.js"
-import { Switch } from "../../deprecated_js/Switch/Switch.component"
-import { Textarea } from "../../deprecated_js/Textarea/index.js"
-import { Button } from "../../deprecated_js/Button/index.js"
-import { ButtonRow } from "../../deprecated_js/ButtonRow/index.js"
-import { IntroBox } from "../IntroBox/index.ts"
-import { PortalProvider } from "../../deprecated_js/PortalProvider/PortalProvider.component"
+import { Meta, StoryFn } from "@storybook/react"
+
+import { Form, FormProps } from "./Form.component"
+import { FormRow } from "../FormRow/FormRow.component"
+import { FormHint } from "../FormHint/FormHint.component"
+import { FormSection } from "../FormSection/FormSection.component"
+
+import { Select } from "../Select/Select.component"
+import { SelectOption } from "../SelectOption/SelectOption.component"
+
+import { Textarea } from "../Textarea/Textarea.component"
+import { TextInput } from "../TextInput/TextInput.component"
+
+import { Button } from "../Button/Button.component"
+import { ButtonRow } from "../ButtonRow/ButtonRow.component"
+
+import { Radio } from "../Radio/Radio.component"
+import { RadioGroup } from "../RadioGroup/RadioGroup.component"
+
+import { Checkbox } from "../Checkbox/Checkbox.component"
+import { CheckboxGroup } from "../CheckboxGroup/CheckboxGroup.component"
+
+import { PortalProvider } from "../PortalProvider/PortalProvider.component"
+import { IntroBox } from "../IntroBox/IntroBox.component"
+import { Switch } from "../Switch/Switch.component"
 
 export default {
   title: "Forms/Form",
@@ -30,10 +41,13 @@ export default {
     },
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
   decorators: [
-    (Story) => (
+    (Story: StoryFn) => (
       <div className="jn-pb-12" style={{ minHeight: "250px" }}>
         <PortalProvider>
           <Story />
@@ -41,16 +55,13 @@ export default {
       </div>
     ),
   ],
-}
+} as Meta<typeof Form>
 
-const Template = ({ children, ...args }) => <Form {...args}>{children}</Form>
-Template.propTypes = {
-  children: PropTypes.node,
-}
+// eslint-disable-next-line react/prop-types
+const Template: StoryFn<FormProps> = ({ children, ...args }) => <Form {...args}>{children}</Form>
 
 export const Default = {
   render: Template,
-
   args: {
     title: "A Simple Form",
     children: [
@@ -73,7 +84,6 @@ export const Default = {
 
 export const ComplexForm = {
   render: Template,
-
   args: {
     title: "A Complex Form",
     children: [
@@ -101,6 +111,16 @@ export const ComplexForm = {
         </FormRow>
       </FormSection>,
       <FormSection title="Second Section of the Form" key="fs-2">
+        <RadioGroup name="color-radios" label="In case you are not sure, select your true favorite color:">
+          <Radio key="r-1" id="color-red" label="Red" value="red" />
+          <Radio key="r-2" id="color-blue" label="Blue" value="blue" />
+          <Radio key="r-3" id="color-green" label="Green" value="green" />
+          <Radio key="r-4" id="color-yellow" label="Yellow" value="yellow" />
+        </RadioGroup>
+        <CheckboxGroup name="all-about-red" label="What is your opinion towards the color Red?">
+          <Checkbox key="c-1" id="overrated" label="Red is vastly overrated" value="overrated" />
+          <Checkbox key="c-2" id="blackisred" label="Black is better" value="blackisbetter" />
+        </CheckboxGroup>
         <FormRow key="fr-4">
           <Textarea
             label="Your Message"
diff --git a/packages/ui-components/src/components/Form/Form.test.js b/packages/ui-components/src/components/Form/Form.test.js
deleted file mode 100644
index eeca33b2a..000000000
--- a/packages/ui-components/src/components/Form/Form.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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 { Form } from "./index"
-
-describe("Form", () => {
-  test("renders a Form", async () => {
-    render(<Form data-testid="my-form" />)
-    expect(screen.getByTestId("my-form")).toBeInTheDocument()
-  })
-
-  test("renders a title", async () => {
-    render(<Form data-testid="my-form" title="My Form" />)
-    expect(screen.getByTestId("my-form")).toBeInTheDocument()
-    expect(screen.getByRole("heading")).toHaveClass("juno-form-heading")
-    expect(screen.getByRole("heading")).toHaveTextContent("My Form")
-  })
-
-  test("renders a custom className", async () => {
-    render(<Form data-testid="my-form" className="my-custom-class" />)
-    expect(screen.getByTestId("my-form")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form")).toHaveClass("my-custom-class")
-  })
-
-  test("renders children as passed", async () => {
-    render(
-      <Form data-testid="my-form">
-        <button></button>
-      </Form>
-    )
-    expect(screen.getByRole("button")).toBeInTheDocument()
-  })
-
-  test("renders all props as passed", async () => {
-    render(<Form data-testid="23" data-lolol={true} />)
-    expect(screen.getByTestId("23")).toBeInTheDocument()
-    expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
-  })
-})
diff --git a/packages/ui-components/src/components/Form/Form.test.tsx b/packages/ui-components/src/components/Form/Form.test.tsx
new file mode 100644
index 000000000..00bacc838
--- /dev/null
+++ b/packages/ui-components/src/components/Form/Form.test.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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, expect, test } from "vitest"
+
+import { Form } from "./Form.component"
+
+describe("Form Component Tests", () => {
+  describe("Basic Rendering", () => {
+    test("renders a Form", () => {
+      render(<Form data-testid="my-form" />)
+      expect(screen.getByTestId("my-form")).toBeInTheDocument()
+    })
+
+    test("renders a title", () => {
+      render(<Form data-testid="my-form" title="My Form" />)
+      expect(screen.getByTestId("my-form")).toBeInTheDocument()
+      expect(screen.getByRole("heading")).toHaveClass("juno-form-heading")
+      expect(screen.getByRole("heading")).toHaveTextContent("My Form")
+    })
+
+    test("renders without any props", () => {
+      const { container } = render(<Form />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass("juno-form")
+    })
+
+    test("renders with falsy values as title", () => {
+      render(<Form data-testid="my-form" title={""} />)
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<Form data-testid="my-form" className="my-custom-class" />)
+      expect(screen.getByTestId("my-form")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form")).toHaveClass("my-custom-class")
+    })
+
+    test("renders all props as passed", () => {
+      render(<Form data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    })
+
+    test("applies default styles", () => {
+      const { container } = render(<Form />)
+      expect(container.firstChild).toHaveClass("juno-form")
+      expect(container.firstChild).toHaveClass("jn-mb-8")
+    })
+  })
+
+  describe("Children Rendering", () => {
+    test("renders children as passed", () => {
+      render(
+        <Form data-testid="my-form">
+          <button></button>
+        </Form>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
+    })
+
+    test("renders multiple children", () => {
+      render(
+        <Form data-testid="my-form">
+          <button>Button 1</button>
+          <button>Button 2</button>
+        </Form>
+      )
+      expect(screen.getByText("Button 1")).toBeInTheDocument()
+      expect(screen.getByText("Button 2")).toBeInTheDocument()
+    })
+
+    test("renders with no children", () => {
+      render(<Form data-testid="my-form" />)
+      expect(screen.getByTestId("my-form").childElementCount).toBe(0)
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/Form/index.js b/packages/ui-components/src/components/Form/index.ts
similarity index 100%
rename from packages/ui-components/src/components/Form/index.js
rename to packages/ui-components/src/components/Form/index.ts
diff --git a/packages/ui-components/src/components/FormHint/FormHint.component.tsx b/packages/ui-components/src/components/FormHint/FormHint.component.tsx
index 84a8cfa92..4b436931f 100644
--- a/packages/ui-components/src/components/FormHint/FormHint.component.tsx
+++ b/packages/ui-components/src/components/FormHint/FormHint.component.tsx
@@ -5,14 +5,38 @@
 
 import React, { ReactNode } from "react"
 
-const baseStyles = `
+const formHintBaseStyles = `
   jn-text-xs
   jn-mt-1
 `
 
 type FormHintVariant = "help" | "error" | "success"
 
-const variantStyles = (variant: FormHintVariant) => {
+export interface FormHintProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * The content to render as a hint for a form element.
+   * If children are provided, they will take precedence over text.
+   */
+  children?: ReactNode
+
+  /**
+   * The text to render as a hint for a form element.
+   * Overridden by children, if provided.
+   */
+  text?: ReactNode | string
+
+  /**
+   * The variant of the hint ("help", "error", or "success") determining its appearance.
+   */
+  variant?: FormHintVariant
+
+  /**
+   * Additional CSS classes to apply to the form hint for custom styling.
+   */
+  className?: string
+}
+
+const getVariantStyles = (variant: FormHintVariant): string => {
   switch (variant) {
     case "success":
       return "jn-text-theme-success"
@@ -23,14 +47,23 @@ const variantStyles = (variant: FormHintVariant) => {
   }
 }
 
-export const FormHint = ({ children = null, text = "", variant = "help", className, ...props }: FormHintProps) => {
+/**
+ * A FormHint component used to provide contextual help, error, or success messages associated with form elements.
+ */
+export const FormHint: React.FC<FormHintProps> = ({
+  children,
+  text = "",
+  variant = "help",
+  className = "",
+  ...props
+}) => {
   return (
     <div
       className={`
-        juno-form-hint
-        juno-form-hint-${variant}
-        ${baseStyles}
-        ${variantStyles(variant)}
+        juno-form-hint 
+        juno-form-hint-${variant} 
+        ${formHintBaseStyles} 
+        ${getVariantStyles(variant)} 
         ${className}
       `}
       {...props}
@@ -41,14 +74,3 @@ export const FormHint = ({ children = null, text = "", variant = "help", classNa
 }
 
 FormHint.displayName = "FormHint"
-
-export interface FormHintProps extends React.ComponentPropsWithoutRef<"div"> {
-  /** The children to render as a hint associated with a form element */
-  children?: ReactNode
-  /** The text to render. If both children and text are passed, children will rendered */
-  text?: ReactNode | string
-  /** The variant of the the hint. Defaults to 'help'. */
-  variant?: FormHintVariant
-  /** Pass a custom className */
-  className?: string
-}
diff --git a/packages/ui-components/src/components/FormHint/FormHint.stories.tsx b/packages/ui-components/src/components/FormHint/FormHint.stories.tsx
index 80f8d398f..7682c69e2 100644
--- a/packages/ui-components/src/components/FormHint/FormHint.stories.tsx
+++ b/packages/ui-components/src/components/FormHint/FormHint.stories.tsx
@@ -5,7 +5,8 @@
 
 import React from "react"
 import PropTypes from "prop-types"
-import { FormHint } from "./index"
+
+import { FormHint } from "./FormHint.component"
 
 export default {
   title: "Forms/FormHint",
@@ -13,6 +14,9 @@ export default {
   argTypes: {
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }
diff --git a/packages/ui-components/src/components/FormHint/FormHint.test.tsx b/packages/ui-components/src/components/FormHint/FormHint.test.tsx
index 2f599c2bd..a92a69bc8 100644
--- a/packages/ui-components/src/components/FormHint/FormHint.test.tsx
+++ b/packages/ui-components/src/components/FormHint/FormHint.test.tsx
@@ -5,68 +5,105 @@
 
 import * as React from "react"
 import { render, screen } from "@testing-library/react"
-import { FormHint } from "./index"
+import { describe, expect, test } from "vitest"
 
-describe("FormHint", () => {
-  test("renders a FormHint", () => {
-    render(<FormHint data-testid="my-form-hint" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-  })
+import { FormHint } from "./FormHint.component"
 
-  test("renders children as passed", () => {
-    render(
-      <FormHint data-testid="my-form-hint">
-        <button></button>
-      </FormHint>
-    )
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByRole("button")).toBeInTheDocument()
+describe("FormHint Component Tests", () => {
+  describe("Basic Rendering", () => {
+    test("renders a FormHint", () => {
+      render(<FormHint data-testid="my-form-hint" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    })
   })
 
-  test("renders a text as passed", () => {
-    render(<FormHint data-testid="my-form-hint" text="My form-related message" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveTextContent("My form-related message")
-  })
+  describe("Children Rendering", () => {
+    test("renders children as passed", () => {
+      render(
+        <FormHint data-testid="my-form-hint">
+          <button></button>
+        </FormHint>
+      )
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByRole("button")).toBeInTheDocument()
+    })
 
-  test("renders children if both children and text have been passed", () => {
-    render(
-      <FormHint data-testid="my-form-hint" text="123">
-        <>abc</>
-      </FormHint>
-    )
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveTextContent("abc")
-    expect(screen.getByTestId("my-form-hint")).not.toHaveTextContent("123")
+    test("renders children if both children and text have been passed", () => {
+      render(
+        <FormHint data-testid="my-form-hint" text="123">
+          <>abc</>
+        </FormHint>
+      )
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent("abc")
+      expect(screen.getByTestId("my-form-hint")).not.toHaveTextContent("123")
+    })
   })
 
-  test("renders a help message by default", () => {
-    render(<FormHint data-testid="my-form-hint" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-help")
-  })
+  describe("Text Rendering", () => {
+    test("renders a text as passed", () => {
+      render(<FormHint data-testid="my-form-hint" text="My form-related message" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent("My form-related message")
+    })
 
-  test("renders an error message as passed", () => {
-    render(<FormHint data-testid="my-form-hint" variant="error" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-error")
-  })
+    test("handles an empty string as text", () => {
+      render(<FormHint data-testid="my-form-hint" text="" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent("")
+    })
+
+    test("handles null text", () => {
+      render(<FormHint data-testid="my-form-hint" text={null} />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent("")
+    })
 
-  test("renders a success message as passed", () => {
-    render(<FormHint data-testid="my-form-hint" variant="success" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-success")
+    test("handles undefined text", () => {
+      render(<FormHint data-testid="my-form-hint" text={undefined} />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent("")
+    })
+
+    test("renders very long text", () => {
+      const longText = "A".repeat(1000)
+      render(<FormHint data-testid="my-form-hint" text={longText} />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveTextContent(longText)
+    })
   })
 
-  test("renders a custom className", () => {
-    render(<FormHint data-testid="my-form-hint" className="my-custom-class" />)
-    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
-    expect(screen.getByTestId("my-form-hint")).toHaveClass("my-custom-class")
+  describe("Variant Rendering", () => {
+    test("renders a help message by default", () => {
+      render(<FormHint data-testid="my-form-hint" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-help")
+    })
+
+    test("renders an error message as passed", () => {
+      render(<FormHint data-testid="my-form-hint" variant="error" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-error")
+    })
+
+    test("renders a success message as passed", () => {
+      render(<FormHint data-testid="my-form-hint" variant="success" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-success")
+    })
   })
 
-  test("renders all props as passed", () => {
-    render(<FormHint data-testid="23" data-lolol={true} />)
-    expect(screen.getByTestId("23")).toBeInTheDocument()
-    expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<FormHint data-testid="my-form-hint" className="my-custom-class" />)
+      expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-hint")).toHaveClass("my-custom-class")
+    })
+
+    test("renders all props as passed", () => {
+      render(<FormHint data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    })
   })
 })
diff --git a/packages/ui-components/src/components/FormRow/FormRow.component.tsx b/packages/ui-components/src/components/FormRow/FormRow.component.tsx
new file mode 100644
index 000000000..230bff667
--- /dev/null
+++ b/packages/ui-components/src/components/FormRow/FormRow.component.tsx
@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+const formRowBaseStyles = `
+  jn-mb-2
+`
+
+export interface FormRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content to render inside FormRow.
+   * Typically, these will be form elements such as TextInput, Textarea, Select, Radio, CheckboxGroups, etc.
+   */
+  children?: React.ReactNode
+
+  /**
+   * Additional CSS classes to apply to the FormRow for custom styling.
+   */
+  className?: string
+}
+
+/**
+ * A generic FormRow component used to layout and structure form elements.
+ * It serves as a container for form elements such as TextInput, Textarea, Select, Radio, CheckboxGroups etc.
+ */
+export const FormRow: React.FC<FormRowProps> = ({ children, className = "", ...props }) => {
+  return (
+    <div className={`juno-form-row ${formRowBaseStyles} ${className}`} {...props}>
+      {children}
+    </div>
+  )
+}
diff --git a/packages/ui-components/src/components/FormRow/FormRow.stories.js b/packages/ui-components/src/components/FormRow/FormRow.stories.tsx
similarity index 64%
rename from packages/ui-components/src/components/FormRow/FormRow.stories.js
rename to packages/ui-components/src/components/FormRow/FormRow.stories.tsx
index 3b0eb6179..34c8d6bb6 100644
--- a/packages/ui-components/src/components/FormRow/FormRow.stories.js
+++ b/packages/ui-components/src/components/FormRow/FormRow.stories.tsx
@@ -4,9 +4,9 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
+
 import { FormRow } from "./FormRow.component"
-import { TextInput } from "../../deprecated_js/TextInput/index.js"
+import { TextInput } from "../TextInput/TextInput.component"
 
 export default {
   title: "Forms/FormRow",
@@ -14,15 +14,19 @@ export default {
   argTypes: {
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }
 
-const Template = ({ children, ...args }) => <FormRow {...args}>{children}</FormRow>
-Template.propTypes = {
-  children: PropTypes.node,
+interface TemplateProps {
+  children?: React.ReactNode
 }
 
+const Template = ({ children, ...args }: TemplateProps) => <FormRow {...args}>{children}</FormRow>
+
 export const Default = {
   render: Template,
 
diff --git a/packages/ui-components/src/components/FormRow/FormRow.test.tsx b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
new file mode 100644
index 000000000..6e9a7af92
--- /dev/null
+++ b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
@@ -0,0 +1,120 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, test } from "vitest"
+
+import { FormSection } from "../FormSection/FormSection.component"
+
+describe("FormSection Component Tests", () => {
+  describe("Basic Rendering", () => {
+    test("renders a FormSection", () => {
+      render(<FormSection data-testid="my-formsection" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders children as passed", () => {
+      render(
+        <FormSection data-testid="my-formsection">
+          <button></button>
+        </FormSection>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
+    })
+
+    test("renders without any props", () => {
+      render(<FormSection data-testid="my-formsection" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders with null children", () => {
+      render(<FormSection data-testid="my-formsection">{null}</FormSection>)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders with undefined children", () => {
+      render(<FormSection data-testid="my-formsection">{undefined}</FormSection>)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders with mixed children types correctly", () => {
+      render(
+        <FormSection data-testid="my-formsection">
+          <div>Div Element</div>
+          {false && <span>False Element</span>}
+          {null}
+          <p>Paragraph Element</p>
+        </FormSection>
+      )
+      expect(screen.getByText("Div Element")).toBeInTheDocument()
+      expect(screen.queryByText("False Element")).not.toBeInTheDocument()
+      expect(screen.getByText("Paragraph Element")).toBeInTheDocument()
+    })
+  })
+
+  describe("Title Handling", () => {
+    test("renders a title", () => {
+      render(<FormSection data-testid="my-form-section" title="My Form Section" />)
+      expect(screen.getByTestId("my-form-section")).toBeInTheDocument()
+      expect(screen.getByRole("heading")).toHaveClass("juno-formsection-heading")
+      expect(screen.getByRole("heading")).toHaveTextContent("My Form Section")
+    })
+
+    test("does not render a title when title prop is not provided", () => {
+      render(<FormSection data-testid="my-form-section" />)
+      const titleElement = screen.queryByRole("heading")
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    test("renders with an empty string title", () => {
+      render(<FormSection data-testid="my-formsection" title="" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      const titleElement = screen.queryByRole("heading")
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    test("renders with a long string title", () => {
+      const longTitle = "A".repeat(1000)
+      render(<FormSection data-testid="my-formsection" title={longTitle} />)
+      const titleElement = screen.getByText(longTitle)
+      expect(titleElement).toBeInTheDocument()
+    })
+
+    test("renders with special characters in title", () => {
+      const specialTitle = "!@#$%^&*()_+=-[]{}|;:'\",.<>?/"
+      render(<FormSection data-testid="my-formsection" title={specialTitle} />)
+      const titleElement = screen.getByText(specialTitle)
+      expect(titleElement).toBeInTheDocument()
+    })
+
+    test("renders h1 element only if title is provided", () => {
+      const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
+      expect(screen.queryByRole("heading")).toBeNull()
+
+      rerender(<FormSection data-testid="my-formsection" title="Title" />)
+      expect(screen.getByRole("heading")).toBeInTheDocument()
+    })
+  })
+
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<FormSection data-testid="my-formsection" className="my-custom-class" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      expect(screen.getByTestId("my-formsection")).toHaveClass("my-custom-class")
+    })
+
+    test("renders all props as passed", () => {
+      render(<FormSection data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    })
+
+    test("renders section HTML element with classnames", () => {
+      const { container } = render(<FormSection data-testid="my-form-section" />)
+      expect(container.firstChild).toHaveClass("juno-form-section")
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/FormRow/index.js b/packages/ui-components/src/components/FormRow/index.ts
similarity index 100%
rename from packages/ui-components/src/components/FormRow/index.js
rename to packages/ui-components/src/components/FormRow/index.ts
diff --git a/packages/ui-components/src/components/FormSection/FormSection.component.js b/packages/ui-components/src/components/FormSection/FormSection.component.js
deleted file mode 100644
index 05f540a72..000000000
--- a/packages/ui-components/src/components/FormSection/FormSection.component.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-
-const formSection = `
-	jn-mb-8
-	jn-last:mb-0
-`
-
-const formSectionHeading = `
-	jn-text-lg
-	jn-font-bold
-	jn-mb-4
-`
-
-/** A Form section to group form elements inside complex forms with an optional title. */
-export const FormSection = ({ title = null, children = null, className = "", ...props }) => {
-  return (
-    <section className={`juno-form-section ${formSection} ${className}`} {...props}>
-      {title ? <h1 className={`juno-formsection-heading ${formSectionHeading}`}>{title}</h1> : ""}
-      {children}
-    </section>
-  )
-}
-
-FormSection.propTypes = {
-  /** Title, will be rendering as an `<h1>`. */
-  title: PropTypes.string,
-  /** Pass a custpm className */
-  className: PropTypes.string,
-  /** Children to render in the form section */
-  children: PropTypes.node,
-}
diff --git a/packages/ui-components/src/components/FormSection/FormSection.component.tsx b/packages/ui-components/src/components/FormSection/FormSection.component.tsx
new file mode 100644
index 000000000..323b77698
--- /dev/null
+++ b/packages/ui-components/src/components/FormSection/FormSection.component.tsx
@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { HTMLAttributes } from "react"
+
+const formSectionBaseStyles = `
+    jn-mb-8
+    jn-last:mb-0
+`
+
+const headingStyles = `
+    jn-text-lg
+    jn-font-bold
+    jn-mb-4
+`
+
+export interface FormSectionProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Title for the form section.
+   */
+  title?: string
+
+  /**
+   * Additional CSS classes to apply to the form section for custom styling.
+   */
+  className?: string
+
+  /**
+   * Content to be rendered within the form section.
+   * This can include form elements and other React nodes.
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * FormSection component for grouping form elements within complex forms.
+ */
+export const FormSection: React.FC<FormSectionProps> = ({ title = "", children, className = "", ...props }) => {
+  return (
+    <section className={`juno-form-section ${formSectionBaseStyles} ${className}`} {...props}>
+      {title ? <h1 className={`juno-formsection-heading ${headingStyles}`}>{title}</h1> : null}
+      {children}
+    </section>
+  )
+}
diff --git a/packages/ui-components/src/components/FormSection/FormSection.stories.js b/packages/ui-components/src/components/FormSection/FormSection.stories.tsx
similarity index 78%
rename from packages/ui-components/src/components/FormSection/FormSection.stories.js
rename to packages/ui-components/src/components/FormSection/FormSection.stories.tsx
index 703707191..80fa774e8 100644
--- a/packages/ui-components/src/components/FormSection/FormSection.stories.js
+++ b/packages/ui-components/src/components/FormSection/FormSection.stories.tsx
@@ -4,10 +4,10 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
+
 import { FormSection } from "../FormSection/FormSection.component"
+import { TextInput } from "../TextInput/TextInput.component"
 import { FormRow } from "../FormRow/FormRow.component"
-import { TextInput } from "../../deprecated_js/TextInput/TextInput.component"
 
 export default {
   title: "Forms/FormSection",
@@ -20,15 +20,19 @@ export default {
     },
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }
 
-const Template = ({ children, ...args }) => <FormSection {...args}>{children}</FormSection>
-Template.propTypes = {
-  children: PropTypes.node,
+interface TemplateProps {
+  children?: React.ReactNode
 }
 
+const Template = ({ children, ...args }: TemplateProps) => <FormSection {...args}>{children}</FormSection>
+
 export const Default = {
   render: Template,
 
diff --git a/packages/ui-components/src/components/FormSection/FormSection.test.js b/packages/ui-components/src/components/FormSection/FormSection.test.js
deleted file mode 100644
index dbdaf7c15..000000000
--- a/packages/ui-components/src/components/FormSection/FormSection.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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 { FormSection } from "./index"
-
-describe("FormSection", () => {
-  test("renders a FormSection", async () => {
-    render(<FormSection data-testid="my-formsection" />)
-    expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-  })
-
-  test("renders a title", async () => {
-    render(<FormSection data-testid="my-form-section" title="My Form Section" />)
-    expect(screen.getByTestId("my-form-section")).toBeInTheDocument()
-    expect(screen.getByRole("heading")).toHaveClass("juno-formsection-heading")
-    expect(screen.getByRole("heading")).toHaveTextContent("My Form Section")
-  })
-
-  test("renders a custom className", async () => {
-    render(<FormSection data-testid="my-formsection" className="my-custom-class" />)
-    expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-    expect(screen.getByTestId("my-formsection")).toHaveClass("my-custom-class")
-  })
-
-  test("renders children as passed", async () => {
-    render(
-      <FormSection>
-        <button></button>
-      </FormSection>
-    )
-    expect(screen.getByRole("button")).toBeInTheDocument()
-  })
-
-  test("renders all props as passed", async () => {
-    render(<FormSection data-testid="23" data-lolol={true} />)
-    expect(screen.getByTestId("23")).toBeInTheDocument()
-    expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
-  })
-})
diff --git a/packages/ui-components/src/components/FormSection/FormSection.test.tsx b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
new file mode 100644
index 000000000..441baf45d
--- /dev/null
+++ b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
@@ -0,0 +1,89 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, test } from "vitest"
+
+import { FormRow } from "../FormRow/FormRow.component"
+
+describe("FormRow Component Tests", () => {
+  describe("Basic Rendering", () => {
+    test("renders a FormRow", () => {
+      render(<FormRow data-testid="my-form-row" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+    })
+
+    test("renders without any props", () => {
+      const { container } = render(<FormRow />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass("juno-form-row")
+    })
+
+    test("renders with null children", () => {
+      render(<FormRow data-testid="my-form-row">{null}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+    })
+
+    test("renders with undefined children", () => {
+      render(<FormRow data-testid="my-form-row">{undefined}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+    })
+  })
+
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<FormRow data-testid="my-form-row" className="my-custom-class" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-row")).toHaveClass("my-custom-class")
+    })
+
+    test("renders all props as passed", () => {
+      render(<FormRow data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    })
+
+    test("adds and handles additional props", () => {
+      render(<FormRow data-testid="24" aria-label="form-row" />)
+      const sectionElement = screen.getByTestId("24")
+      expect(sectionElement).toHaveAttribute("aria-label", "form-row")
+    })
+
+    test("applies default styles", () => {
+      const { container } = render(<FormRow data-testid="my-form-row-default-styles" />)
+      expect(container.firstChild).toHaveClass("juno-form-row")
+      expect(container.firstChild).toHaveClass("jn-mb-2")
+    })
+  })
+
+  describe("Children Rendering", () => {
+    test("renders children as passed", () => {
+      render(
+        <FormRow>
+          <button></button>
+        </FormRow>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
+    })
+
+    test("renders multiple children", () => {
+      render(
+        <FormRow data-testid="my-form-row">
+          <button>Button 1</button>
+          <button>Button 2</button>
+        </FormRow>
+      )
+      expect(screen.getByText("Button 1")).toBeInTheDocument()
+      expect(screen.getByText("Button 2")).toBeInTheDocument()
+    })
+
+    test("renders with no children", () => {
+      render(<FormRow data-testid="my-form-row" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-row").childElementCount).toBe(0)
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/FormSection/index.js b/packages/ui-components/src/components/FormSection/index.ts
similarity index 100%
rename from packages/ui-components/src/components/FormSection/index.js
rename to packages/ui-components/src/components/FormSection/index.ts
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.tsx b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.tsx
new file mode 100644
index 000000000..ccbc1e668
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.tsx
@@ -0,0 +1,254 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect, ReactNode, ChangeEvent, MouseEvent, FC } from "react"
+
+import { Icon } from "../Icon/Icon.component"
+import { Spinner } from "../Spinner/Spinner.component"
+
+const selectBaseClasses = `
+  jn-w-full
+  jn-bg-theme-select
+  jn-text-theme-high
+  jn-appearance-none
+  jn-text-base
+  jn-pl-4
+  jn-h-[2.375rem]
+  jn-rounded-3px
+  jn-bg-icon-arrow-down
+  jn-bg-right
+  jn-bg-no-repeat
+  focus:jn-outline-none
+  focus:jn-ring-2
+  focus:jn-ring-theme-focus
+  disabled:jn-opacity-50
+`
+
+const wrapperBaseClasses = `jn-relative`
+
+const iconBaseClasses = `
+  jn-absolute
+  jn-flex
+  jn-right-2
+  jn-top-1.5
+  jn-pointer-events-none
+`
+
+const iconDisabledClasses = `jn-opacity-50`
+
+const borderErrorClasses = `jn-border jn-border-theme-error`
+const borderSuccessClasses = `jn-border jn-border-theme-success`
+
+const stateClasses = {
+  loading: `
+    jn-absolute
+    jn-top-0
+    jn-right-0
+    jn-bottom-0
+    jn-left-0
+    jn-text-center
+    jn-bg-theme-select
+    jn-text-theme-high
+    jn-text-base
+    jn-rounded-3px
+    jn-flex
+    jn-flex-col
+    jn-justify-center
+    jn-select-none
+    jn-cursor-not-allowed
+  `,
+  error: `
+    jn-absolute
+    jn-top-0
+    jn-right-0
+    jn-bottom-0
+    jn-left-0
+    jn-text-center
+    jn-bg-theme-select
+    jn-text-theme-high
+    jn-text-base
+    jn-rounded-3px
+    jn-flex
+    jn-flex-col
+    jn-justify-center
+    jn-select-none
+    jn-cursor-not-allowed
+  `,
+  loadingSpinner: `jn-ml-auto jn-mr-auto`,
+  errorIcon: `jn-ml-auto jn-mr-auto`,
+  paddingIconRight: `jn-pr-[3.75rem]`,
+  paddingDefaultRight: `jn-pr-9`,
+}
+
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Name of the select element.
+   * Used as a key for the selected value if a form is submitted.
+   */
+  name?: string
+
+  /**
+   * ID of the select element.
+   */
+  id?: string
+
+  /**
+   * Additional CSS classes to apply to the select element for custom styling.
+   */
+  className?: string
+
+  /**
+   * Elements to be rendered inside the select element.
+   * This can be any React node or a collection of React nodes.
+   * Typically, these are SelectOption or SelectOptionGroup components.
+   */
+  children?: ReactNode
+
+  /**
+   * Disables the select element, making it unclickable.
+   */
+  disabled?: boolean
+
+  /**
+   * Highlights the select element as invalid, indicating incorrect user input or validation errors.
+   */
+  invalid?: boolean
+
+  /**
+   * Highlights the select element as valid, indicating correct user input or successful validation.
+   */
+  valid?: boolean
+
+  /**
+   * Displays a loading indicator over the select element.
+   * Used for async operations like fetching data.
+   */
+  loading?: boolean
+
+  /**
+   * Displays an error state over the select element, such as during data fetching errors.
+   * Should not be used for validation errors.
+   */
+  error?: boolean
+
+  /**
+   * Event handler for the change event of the select element.
+   * Triggered when the user changes the selected option.
+   */
+  // eslint-disable-next-line no-unused-vars
+  onChange?: (event: ChangeEvent<HTMLSelectElement>) => void
+
+  /**
+   * Event handler for the click event on the select element.
+   * Triggered when the user clicks on the select element.
+   */
+  // eslint-disable-next-line no-unused-vars
+  onClick?: (event: MouseEvent<HTMLSelectElement>) => void
+
+  /**
+   * Additional CSS classes to apply to the outer wrapper of the select component for custom styling.
+   */
+  wrapperClassName?: string
+}
+
+/**
+ * Renders the appropriate 'state' icon based on the state of the select element
+ */
+const SelectIcons: FC<{
+  isLoading: boolean
+  hasError: boolean
+  isInvalid: boolean
+  isValid: boolean
+  disabled?: boolean
+}> = ({ isLoading, hasError, isInvalid, isValid, disabled }) => {
+  if (isLoading) {
+    return (
+      <div className={`juno-select-loading ${stateClasses.loading}`}>
+        <Spinner className={stateClasses.loadingSpinner} />
+      </div>
+    )
+  }
+  if (hasError) {
+    return (
+      <div className={`juno-select-error-text ${stateClasses.error}`}>
+        <Icon icon="errorOutline" color="jn-text-theme-error" className={stateClasses.errorIcon} />
+      </div>
+    )
+  }
+  return (
+    <div className={`${iconBaseClasses} ${disabled ? iconDisabledClasses : ""}`}>
+      {isInvalid && <Icon icon="dangerous" color="jn-text-theme-error" />}
+      {isValid && <Icon icon="checkCircle" color="jn-text-theme-success" />}
+      <Icon icon="expandMore" />
+    </div>
+  )
+}
+
+/**
+ * A basic, uncontrolled native HTML select component.
+ * Takes NativeSelectOption and NativeSelectOptionGroup children as options.
+ * Handles states such as loading, valid, invalid, and error.
+ */
+export const NativeSelect: FC<NativeSelectProps> = ({
+  name = "Unnamed Select",
+  id = "",
+  children,
+  className = "",
+  disabled = false,
+  invalid = false,
+  valid = false,
+  loading = false,
+  error = false,
+  onChange,
+  onClick,
+  wrapperClassName = "",
+  ...props
+}) => {
+  const [isLoading, setIsLoading] = useState(loading)
+  const [isValid, setIsValid] = useState(valid)
+  const [isInvalid, setIsInvalid] = useState(invalid)
+  const [hasError, setHasError] = useState(error)
+
+  useEffect(() => setIsLoading(loading), [loading])
+  useEffect(() => setIsValid(valid), [valid])
+  useEffect(() => setIsInvalid(invalid), [invalid])
+  useEffect(() => setHasError(error), [error])
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => onChange && onChange(event)
+  const handleClick = (event: MouseEvent<HTMLSelectElement>) => onClick && onClick(event)
+
+  const paddingClass = isValid || isInvalid ? stateClasses.paddingIconRight : stateClasses.paddingDefaultRight
+
+  return (
+    <div className={`juno-select-wrapper ${wrapperBaseClasses} ${wrapperClassName}`}>
+      <select
+        name={name}
+        id={id}
+        className={`
+          juno-select
+          ${selectBaseClasses}
+          ${isInvalid ? "juno-select-invalid " + borderErrorClasses : ""}
+          ${isValid ? "juno-select-valid " + borderSuccessClasses : ""}
+          ${hasError ? "juno-select-error" : ""}
+          ${paddingClass}
+          ${className}
+        `}
+        onChange={handleChange}
+        onClick={handleClick}
+        disabled={disabled || isLoading || hasError}
+        {...props}
+      >
+        {children}
+      </select>
+      <SelectIcons
+        isLoading={isLoading}
+        hasError={hasError}
+        isInvalid={isInvalid}
+        isValid={isValid}
+        disabled={disabled}
+      />
+    </div>
+  )
+}
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.js
deleted file mode 100644
index 03f8d9734..000000000
--- a/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-import { NativeSelect } from "./index.js"
-import { NativeSelectOption } from "../NativeSelectOption/index.js"
-import { NativeSelectOptionGroup } from "../NativeSelectOptionGroup/index.js"
-
-export default {
-  title: "Forms/NativeSelect/NativeSelect",
-  component: NativeSelect,
-  argTypes: {
-    options: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      control: false,
-    },
-  },
-}
-
-const Template = ({ children, ...args }) => <NativeSelect {...args}>{children}</NativeSelect>
-
-// define prop types
-Template.propTypes = {
-  children: PropTypes.node,
-}
-
-export const Default = {
-  render: Template,
-
-  args: {
-    children: [
-      <NativeSelectOption key={0} value="o-1" label="Option 1" />,
-      <NativeSelectOption key={1} value="o-2" label="Option 2" />,
-      <NativeSelectOption key={2} value="o-3" label="Option 3" />,
-    ],
-  },
-}
-
-export const GroupedNativeSelect = {
-  render: Template,
-
-  args: {
-    children: [
-      <NativeSelectOptionGroup key={0} label="Option Group 1">
-        <NativeSelectOption value="o-1" label="Option 1" />
-        <NativeSelectOption value="o-2" label="Option 2" />
-        <NativeSelectOption value="o-3" label="Option 3" />
-      </NativeSelectOptionGroup>,
-      <NativeSelectOptionGroup key={1} label="Option Group 2">
-        <NativeSelectOption value="o-4" label="Option 4" />
-        <NativeSelectOption value="o-5" label="Option 5" />
-      </NativeSelectOptionGroup>,
-    ],
-  },
-}
-
-export const DisabledNativeSelect = {
-  render: Template,
-
-  args: {
-    disabled: true,
-    children: [
-      <NativeSelectOption key={0} value="o-1" label="Option 1" />,
-      <NativeSelectOption key={1} value="o-2" label="Option 2" />,
-      <NativeSelectOption key={2} value="o-3" label="Option 3" />,
-    ],
-  },
-}
-
-export const InvalidNativeSelect = {
-  render: Template,
-
-  args: {
-    invalid: true,
-    children: [
-      <NativeSelectOption key={0} value="o-1" label="Option 1" />,
-      <NativeSelectOption key={1} value="o-2" label="Option 2" />,
-      <NativeSelectOption key={2} value="o-3" label="Option 3" />,
-    ],
-  },
-}
-
-export const ValidNativeSelect = {
-  render: Template,
-
-  args: {
-    valid: true,
-    children: [
-      <NativeSelectOption key={0} value="o-1" label="Option 1" />,
-      <NativeSelectOption key={1} value="o-2" label="Option 2" />,
-      <NativeSelectOption key={2} value="o-3" label="Option 3" />,
-    ],
-  },
-}
-
-export const LoadingNativeSelect = {
-  render: Template,
-
-  args: {
-    loading: true,
-    children: [],
-  },
-}
-
-export const NativeSelectWithError = {
-  render: Template,
-
-  args: {
-    error: true,
-    children: [],
-  },
-}
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.tsx b/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.tsx
new file mode 100644
index 000000000..5a62cc7ff
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.stories.tsx
@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { StoryFn } from "@storybook/react"
+
+import { NativeSelect, NativeSelectProps } from "./NativeSelect.component"
+import { NativeSelectOption } from "../NativeSelectOption/NativeSelectOption.component"
+import { NativeSelectOptionGroup } from "../NativeSelectOptionGroup/NativeSelectOptionGroup.component"
+
+export default {
+  title: "Forms/NativeSelect/NativeSelect",
+  component: NativeSelect,
+  argTypes: {
+    options: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
+    },
+  },
+}
+
+const Template: StoryFn<NativeSelectProps> = (args) => <NativeSelect {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: [
+    <NativeSelectOption key={0} value="o-1" label="Option 1" />,
+    <NativeSelectOption key={1} value="o-2" label="Option 2" />,
+    <NativeSelectOption key={2} value="o-3" label="Option 3" />,
+  ],
+}
+
+export const GroupedNativeSelect = Template.bind({})
+GroupedNativeSelect.args = {
+  children: [
+    <NativeSelectOptionGroup key={0} label="Option Group 1">
+      <NativeSelectOption value="o-1" label="Option 1" />
+      <NativeSelectOption value="o-2" label="Option 2" />
+      <NativeSelectOption value="o-3" label="Option 3" />
+    </NativeSelectOptionGroup>,
+    <NativeSelectOptionGroup key={1} label="Option Group 2">
+      <NativeSelectOption value="o-4" label="Option 4" />
+      <NativeSelectOption value="o-5" label="Option 5" />
+    </NativeSelectOptionGroup>,
+  ],
+}
+
+export const DisabledNativeSelect = Template.bind({})
+DisabledNativeSelect.args = {
+  disabled: true,
+  children: [
+    <NativeSelectOption key={0} value="o-1" label="Option 1" />,
+    <NativeSelectOption key={1} value="o-2" label="Option 2" />,
+    <NativeSelectOption key={2} value="o-3" label="Option 3" />,
+  ],
+}
+
+export const InvalidNativeSelect = Template.bind({})
+InvalidNativeSelect.args = {
+  invalid: true,
+  children: [
+    <NativeSelectOption key={0} value="o-1" label="Option 1" />,
+    <NativeSelectOption key={1} value="o-2" label="Option 2" />,
+    <NativeSelectOption key={2} value="o-3" label="Option 3" />,
+  ],
+}
+
+export const ValidNativeSelect = Template.bind({})
+ValidNativeSelect.args = {
+  valid: true,
+  children: [
+    <NativeSelectOption key={0} value="o-1" label="Option 1" />,
+    <NativeSelectOption key={1} value="o-2" label="Option 2" />,
+    <NativeSelectOption key={2} value="o-3" label="Option 3" />,
+  ],
+}
+
+export const LoadingNativeSelect = Template.bind({})
+LoadingNativeSelect.args = {
+  loading: true,
+  children: [],
+}
+
+export const NativeSelectWithError = Template.bind({})
+NativeSelectWithError.args = {
+  error: true,
+  children: [],
+}
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.tsx b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.tsx
new file mode 100644
index 000000000..1679ba704
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.tsx
@@ -0,0 +1,166 @@
+/*
+ * 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, fireEvent } from "@testing-library/react"
+import { describe, expect, test, vi } from "vitest"
+
+import { NativeSelect } from "./NativeSelect.component"
+
+describe("NativeSelect", () => {
+  describe("Basic Rendering", () => {
+    test("renders a native html select element", () => {
+      render(<NativeSelect />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    test("renders children as passed", () => {
+      render(
+        <NativeSelect>
+          <option data-testid="option">Option</option>
+        </NativeSelect>
+      )
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByTestId("option")).toBeInTheDocument()
+    })
+
+    test("renders without children", () => {
+      render(<NativeSelect />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+  })
+
+  describe("Prop Rendering", () => {
+    test("renders a select element with a name as passed", () => {
+      render(<NativeSelect name="my-select" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveAttribute("name", "my-select")
+    })
+
+    test("renders a select element with an id as passed", () => {
+      render(<NativeSelect id="my-select" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveAttribute("id", "my-select")
+    })
+
+    test("renders a custom className", () => {
+      render(<NativeSelect className="my-custom-class" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveClass("my-custom-class")
+    })
+
+    test("renders a disabled select as passed", () => {
+      render(<NativeSelect disabled />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toBeDisabled()
+    })
+
+    test("renders an invalid Select as passed", () => {
+      render(<NativeSelect invalid />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveClass("juno-select-invalid")
+      expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
+    })
+
+    test("renders a valid Select as passed", () => {
+      render(<NativeSelect valid />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveClass("juno-select-valid")
+      expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
+    })
+
+    test("renders a Select with an error as passed", () => {
+      render(<NativeSelect error />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toBeDisabled()
+      expect(screen.getByRole("combobox")).toHaveClass("juno-select-error")
+      expect(screen.getByTitle("Error")).toBeInTheDocument()
+    })
+
+    test("renders a loading Select as passed", () => {
+      render(<NativeSelect loading />)
+      expect(screen.getByRole("combobox")).toBeDisabled()
+      expect(screen.getByRole("progressbar")).toBeInTheDocument()
+    })
+
+    test("renders a wrapperClassName to the outer wrapping element", () => {
+      render(<NativeSelect wrapperClassName="my-wrapper-class" />)
+      expect(document.querySelector(".juno-select-wrapper")).toBeInTheDocument()
+      expect(document.querySelector(".juno-select-wrapper")).toHaveClass("my-wrapper-class")
+    })
+
+    test("renders all props as passed", () => {
+      render(<NativeSelect data-lolol="some-random-prop" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-lolol", "some-random-prop")
+    })
+
+    test("renders without value or label", () => {
+      render(
+        <NativeSelect>
+          <option data-testid="option"></option>
+        </NativeSelect>
+      )
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+      expect(screen.getByTestId("option")).toBeInTheDocument()
+    })
+
+    test("renders multiple SelectOptionGroup components", () => {
+      render(
+        <NativeSelect>
+          <optgroup label="Group 1">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </optgroup>
+          <optgroup label="Group 2">
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+          </optgroup>
+        </NativeSelect>
+      )
+      expect(screen.getAllByRole("group")).toHaveLength(2)
+      expect(screen.getAllByRole("option")).toHaveLength(4)
+    })
+  })
+
+  describe("Event Handling", () => {
+    test("executes onClick handler as passed", () => {
+      const onClickSpy = vi.fn()
+      render(<NativeSelect onClick={onClickSpy} />)
+      const select = screen.getByRole("combobox")
+      select.click()
+      expect(onClickSpy).toHaveBeenCalled()
+    })
+
+    test("executes onChange handler as passed", () => {
+      const handleChange = vi.fn()
+      render(<NativeSelect onChange={handleChange} />)
+      const select = screen.getByRole("combobox")
+      fireEvent.change(select, { target: { value: "a" } })
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    test("does not execute onClick handler when disabled", () => {
+      const onClickSpy = vi.fn()
+      render(<NativeSelect onClick={onClickSpy} disabled />)
+      screen.getByRole("combobox").click()
+      expect(onClickSpy).not.toHaveBeenCalled()
+    })
+
+    test("does not execute onChange handler when disabled", () => {
+      const onChangeSpy = vi.fn()
+      render(<NativeSelect onChange={onChangeSpy} disabled />)
+      screen.getByRole("combobox").click()
+      expect(onChangeSpy).not.toHaveBeenCalled()
+    })
+
+    test("can not be clicked when loading", () => {
+      const onClickSpy = vi.fn()
+      render(<NativeSelect loading onClick={onClickSpy} />)
+      screen.getByRole("combobox").click()
+      expect(onClickSpy).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/NativeSelect/index.js b/packages/ui-components/src/components/NativeSelect/index.ts
similarity index 100%
rename from packages/ui-components/src/components/NativeSelect/index.js
rename to packages/ui-components/src/components/NativeSelect/index.ts
diff --git a/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.component.tsx b/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.component.tsx
new file mode 100644
index 000000000..756b91aa9
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.component.tsx
@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+export interface NativeSelectOptionProps
+  extends Omit<React.OptionHTMLAttributes<HTMLOptionElement>, "label" | "value"> {
+  /**
+   * A visible label for the option.
+   * It will be displayed to the user in the dropdown.
+   */
+  label?: string | number
+
+  /**
+   * The value that the option represents.
+   * It will be sent when submitting a form.
+   */
+  value?: string | number
+
+  /**
+   * Determines whether the option is disabled.
+   * If true, the option will be unselectable.
+   */
+  disabled?: boolean
+
+  /**
+   * Additional CSS classes to apply to the option for custom styling.
+   */
+  className?: string
+}
+
+/**
+ * The NativeSelectOption component represents an individual option in a dropdown list.
+ * It should be used inside the NativeSelect component to define each option.
+ */
+export const NativeSelectOption: React.FC<NativeSelectOptionProps> = ({
+  value,
+  label,
+  disabled = false,
+  className = "",
+  ...props
+}) => {
+  return (
+    <option value={value} disabled={disabled} className={`juno-select-option ${className}`} {...props}>
+      {label || value}
+    </option>
+  )
+}
diff --git a/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.js b/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.tsx
similarity index 87%
rename from packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.js
rename to packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.tsx
index ba51dc33f..fc8e5ad39 100644
--- a/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.js
+++ b/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.stories.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { NativeSelectOption } from "./index.js"
+import { NativeSelectOption } from "./NativeSelectOption.component"
 
 export default {
   title: "Forms/NativeSelect/NativeSelectOption",
diff --git a/packages/ui-components/src/components/NativeSelectOption/SelectOption.test.tsx b/packages/ui-components/src/components/NativeSelectOption/SelectOption.test.tsx
new file mode 100644
index 000000000..f4bb9c1e7
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelectOption/SelectOption.test.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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, expect, test } from "vitest"
+
+import { NativeSelectOption } from "./NativeSelectOption.component"
+
+describe("NativeSelectOption", () => {
+  describe("Basic Rendering", () => {
+    test("renders a native html option element", () => {
+      render(<NativeSelectOption />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+    })
+  })
+
+  describe("Prop Rendering", () => {
+    test("renders a native html option with a value as passed", () => {
+      render(<NativeSelectOption value="49" />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toHaveAttribute("value", "49")
+    })
+
+    test("renders a native html option with a label as passed", () => {
+      render(<NativeSelectOption label="My first option" />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toHaveTextContent("My first option")
+    })
+
+    test("renders a disabled native html option", () => {
+      render(<NativeSelectOption disabled />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toBeDisabled()
+    })
+
+    test("renders a native html option without value or label", () => {
+      render(<NativeSelectOption />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+    })
+
+    test("renders a native html option with number value and label", () => {
+      render(<NativeSelectOption value={1} label={1} />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toHaveAttribute("value", "1")
+      expect(screen.getByRole("option")).toHaveTextContent("1")
+    })
+  })
+
+  describe("Custom Attributes", () => {
+    test("renders a custom className", () => {
+      render(<NativeSelectOption className="my-custom-classname" />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toHaveClass("my-custom-classname")
+    })
+
+    test("renders all props", () => {
+      render(<NativeSelectOption data-lolol="some-prop" />)
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toHaveAttribute("data-lolol", "some-prop")
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/NativeSelectOption/index.js b/packages/ui-components/src/components/NativeSelectOption/index.ts
similarity index 100%
rename from packages/ui-components/src/components/NativeSelectOption/index.js
rename to packages/ui-components/src/components/NativeSelectOption/index.ts
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.js b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.js
deleted file mode 100644
index 0b77b1672..000000000
--- a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import PropTypes from "prop-types"
-
-/** A SelectOptionGroup (<optgroup>). Can only be used inside a Select. */
-export const NativeSelectOptionGroup = ({ label = null, disabled = false, className = "", children, ...props }) => {
-  return (
-    <optgroup label={label} disabled={disabled} className={`juno-select-option-group ${className}`} {...props}>
-      {children}
-    </optgroup>
-  )
-}
-
-NativeSelectOptionGroup.propTypes = {
-  /** The visible label of the group of options */
-  label: PropTypes.string,
-  /** Disable the option group */
-  disabled: PropTypes.bool,
-  /** Add a className */
-  className: PropTypes.string,
-  /** Pass SelectOption child nodes */
-  children: PropTypes.node,
-}
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.tsx b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.tsx
new file mode 100644
index 000000000..65d090090
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.component.tsx
@@ -0,0 +1,49 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+export interface NativeSelectOptionGroupProps extends React.OptgroupHTMLAttributes<HTMLOptGroupElement> {
+  /**
+   * A visible label for the option group.
+   * It will be displayed as the group heading in the dropdown.
+   */
+  label?: string
+
+  /**
+   * Determines whether the option group is disabled.
+   * If true, all options within the group will also be disabled.
+   */
+  disabled?: boolean
+
+  /**
+   * Additional CSS classes to apply to the option group for custom styling.
+   */
+  className?: string
+
+  /**
+   * Elements to be rendered within the option group.
+   * Typically, these should be NativeSelectOption components.
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * The NativeSelectOptionGroup component groups related options within a dropdown list.
+ * It should be used inside the <NativeSelect> component to group <NativeSelectOption> components.
+ */
+export const NativeSelectOptionGroup: React.FC<NativeSelectOptionGroupProps> = ({
+  label = "",
+  disabled = false,
+  className = "",
+  children,
+  ...props
+}) => {
+  return (
+    <optgroup label={label} disabled={disabled} className={`juno-select-option-group ${className}`} {...props}>
+      {children}
+    </optgroup>
+  )
+}
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.js b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.tsx
similarity index 71%
rename from packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.js
rename to packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.tsx
index 889bf0d6e..f5f5b1703 100644
--- a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.js
+++ b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.stories.tsx
@@ -4,15 +4,10 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
-import { NativeSelectOptionGroup } from "./index.js"
-import { NativeSelect } from "../NativeSelect/index.js"
-import { NativeSelectOption } from "../NativeSelectOption/index.js"
 
-// import {
-//   Default as DefaultSelectOption,
-//   Disabled as DisabledSelectOption,
-// } from '../NativeSelectOption/NativeSelectOption.stories';
+import { NativeSelect } from "../NativeSelect/NativeSelect.component"
+import { NativeSelectOption } from "../NativeSelectOption/NativeSelectOption.component"
+import { NativeSelectOptionGroup, NativeSelectOptionGroupProps } from "./NativeSelectOptionGroup.component"
 
 export default {
   title: "Forms/NativeSelect/NativeSelectOptionGroup",
@@ -25,20 +20,19 @@ export default {
     },
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }
 
-const Template = ({ children, ...args }) => (
+const Template: React.FC<NativeSelectOptionGroupProps> = ({ children, ...args }) => (
   <NativeSelect>
     <NativeSelectOptionGroup {...args}>{children}</NativeSelectOptionGroup>
   </NativeSelect>
 )
 
-Template.propTypes = {
-  children: PropTypes.node,
-}
-
 export const Default = {
   render: Template,
 
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.js b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.js
deleted file mode 100644
index a811301a7..000000000
--- a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * 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 { NativeSelectOptionGroup } from "./index"
-
-describe("NativeSelectOptionGroup", () => {
-  test("renders an optgroup element", async () => {
-    render(<NativeSelectOptionGroup />)
-    expect(screen.getByRole("group")).toBeInTheDocument()
-  })
-
-  test("renders an optgroup with a label as passed", async () => {
-    render(<NativeSelectOptionGroup label="My Select Option Group" />)
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByRole("group")).toHaveAttribute("label", "My Select Option Group")
-  })
-
-  test("renders a disabled optgroup as passed", async () => {
-    render(<NativeSelectOptionGroup disabled />)
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByRole("group")).toHaveAttribute("disabled")
-  })
-
-  test("renders all children as passed", async () => {
-    render(
-      <NativeSelectOptionGroup>
-        <option></option>
-      </NativeSelectOptionGroup>
-    )
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByRole("option")).toBeInTheDocument()
-  })
-
-  test("renders a custom className", async () => {
-    render(<NativeSelectOptionGroup className="my-custom-class" />)
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByRole("group")).toHaveClass("my-custom-class")
-  })
-
-  test("renders all props", async () => {
-    render(<NativeSelectOptionGroup data-lolol="some-prop" />)
-    expect(screen.getByRole("group")).toBeInTheDocument()
-    expect(screen.getByRole("group")).toHaveAttribute("data-lolol", "some-prop")
-  })
-})
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.tsx b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.tsx
new file mode 100644
index 000000000..b5061c110
--- /dev/null
+++ b/packages/ui-components/src/components/NativeSelectOptionGroup/NativeSelectOptionGroup.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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, expect, test } from "vitest"
+
+import { NativeSelectOptionGroup } from "./NativeSelectOptionGroup.component"
+
+describe("NativeSelectOptionGroup", () => {
+  describe("Basic Rendering", () => {
+    test("renders an optgroup element", () => {
+      render(<NativeSelectOptionGroup />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+    })
+  })
+
+  describe("Prop Handling", () => {
+    test("renders an optgroup with a label as passed", () => {
+      render(<NativeSelectOptionGroup label="My Select Option Group" />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("group")).toHaveAttribute("label", "My Select Option Group")
+    })
+
+    test("renders a disabled optgroup as passed", () => {
+      render(<NativeSelectOptionGroup disabled />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("group")).toHaveAttribute("disabled")
+    })
+
+    test("renders a custom className", () => {
+      render(<NativeSelectOptionGroup className="my-custom-class" />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("group")).toHaveClass("my-custom-class")
+    })
+
+    test("renders all props", () => {
+      render(<NativeSelectOptionGroup data-lolol="some-prop" />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("group")).toHaveAttribute("data-lolol", "some-prop")
+    })
+
+    test("renders an optgroup with an empty label", () => {
+      render(<NativeSelectOptionGroup label="" />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("group")).toHaveAttribute("label", "")
+    })
+  })
+
+  describe("Children Rendering", () => {
+    test("renders all children as passed", () => {
+      render(
+        <NativeSelectOptionGroup>
+          <option></option>
+        </NativeSelectOptionGroup>
+      )
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toBeInTheDocument()
+    })
+
+    test("renders with undefined children", () => {
+      render(<NativeSelectOptionGroup>{undefined}</NativeSelectOptionGroup>)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+    })
+
+    test("renders with mixed children types", () => {
+      render(
+        <NativeSelectOptionGroup>
+          <option value="1">Option 1</option>
+          <span>Not an option</span>
+        </NativeSelectOptionGroup>
+      )
+      expect(screen.getByRole("group")).toBeInTheDocument()
+      expect(screen.getByRole("option")).toBeInTheDocument()
+      expect(screen.getByText("Not an option")).toBeInTheDocument()
+    })
+
+    test("renders without any children", () => {
+      render(<NativeSelectOptionGroup />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+    })
+  })
+})
diff --git a/packages/ui-components/src/components/NativeSelectOptionGroup/index.js b/packages/ui-components/src/components/NativeSelectOptionGroup/index.ts
similarity index 100%
rename from packages/ui-components/src/components/NativeSelectOptionGroup/index.js
rename to packages/ui-components/src/components/NativeSelectOptionGroup/index.ts
diff --git a/packages/ui-components/src/components/SelectRow/SelectRow.component.js b/packages/ui-components/src/components/SelectRow/SelectRow.component.js
index 98a9d7493..6f4259f96 100644
--- a/packages/ui-components/src/components/SelectRow/SelectRow.component.js
+++ b/packages/ui-components/src/components/SelectRow/SelectRow.component.js
@@ -6,7 +6,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Select } from "../../deprecated_js/Select/index.js"
-import { FormRow } from "../FormRow/index.js"
+import { FormRow } from "../../deprecated_js/FormRow/FormRow.component"
 import { withDeprecationWarning } from "../../deprecated_js/withDeprecationWarning/index.js"
 
 /** DEPRECATED: A select group containing a select, an associated label, and necessary structural markup. This component is DEPRECATED, use Select instead. */
diff --git a/packages/ui-components/src/components/SwitchRow/SwitchRow.component.js b/packages/ui-components/src/components/SwitchRow/SwitchRow.component.js
index 626b42833..ea709effd 100644
--- a/packages/ui-components/src/components/SwitchRow/SwitchRow.component.js
+++ b/packages/ui-components/src/components/SwitchRow/SwitchRow.component.js
@@ -6,7 +6,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Switch } from "../../deprecated_js/Switch/Switch.component"
-import { FormRow } from "../FormRow/index.js"
+import { FormRow } from "../../deprecated_js/FormRow/FormRow.component"
 import { withDeprecationWarning } from "../../deprecated_js/withDeprecationWarning/index.js"
 
 /** DEPRECATED: A Switch input row containing a switch, associated label, and structural markup. This component is DEPRECATED, use Switch instead. */
diff --git a/packages/ui-components/src/components/TextInputRow/TextInputRow.component.js b/packages/ui-components/src/components/TextInputRow/TextInputRow.component.js
index 08a492d8b..d671c3ec5 100644
--- a/packages/ui-components/src/components/TextInputRow/TextInputRow.component.js
+++ b/packages/ui-components/src/components/TextInputRow/TextInputRow.component.js
@@ -6,7 +6,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { TextInput } from "../../deprecated_js/TextInput/index.js"
-import { FormRow } from "../FormRow/index.js"
+import { FormRow } from "../../deprecated_js/FormRow/FormRow.component"
 import { withDeprecationWarning } from "../../deprecated_js/withDeprecationWarning/index.js"
 
 /** DEPRECATED: A text input row containing an input of type text, password, email, tel, or url, an associated label, and necessary structural markup. This component is DEPRECATED, use TextInput instead. */
diff --git a/packages/ui-components/src/components/TextareaRow/TextareaRow.component.js b/packages/ui-components/src/components/TextareaRow/TextareaRow.component.js
index 63ebbd55d..4699b0111 100644
--- a/packages/ui-components/src/components/TextareaRow/TextareaRow.component.js
+++ b/packages/ui-components/src/components/TextareaRow/TextareaRow.component.js
@@ -6,7 +6,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Textarea } from "../../deprecated_js/Textarea/index.js"
-import { FormRow } from "../FormRow/index.js"
+import { FormRow } from "../../deprecated_js/FormRow/FormRow.component"
 import { withDeprecationWarning } from "../../deprecated_js/withDeprecationWarning/index.js"
 
 /** DEPRECATED: A textarea row containing a textarea, associated label, optional helptext, and structural markup. This component is DEPRECATED, use Textarea instead. */
diff --git a/packages/ui-components/src/components/FormRow/FormRow.component.js b/packages/ui-components/src/deprecated_js/FormRow/FormRow.component.js
similarity index 100%
rename from packages/ui-components/src/components/FormRow/FormRow.component.js
rename to packages/ui-components/src/deprecated_js/FormRow/FormRow.component.js
diff --git a/packages/ui-components/src/components/FormRow/FormRow.test.js b/packages/ui-components/src/deprecated_js/FormRow/FormRow.test.js
similarity index 100%
rename from packages/ui-components/src/components/FormRow/FormRow.test.js
rename to packages/ui-components/src/deprecated_js/FormRow/FormRow.test.js
diff --git a/packages/ui-components/src/deprecated_js/FormRow/index.js b/packages/ui-components/src/deprecated_js/FormRow/index.js
new file mode 100644
index 000000000..bb0fc1974
--- /dev/null
+++ b/packages/ui-components/src/deprecated_js/FormRow/index.js
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { FormRow } from "./FormRow.component"
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js b/packages/ui-components/src/deprecated_js/NativeSelect/NativeSelect.component.js
similarity index 100%
rename from packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
rename to packages/ui-components/src/deprecated_js/NativeSelect/NativeSelect.component.js
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js b/packages/ui-components/src/deprecated_js/NativeSelect/NativeSelect.test.js
similarity index 100%
rename from packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
rename to packages/ui-components/src/deprecated_js/NativeSelect/NativeSelect.test.js
diff --git a/packages/ui-components/src/deprecated_js/NativeSelect/index.js b/packages/ui-components/src/deprecated_js/NativeSelect/index.js
new file mode 100644
index 000000000..0799eeafa
--- /dev/null
+++ b/packages/ui-components/src/deprecated_js/NativeSelect/index.js
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { NativeSelect } from "./NativeSelect.component"
diff --git a/packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.component.js b/packages/ui-components/src/deprecated_js/NativeSelectOption/NativeSelectOption.component.js
similarity index 100%
rename from packages/ui-components/src/components/NativeSelectOption/NativeSelectOption.component.js
rename to packages/ui-components/src/deprecated_js/NativeSelectOption/NativeSelectOption.component.js
diff --git a/packages/ui-components/src/components/NativeSelectOption/SelectOption.test.js b/packages/ui-components/src/deprecated_js/NativeSelectOption/SelectOption.test.js
similarity index 100%
rename from packages/ui-components/src/components/NativeSelectOption/SelectOption.test.js
rename to packages/ui-components/src/deprecated_js/NativeSelectOption/SelectOption.test.js
diff --git a/packages/ui-components/src/deprecated_js/NativeSelectOption/index.js b/packages/ui-components/src/deprecated_js/NativeSelectOption/index.js
new file mode 100644
index 000000000..2c4048932
--- /dev/null
+++ b/packages/ui-components/src/deprecated_js/NativeSelectOption/index.js
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { NativeSelectOption } from "./NativeSelectOption.component"
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
index 6685cc53c..3c2f06570 100644
--- a/packages/ui-components/src/index.js
+++ b/packages/ui-components/src/index.js
@@ -41,10 +41,10 @@ export { DateTimePicker } from "./components/DateTimePicker/index.js"
 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 { Form } from "./components/Form/Form.component"
 export { FormattedText } from "./components/FormattedText/"
-export { FormRow } from "./components/FormRow/index.js"
-export { FormSection } from "./components/FormSection/index.js"
+export { FormRow } from "./components/FormRow/FormRow.component"
+export { FormSection } from "./components/FormSection/FormSection.component"
 export { Grid } from "./components/Grid/Grid.component"
 export { GridRow } from "./components/GridRow/GridRow.component"
 export { GridColumn } from "./components/GridColumn/GridColumn.component"
@@ -63,9 +63,9 @@ export { MenuSection } from "./components/MenuSection/index"
 export { Message } from "./components/Message"
 export { Modal } from "./deprecated_js/Modal/index.js"
 export { ModalFooter } from "./deprecated_js/ModalFooter/index.js"
-export { NativeSelect } from "./components/NativeSelect/index.js"
-export { NativeSelectOption } from "./components/NativeSelectOption/index.js"
-export { NativeSelectOptionGroup } from "./components/NativeSelectOptionGroup/index.js"
+export { NativeSelect } from "./components/NativeSelect/NativeSelect.component"
+export { NativeSelectOption } from "./components/NativeSelectOption/NativeSelectOption.component"
+export { NativeSelectOptionGroup } from "./components/NativeSelectOptionGroup/NativeSelectOptionGroup.component"
 export { Panel } from "./components/Panel/Panel.component"
 export { PanelBody } from "./components/PanelBody/PanelBody.component"
 export { PanelFooter } from "./components/PanelFooter/PanelFooter.component"
@@ -78,12 +78,9 @@ export { Radio } from "./components/Radio/index.js"
 export { RadioGroup } from "./components/RadioGroup/index.js"
 export { RadioRow } from "./components/RadioRow/index.js"
 export { SearchInput } from "./components/SearchInput"
-
 export { SelectDivider } from "./deprecated_js/SelectDivider/index"
-
 export { Select } from "./deprecated_js/Select/index"
 export { SelectOption } from "./deprecated_js/SelectOption/index"
-
 export { SelectRow } from "./components/SelectRow/index.js"
 export { ShadowRoot } from "./components/ShadowRoot/index.js"
 export { SideNavigation } from "./components/SideNavigation/index.js"
@@ -91,7 +88,6 @@ export { SideNavigationItem } from "./components/SideNavigationItem/index.js"
 export { Spinner } from "./components/Spinner/index.js"
 export { Stack } from "./components/Stack/index.js"
 export { StyleProvider } from "./deprecated_js/StyleProvider"
-
 export { Switch } from "./components/Switch/index"
 export { SwitchRow } from "./components/SwitchRow/index.js"
 export { Tab } from "./components/Tab/index.js"
@@ -111,4 +107,3 @@ export { TooltipContent } from "./components/TooltipContent/index.js"
 export { TooltipTrigger } from "./components/TooltipTrigger/index.js"
 export { TopNavigation } from "./components/TopNavigation/index.js"
 export { TopNavigationItem } from "./components/TopNavigationItem/index.js"
-export * from "./components/Form/index.js"