diff --git a/packages/ui-components/src/components/FormRow/FormRow.test.tsx b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
index 7869de4bf4..f11ee8d2d2 100644
--- a/packages/ui-components/src/components/FormRow/FormRow.test.tsx
+++ b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
@@ -7,113 +7,83 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormSection } from "../FormSection/FormSection.component"
+import { FormRow } from "./index"
 
-describe("FormSection Component Tests", () => {
+describe("FormRow 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 a FormRow", () => {
+      render(<FormRow data-testid="my-form-row" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
     })
 
     test("renders without any props", () => {
-      render(<FormSection data-testid="my-formsection" />)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      const { container } = render(<FormRow />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass("juno-form-row")
     })
 
     test("renders with null children", () => {
-      render(<FormSection data-testid="my-formsection">{null}</FormSection>)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      render(<FormRow data-testid="my-form-row">{null}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).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>
-          {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()
+      render(<FormRow data-testid="my-form-row">{undefined}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).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()
+  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 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 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("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("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("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()
+    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("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")
+  describe("Children Rendering", () => {
+    test("renders children as passed", () => {
+      render(
+        <FormRow>
+          <button></button>
+        </FormRow>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
     })
 
-    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 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 section HTML element with classnames", () => {
-      const { container } = render(<FormSection data-testid="my-form-section" />)
-      expect(container.firstChild).toHaveClass("juno-form-section")
+    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/FormSection.test.tsx b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
index da04437b3d..04f57ae2d1 100644
--- a/packages/ui-components/src/components/FormSection/FormSection.test.tsx
+++ b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
@@ -7,93 +7,120 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormSection } from "./FormSection.component"
-import { FormRow } from "../FormRow/FormRow.component"
+import { FormSection } from "./index"
 
 describe("FormSection Component Tests", () => {
-  test("renders a title as h4", () => {
-    render(<FormSection title="My Section" />)
-    expect(screen.getByRole("heading", { level: 4 })).toBeInTheDocument()
-    expect(screen.getByRole("heading", { level: 4 })).toHaveClass("juno-formsection-heading")
-    expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent("My Section")
-  })
-})
-
-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 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", () => {
-      const { container } = render(<FormRow />)
-      expect(container.firstChild).toBeInTheDocument()
-      expect(container.firstChild).toHaveClass("juno-form-row")
+      render(<FormSection data-testid="my-formsection" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
     })
 
     test("renders with null children", () => {
-      render(<FormRow data-testid="my-form-row">{null}</FormRow>)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      render(<FormSection data-testid="my-formsection">{null}</FormSection>)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
     })
 
     test("renders with undefined children", () => {
-      render(<FormRow data-testid="my-form-row">{undefined}</FormRow>)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      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>
+          {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("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")
+  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("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("renders a title as h4", () => {
+      render(<FormSection title="My Section" />)
+      expect(screen.getByRole("heading", { level: 4 })).toBeInTheDocument()
+      expect(screen.getByRole("heading", { level: 4 })).toHaveClass("juno-formsection-heading")
+      expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent("My Section")
     })
 
-    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("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("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")
+    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 a heading element only if title is provided", () => {
+      const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument()
+
+      rerender(<FormSection data-testid="my-formsection" title="Title" />)
+      expect(screen.getByRole("heading")).toBeInTheDocument()
     })
   })
 
-  describe("Children Rendering", () => {
-    test("renders children as passed", () => {
-      render(
-        <FormRow>
-          <button></button>
-        </FormRow>
-      )
-      expect(screen.getByRole("button")).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 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 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 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)
+    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/FormattedText/FormattedText.test.tsx b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
index 0734976cbe..291cb1dfc9 100644
--- a/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
+++ b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
@@ -10,15 +10,15 @@ 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")
+    render(<FormattedText className="my-class" data-testid="my-formatted-text" />)
+    const element = screen.getByTestId("my-formatted-text")
     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")
+    render(<FormattedText data-testid="my-formatted-text" data-lolol="123-456" />)
+    const element = screen.getByTestId("my-formatted-text")
     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/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
index 1d3e760fef..1a9dd054e9 100644
--- a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
+++ b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
@@ -11,7 +11,7 @@ import { GridColumn } from "./GridColumn.component"
 
 describe("GridColumn", () => {
   describe("Basic Rendering", () => {
-    test("renders a Grid row", () => {
+    test("renders a Grid column", () => {
       render(<GridColumn data-testid="my-grid-column" />)
       expect(screen.getByTestId("my-grid-column")).toBeInTheDocument()
     })
diff --git a/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx b/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
index 2e1c531760..35dfdb66df 100644
--- a/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
+++ b/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
@@ -26,7 +26,7 @@ describe("ModalFooter", () => {
     expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
   })
 
-  test("renders a ModalFooter with a 'Confirm' and a 'Cancel' button when an onComfirm handler is passed", () => {
+  test("renders a ModalFooter with a 'Confirm' and a 'Cancel' button when an onConfirm handler is passed", () => {
     const confirmHandler = () => {
       console.log("confirmed!")
     }
diff --git a/packages/ui-components/src/components/Radio/Radio.test.tsx b/packages/ui-components/src/components/Radio/Radio.test.tsx
index bde9371066..d2d10e9e4d 100644
--- a/packages/ui-components/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-components/src/components/Radio/Radio.test.tsx
@@ -8,32 +8,32 @@ import { render, screen, act } from "@testing-library/react"
 import { Radio } from "./index"
 
 describe("Radio", () => {
-  test("renders an html input type radio", () => {
+  test('renders an HTML input of type "radio"', () => {
     render(<Radio />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("type", "radio")
   })
 
-  test("renders a radio with a name as passed", () => {
+  test("renders a Radio with a name as passed", () => {
     render(<Radio name="My Radio" />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("name", "My Radio")
   })
 
-  test("renders a radio with a label", () => {
+  test("renders a Radio with a label", () => {
     render(<Radio label="My Radio" id="my-radio" />)
     expect(screen.getByLabelText("My Radio")).toBeInTheDocument()
     expect(document.querySelector(".juno-label")).toBeInTheDocument()
     expect(document.querySelector(".juno-label")).toHaveTextContent("My Radio")
   })
 
-  test("renders a radio with an id as passed", () => {
+  test("renders a Radio with an id as passed", () => {
     render(<Radio id="my-radio" />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("id", "my-radio")
   })
 
-  test("renders a Checkbox with an auto-generated id if no id was passed", () => {
+  test("renders a Radio with an auto-generated id if no id was passed", () => {
     render(<Radio />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("id")
@@ -75,7 +75,7 @@ describe("Radio", () => {
     expect(document.querySelector(".juno-required")).toBeInTheDocument()
   })
 
-  test("renders no checked attribute if false", () => {
+  test("renders a Radio with no checked attribute if false", () => {
     act(() => {
       render(<Radio checked={false} />)
     })
@@ -84,14 +84,14 @@ describe("Radio", () => {
     expect(radio).not.toBeChecked()
   })
 
-  test("renders a disabled radio as passed", () => {
+  test("renders a disabled Radio as passed", () => {
     render(<Radio disabled />)
     const radio = screen.getByRole("radio")
     expect(radio).toBeInTheDocument()
     expect(radio).toBeDisabled()
   })
 
-  test("renders an invalid radio as passed", () => {
+  test("renders an invalid Radio as passed", () => {
     render(<Radio invalid />)
     const radio = screen.getByRole("radio")
     expect(radio).toBeInTheDocument()
@@ -105,14 +105,14 @@ describe("Radio", () => {
     expect(radio).toHaveClass("juno-radio-valid")
   })
 
-  test("renders a helptext as passed", () => {
+  test("renders a Radio with helptext as passed", () => {
     render(<Radio helptext="this is a helptext" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
     expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
   })
 
-  test("renders a successtext as passed and validates the Radio", () => {
+  test("renders a Radio with successtext as passed and validates the Radio", () => {
     render(<Radio successtext="great success!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
@@ -120,7 +120,7 @@ describe("Radio", () => {
     expect(screen.getByRole("radio")).toHaveClass("juno-radio-valid")
   })
 
-  test("renders an errortext as passed and invalidates the Radio", () => {
+  test("renders a Radio with errortext as passed and invalidates the Radio", () => {
     render(<Radio errortext="this is an error!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")
diff --git a/packages/ui-components/src/components/Select/Select.test.tsx b/packages/ui-components/src/components/Select/Select.test.tsx
index f2a64feb52..a75ef612c1 100644
--- a/packages/ui-components/src/components/Select/Select.test.tsx
+++ b/packages/ui-components/src/components/Select/Select.test.tsx
@@ -67,7 +67,7 @@ describe("Select", () => {
     expect(screen.getByRole("button")).toHaveClass("juno-select-toggle")
   })
 
-  test("renders a default variant select toggle by defgault", async () => {
+  test("renders a default variant select toggle by default", async () => {
     await waitFor(() =>
       render(
         <PortalProvider>
diff --git a/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx b/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
index 36f8adbe51..6004063f25 100644
--- a/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
+++ b/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
@@ -19,7 +19,7 @@ describe("SelectDivider", () => {
     expect(screen.getByTestId("select-divider")).toHaveClass("my-class")
   })
 
-  test("renders all pops as passed", () => {
+  test("renders all props as passed", () => {
     render(<SelectDivider data-testid="select-divider" data-lolol="123" />)
     expect(screen.getByTestId("select-divider")).toBeInTheDocument()
     expect(screen.getByTestId("select-divider")).toHaveAttribute("data-lolol", "123")
diff --git a/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx b/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
index b30d9f05cb..cdb7593772 100644
--- a/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
+++ b/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
@@ -17,7 +17,7 @@ describe("TopNavigationItem", () => {
     vi.clearAllMocks()
   })
 
-  test("renders a ToppNavigationItem", async () => {
+  test("renders a TopNavigationItem", async () => {
     await waitFor(() => render(<TopNavigationItem data-testid="top-nav-item" />))
     expect(screen.getByTestId("top-nav-item")).toBeInTheDocument()
     expect(screen.getByTestId("top-nav-item")).toHaveClass("juno-topnavigation-item")
@@ -74,7 +74,7 @@ describe("TopNavigationItem", () => {
     expect(screen.getByRole("button")).toHaveClass("juno-topnavigation-item")
   })
 
-  test("renders an active ToppNavigationItem as passed", async () => {
+  test("renders an active TopNavigationItem as passed", async () => {
     await waitFor(() => render(<TopNavigationItem data-testid="top-nav-item" active />))
     expect(screen.getByTestId("top-nav-item")).toBeInTheDocument()
     expect(screen.getByTestId("top-nav-item")).toHaveClass("juno-topnavigation-item")