diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/packages/nlds-design-tokens/src/font.js b/packages/nlds-design-tokens/src/font.mjs
similarity index 100%
rename from packages/nlds-design-tokens/src/font.js
rename to packages/nlds-design-tokens/src/font.mjs
diff --git a/src/components/Markdown.js b/src/components/Markdown.tsx
similarity index 84%
rename from src/components/Markdown.js
rename to src/components/Markdown.tsx
index cb18449b80a..dd7244896dc 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.tsx
@@ -1,5 +1,6 @@
 import { MDXProvider } from '@mdx-js/react';
 import { Heading2, Heading3, Heading4, Heading5, Heading6 } from '@utrecht/component-library-react/dist/css-module';
+import { PropsWithChildren } from 'react';
 import React from 'react';
 
 const resolveUrl = (from, to) => {
@@ -40,6 +41,17 @@ const setHeadings = (omitH1, headingLevel) => {
   return mapHeadings[headingLevel];
 };
 
-export const Markdown = ({ children, omitH1 = false, headingLevel = 1, baseUrl = '' }) => (
+export interface MarkdownProps {
+  baseUrl?: string;
+  headingLevel?: number;
+  omitH1?: boolean;
+}
+
+export const Markdown = ({
+  children,
+  omitH1 = false,
+  headingLevel = 1,
+  baseUrl = '',
+}: PropsWithChildren<MarkdownProps>) => (
   <MDXProvider components={{ ...setHeadings(omitH1, headingLevel), ...addBaseUrl(baseUrl) }}>{children}</MDXProvider>
 );
diff --git a/src/components/Story.js b/src/components/Story.tsx
similarity index 82%
rename from src/components/Story.js
rename to src/components/Story.tsx
index 063ebeca43f..b053ff3718e 100644
--- a/src/components/Story.js
+++ b/src/components/Story.tsx
@@ -2,7 +2,12 @@ import IframeResizer from 'iframe-resizer-react';
 import React from 'react';
 import style from './Story.module.css';
 
-export const Story = ({ label, href }) => {
+export interface StoryProps {
+  href: string;
+  label: string;
+}
+
+export const Story = ({ label, href }: StoryProps) => {
   const storySrc = href;
   const iframeSrc = href.replace('?path=/docs/', 'iframe.html?id=') + '&viewMode=story';
 
diff --git a/src/theme/DocSidebar/Mobile/index.js b/src/theme/DocSidebar/Mobile/index.tsx
similarity index 81%
rename from src/theme/DocSidebar/Mobile/index.js
rename to src/theme/DocSidebar/Mobile/index.tsx
index 6ba48c3616e..df3743c2706 100644
--- a/src/theme/DocSidebar/Mobile/index.js
+++ b/src/theme/DocSidebar/Mobile/index.tsx
@@ -1,10 +1,16 @@
+import { PropSidebarItem } from '@docusaurus/plugin-content-docs';
 import { NavbarSecondaryMenuFiller, ThemeClassNames } from '@docusaurus/theme-common';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import clsx from 'clsx';
 import React from 'react';
 
-const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => {
+interface SecondaryMenuProps {
+  path: string;
+  sidebar: PropSidebarItem[];
+}
+
+const DocSidebarMobileSecondaryMenu = ({ sidebar, path }: SecondaryMenuProps) => {
   const mobileSidebar = useNavbarMobileSidebar();
   return (
     <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
diff --git a/src/theme/DocSidebar/index.js b/src/theme/DocSidebar/index.tsx
similarity index 100%
rename from src/theme/DocSidebar/index.js
rename to src/theme/DocSidebar/index.tsx
diff --git a/src/theme/Root.js b/src/theme/Root.tsx
similarity index 78%
rename from src/theme/Root.js
rename to src/theme/Root.tsx
index c19eb48637c..0f5e706125a 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.tsx
@@ -1,6 +1,6 @@
 import { Document } from '@utrecht/component-library-react/dist/css-module';
-import React from 'react';
-import '@nl-design-system-unstable/nlds-design-tokens/src/font';
+import React, { PropsWithChildren } from 'react';
+import '@nl-design-system-unstable/nlds-design-tokens/src/font.mjs';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/design-tokens.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/custom.css';
 import '@fontsource/open-sans/300.css';
@@ -11,7 +11,7 @@ import '@fontsource/open-sans/700.css';
 import '@fontsource/open-sans/800.css';
 
 // Default implementation, that you can customize
-function Root({ children }) {
+function Root({ children }: PropsWithChildren<{}>) {
   return <Document className="nlds-theme main-layout">{children}</Document>;
 }
 
diff --git a/src/theme/SearchBar/index.js b/src/theme/SearchBar/index.tsx
similarity index 100%
rename from src/theme/SearchBar/index.js
rename to src/theme/SearchBar/index.tsx