diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c40a5cf0d7..f6c9fc97dc 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import { Preview } from '@storybook/react'
 import { themes } from '@storybook/theming'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React from 'react'
 
 import Layout from './Layout'
@@ -8,6 +9,8 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
 }
 
+const queryClient = new QueryClient()
+
 const localStorageResetDecorator = (Story) => {
   window.localStorage.clear()
   return <Story />
@@ -16,9 +19,11 @@ const localStorageResetDecorator = (Story) => {
 export const decorators = [
   localStorageResetDecorator,
   (Story) => (
-    <Layout>
-      <Story />
-    </Layout>
+    <QueryClientProvider client={queryClient}>
+      <Layout>
+        <Story />
+      </Layout>
+    </QueryClientProvider>
   ),
 ]
 
diff --git a/src/pages/AccountSettings/tabs/Admin/ManageAdminCard/AdminTable/AdminTable.tsx b/src/pages/AccountSettings/tabs/Admin/ManageAdminCard/AdminTable/AdminTable.tsx
index 434f70bf2e..99257fce74 100644
--- a/src/pages/AccountSettings/tabs/Admin/ManageAdminCard/AdminTable/AdminTable.tsx
+++ b/src/pages/AccountSettings/tabs/Admin/ManageAdminCard/AdminTable/AdminTable.tsx
@@ -124,7 +124,6 @@ export default function AdminTable() {
             email: user.email,
             revoke: (
               <>
-                {/* @ts-expect-error */}
                 <Button
                   hook="toggle admin status"
                   disabled={isUpdatingUser}
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx
index 7907bbecfb..7faf84da77 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EmailAddress/EmailAddress.tsx
@@ -86,7 +86,6 @@ function EmailAddress() {
             </p>
           )}
           <div className="flex gap-1">
-            {/* @ts-expect-error */}
             <Button
               hook="update-email"
               type="submit"
@@ -95,7 +94,6 @@ function EmailAddress() {
             >
               Update
             </Button>
-            {/* @ts-expect-error */}
             <Button
               type="button"
               hook="cancel-email"
diff --git a/src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx b/src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
index 62a5c4e9c7..1e6eea0acb 100644
--- a/src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
+++ b/src/pages/RepoPage/CoverageTab/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
@@ -38,7 +38,7 @@ function TriggerSyncBanner() {
           to={undefined}
           hook="backfill-task"
           variant="primary"
-          onClick={mutate}
+          onClick={() => mutate()}
           disabled={false}
         >
           Enable component analytics
diff --git a/src/pages/RepoPage/CoverageTab/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx b/src/pages/RepoPage/CoverageTab/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
index 9b5854c393..64293eff3c 100644
--- a/src/pages/RepoPage/CoverageTab/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
+++ b/src/pages/RepoPage/CoverageTab/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
@@ -45,7 +45,7 @@ function TriggerSyncBanner() {
                 to={undefined}
                 hook="backfill-task"
                 variant="primary"
-                onClick={mutate}
+                onClick={() => mutate()}
                 disabled={false}
               >
                 Enable flag analytics
diff --git a/src/shared/AppLink/AppLink.jsx b/src/shared/AppLink/AppLink.jsx
index 0da90a8107..b51802b937 100644
--- a/src/shared/AppLink/AppLink.jsx
+++ b/src/shared/AppLink/AppLink.jsx
@@ -97,6 +97,7 @@ AppLink.propTypes = {
   // You can find the page name in this file
   // https://github.com/codecov/gazebo/blob/main/src/services/navigation/useNavLinks.js
   pageName: PropTypes.string.isRequired,
+  exact: PropTypes.bool,
   text: PropTypes.string,
   options: PropTypes.object,
   activeClassName: PropTypes.string,
diff --git a/src/shared/GlobalBanners/SelfHostedLicenseExpiration/LicenseExpirationModal/LicenseExpirationModal.tsx b/src/shared/GlobalBanners/SelfHostedLicenseExpiration/LicenseExpirationModal/LicenseExpirationModal.tsx
index 2cf9823f0a..10a6a66d4e 100644
--- a/src/shared/GlobalBanners/SelfHostedLicenseExpiration/LicenseExpirationModal/LicenseExpirationModal.tsx
+++ b/src/shared/GlobalBanners/SelfHostedLicenseExpiration/LicenseExpirationModal/LicenseExpirationModal.tsx
@@ -78,7 +78,6 @@ const LicenseExpirationModal: React.FC<LicenseExpirationModalArgs> = ({
       }
       footer={
         <div className="flex gap-2">
-          {/* @ts-expect-error */}
           <Button
             to={{ pageName: 'generateSelfHostedLicense' }}
             showExternalIcon={false}
diff --git a/src/shared/ListRepo/ReposTableTeam/ReposTableTeam.tsx b/src/shared/ListRepo/ReposTableTeam/ReposTableTeam.tsx
index 53fa9451a6..b716c36759 100644
--- a/src/shared/ListRepo/ReposTableTeam/ReposTableTeam.tsx
+++ b/src/shared/ListRepo/ReposTableTeam/ReposTableTeam.tsx
@@ -266,7 +266,7 @@ const ReposTableTeam = ({ searchValue }: ReposTableTeamProps) => {
           <Button
             hook="load-more"
             isLoading={isFetchingNextPage}
-            onClick={fetchNextPage}
+            onClick={() => fetchNextPage()}
             to={undefined}
             disabled={false}
           >
diff --git a/src/ui/Avatar/Avatar.jsx b/src/ui/Avatar/Avatar.jsx
index 038ce08493..e48a3ee0be 100644
--- a/src/ui/Avatar/Avatar.jsx
+++ b/src/ui/Avatar/Avatar.jsx
@@ -37,7 +37,7 @@ function Avatar({ user, border = 'none', ariaLabel, className = '' }) {
 
 Avatar.propTypes = {
   user: PropTypes.shape({
-    username: PropTypes.string.isRequired,
+    username: PropTypes.string,
     avatarUrl: PropTypes.string,
   }),
   border: PropTypes.oneOf(['light', 'dark', 'none']),
diff --git a/src/ui/Button/Button.stories.jsx b/src/ui/Button/Button.stories.jsx
deleted file mode 100644
index b23dbcab75..0000000000
--- a/src/ui/Button/Button.stories.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import Button from './Button'
-
-import Icon from '../Icon'
-
-const Template = (args) => <Button {...args} />
-
-export const NormalButton = Template.bind({})
-NormalButton.args = {
-  children: 'Normal button',
-  variant: 'default',
-  disabled: false,
-}
-
-export const PrimaryButton = Template.bind({})
-PrimaryButton.args = {
-  children: 'Primary button',
-  variant: 'primary',
-  disabled: false,
-}
-
-export const DangerButton = Template.bind({})
-DangerButton.args = {
-  children: 'Danger button',
-  variant: 'danger',
-  disabled: false,
-}
-
-export const DisabledButton = Template.bind({})
-DisabledButton.args = {
-  children: 'Disabled button',
-  disabled: true,
-}
-
-export const SecondaryButton = Template.bind({})
-SecondaryButton.args = {
-  children: 'Secondary button',
-  variant: 'secondary',
-  disabled: false,
-}
-
-export const PlainButton = Template.bind({})
-PlainButton.args = {
-  children: 'Plain button',
-  variant: 'plain',
-}
-
-export const ListboxButton = Template.bind({})
-ListboxButton.args = {
-  children: 'Listbox button',
-  variant: 'listbox',
-}
-
-export const GitHubButton = Template.bind({})
-GitHubButton.args = {
-  children: 'GitHub Button',
-  variant: 'github',
-}
-
-export const GitLabButton = Template.bind({})
-GitLabButton.args = {
-  children: 'GitLab Button',
-  variant: 'gitlab',
-}
-
-export const BitbucketButton = Template.bind({})
-BitbucketButton.args = {
-  children: 'Bitbucket Button',
-  variant: 'bitbucket',
-}
-export const OktaButton = Template.bind({})
-OktaButton.args = {
-  children: 'Okta Button',
-  variant: 'okta',
-}
-
-export const MixedButton = Template.bind({})
-MixedButton.args = {
-  children: (
-    <>
-      Mixed content <Icon name="search" size="sm" />
-    </>
-  ),
-}
-
-export default {
-  title: 'Components/Button',
-  component: Button,
-  argTypes: { onClick: { action: 'clicked' } },
-}
diff --git a/src/ui/Button/Button.stories.tsx b/src/ui/Button/Button.stories.tsx
new file mode 100644
index 0000000000..f91840ffe9
--- /dev/null
+++ b/src/ui/Button/Button.stories.tsx
@@ -0,0 +1,117 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import Button from './Button'
+
+import Icon from '../Icon'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: { onClick: { action: 'clicked' } },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const NormalButton: Story = {
+  args: {
+    children: 'Normal button',
+    variant: 'default',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const PrimaryButton: Story = {
+  args: {
+    children: 'Primary button',
+    variant: 'primary',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const DangerButton: Story = {
+  args: {
+    children: 'Danger button',
+    variant: 'danger',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const DisabledButton: Story = {
+  args: {
+    children: 'Disabled button',
+    disabled: true,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const SecondaryButton: Story = {
+  args: {
+    children: 'Secondary button',
+    variant: 'secondary',
+    disabled: false,
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const PlainButton: Story = {
+  args: {
+    children: 'Plain button',
+    variant: 'plain',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const ListboxButton: Story = {
+  args: {
+    children: 'Listbox button',
+    variant: 'listbox',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const GitHubButton: Story = {
+  args: {
+    children: 'GitHub Button',
+    variant: 'github',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const GitLabButton: Story = {
+  args: {
+    children: 'GitLab Button',
+    variant: 'gitlab',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const BitbucketButton: Story = {
+  args: {
+    children: 'Bitbucket Button',
+    variant: 'bitbucket',
+  },
+  render: (args) => <Button {...args} />,
+}
+export const OktaButton: Story = {
+  args: {
+    children: 'Okta Button',
+    variant: 'okta',
+  },
+  render: (args) => <Button {...args} />,
+}
+
+export const MixedButton: Story = {
+  args: {
+    children: (
+      <>
+        Mixed content <Icon name="search" size="sm" />
+      </>
+    ),
+  },
+  render: (args) => <Button {...args} />,
+}
diff --git a/src/ui/Button/Button.test.jsx b/src/ui/Button/Button.test.tsx
similarity index 78%
rename from src/ui/Button/Button.test.jsx
rename to src/ui/Button/Button.test.tsx
index 02d17027c3..80195e7cc6 100644
--- a/src/ui/Button/Button.test.jsx
+++ b/src/ui/Button/Button.test.tsx
@@ -33,25 +33,6 @@ describe('Button', () => {
     })
   })
 
-  describe('when rendered without `to` prop', () => {
-    let mockError
-
-    beforeEach(() => {
-      mockError = vi.fn()
-      const spy = vi.spyOn(console, 'error')
-      spy.mockImplementation(mockError)
-    })
-
-    afterEach(() => {
-      vi.clearAllMocks()
-    })
-
-    it('PropTypes warning is thrown that developers need to provide a hook prop if not using to', () => {
-      render(<Button>hola</Button>, { wrapper: MemoryRouter })
-      expect(mockError).toHaveBeenCalledTimes(1)
-    })
-  })
-
   describe('when isLoading', () => {
     it('disables the button', () => {
       render(
diff --git a/src/ui/Button/Button.jsx b/src/ui/Button/Button.tsx
similarity index 80%
rename from src/ui/Button/Button.jsx
rename to src/ui/Button/Button.tsx
index 09d2145067..8df8863c0e 100644
--- a/src/ui/Button/Button.jsx
+++ b/src/ui/Button/Button.tsx
@@ -1,5 +1,4 @@
 import cs from 'classnames'
-import PropTypes from 'prop-types'
 
 import AppLink from 'shared/AppLink'
 import Spinner from 'ui/Spinner'
@@ -95,12 +94,46 @@ const loadingVariantClasses = {
   secondary: `disabled:text-white disabled:border-ds-pink-tertiary disabled:bg-ds-pink-default`,
 }
 
-function pickVariant(variant, loading) {
-  const set = loading ? loadingVariantClasses : variantClasses
+function pickVariant(
+  variant: keyof typeof variantClasses | keyof typeof loadingVariantClasses,
+  loading: boolean
+) {
+  return loading
+    ? loadingVariantClasses[variant as keyof typeof loadingVariantClasses]
+    : variantClasses[variant as keyof typeof variantClasses]
+}
 
-  return set[variant]
+// using this type until AppLink is converted to TypeScript
+export interface AppLinkProps {
+  pageName: string
+  text?: string
+  options?: Object
+  activeClassName?: string
+  showExternalIcon?: boolean
+  type?: 'submit' | 'button' | 'reset'
+  children?: React.ReactNode
+  exact?: boolean
 }
 
+interface WithTo {
+  to: AppLinkProps
+  hook?: string
+}
+interface WithoutTo {
+  to?: never
+  hook: string
+}
+
+interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
+  variant?: keyof typeof variantClasses
+  isLoading?: boolean
+  disabled?: boolean
+}
+
+type ExtendedButtonProps = ButtonProps &
+  (WithTo | WithoutTo) &
+  Partial<AppLinkProps>
+
 function Button({
   to,
   variant = 'default',
@@ -109,7 +142,7 @@ function Button({
   hook,
   children,
   ...props
-}) {
+}: ExtendedButtonProps) {
   const className = cs(
     baseClass,
     { [baseDisabledClasses]: !isLoading },
@@ -151,21 +184,4 @@ function Button({
   )
 }
 
-Button.propTypes = {
-  to: PropTypes.shape(AppLink.propTypes),
-  variant: PropTypes.oneOf(Object.keys(variantClasses)),
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hook: function (props, propName) {
-    if (
-      props['to'] === undefined &&
-      (props[propName] === undefined || typeof props[propName] != 'string')
-    ) {
-      return new Error(
-        'If not using prop "to" you must provide prop "hook" of type string.'
-      )
-    }
-  },
-}
-
 export default Button
diff --git a/src/ui/Button/index.ts b/src/ui/Button/index.ts
index 3389ecb836..509273c34c 100644
--- a/src/ui/Button/index.ts
+++ b/src/ui/Button/index.ts
@@ -1 +1 @@
-export { default } from './Button'
+export { default, type AppLinkProps } from './Button'
diff --git a/src/ui/ContextSwitcher/ContextSwitcher.stories.jsx b/src/ui/ContextSwitcher/ContextSwitcher.stories.tsx
similarity index 55%
rename from src/ui/ContextSwitcher/ContextSwitcher.stories.jsx
rename to src/ui/ContextSwitcher/ContextSwitcher.stories.tsx
index 5e732366a0..1b591abc62 100644
--- a/src/ui/ContextSwitcher/ContextSwitcher.stories.jsx
+++ b/src/ui/ContextSwitcher/ContextSwitcher.stories.tsx
@@ -1,14 +1,16 @@
+import { type Meta, type StoryObj } from '@storybook/react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import ContextSwitcher from './ContextSwitcher'
 
-const Template = (args) => (
-  <MemoryRouter initialEntries={['/gh/codecov']}>
-    <Route path="/:provider/:owner">
-      <ContextSwitcher {...args} />
-    </Route>
-  </MemoryRouter>
-)
+const meta: Meta<typeof ContextSwitcher> = {
+  title: 'Components/ContextSwitcher',
+  component: ContextSwitcher,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContextSwitcher>
 
 const contexts = [
   {
@@ -34,13 +36,16 @@ const contexts = [
   },
 ]
 
-export const SimpleContextSwitcher = Template.bind({})
-SimpleContextSwitcher.args = {
-  activeContext: 'dorianamouroux',
-  contexts,
-}
-
-export default {
-  title: 'Components/ContextSwitcher',
-  component: ContextSwitcher,
+export const SimpleContextSwitcher: Story = {
+  args: {
+    activeContext: { avatarUrl: '', username: 'dorianamouroux' },
+    contexts,
+  },
+  render: (args) => (
+    <MemoryRouter initialEntries={['/gh/codecov']}>
+      <Route path="/:provider/:owner">
+        <ContextSwitcher {...args} />
+      </Route>
+    </MemoryRouter>
+  ),
 }
diff --git a/src/ui/ContextSwitcher/ContextSwitcher.jsx b/src/ui/ContextSwitcher/ContextSwitcher.tsx
similarity index 69%
rename from src/ui/ContextSwitcher/ContextSwitcher.jsx
rename to src/ui/ContextSwitcher/ContextSwitcher.tsx
index ab6cd54152..2f5f5b4349 100644
--- a/src/ui/ContextSwitcher/ContextSwitcher.jsx
+++ b/src/ui/ContextSwitcher/ContextSwitcher.tsx
@@ -1,11 +1,11 @@
 import cs from 'classnames'
-import PropTypes from 'prop-types'
 import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useIntersection } from 'react-use'
 import useClickAway from 'react-use/lib/useClickAway'
 
 import { useUpdateDefaultOrganization } from 'services/defaultOrganization'
+import { Provider } from 'shared/api/helpers'
 import { providerToName } from 'shared/utils/provider'
 import A from 'ui/A'
 import Avatar from 'ui/Avatar'
@@ -13,7 +13,15 @@ import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 import Spinner from 'ui/Spinner'
 
-function LoadMoreTrigger({ intersectionRef, onLoadMore }) {
+interface LoadMoreTriggerProps {
+  onLoadMore?: () => void
+  intersectionRef: React.Ref<HTMLSpanElement>
+}
+
+function LoadMoreTrigger({
+  intersectionRef,
+  onLoadMore,
+}: LoadMoreTriggerProps) {
   if (!onLoadMore) {
     return null
   }
@@ -28,12 +36,22 @@ function LoadMoreTrigger({ intersectionRef, onLoadMore }) {
   )
 }
 
-LoadMoreTrigger.propTypes = {
-  onLoadMore: PropTypes.func,
-  intersectionRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+interface ContextItemProps {
+  context: {
+    owner: { username: string | null } | null
+    pageName: string
+  }
+  defaultOrgUsername: string | null
+  setToggle: (arg: boolean) => void
+  owner?: string
 }
 
-function ContextItem({ context, defaultOrgUsername, setToggle, owner }) {
+function ContextItem({
+  context,
+  defaultOrgUsername,
+  setToggle,
+  owner,
+}: ContextItemProps) {
   const { owner: contextOwner, pageName } = context
   const orgUsername = contextOwner?.username
   const { mutate } = useUpdateDefaultOrganization()
@@ -44,13 +62,15 @@ function ContextItem({ context, defaultOrgUsername, setToggle, owner }) {
       id="listbox-option-0"
     >
       <Button
+        disabled={false}
+        hook="context-switcher-toggle"
         to={{ pageName: pageName, options: { owner: orgUsername } }}
         variant="listbox"
         onClick={() => {
           setToggle(false)
           if (defaultOrgUsername === orgUsername) return
 
-          mutate({ username: orgUsername })
+          mutate({ username: orgUsername ?? null })
         }}
       >
         <Avatar user={contextOwner} />
@@ -61,24 +81,21 @@ function ContextItem({ context, defaultOrgUsername, setToggle, owner }) {
     </li>
   )
 }
-ContextItem.propTypes = {
-  context: PropTypes.shape({
-    owner: PropTypes.shape({ username: PropTypes.string }),
-    pageName: PropTypes.string,
-  }),
-  defaultOrgUsername: PropTypes.string,
-  setToggle: PropTypes.func.isRequired,
-  owner: PropTypes.string,
-}
 
-function useCloseOnLooseFocus({ setToggle }) {
+function useCloseOnLooseFocus({
+  setToggle,
+}: {
+  setToggle: React.Dispatch<React.SetStateAction<boolean>>
+}) {
   const ref = useRef(null)
-  useClickAway(ref, () => setToggle((toggle) => (!toggle ? toggle : false)))
+  useClickAway(ref, () =>
+    setToggle((toggle: boolean) => (!toggle ? toggle : false))
+  )
 
   return ref
 }
 
-function useLoadMore({ onLoadMore }) {
+function useLoadMore({ onLoadMore }: { onLoadMore: (() => void) | undefined }) {
   const ref = useRef(null)
   const intersection = useIntersection(ref, {
     root: null,
@@ -101,7 +118,7 @@ function useLoadMore({ onLoadMore }) {
   return ref
 }
 
-const Loader = ({ isLoading }) => {
+const Loader = ({ isLoading }: { isLoading: boolean }) => {
   if (!isLoading) return null
   return (
     <span className="flex justify-center pb-2 pt-1">
@@ -110,8 +127,31 @@ const Loader = ({ isLoading }) => {
   )
 }
 
-Loader.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
+interface Context {
+  owner: {
+    avatarUrl: string
+    username: string | null
+  } | null
+  pageName: string
+}
+
+export interface Props {
+  buttonVariant?: 'default' | 'outlined'
+  contexts: Context[]
+  currentUser: {
+    defaultOrgUsername: string | null
+  }
+  activeContext: {
+    avatarUrl: string
+    username: string
+  }
+  onLoadMore?: () => void
+  isLoading: boolean
+}
+
+interface URLParams {
+  provider: Provider
+  owner: string
 }
 
 function ContextSwitcher({
@@ -121,9 +161,9 @@ function ContextSwitcher({
   isLoading,
   onLoadMore,
   activeContext,
-}) {
-  const { provider, owner } = useParams()
-  const [toggle, setToggle] = useState(false)
+}: Props) {
+  const { provider, owner } = useParams<URLParams>()
+  const [toggle, setToggle] = useState<boolean>(false)
   const wrapperRef = useCloseOnLooseFocus({ setToggle })
   const intersectionRef = useLoadMore({ onLoadMore })
   const defaultOrgUsername = currentUser?.defaultOrgUsername
@@ -136,10 +176,8 @@ function ContextSwitcher({
         type="button"
         className={cs(
           '"relative flex gap-1 items-center text-xl font-semibold w-full rounded-md py-1.5 text-left text-gray-900 focus:outline-none"',
-          {
-            [buttonVariant.outlined]:
-              'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 shadow-sm',
-          }
+          buttonVariant === 'outlined' &&
+            'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 shadow-sm'
         )}
         id="listbox-label"
         aria-haspopup="listbox"
@@ -155,7 +193,7 @@ function ContextSwitcher({
             'rotate-0': !toggle,
           })}
         >
-          <Icon variant="solid" name="chevron-down" />
+          <Icon variant="solid" name="chevronDown" />
         </span>
       </button>
       <ul
@@ -163,14 +201,18 @@ function ContextSwitcher({
           'absolute z-10 max-h-64 w-screen max-w-[500px] overflow-y-auto rounded-md bg-ds-background shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-ds-container dark:shadow-lg dark:ring-1 dark:ring-ds-gray-tertiary',
           { hidden: !toggle }
         )}
-        tabIndex="-1"
+        tabIndex={-1}
         role="listbox"
         aria-labelledby="listbox-label"
       >
         {isGh ? (
           <li className="flex justify-between border-b border-ds-border-line px-4 py-3">
-            <A to={{ pageName: 'codecovAppInstallation' }}>
-              <Icon name="plus-circle" />
+            <A
+              to={{ pageName: 'codecovAppInstallation' }}
+              isExternal
+              hook="context-switcher-gh-install-link"
+            >
+              <Icon name="plusCircle" />
               Install Codecov GitHub app
             </A>
           </li>
@@ -184,7 +226,6 @@ function ContextSwitcher({
             defaultOrgUsername={defaultOrgUsername}
             context={context}
             key={context?.owner?.username}
-            currentContext={activeContext}
             setToggle={setToggle}
             owner={activeContext?.username}
           />
@@ -199,26 +240,4 @@ function ContextSwitcher({
   )
 }
 
-ContextSwitcher.propTypes = {
-  buttonVariant: PropTypes.oneOf(['default', 'outlined']),
-  contexts: PropTypes.arrayOf(
-    PropTypes.shape({
-      owner: PropTypes.shape({
-        avatarUrl: PropTypes.string.isRequired,
-        username: PropTypes.string,
-      }),
-      pageName: PropTypes.string.isRequired,
-    })
-  ).isRequired,
-  currentUser: PropTypes.shape({
-    defaultOrgUsername: PropTypes.string,
-  }),
-  activeContext: PropTypes.shape({
-    avatarUrl: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-  }),
-  onLoadMore: PropTypes.func,
-  isLoading: PropTypes.bool,
-}
-
 export default ContextSwitcher
diff --git a/src/ui/ContextSwitcher/index.js b/src/ui/ContextSwitcher/index.js
deleted file mode 100644
index 634b5a8a03..0000000000
--- a/src/ui/ContextSwitcher/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ContextSwitcher'
diff --git a/src/ui/ContextSwitcher/index.ts b/src/ui/ContextSwitcher/index.ts
new file mode 100644
index 0000000000..365f1c66cd
--- /dev/null
+++ b/src/ui/ContextSwitcher/index.ts
@@ -0,0 +1 @@
+export { default, type Props } from './ContextSwitcher'
diff --git a/src/ui/LoadingLogo/LoadingLogo.stories.jsx b/src/ui/LoadingLogo/LoadingLogo.stories.tsx
similarity index 58%
rename from src/ui/LoadingLogo/LoadingLogo.stories.jsx
rename to src/ui/LoadingLogo/LoadingLogo.stories.tsx
index 0f9ca7024b..a30ed49f7f 100644
--- a/src/ui/LoadingLogo/LoadingLogo.stories.jsx
+++ b/src/ui/LoadingLogo/LoadingLogo.stories.tsx
@@ -1,12 +1,17 @@
-import LoadingLogo from './LoadingLogo'
-
-const Template = (args) => <LoadingLogo {...args} />
+import { type Meta, type StoryObj } from '@storybook/react'
 
-export const NormalLoadingLogo = Template.bind({})
+import LoadingLogo from './LoadingLogo'
 
-export default {
+const meta: Meta<typeof LoadingLogo> = {
   title: 'Components/LoadingLogo',
   component: LoadingLogo,
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoadingLogo>
+
+export const NormalLoadingLogo: Story = {
   parameters: {
     backgrounds: {
       default: 'dark',
diff --git a/src/ui/LoadingLogo/LoadingLogo.jsx b/src/ui/LoadingLogo/LoadingLogo.tsx
similarity index 85%
rename from src/ui/LoadingLogo/LoadingLogo.jsx
rename to src/ui/LoadingLogo/LoadingLogo.tsx
index d36d838e8e..2ac7f1b2dc 100644
--- a/src/ui/LoadingLogo/LoadingLogo.jsx
+++ b/src/ui/LoadingLogo/LoadingLogo.tsx
@@ -3,7 +3,7 @@ import Logo from 'assets/codecov_logo.png'
 export default function LoadingLogo() {
   return (
     <span className="relative flex size-20">
-      <span className="absolute inline-flex size-full rounded-full bg-ds-pink-default opacity-50 motion-safe:animate-ping"></span>
+      <span className="absolute inline-flex size-full rounded-full bg-ds-pink-default opacity-50 motion-safe:animate-ping" />
       <span className="relative inline-flex size-20 rounded-full bg-ds-background">
         <img className="p-1" src={Logo} alt="Codecov Logo" />
       </span>
diff --git a/src/ui/LoadingLogo/index.js b/src/ui/LoadingLogo/index.ts
similarity index 100%
rename from src/ui/LoadingLogo/index.js
rename to src/ui/LoadingLogo/index.ts
diff --git a/src/ui/Modal/Modal.stories.tsx b/src/ui/Modal/Modal.stories.tsx
index 8afb87e312..d1e511fec3 100644
--- a/src/ui/Modal/Modal.stories.tsx
+++ b/src/ui/Modal/Modal.stories.tsx
@@ -23,7 +23,7 @@ const RenderTemplate: React.FC<{ args: ModalProps }> = ({ args }) => {
       <Button
         hook="open"
         onClick={() => setIsOpen(true)}
-        to=""
+        to={undefined}
         disabled={false}
       >
         Open
@@ -46,7 +46,7 @@ export const ModalWithFooter: Story = {
     title: 'Modal with a footer',
     body: 'The footer will appear under a line, good place for buttons',
     footer: (
-      <Button to="" disabled={false} hook="">
+      <Button to={undefined} disabled={false} hook="">
         Footer here
       </Button>
     ),
@@ -87,7 +87,7 @@ export const BaseModalOnly: React.FC = () => (
           </div>
         }
         footer={
-          <Button to="" disabled={false} hook="">
+          <Button to={undefined} disabled={false} hook="">
             Footer here
           </Button>
         }
diff --git a/src/ui/Sidemenu/Sidemenu.stories.jsx b/src/ui/Sidemenu/Sidemenu.stories.jsx
deleted file mode 100644
index ea37a14953..0000000000
--- a/src/ui/Sidemenu/Sidemenu.stories.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
-
-import Sidemenu from './Sidemenu'
-
-const Template = (args) => (
-  <MemoryRouter initialEntries={['/account/gh/codecov']}>
-    <Switch>
-      <Route path="/account/:provider/:owner" exact>
-        <Sidemenu {...args} />
-      </Route>
-      <Route path="/account/:provider/:owner/billing" exact>
-        <Sidemenu {...args} />
-      </Route>
-      <Route path="/account/:provider/:owner/access" exact>
-        <Sidemenu {...args} />
-      </Route>
-      <Route path="/account/:provider/:owner/yaml" exact>
-        <Sidemenu {...args} />
-      </Route>
-    </Switch>
-  </MemoryRouter>
-)
-
-export const SimpleSidemenu = Template.bind({})
-SimpleSidemenu.args = {
-  links: [
-    { pageName: 'accountAdmin', exact: true },
-    { pageName: 'billingAndUsers' },
-    { pageName: 'internalAccessTab' },
-    { pageName: 'yamlTab', children: 'Global Yaml' },
-  ],
-}
-
-export default {
-  title: 'Components/Sidemenu',
-  component: Sidemenu,
-}
diff --git a/src/ui/Sidemenu/Sidemenu.stories.tsx b/src/ui/Sidemenu/Sidemenu.stories.tsx
new file mode 100644
index 0000000000..4c53ab2615
--- /dev/null
+++ b/src/ui/Sidemenu/Sidemenu.stories.tsx
@@ -0,0 +1,42 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { MemoryRouter, Route, Switch } from 'react-router-dom'
+
+import Sidemenu from './Sidemenu'
+
+const meta: Meta<typeof Sidemenu> = {
+  title: 'Components/Sidemenu',
+  component: Sidemenu,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Sidemenu>
+
+export const SimpleSidemenu: Story = {
+  args: {
+    links: [
+      { pageName: 'accountAdmin' },
+      { pageName: 'billingAndUsers' },
+      { pageName: 'internalAccessTab' },
+      { pageName: 'yamlTab', children: 'Global Yaml' },
+    ],
+  },
+  render: (args) => (
+    <MemoryRouter initialEntries={['/account/gh/codecov']}>
+      <Switch>
+        <Route path="/account/:provider/:owner" exact>
+          <Sidemenu {...args} />
+        </Route>
+        <Route path="/account/:provider/:owner/billing" exact>
+          <Sidemenu {...args} />
+        </Route>
+        <Route path="/account/:provider/:owner/access" exact>
+          <Sidemenu {...args} />
+        </Route>
+        <Route path="/account/:provider/:owner/yaml" exact>
+          <Sidemenu {...args} />
+        </Route>
+      </Switch>
+    </MemoryRouter>
+  ),
+}
diff --git a/src/ui/Sidemenu/Sidemenu.test.jsx b/src/ui/Sidemenu/Sidemenu.test.tsx
similarity index 95%
rename from src/ui/Sidemenu/Sidemenu.test.jsx
rename to src/ui/Sidemenu/Sidemenu.test.tsx
index 99c49a84dd..8b8673f2c9 100644
--- a/src/ui/Sidemenu/Sidemenu.test.jsx
+++ b/src/ui/Sidemenu/Sidemenu.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter, Route, Switch } from 'react-router-dom'
 
 import Sidemenu from './Sidemenu'
 
-const wrapper = ({ children }) => {
+const wrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <MemoryRouter initialEntries={['/account/gh/codecov']}>
       <Switch>
diff --git a/src/ui/Sidemenu/Sidemenu.jsx b/src/ui/Sidemenu/Sidemenu.tsx
similarity index 79%
rename from src/ui/Sidemenu/Sidemenu.jsx
rename to src/ui/Sidemenu/Sidemenu.tsx
index 64850de88d..ca30db0762 100644
--- a/src/ui/Sidemenu/Sidemenu.jsx
+++ b/src/ui/Sidemenu/Sidemenu.tsx
@@ -1,8 +1,11 @@
-import PropTypes from 'prop-types'
-
 import AppLink from 'shared/AppLink'
+import { type AppLinkProps } from 'ui/Button'
+
+interface SidemenuProps {
+  links: AppLinkProps[]
+}
 
-function Sidemenu({ links }) {
+function Sidemenu({ links }: SidemenuProps) {
   return (
     <div>
       <nav className="sticky top-4 mx-4 mb-4 divide-y divide-ds-gray-tertiary overflow-hidden rounded border border-ds-gray-tertiary text-ds-gray-quinary sm:mx-0 lg:w-56">
@@ -12,6 +15,7 @@ function Sidemenu({ links }) {
           <div key={tab.pageName}>
             <AppLink
               {...tab}
+              // @ts-expect-error: AppLink is not typed yet
               className="block p-3 hover:bg-ds-gray-quaternary/5"
               activeClassName="border-l-4 pl-2 border-ds-gray-octonary text-ds-gray-octonary font-semibold bg-ds-gray-quaternary bg-opacity-5"
             />
@@ -22,8 +26,4 @@ function Sidemenu({ links }) {
   )
 }
 
-Sidemenu.propTypes = {
-  links: PropTypes.arrayOf(PropTypes.shape(AppLink.propTypes)).isRequired,
-}
-
 export default Sidemenu
diff --git a/src/ui/TabNavigation/TabNavigation.stories.jsx b/src/ui/TabNavigation/TabNavigation.stories.jsx
deleted file mode 100644
index 894cfb3597..0000000000
--- a/src/ui/TabNavigation/TabNavigation.stories.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
-
-import TabNavigation from './TabNavigation'
-
-const Template = (args) => (
-  <MemoryRouter initialEntries={['/gh/codecov']}>
-    <Switch>
-      <Route path="/:provider/:owner" exact>
-        <TabNavigation {...args} />
-        Repo list :)
-      </Route>
-      <Route path="/account/:provider/:owner">
-        <TabNavigation {...args} />
-        Admin page :)
-      </Route>
-    </Switch>
-  </MemoryRouter>
-)
-
-export const SimpleTabNavigation = Template.bind({})
-SimpleTabNavigation.args = {
-  tabs: [
-    { pageName: 'owner', children: 'Repos' },
-    { pageName: 'accountAdmin', children: 'Settings' },
-  ],
-}
-
-export default {
-  title: 'Components/TabNavigation',
-  component: TabNavigation,
-}
diff --git a/src/ui/TabNavigation/TabNavigation.stories.tsx b/src/ui/TabNavigation/TabNavigation.stories.tsx
new file mode 100644
index 0000000000..52c1fff7bb
--- /dev/null
+++ b/src/ui/TabNavigation/TabNavigation.stories.tsx
@@ -0,0 +1,36 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { MemoryRouter, Route, Switch } from 'react-router-dom'
+
+import TabNavigation from './TabNavigation'
+
+const meta: Meta<typeof TabNavigation> = {
+  title: 'Components/TabNavigation',
+  component: TabNavigation,
+}
+
+export default meta
+
+type Story = StoryObj<typeof TabNavigation>
+
+export const SimpleTabNavigation: Story = {
+  args: {
+    tabs: [
+      { pageName: 'owner', children: 'Repos' },
+      { pageName: 'accountAdmin', children: 'Settings' },
+    ],
+  },
+  render: (args) => (
+    <MemoryRouter initialEntries={['/gh/codecov']}>
+      <Switch>
+        <Route path="/:provider/:owner" exact>
+          <TabNavigation {...args} />
+          Repo list :)
+        </Route>
+        <Route path="/account/:provider/:owner">
+          <TabNavigation {...args} />
+          Admin page :)
+        </Route>
+      </Switch>
+    </MemoryRouter>
+  ),
+}
diff --git a/src/ui/TabNavigation/TabNavigation.test.jsx b/src/ui/TabNavigation/TabNavigation.test.tsx
similarity index 96%
rename from src/ui/TabNavigation/TabNavigation.test.jsx
rename to src/ui/TabNavigation/TabNavigation.test.tsx
index 6de5df24bc..35ec687324 100644
--- a/src/ui/TabNavigation/TabNavigation.test.jsx
+++ b/src/ui/TabNavigation/TabNavigation.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter, Route, Switch } from 'react-router-dom'
 
 import TabNavigation from './TabNavigation'
 
-const wrapper = ({ children }) => (
+const wrapper = ({ children }: { children: React.ReactNode }) => (
   <MemoryRouter initialEntries={['/gh/codecov']}>
     <Switch>
       <Route path="/:provider/:owner" exact>
diff --git a/src/ui/TabNavigation/TabNavigation.jsx b/src/ui/TabNavigation/TabNavigation.tsx
similarity index 76%
rename from src/ui/TabNavigation/TabNavigation.jsx
rename to src/ui/TabNavigation/TabNavigation.tsx
index 9a763f54b1..a91ebc6506 100644
--- a/src/ui/TabNavigation/TabNavigation.jsx
+++ b/src/ui/TabNavigation/TabNavigation.tsx
@@ -1,8 +1,12 @@
-import PropTypes from 'prop-types'
-
 import AppLink from 'shared/AppLink'
 
-function TabNavigation({ tabs, component }) {
+interface TabNavigationProps {
+  // TODO: will need AppLink to be typed first - should be array of AppLinkProps
+  tabs: any[]
+  component?: React.ReactNode
+}
+
+function TabNavigation({ tabs, component }: TabNavigationProps) {
   return (
     <div className="mx-0 flex flex-col-reverse justify-between gap-2 border-b border-ds-gray-tertiary @md/commit-detail-page:!flex-col-reverse @4xl/commit-detail-page:!flex-row md:flex-col xl:flex-row">
       <nav className="flex overflow-auto">
@@ -20,9 +24,4 @@ function TabNavigation({ tabs, component }) {
   )
 }
 
-TabNavigation.propTypes = {
-  tabs: PropTypes.arrayOf(PropTypes.shape(AppLink.propTypes)).isRequired,
-  component: PropTypes.node,
-}
-
 export default TabNavigation