diff --git a/.changeset/neat-peaches-roll.md b/.changeset/neat-peaches-roll.md
new file mode 100644
index 000000000..75e943af8
--- /dev/null
+++ b/.changeset/neat-peaches-roll.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate the ContextMenu component to TypeScript
diff --git a/packages/ui-components/src/components/ContextMenu/ContextMenu.component.js b/packages/ui-components/src/components/ContextMenu/ContextMenu.component.tsx
similarity index 70%
rename from packages/ui-components/src/components/ContextMenu/ContextMenu.component.js
rename to packages/ui-components/src/components/ContextMenu/ContextMenu.component.tsx
index 1f649b536..e625f6ac5 100644
--- a/packages/ui-components/src/components/ContextMenu/ContextMenu.component.js
+++ b/packages/ui-components/src/components/ContextMenu/ContextMenu.component.tsx
@@ -4,11 +4,11 @@
  */
 
 import React, { useState, useEffect } from "react"
-import PropTypes from "prop-types"
-import { Icon } from "../../deprecated_js/Icon/index.js"
 import { Menu } from "@headlessui/react"
 import { Float } from "@headlessui-float/react"
-import { autoPlacement, offset, shift, size } from "@floating-ui/react-dom"
+import { autoPlacement, offset, shift, size, Boundary } from "@floating-ui/react-dom"
+
+import { Icon, KnownIcons } from "../Icon/Icon.component"
 
 /*
 TODO:
@@ -32,26 +32,33 @@ const menuStyles = `
 `
 
 const toggleStyles = `
-	hover:jn-text-theme-accent
-	active:jn-text-theme-accent
+  hover:jn-text-theme-accent
+  active:jn-text-theme-accent
 `
 
 const toggleOpenStyle = `
-	jn-text-theme-accent
+  jn-text-theme-accent
 `
 
-/** A context menu with a toggle. */
+export interface ContextMenuProps {
+  className?: string
+  children?: React.ReactNode
+  icon?: KnownIcons
+  open?: boolean
+}
 
