diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
deleted file mode 100644
index edc30c929386..000000000000
--- a/frontend/web/components/ErrorMessage.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// import propTypes from 'prop-types';
-import React, { PureComponent } from 'react'
-import Icon from './icons/Icon'
-import Button from './base/forms/Button'
-import Format from 'common/utils/format'
-import Constants from 'common/constants'
-
-export default class ErrorMessage extends PureComponent {
-  static displayName = 'ErrorMessage'
-
-  render() {
-    const errorMessageClassName = `alert alert-danger ${
-      this.props.errorMessageClass || 'flex-1 align-items-center'
-    }`
-    const error =
-      this.props.error?.data?.metadata?.find((item) =>
-        // eslint-disable-next-line no-prototype-builtins
-        item.hasOwnProperty('non_field_errors'),
-      )?.non_field_errors[0] ||
-      this.props.error?.data ||
-      this.props.error?.message ||
-      this.props.error
-    return this.props.error ? (
-      <div
-        className={errorMessageClassName}
-        style={{
-          display: this.props.errorMessageClass ? 'initial' : '',
-          ...this.props.errorStyles,
-        }}
-      >
-        <span className='icon-alert'>
-          <Icon name='close-circle' />
-        </span>
-        {error instanceof Error ? (
-          error.message
-        ) : typeof error === 'object' ? (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: Object.keys(error)
-                .map(
-                  (v) =>
-                    `${Format.camelCase(Format.enumeration.get(v))}: ${
-                      error[v]
-                    }`,
-                )
-                .join('<br/>'),
-            }}
-          />
-        ) : (
-          error
-        )}
-        {this.props.enabledButton && (
-          <Button
-            className='btn ml-3'
-            onClick={() => {
-              document.location.replace(Constants.getUpgradeUrl())
-            }}
-          >
-            Upgrade plan
-          </Button>
-        )}
-      </div>
-    ) : null
-  }
-}
diff --git a/frontend/web/components/ErrorMessage.tsx b/frontend/web/components/ErrorMessage.tsx
new file mode 100644
index 000000000000..af915dcf72e9
--- /dev/null
+++ b/frontend/web/components/ErrorMessage.tsx
@@ -0,0 +1,77 @@
+import React, { FC } from 'react'
+import Icon from './icons/Icon'
+import Button from './base/forms/Button'
+import Format from 'common/utils/format'
+import Constants from 'common/constants'
+
+type ErrorMessageProps = {
+  enabledButton?: boolean
+  error?: any
+  errorMessageClass?: string
+  errorStyles?: React.CSSProperties
+}
+
+const ErrorMessage: FC<ErrorMessageProps> = ({
+  enabledButton,
+  error: errorProp,
+  errorMessageClass,
+  errorStyles,
+}) => {
+  if (!errorProp) return null
+
+  const errorMessageClassName = `alert alert-danger ${
+    errorMessageClass || 'flex-1 align-items-center'
+  }`
+  const error =
+    errorProp?.data?.metadata?.find((item: Record<string, unknown>) =>
+      // eslint-disable-next-line no-prototype-builtins
+      item.hasOwnProperty('non_field_errors'),
+    )?.non_field_errors[0] ||
+    errorProp?.data ||
+    errorProp?.message ||
+    errorProp
+
+  return (
+    <div
+      className={errorMessageClassName}
+      style={{
+        display: errorMessageClass ? 'initial' : '',
+        ...errorStyles,
+      }}
+    >
+      <span className='icon-alert'>
+        <Icon name='close-circle' />
+      </span>
+      {error instanceof Error ? (
+        error.message
+      ) : typeof error === 'object' ? (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: Object.keys(error)
+              .map(
+                (v) =>
+                  `${Format.camelCase(Format.enumeration.get(v))}: ${
+                    error[v]
+                  }`,
+              )
+              .join('<br/>'),
+          }}
+        />
+      ) : (
+        error
+      )}
+      {enabledButton && (
+        <Button
+          className='btn ml-3'
+          onClick={() => {
+            document.location.replace(Constants.getUpgradeUrl())
+          }}
+        >
+          Upgrade plan
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default ErrorMessage
diff --git a/frontend/web/components/PasswordRequirements.js b/frontend/web/components/PasswordRequirements.tsx
similarity index 83%
rename from frontend/web/components/PasswordRequirements.js
rename to frontend/web/components/PasswordRequirements.tsx
index f63535aa5864..f11808f9aacd 100644
--- a/frontend/web/components/PasswordRequirements.js
+++ b/frontend/web/components/PasswordRequirements.tsx
@@ -1,9 +1,16 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
+import React, { FC, useEffect } from 'react'
 import { close, checkmark } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 
-const PasswordRequirements = ({ onRequirementsMet, password }) => {
+type PasswordRequirementsProps = {
+  onRequirementsMet: (met: boolean) => void
+  password: string
+}
+
+const PasswordRequirements: FC<PasswordRequirementsProps> = ({
+  onRequirementsMet,
+  password,
+}) => {
   const requirements = [
     { label: 'At least 8 characters', test: password.length >= 8 },
     { label: 'Contains a number', test: /\d/.test(password) },
@@ -48,9 +55,4 @@ const PasswordRequirements = ({ onRequirementsMet, password }) => {
   )
 }
 
-PasswordRequirements.propTypes = {
-  onRequirementsMet: PropTypes.func.isRequired,
-  password: PropTypes.string.isRequired,
-}
-
 export default PasswordRequirements
diff --git a/frontend/web/components/base/forms/Radio.tsx b/frontend/web/components/base/forms/Radio.tsx
index f4ebffe7390a..5b6a259bfae0 100644
--- a/frontend/web/components/base/forms/Radio.tsx
+++ b/frontend/web/components/base/forms/Radio.tsx
@@ -1,7 +1,4 @@
 import React from 'react'
-import classNames from 'classnames'
-import ReactMarkdown from 'react-markdown'
-import className = ReactMarkdown.propTypes.className
 
 interface RadioProps {
   label: string
@@ -20,7 +17,7 @@ const Radio: React.FC<RadioProps> = ({ checked, label, onChange }) => {
       className='relative cursor-pointer flex-row align-items-center'
     >
       {checked && <CheckedSVG />} {!checked && <UncheckedSVG />}
-      {<span className={classNames('ml-2', className)}>{label}</span>}
+      {<span className='ml-2'>{label}</span>}
     </label>
   )
 }
diff --git a/frontend/web/components/base/grid/Column.js b/frontend/web/components/base/grid/Column.js
deleted file mode 100644
index adbb5512faf3..000000000000
--- a/frontend/web/components/base/grid/Column.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// propTypes: value: OptionalNumber
-import { PureComponent } from 'react'
-const Column = class extends PureComponent {
-  static displayName = 'Column'
-
-  render() {
-    return (
-      <div
-        {...this.props}
-        className={`${this.props.className || ''} flex-column`}
-      >
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-Column.defaultProps = {}
-
-Column.propTypes = {
-  children: OptionalNode,
-  className: OptionalString,
-  style: propTypes.any,
-  value: OptionalNumber,
-}
-
-export default Column
diff --git a/frontend/web/components/base/grid/Column.tsx b/frontend/web/components/base/grid/Column.tsx
new file mode 100644
index 000000000000..819146a105a0
--- /dev/null
+++ b/frontend/web/components/base/grid/Column.tsx
@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+type ColumnProps = React.HTMLAttributes<HTMLDivElement>
+
+const Column: FC<ColumnProps> = ({ className, ...rest }) => (
+  <div {...rest} className={`${className || ''} flex-column`} />
+)
+
+export default Column
diff --git a/frontend/web/components/base/grid/Flex.js b/frontend/web/components/base/grid/Flex.js
deleted file mode 100644
index 990d4ff4b02e..000000000000
--- a/frontend/web/components/base/grid/Flex.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const Flex = class extends React.Component {
-  static displayName = 'Flex'
-
-  render() {
-    return (
-      <div
-        {...this.props}
-        className={`${this.props.className || ''} flex flex-1`}
-      >
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-Flex.defaultProps = {
-  value: 1,
-}
-
-Flex.propTypes = {
-  children: OptionalNode,
-  className: OptionalString,
-  style: propTypes.any,
-  value: OptionalNumber,
-}
-
-export default Flex
diff --git a/frontend/web/components/base/grid/Flex.tsx b/frontend/web/components/base/grid/Flex.tsx
new file mode 100644
index 000000000000..4b2d3bf886e9
--- /dev/null
+++ b/frontend/web/components/base/grid/Flex.tsx
@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+type FlexProps = React.HTMLAttributes<HTMLDivElement>
+
+const Flex: FC<FlexProps> = ({ className, ...rest }) => (
+  <div {...rest} className={`${className || ''} flex flex-1`} />
+)
+
+export default Flex
diff --git a/frontend/web/components/pages/NotFoundErrorPage.js b/frontend/web/components/pages/NotFoundErrorPage.js
deleted file mode 100644
index b1d74cc4d4dd..000000000000
--- a/frontend/web/components/pages/NotFoundErrorPage.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-import Constants from 'common/constants'
-
-const ComingSoon = class extends Component {
-  static displayName = 'ComingSoon'
-
-  componentDidMount() {
-    API.trackPage(Constants.pages.COMING_SOON)
-  }
-
-  render() {
-    return (
-      <div className='app-container container'>
-        <h3 className='pt-5'>Oops!</h3>
-        <p>
-          It looks like you do not have permission to view this{' '}
-          {Utils.fromParam().entity || 'page'}. Please contact a member with
-          administrator privileges.
-        </p>
-      </div>
-    )
-  }
-}
-
-ComingSoon.propTypes = {}
-
-export default ComingSoon
diff --git a/frontend/web/components/pages/NotFoundErrorPage.tsx b/frontend/web/components/pages/NotFoundErrorPage.tsx
new file mode 100644
index 000000000000..827b2649c9da
--- /dev/null
+++ b/frontend/web/components/pages/NotFoundErrorPage.tsx
@@ -0,0 +1,21 @@
+import React, { FC, useEffect } from 'react'
+import Constants from 'common/constants'
+
+const NotFoundErrorPage: FC = () => {
+  useEffect(() => {
+    API.trackPage(Constants.pages.COMING_SOON)
+  }, [])
+
+  return (
+    <div className='app-container container'>
+      <h3 className='pt-5'>Oops!</h3>
+      <p>
+        It looks like you do not have permission to view this{' '}
+        {Utils.fromParam().entity || 'page'}. Please contact a member with
+        administrator privileges.
+      </p>
+    </div>
+  )
+}
+
+export default NotFoundErrorPage