diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.jsx b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.tsx
similarity index 100%
rename from services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.jsx
rename to services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.tsx
diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.jsx b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx
similarity index 93%
rename from services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.jsx
rename to services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx
index 269b528397..695b3a1fa2 100644
--- a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.jsx
+++ b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import HotkeysModalBottomText from './hotkeys-modal-bottom-text'
 import OLModal, {
@@ -17,6 +16,12 @@ export default function HotkeysModal({
   show,
   isMac = false,
   trackChangesVisible = false,
+}: {
+  animation?: boolean
+  handleHide: () => void
+  show: boolean
+  isMac?: boolean
+  trackChangesVisible?: boolean
 }) {
   const { t } = useTranslation()
 
@@ -201,15 +206,13 @@ export default function HotkeysModal({
   )
 }
 
-HotkeysModal.propTypes = {
-  animation: PropTypes.bool,
-  isMac: PropTypes.bool,
-  show: PropTypes.bool.isRequired,
-  handleHide: PropTypes.func.isRequired,
-  trackChangesVisible: PropTypes.bool,
-}
-
-function Hotkey({ combination, description }) {
+function Hotkey({
+  combination,
+  description,
+}: {
+  combination: string
+  description: string
+}) {
   return (
     <div className="hotkey" data-test-selector="hotkey">
       <span className="combination">{combination}</span>
@@ -217,7 +220,3 @@ function Hotkey({ combination, description }) {
     </div>
   )
 }
-Hotkey.propTypes = {
-  combination: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-}
diff --git a/services/web/frontend/stories/hotkeys-modal.stories.jsx b/services/web/frontend/stories/hotkeys-modal.stories.tsx
similarity index 63%
rename from services/web/frontend/stories/hotkeys-modal.stories.jsx
rename to services/web/frontend/stories/hotkeys-modal.stories.tsx
index a32896ecf5..026624ceef 100644
--- a/services/web/frontend/stories/hotkeys-modal.stories.jsx
+++ b/services/web/frontend/stories/hotkeys-modal.stories.tsx
@@ -1,14 +1,17 @@
+import { ComponentProps } from 'react'
 import HotkeysModal from '../js/features/hotkeys-modal/components/hotkeys-modal'
 
-export const ReviewEnabled = args => {
+type HotkeysModalProps = ComponentProps<typeof HotkeysModal>
+
+export const ReviewEnabled = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} />
 }
 
-export const ReviewDisabled = args => {
+export const ReviewDisabled = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} trackChangesVisible={false} />
 }
 
-export const MacModifier = args => {
+export const MacModifier = (args: HotkeysModalProps) => {
   return <HotkeysModal {...args} isMac />
 }
 
diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.jsx b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.tsx
similarity index 100%
rename from services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.jsx
rename to services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.tsx
diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.jsx b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.tsx
similarity index 100%
rename from services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.jsx
rename to services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.tsx
diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.jsx b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.tsx
similarity index 95%
rename from services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.jsx
rename to services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.tsx
index 8d18f806f0..1df3c514b7 100644
--- a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.jsx
+++ b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.tsx
@@ -13,7 +13,7 @@ describe('<HotkeysModal />', function () {
   it('renders the translated modal title on cm6', async function () {
     const { baseElement } = render(<HotkeysModal {...modalProps} />)
 
-    expect(baseElement.querySelector('.modal-title').textContent).to.equal(
+    expect(baseElement.querySelector('.modal-title')?.textContent).to.equal(
       'Hotkeys'
     )
   })