-export const ContextMenu = ({
+/** A context menu with a toggle. */
+export const ContextMenu: React.FC<ContextMenuProps> = ({
   /*icon,*/
   /*className,*/
   children = null,
   open = false,
   /*...props*/
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
 
-  const handleClick = (_event) => {
+  // eslint-disable-next-line no-unused-vars
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     setIsOpen(!isOpen)
   }
 
@@ -66,7 +73,7 @@ export const ContextMenu = ({
       allowedPlacements: ["top-start", "top-end", "bottom-start", "bottom-end"],
     }),
     size({
-      boundary: "viewport",
+      boundary: "viewport" as Boundary,
       apply({ availableWidth, availableHeight, elements }) {
         Object.assign(elements.floating.style, {
           maxWidth: `${availableWidth}px`,
@@ -84,10 +91,10 @@ export const ContextMenu = ({
         <Menu.Button
           onClick={handleClick}
           className={`
-              juno-contextmenu-toggle 
-              ${toggleStyles} 
-              ${isOpen ? toggleOpenStyle : ""}
-            `}
+            juno-contextmenu-toggle 
+            ${toggleStyles} 
+            ${isOpen ? toggleOpenStyle : ""}
+          `}
         >
           <Icon icon="moreVert" />
         </Menu.Button>
@@ -96,10 +103,3 @@ export const ContextMenu = ({
     </Menu>
   )
 }
-
-ContextMenu.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  icon: PropTypes.any,
-  open: PropTypes.bool,
-}
diff --git a/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.js b/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.js
deleted file mode 100644
index e8b5d7913..000000000
--- a/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.js
+++ /dev/null
@@ -1,175 +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 { ContextMenu } from "./index.js"
-import { MenuItem } from "../MenuItem/MenuItem.component"
-import { Button } from "../../deprecated_js/Button/index"
-import { PortalProvider } from "../../deprecated_js/PortalProvider/PortalProvider.component"
-
-export default {
-  title: "WiP/ContextMenu/ContextMenu",
-  component: ContextMenu,
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="jn-pb-12" style={{ minHeight: "250px" }}>
-        <PortalProvider>
-          <Story />
-        </PortalProvider>
-      </div>
-    ),
-  ],
-}
-
-const Template = ({ children, ...args }) => <ContextMenu {...args}>{children}</ContextMenu>
-
-Template.propTypes = {
-  children: PropTypes.node,
-}
-
-const PortalTemplate = ({ children, ...args }) => (
-  <PortalProvider>
-    <PortalProvider.Portal>
-      <ContextMenu {...args}>{children}</ContextMenu>
-    </PortalProvider.Portal>
-  </PortalProvider>
-)
-
-PortalTemplate.propTypes = {
-  children: PropTypes.node,
-}
-
-const CustomPortalTemplate = ({ parentStyles, children, ...args }) => (
-  <div style={parentStyles}>
-    <PortalTemplate {...args}>{children}</PortalTemplate>
-  </div>
-)
-
-CustomPortalTemplate.propTypes = {
-  parentStyles: PropTypes.object,
-  children: PropTypes.node,
-}
-
-export const Default = {
-  render: Template,
-
-  args: {
-    children: [
-      <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
-      <MenuItem key="2" label="This item does nothing" icon="help" />,
-      <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
-      <MenuItem key="4">
-        <Button key={0} label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
-      </MenuItem>,
-      <MenuItem key="5" onClick={() => {}} label="Button as Item with OnClick" icon="help" />,
-    ],
-  },
-}
-
-export const InsidePortal = {
-  render: PortalTemplate,
-
-  args: {
-    children: [
-      <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
-      <MenuItem key="2" label="This item does nothing" />,
-      <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
-      <MenuItem key="4">
-        <Button key={0} label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
-      </MenuItem>,
-    ],
-  },
-}
-
-export const ManyOptions = {
-  render: PortalTemplate,
-
-  args: {
-    children: [
-      <MenuItem key="1" label="Option 1" />,
-      <MenuItem key="2" label="Option 2" />,
-      <MenuItem key="3" label="Option 3" />,
-      <MenuItem key="4" label="Option 4" />,
-      <MenuItem key="5" label="Option 5" />,
-      <MenuItem key="6" label="Option 6" />,
-      <MenuItem key="7" label="Option 7" />,
-      <MenuItem key="8" label="Option 8" />,
-      <MenuItem key="9" label="Option 9" />,
-      <MenuItem key="10" label="Option 10" />,
-      <MenuItem key="11" label="Option 11" />,
-      <MenuItem key="12" label="Option 12" />,
-      <MenuItem key="13" label="Option 13" />,
-      <MenuItem key="14" label="Option 14" />,
-      <MenuItem key="15" label="Option 15" />,
-    ],
-  },
-}
-
-export const BottomLeftPositionedSelect = {
-  render: CustomPortalTemplate,
-
-  args: {
-    parentStyles: {
-      position: "absolute",
-      bottom: "0",
-    },
-    children: [
-      <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
-      <MenuItem key="2" label="This item does nothing" icon="help" />,
-      <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
-      <MenuItem key="4">
-        <Button key={0} label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
-      </MenuItem>,
-      <MenuItem key="5" onClick={() => {}} label="Button as Item with OnClick" icon="help" />,
-    ],
-  },
-}
-
-export const TopRightPositionedSelect = {
-  render: CustomPortalTemplate,
-
-  args: {
-    parentStyles: {
-      position: "absolute",
-      right: "0",
-    },
-    children: [
-      <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
-      <MenuItem key="2" label="This item does nothing" icon="help" />,
-      <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
-      <MenuItem key="4">
-        <Button key={0} label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
-      </MenuItem>,
-      <MenuItem key="5" onClick={() => {}} label="Button as Item with OnClick" icon="help" />,
-    ],
-  },
-}
-
-export const BottomRightPositionedSelect = {
-  render: CustomPortalTemplate,
-
-  args: {
-    parentStyles: {
-      position: "absolute",
-      right: "0",
-      bottom: "0",
-    },
-    children: [
-      <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
-      <MenuItem key="2" label="This item does nothing" icon="help" />,
-      <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
-      <MenuItem key="4">
-        <Button key={0} label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
-      </MenuItem>,
-      <MenuItem key="5" onClick={() => {}} label="Button as Item with OnClick" icon="help" />,
-    ],
-  },
-}
diff --git a/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.tsx b/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.tsx
new file mode 100644
index 000000000..792ff8da1
--- /dev/null
+++ b/packages/ui-components/src/components/ContextMenu/ContextMenu.stories.tsx
@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { CSSProperties, ReactNode } from "react"
+import { Meta, StoryFn } from "@storybook/react"
+
+import { ContextMenu, ContextMenuProps } from "./ContextMenu.component"
+import { Button } from "../Button/Button.component"
+import { MenuItem } from "../MenuItem/MenuItem.component"
+import { PortalProvider } from "../PortalProvider/PortalProvider.component"
+
+export default {
+  title: "WiP/ContextMenu/ContextMenu",
+  component: ContextMenu,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="jn-pb-12" style={{ minHeight: "250px" }}>
+        <PortalProvider>
+          <Story />
+        </PortalProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof ContextMenu>
+
+const childrenElements: ReactNode[] = [
+  <MenuItem key="1" label="Juno on Github" href="https://github.com/cloudoperators/juno" />,
+  <MenuItem key="2" label="This item does nothing" icon="help" />,
+  <MenuItem key="3" label="Disabled Item" href="https://github.com/cloudoperators/juno" disabled />,
+  <MenuItem key="4">
+    <Button key="0" label="Button as Child of MenuItem" variant="subdued" size="small" className="jn-w-full" />
+  </MenuItem>,
+  <MenuItem key="5" onClick={() => {}} label="Button as Item with OnClick" icon="help" />,
+]
+
+const Template: StoryFn<ContextMenuProps> = (args) => <ContextMenu {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: childrenElements,
+}
+
+const PortalTemplate: StoryFn<ContextMenuProps> = (args) => (
+  <PortalProvider>
+    <PortalProvider.Portal>
+      <ContextMenu {...args} />
+    </PortalProvider.Portal>
+  </PortalProvider>
+)
+
+export const InsidePortal = PortalTemplate.bind({})
+InsidePortal.args = {
+  children: childrenElements,
+}
+
+export const ManyOptions: StoryFn<ContextMenuProps> = (args) => (
+  <PortalProvider>
+    <PortalProvider.Portal>
+      <ContextMenu {...args} />
+    </PortalProvider.Portal>
+  </PortalProvider>
+)
+ManyOptions.args = {
+  children: [
+    <MenuItem key="1" label="Option 1" />,
+    <MenuItem key="2" label="Option 2" />,
+    <MenuItem key="3" label="Option 3" />,
+    <MenuItem key="4" label="Option 4" />,
+    <MenuItem key="5" label="Option 5" />,
+    <MenuItem key="6" label="Option 6" />,
+    <MenuItem key="7" label="Option 7" />,
+    <MenuItem key="8" label="Option 8" />,
+    <MenuItem key="9" label="Option 9" />,
+    <MenuItem key="10" label="Option 10" />,
+    <MenuItem key="11" label="Option 11" />,
+    <MenuItem key="12" label="Option 12" />,
+    <MenuItem key="13" label="Option 13" />,
+    <MenuItem key="14" label="Option 14" />,
+    <MenuItem key="15" label="Option 15" />,
+  ],
+}
+
+interface CustomTemplateProps extends ContextMenuProps {
+  parentStyles?: CSSProperties
+}
+
+// eslint-disable-next-line react/prop-types
+const CustomPortalTemplate: StoryFn<CustomTemplateProps> = ({ parentStyles, ...args }) => (
+  <div style={parentStyles}>
+    <PortalProvider>
+      <PortalProvider.Portal>
+        <ContextMenu {...args} />
+      </PortalProvider.Portal>
+    </PortalProvider>
+  </div>
+)
+
+export const BottomLeftPositionedSelect = CustomPortalTemplate.bind({})
+BottomLeftPositionedSelect.args = {
+  parentStyles: {
+    position: "absolute",
+    bottom: "0",
+  },
+  children: childrenElements,
+}
+
+export const TopRightPositionedSelect = CustomPortalTemplate.bind({})
+TopRightPositionedSelect.args = {
+  parentStyles: {
+    position: "absolute",
+    right: "0",
+  },
+  children: childrenElements,
+}
+
+export const BottomRightPositionedSelect = CustomPortalTemplate.bind({})
+BottomRightPositionedSelect.args = {
+  parentStyles: {
+    position: "absolute",
+    right: "0",
+    bottom: "0",
+  },
+  children: childrenElements,
+}
diff --git a/packages/ui-components/src/components/ContextMenu/ContextMenu.test.js b/packages/ui-components/src/components/ContextMenu/ContextMenu.test.tsx
similarity index 66%
rename from packages/ui-components/src/components/ContextMenu/ContextMenu.test.js
rename to packages/ui-components/src/components/ContextMenu/ContextMenu.test.tsx
index 9a2bc69c0..bb5f4d992 100644
--- a/packages/ui-components/src/components/ContextMenu/ContextMenu.test.js
+++ b/packages/ui-components/src/components/ContextMenu/ContextMenu.test.tsx
@@ -6,15 +6,17 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { ContextMenu } from "./index.js"
+import { describe, expect, test } from "vitest"
+
+import { ContextMenu } from "./ContextMenu.component"
 
 describe("ContextMenu", () => {
-  test("renders a ContextMenu Toggle", async () => {
-    await waitFor(() => render(<ContextMenu />))
-    expect(screen.getByRole("button")).toBeInTheDocument()
-    expect(screen.getByRole("button")).toHaveClass("juno-contextmenu-toggle")
-    expect(screen.getByRole("img")).toBeInTheDocument()
-    expect(screen.getByRole("img")).toHaveAttribute("title", "More")
+  test("renders a ContextMenu Toggle", () => {
+    render(<ContextMenu />)
+    const iconElement = screen.getByRole("img")
+
+    expect(iconElement).toHaveAccessibleName("More")
+    expect(iconElement.querySelector("title")?.textContent).toBe("More")
   })
 
   test("toggles Context Menu on click", async () => {
diff --git a/packages/ui-components/src/components/ContextMenu/index.js b/packages/ui-components/src/components/ContextMenu/index.ts
similarity index 100%
rename from packages/ui-components/src/components/ContextMenu/index.js
rename to packages/ui-components/src/components/ContextMenu/index.ts
diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js
index bc95aa887..eb9e5fc55 100644
--- a/packages/ui-components/src/index.js
+++ b/packages/ui-components/src/index.js
@@ -27,7 +27,7 @@ export { ContentAreaToolbar } from "./components/ContentAreaToolbar/index.js"
 export { ContentAreaWrapper } from "./components/ContentAreaWrapper/index.js"
 export { ContentContainer } from "./components/ContentContainer/index.js"
 export { Container } from "./components/Container/index.js"
-export { ContextMenu } from "./components/ContextMenu/index.js"
+export { ContextMenu } from "./components/ContextMenu"
 export { DataList } from "./components/DataList/index.js"
 export { DataListCell } from "./components/DataListCell/index.js"
 export { DataListCheckboxCell } from "./components/DataListCheckboxCell/index.js"