diff --git a/babel.config.js b/babel.config.js
index 3650eee2d..de2e1b498 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -8,8 +8,10 @@ module.exports = {
   ],
   plugins: [
     'inline-react-svg',
-    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-typescript',
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
   ],
   env: {
     test: {
diff --git a/package.json b/package.json
index 6aba7aec6..38594fb5a 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.16.7",
diff --git a/platform/ui/.storybook/main.js b/platform/ui/.storybook/main.js
index bb96ab74d..399f439b4 100644
--- a/platform/ui/.storybook/main.js
+++ b/platform/ui/.storybook/main.js
@@ -2,7 +2,11 @@ const path = require('path');
 
 module.exports = {
   stories: ['../src/**/*.stories.@(mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-google-analytics'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-google-analytics',
+  ],
   core: {
     builder: 'webpack5',
   },
@@ -11,11 +15,22 @@ module.exports = {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
+
     // config.module.rules[0].use[0].options.plugins[1] = [
     //   '@babel/plugin-proposal-class-properties',
     //   { loose: true },
     // ];
 
+    // config.module.rules[0].use[0].options.plugins[3] = [
+    //   '@babel/plugin-proposal-private-methods',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[4] = [
+    //   '@babel/plugin-proposal-private-property-in-object',
+    //   { loose: true },
+    // ];
+
     // Make whatever fine-grained changes you need
     config.module.rules.push({
       test: /\.m?js/,
@@ -30,8 +45,6 @@ module.exports = {
     );
     fileLoaderRule.exclude = /\.svg$/;
 
-    // console.log(JSON.stringify(config.module.rules, null, 2));
-
     config.module.rules.push({
       test: /\.svg$/,
       use: [
diff --git a/platform/ui/.storybook/preview.js b/platform/ui/.storybook/preview.tsx
similarity index 90%
rename from platform/ui/.storybook/preview.js
rename to platform/ui/.storybook/preview.tsx
index 2fde6ba92..111a3276c 100644
--- a/platform/ui/.storybook/preview.js
+++ b/platform/ui/.storybook/preview.tsx
@@ -1,6 +1,6 @@
-import { parameters } from '@storybook/addon-docs/dist/esm/frameworks/react/config';
+import React from 'react';
 import { addParameters } from '@storybook/react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 import {
   Heading,
   SectionName,
@@ -15,7 +15,6 @@ import './custom.css';
 // https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
 addParameters({
   docs: {
-    ...parameters.docs,
     inlineStories: true,
     container: ({ children, context }) => (
       <DocsContainer context={context}>{children}</DocsContainer>
diff --git a/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx b/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx
index 5e48f2b23..3e5127be6 100644
--- a/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx
+++ b/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx
@@ -20,7 +20,7 @@ export const aboutTemplate = args => (
 
 <Heading
   title="About Modal"
-  componentRelativePath="AboutModal/AboutModal.jsx"
+  componentRelativePath="AboutModal/AboutModal.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/Button/__stories__/button.stories.mdx b/platform/ui/src/components/Button/__stories__/button.stories.mdx
index 9e90e3a8d..bb62b5927 100644
--- a/platform/ui/src/components/Button/__stories__/button.stories.mdx
+++ b/platform/ui/src/components/Button/__stories__/button.stories.mdx
@@ -14,22 +14,20 @@ export const argTypes = {
 
 export const buttonTemplate = createComponentTemplate(Button);
 
-<Heading title="Button" componentRelativePath="Button/Button.jsx"/>
+<Heading title="Button" componentRelativePath="Button/Button.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
 - [Contribute](#contribute)
 
-
 ## Overview
 
-You can use the button component to create a button. It can be used in different ways, the default
-button is a simple button with a text.
+You can use the button component to create a button. It can be used in different
+ways, the default button is a simple button with a text.
 
 <Canvas>
-  <Story name="Overview"
-         args={{children: "Button", color:"default"}}>
+  <Story name="Overview" args={{ children: 'Button', color: 'default' }}>
     {buttonTemplate.bind({})}
   </Story>
 </Canvas>
@@ -39,13 +37,14 @@ button is a simple button with a text.
 <ArgsTable of={Button} />
 
 ## Usage
-### Variants
-There can be different variants of buttons: `text`, `outlined`,
-`contained`, and `disabled`.
 
+### Variants
+
+There can be different variants of buttons: `text`, `outlined`, `contained`, and
+`disabled`.
 
 <Canvas>
-  <Story name="Variants" >
+  <Story name="Variants">
     <div className="flex space-x-2">
       <Button variant="text">Text Button</Button>
       <Button variant="outlined">Outlined Button</Button>
@@ -55,13 +54,13 @@ There can be different variants of buttons: `text`, `outlined`,
   </Story>
 </Canvas>
 
-
 ### Colors
-There are different colors for the button: `default`, `primary`, `secondary`, `white`, `black`, `inherit`, `light`.
 
+There are different colors for the button: `default`, `primary`, `secondary`,
+`white`, `black`, `inherit`, `light`.
 
 <Canvas>
-  <Story name="Colors" >
+  <Story name="Colors">
     <div className="flex space-x-2">
       <Button color="default">Default Button</Button>
       <Button color="primary">Primary Button</Button>
@@ -75,96 +74,105 @@ There are different colors for the button: `default`, `primary`, `secondary`, `w
 </Canvas>
 
 ### Mixing props
+
 You can mix different props together to create a button.
 
 <Canvas>
-  <Story name="Custom" >
-      <Button color="secondary" variant="outlined">Custom Button</Button>
+  <Story name="Custom">
+    <Button color="secondary" variant="outlined">
+      Custom Button
+    </Button>
   </Story>
 </Canvas>
 
 ### Disabled
+
 You can disable the button by setting the variant to `disabled`.
 
 <Canvas>
-  <Story name="Disabled" >
-      <Button variant="disabled">Disabled Button</Button>
+  <Story name="Disabled">
+    <Button variant="disabled">Disabled Button</Button>
   </Story>
 </Canvas>
 
-
 ### Start/End Icons
+
 You can add an icon to the start of the button. It accepts an icon component.
 
-
 <Canvas>
-  <Story name="Start Icon" >
-      {() => {
-        // svg icon for github
-        const Github = () => {
-          return (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="feather feather-github"
-            >
-              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
-            </svg>
-          )
-        }
-        return <Button startIcon={<Github />}>Start Icon Button</Button>;
-      }}
+  <Story name="Start Icon">
+    {() => {
+      // svg icon for github
+      const Github = () => {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="feather feather-github"
+          >
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+          </svg>
+        );
+      };
+      return <Button startIcon={<Github />}>Start Icon Button</Button>;
+    }}
     }}
   </Story>
 </Canvas>
 
 End Icon is the same as start icon, but for the end of the button.
 
-
 <Canvas>
-  <Story name="End Icon" >
-      {() => {
-        // svg icon for github
-        const Github = () => {
-          return (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="feather feather-github"
-            >
-              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
-            </svg>
-          )
-        }
-        return <Button startIcon={<Github />} endIcon={<Github />}>Start and End Icon Button</Button>;
-      }}
+  <Story name="End Icon">
+    {() => {
+      // svg icon for github
+      const Github = () => {
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="feather feather-github"
+          >
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+          </svg>
+        );
+      };
+      return (
+        <Button startIcon={<Github />} endIcon={<Github />}>
+          Start and End Icon Button
+        </Button>
+      );
+    }}
     }}
   </Story>
 </Canvas>
 
-
 ### Full width
+
 You can make the button full width by setting the `fullWidth` prop to `true`.
 
 <Canvas>
-  <Story name="Full Width" >
-      <Button fullWidth color="secondary">Full Width Button</Button>
+  <Story name="Full Width">
+    <Button fullWidth color="secondary">
+      Full Width Button
+    </Button>
   </Story>
 </Canvas>
 
 ## Contribute
-<Footer componentRelativePath="Button/__stories__/button.stories.mdx"/>
+
+<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />
diff --git a/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx b/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx
index 274e5f8a9..38c1cbb85 100644
--- a/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx
+++ b/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx
@@ -23,7 +23,7 @@ export const buttonGroupTemplate = args => (
 
 <Heading
   title="ButtonGroup"
-  componentRelativePath="ButtonGroup/ButtonGroup.jsx"
+  componentRelativePath="ButtonGroup/ButtonGroup.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx b/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx
index eefc054c8..f53ba7112 100644
--- a/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx
+++ b/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx
@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const cineTemplate = createComponentTemplate(CinePlayer);
 
-<Heading title="CinePlayer" componentRelativePath="CinePlayer/CinePlayer.jsx" />
+<Heading title="CinePlayer" componentRelativePath="CinePlayer/CinePlayer.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx b/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx
index 84d3aadb7..c70553443 100644
--- a/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx
+++ b/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx
@@ -13,7 +13,7 @@ export const contextMenueTemplate = createComponentTemplate(ContextMenu);
 
 <Heading
   title="ContextMenu"
-  componentRelativePath="ContextMenu/ContextMenu.jsx"
+  componentRelativePath="ContextMenu/ContextMenu.tsx"
 />
 
 - [Overview](#overview)
@@ -34,7 +34,7 @@ on user right click.
         {
           label: 'Delete measurement',
           actionType: 'Delete',
-          action: (item) => {
+          action: item => {
             window.alert(`${item.label} clicked`);
           },
           value: {},
@@ -42,7 +42,7 @@ on user right click.
         {
           label: 'Add Label',
           actionType: 'setLabel',
-          action: (item) => {
+          action: item => {
             window.alert(`${item.label} clicked`);
           },
           value: {},
diff --git a/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx b/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx
index 682ecb35e..cc8c5fcc6 100644
--- a/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx
+++ b/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx
@@ -8,13 +8,13 @@ export const argTypes = {
 
 <Meta title="Components/DateRange" component={DateRange} />
 
-export const DateRangeTemplate = (args) => (
+export const DateRangeTemplate = args => (
   <div className="h-96">
     <DateRange {...args} />
   </div>
 );
 
-<Heading title="DateRange" componentRelativePath="DateRange/DateRange.jsx" />
+<Heading title="DateRange" componentRelativePath="DateRange/DateRange.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx b/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx
index f05dc5c4c..fada0e076 100644
--- a/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx
+++ b/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx
@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const DialogTemplate = createComponentTemplate(Dialog);
 
-<Heading title="Dialog" componentRelativePath="Dialog/Dialog.jsx" />
+<Heading title="Dialog" componentRelativePath="Dialog/Dialog.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx b/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx
index b52ff0d9a..df484c2e1 100644
--- a/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx
+++ b/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx
@@ -9,14 +9,14 @@ export const argTypes = {
 
 <Meta title="Components/Dropdown" component={Dropdown} />
 
-export const DropdownTemplate = (args) => (
+export const DropdownTemplate = args => (
   // Todo: this should not set a background
   <div className="flex h-32">
     <Dropdown {...args} />
   </div>
 );
 
-<Heading title="Dropdown" componentRelativePath="Dropdown/Dropdown.jsx" />
+<Heading title="Dropdown" componentRelativePath="Dropdown/Dropdown.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/Header/__stories__/Header.stories.mdx b/platform/ui/src/components/Header/__stories__/Header.stories.mdx
index bfe34d74a..ff02180b1 100644
--- a/platform/ui/src/components/Header/__stories__/Header.stories.mdx
+++ b/platform/ui/src/components/Header/__stories__/Header.stories.mdx
@@ -11,7 +11,7 @@ export const argTypes = {
 
 export const HeaderTemplate = createComponentTemplate(Header);
 
-<Heading title="Header" componentRelativePath="Header/Header.jsx" />
+<Heading title="Header" componentRelativePath="Header/Header.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/Icon/__stories__/icon.stories.mdx b/platform/ui/src/components/Icon/__stories__/icon.stories.mdx
index a1617aa96..ab831fd2b 100644
--- a/platform/ui/src/components/Icon/__stories__/icon.stories.mdx
+++ b/platform/ui/src/components/Icon/__stories__/icon.stories.mdx
@@ -11,14 +11,14 @@ export const argTypes = {
 
 <Meta title="Components/Icon" component={Icon} />
 
-export const IconTemplate = (args) => (
+export const IconTemplate = args => (
   // Todo: Icon colors
   <div className="w-8 h-8">
     <Icon {...args} />
   </div>
 );
 
-<Heading title="Icon" componentRelativePath="Icon/Icon.jsx" />
+<Heading title="Icon" componentRelativePath="Icon/Icon.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
@@ -56,8 +56,8 @@ icons.
       return (
         <div className="flex flex-wrap">
           {icons
-            .filter((ic) => ic !== 'magnifier')
-            .map((icon) => (
+            .filter(ic => ic !== 'magnifier')
+            .map(icon => (
               <div className="m-4 flex flex-col justify-center items-center">
                 <div class="w-8 h-8">
                   <Icon name={icon} />
diff --git a/platform/ui/src/components/IconButton/IconButton.stories.jsx b/platform/ui/src/components/IconButton/IconButton.stories.tsx
similarity index 100%
rename from platform/ui/src/components/IconButton/IconButton.stories.jsx
rename to platform/ui/src/components/IconButton/IconButton.stories.tsx
diff --git a/platform/ui/src/components/Input/__stories__/input.stories.mdx b/platform/ui/src/components/Input/__stories__/input.stories.mdx
index 7a156cbb4..f4cdc174b 100644
--- a/platform/ui/src/components/Input/__stories__/input.stories.mdx
+++ b/platform/ui/src/components/Input/__stories__/input.stories.mdx
@@ -12,7 +12,7 @@ export const argTypes = {
 
 export const InputTemplate = createComponentTemplate(Input);
 
-<Heading title="Input" componentRelativePath="Input/Input.jsx" />
+<Heading title="Input" componentRelativePath="Input/Input.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx b/platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx
index e9cf4f7e6..831a776da 100644
--- a/platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx
+++ b/platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx
@@ -14,7 +14,7 @@ export const LayoutSelectorTemplate = createComponentTemplate(LayoutSelector);
 
 <Heading
   title="LayoutSelector"
-  componentRelativePath="LayoutSelector/LayoutSelector.jsx"
+  componentRelativePath="LayoutSelector/LayoutSelector.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx b/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx
index c78d2f103..5b2955ef3 100644
--- a/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx
+++ b/platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx
@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/MeasurementTable" component={MeasurementTable} />
 
-export const MeasurementTableTemplate = (args) => (
+export const MeasurementTableTemplate = args => (
   <div className="w-64 h-64 bg-primary-dark">
     <MeasurementTable {...args} />
   </div>
@@ -18,7 +18,7 @@ export const MeasurementTableTemplate = (args) => (
 
 <Heading
   title="MeasurementTable"
-  componentRelativePath="MeasurementTable/MeasurementTable.jsx"
+  componentRelativePath="MeasurementTable/MeasurementTable.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/Notification/__stories__/notification.stories.mdx b/platform/ui/src/components/Notification/__stories__/notification.stories.mdx
index ad486e0a5..3f52a1fe9 100644
--- a/platform/ui/src/components/Notification/__stories__/notification.stories.mdx
+++ b/platform/ui/src/components/Notification/__stories__/notification.stories.mdx
@@ -14,7 +14,7 @@ export const NotificationTemplate = createComponentTemplate(Notification);
 
 <Heading
   title="Notification"
-  componentRelativePath="Notification/Notification.jsx"
+  componentRelativePath="Notification/Notification.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx b/platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx
index 7a40b91ec..738110c25 100644
--- a/platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx
+++ b/platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx
@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/SegmentationTable" component={SegmentationTable} />
 
-export const SegmentationTableTemplate = (args) => (
+export const SegmentationTableTemplate = args => (
   <div className="w-64 h-96 bg-primary-dark">
     <SegmentationTable {...args} />
   </div>
@@ -18,7 +18,7 @@ export const SegmentationTableTemplate = (args) => (
 
 <Heading
   title="SegmentationTable"
-  componentRelativePath="SegmentationTable/SegmentationTable.jsx"
+  componentRelativePath="SegmentationTable/SegmentationTable.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx b/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx
index 82a8c6d37..93b381240 100644
--- a/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx
+++ b/platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx
@@ -10,13 +10,13 @@ export const argTypes = {
 
 <Meta title="Components/SidePanel" component={SidePanel} />
 
-export const SidePanelTemplate = (args) => (
+export const SidePanelTemplate = args => (
   <div className="w-96">
     <SidePanel {...args} />
   </div>
 );
 
-<Heading title="SidePanel" componentRelativePath="SidePanel/SidePanel.jsx" />
+<Heading title="SidePanel" componentRelativePath="SidePanel/SidePanel.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx b/platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx
index 2317db227..76233c63f 100644
--- a/platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx
+++ b/platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx
@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/SplitButton" component={SplitButton} />
 
-export const SplitButtonTemplate = (args) => (
+export const SplitButtonTemplate = args => (
   <div className="h-32 bg-primary-dark">
     <SplitButton {...args} />
   </div>
@@ -18,7 +18,7 @@ export const SplitButtonTemplate = (args) => (
 
 <Heading
   title="SplitButton"
-  componentRelativePath="SplitButton/SplitButton.jsx"
+  componentRelativePath="SplitButton/SplitButton.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx b/platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx
index fd4eeacbb..2e960e0ff 100644
--- a/platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx
+++ b/platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx
@@ -10,7 +10,7 @@ export const argTypes = {
 
 <Meta title="Components/StudyBrowser" component={StudyBrowser} />
 
-export const StudyBrowserTemplate = (args) => (
+export const StudyBrowserTemplate = args => (
   <div className="w-96">
     <StudyBrowser {...args} />
   </div>
@@ -18,7 +18,7 @@ export const StudyBrowserTemplate = (args) => (
 
 <Heading
   title="StudyBrowser"
-  componentRelativePath="StudyBrowser/StudyBrowser.jsx"
+  componentRelativePath="StudyBrowser/StudyBrowser.tsx"
 />
 
 - [Overview](#overview)
diff --git a/platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx b/platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx
index 7bbe1fd20..2a794a643 100644
--- a/platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx
+++ b/platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx
@@ -10,13 +10,13 @@ export const argTypes = {
 
 <Meta title="Components/StudyItem" component={StudyItem} />
 
-export const StudyItemTemplate = (args) => (
+export const StudyItemTemplate = args => (
   <div className="w-96">
     <StudyItem {...args} />
   </div>
 );
 
-<Heading title="StudyItem" componentRelativePath="StudyItem/StudyItem.jsx" />
+<Heading title="StudyItem" componentRelativePath="StudyItem/StudyItem.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
diff --git a/platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx b/platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx
index dfe82fb9c..31eb6f054 100644
--- a/platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx
+++ b/platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx
@@ -1,22 +1,22 @@
-import Viewport from "../Viewport";
+import Viewport from '../Viewport';
 
-import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
 
 export const argTypes = {
   component: Viewport,
-  title: "Components/Viewport",
+  title: 'Components/Viewport',
 };
 
 <Meta title="Components/Viewport" component={Viewport} />
 
-export const ViewportTemplate = (args) => (
+export const ViewportTemplate = args => (
   <div className="h-40 bg-primary-dark">
     <Viewport {...args} />
   </div>
 );
 
-<Heading title="Viewport" componentRelativePath="Viewport/Viewport.jsx" />
+<Heading title="Viewport" componentRelativePath="Viewport/Viewport.tsx" />
 
 - [Overview](#overview)
 - [Props](#props)
@@ -31,25 +31,25 @@ Viewport is a component that renders the Viewport action bar.
     name="Overview"
     args={{
       viewportIndex: 0,
-      onSeriesChange: (direction) => alert(`Annotation ${direction}`),
+      onSeriesChange: direction => alert(`Annotation ${direction}`),
       studyData: {
-        label: "A",
+        label: 'A',
         isTracked: true,
         isLocked: false,
         isRehydratable: false,
-        studyDate: "07-Sep-2011",
+        studyDate: '07-Sep-2011',
         currentSeries: 1,
         seriesDescription:
-          "Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ",
-        modality: "CT",
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
         patientInformation: {
-          patientName: "Smith, Jane",
-          patientSex: "F",
-          patientAge: "59",
-          MRN: "10000001",
-          thickness: "5.0mm",
-          spacing: "1.25mm",
-          scanner: "Aquilion",
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '5.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
         },
       },
     }}
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.tsx
similarity index 100%
rename from platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.jsx
rename to platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.tsx
diff --git a/platform/ui/src/storybook/color/color.jsx b/platform/ui/src/storybook/color/color.tsx
similarity index 100%
rename from platform/ui/src/storybook/color/color.jsx
rename to platform/ui/src/storybook/color/color.tsx
diff --git a/platform/ui/src/storybook/colors.stories.mdx b/platform/ui/src/storybook/colors.stories.mdx
index 32b97f15f..4c9d20ecf 100644
--- a/platform/ui/src/storybook/colors.stories.mdx
+++ b/platform/ui/src/storybook/colors.stories.mdx
@@ -38,7 +38,7 @@ for each color.
 Therefore you can use the className to style the color of a component (using
 `bg-${color-class}`) or text (using `text-${color-class}`).
 
-```jsx
+```tsx
 <div className="bg-primary-main text-primary-light">OHIF UI Components</div>
 ```
 
diff --git a/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx b/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx
rename to platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.tsx
diff --git a/platform/ui/src/storybook/components/footer/footer.jsx b/platform/ui/src/storybook/components/footer/footer.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/footer/footer.jsx
rename to platform/ui/src/storybook/components/footer/footer.tsx
diff --git a/platform/ui/src/storybook/components/heading/heading.jsx b/platform/ui/src/storybook/components/heading/heading.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/heading/heading.jsx
rename to platform/ui/src/storybook/components/heading/heading.tsx
diff --git a/platform/ui/src/storybook/components/image/image.jsx b/platform/ui/src/storybook/components/image/image.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/image/image.jsx
rename to platform/ui/src/storybook/components/image/image.tsx
diff --git a/platform/ui/src/storybook/components/index.jsx b/platform/ui/src/storybook/components/index.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/index.jsx
rename to platform/ui/src/storybook/components/index.tsx
diff --git a/platform/ui/src/storybook/components/link-component/link-component.jsx b/platform/ui/src/storybook/components/link-component/link-component.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/link-component/link-component.jsx
rename to platform/ui/src/storybook/components/link-component/link-component.tsx
diff --git a/platform/ui/src/storybook/components/section-name/section-name.jsx b/platform/ui/src/storybook/components/section-name/section-name.tsx
similarity index 100%
rename from platform/ui/src/storybook/components/section-name/section-name.jsx
rename to platform/ui/src/storybook/components/section-name/section-name.tsx
diff --git a/platform/ui/src/storybook/contribute.stories.mdx b/platform/ui/src/storybook/contribute.stories.mdx
index 1562ceee9..3258abf23 100644
--- a/platform/ui/src/storybook/contribute.stories.mdx
+++ b/platform/ui/src/storybook/contribute.stories.mdx
@@ -66,8 +66,8 @@ error. Always check the code block when you get an error.
 For instance the following code block will generate the error (notice the extra
 vertical space in the code block):
 
-```jsx
-export const TooltipTemplate = (args) => (
+```tsx
+export const TooltipTemplate = args => (
   <div className="h-16 w-full">
     <div class="w-8 h-8 mx-auto">
       <Tooltip {...args}>
@@ -91,7 +91,7 @@ stories with the same name, it will cause an error.
 
 The following code block will generate an error:
 
-```jsx
+```tsx
 <Canvas>
   <Story name="Variants">
     <Typography variant="h1" color="initial">
diff --git a/platform/ui/src/storybook/functions/create-component-story.js b/platform/ui/src/storybook/functions/create-component-story.tsx
similarity index 100%
rename from platform/ui/src/storybook/functions/create-component-story.js
rename to platform/ui/src/storybook/functions/create-component-story.tsx
diff --git a/platform/ui/src/storybook/header/header.jsx b/platform/ui/src/storybook/header/header.tsx
similarity index 100%
rename from platform/ui/src/storybook/header/header.jsx
rename to platform/ui/src/storybook/header/header.tsx