diff --git a/client/common/Button.tsx b/client/common/Button.tsx
index d52abf3140..bde6106b00 100644
--- a/client/common/Button.tsx
+++ b/client/common/Button.tsx
@@ -80,7 +80,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * If using a native button, specifies on an onClick action
    */
-  onClick?: () => void;
+  onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * If using a button, then type is defines the type of button
    */
diff --git a/client/common/useSyncFormTranslations.ts b/client/common/useSyncFormTranslations.ts
index 4a90362750..3212117399 100644
--- a/client/common/useSyncFormTranslations.ts
+++ b/client/common/useSyncFormTranslations.ts
@@ -1,30 +1,30 @@
 import { useEffect, MutableRefObject } from 'react';
+import type { FormApi } from 'final-form';
 
-export interface FormLike {
-  getState(): { values: Record<string, unknown> };
-  reset(): void;
-  change(field: string, value: unknown): void;
-}
+// Generic FormLike that mirrors FormApi for any form value type
+export interface FormLike<FormValues = Record<string, unknown>>
+  extends Pick<FormApi<FormValues>, 'getState' | 'reset' | 'change'> {}
 
 /**
  * This hook ensures that form values are preserved when the language changes.
  * @param formRef
  * @param language
  */
-export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+export const useSyncFormTranslations = <FormValues extends Record<string, any>>(
+  formRef: MutableRefObject<FormLike<FormValues> | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();
     form.reset();
 
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
+    (Object.keys(values) as (keyof FormValues)[]).forEach((field) => {
+      const value = values[field];
+      if (value !== undefined && value !== null && value !== '') {
+        form.change(field, value);
       }
     });
   }, [language]);
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 53b0c82c63..242b5244c8 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -6,7 +6,7 @@ import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
-import CookieConsent from '../User/components/CookieConsent';
+import { CookieConsent } from '../User/components/CookieConsent';
 
 function hideCookieConsent(pathname) {
   if (pathname.includes('/full/') || pathname.includes('/embed/')) {
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index fbf0b5d091..16ed74ff3e 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -20,7 +20,7 @@ import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import VersionIndicator from '../VersionIndicator';
-import VisibilityDropdown from '../../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../../User/components/VisibilityDropdown';
 import { changeVisibility } from '../../actions/project';
 
 const Toolbar = (props) => {
diff --git a/client/modules/IDE/components/SketchListRowBase.jsx b/client/modules/IDE/components/SketchListRowBase.jsx
index e1c4c80f13..d11cb8bf40 100644
--- a/client/modules/IDE/components/SketchListRowBase.jsx
+++ b/client/modules/IDE/components/SketchListRowBase.jsx
@@ -10,7 +10,7 @@ import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
 import { MenuItem } from '../../../components/Dropdown/MenuItem';
 import { formatDateToString } from '../../../utils/formatDate';
 import { getConfig } from '../../../utils/getConfig';
-import VisibilityDropdown from '../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../User/components/VisibilityDropdown';
 
 const ROOT_URL = getConfig('API_URL');
 
diff --git a/client/modules/User/components/APIKeyForm.jsx b/client/modules/User/components/APIKeyForm.tsx
similarity index 83%
rename from client/modules/User/components/APIKeyForm.jsx
rename to client/modules/User/components/APIKeyForm.tsx
index fda5945f87..cd77994f06 100644
--- a/client/modules/User/components/APIKeyForm.jsx
+++ b/client/modules/User/components/APIKeyForm.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -6,31 +5,24 @@ import { Button, ButtonTypes } from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { createApiKey, removeApiKey } from '../actions';
+import { APIKeyList } from './APIKeyList';
+import { RootState } from '../../../reducers';
+import { SanitisedApiKey } from '../../../../common/types';
 
-import APIKeyList from './APIKeyList';
-
-export const APIKeyPropType = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  token: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  lastUsedAt: PropTypes.string
-});
-
-const APIKeyForm = () => {
+export const APIKeyForm = () => {
   const { t } = useTranslation();
-  const apiKeys = useSelector((state) => state.user.apiKeys);
+  const apiKeys = useSelector((state: RootState) => state.user.apiKeys) ?? [];
   const dispatch = useDispatch();
 
   const [keyLabel, setKeyLabel] = useState('');
 
-  const addKey = (event) => {
+  const addKey = (event: React.FormEvent) => {
     event.preventDefault();
     dispatch(createApiKey(keyLabel));
     setKeyLabel('');
   };
 
-  const removeKey = (key) => {
+  const removeKey = (key: SanitisedApiKey) => {
     const message = t('APIKeyForm.ConfirmDelete', {
       key_label: key.label
     });
@@ -77,7 +69,7 @@ const APIKeyForm = () => {
           <Button
             disabled={keyLabel === ''}
             iconBefore={<PlusIcon />}
-            label="Create new key"
+            aria-label="Create new key"
             type={ButtonTypes.SUBMIT}
           >
             {t('APIKeyForm.CreateTokenSubmit')}
@@ -94,7 +86,7 @@ const APIKeyForm = () => {
             </p>
             <CopyableInput
               label={keyWithToken.label}
-              value={keyWithToken.token}
+              value={keyWithToken.token ?? ''}
             />
           </div>
         )}
@@ -109,5 +101,3 @@ const APIKeyForm = () => {
     </div>
   );
 };
-
-export default APIKeyForm;
diff --git a/client/modules/User/components/APIKeyList.jsx b/client/modules/User/components/APIKeyList.tsx
similarity index 82%
rename from client/modules/User/components/APIKeyList.jsx
rename to client/modules/User/components/APIKeyList.tsx
index 17cd857354..a3692fad32 100644
--- a/client/modules/User/components/APIKeyList.jsx
+++ b/client/modules/User/components/APIKeyList.tsx
@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { orderBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
-
-import { APIKeyPropType } from './APIKeyForm';
-
+import type { SanitisedApiKey } from '../../../../common/types';
 import {
   distanceInWordsToNow,
   formatDateToString
 } from '../../../utils/formatDate';
 import TrashCanIcon from '../../../images/trash-can.svg';
 
-function APIKeyList({ apiKeys, onRemove }) {
+export interface APIKeyListProps {
+  apiKeys: SanitisedApiKey[];
+  onRemove: (key: SanitisedApiKey) => void;
+}
+export function APIKeyList({ apiKeys, onRemove }: APIKeyListProps) {
   const { t } = useTranslation();
   return (
     <table className="api-key-list">
@@ -50,10 +51,3 @@ function APIKeyList({ apiKeys, onRemove }) {
     </table>
   );
 }
-
-APIKeyList.propTypes = {
-  apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
-  onRemove: PropTypes.func.isRequired
-};
-
-export default APIKeyList;
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.tsx
similarity index 85%
rename from client/modules/User/components/AccountForm.jsx
rename to client/modules/User/components/AccountForm.tsx
index 4ef40e4298..b587c73052 100644
--- a/client/modules/User/components/AccountForm.jsx
+++ b/client/modules/User/components/AccountForm.tsx
@@ -6,14 +6,21 @@ import { Button, ButtonTypes } from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
+import {
+  DuplicateUserCheckQuery,
+  UpdateSettingsRequestBody
+} from '../../../../common/types';
+import { RootState } from '../../../reducers';
+import type { AccountForm as AccountFormType } from '../../../utils/reduxFormUtils';
 
-function asyncValidate(fieldToValidate, value) {
+function asyncValidate(fieldToValidate: 'username' | 'email', value: string) {
   if (!value || value.trim().length === 0) {
     return '';
   }
-  const queryParams = {};
+  const queryParams: DuplicateUserCheckQuery = {
+    check_type: fieldToValidate
+  };
   queryParams[fieldToValidate] = value;
-  queryParams.check_type = fieldToValidate;
   return apiClient
     .get('/signup/duplicate_check', { params: queryParams })
     .then((response) => {
@@ -24,27 +31,27 @@ function asyncValidate(fieldToValidate, value) {
     });
 }
 
-function AccountForm() {
+export function AccountForm() {
   const { t } = useTranslation();
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
 
-  const handleInitiateVerification = (evt) => {
+  const handleInitiateVerification = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch(initiateVerification());
   };
 
-  function validateUsername(username) {
+  function validateUsername(username: AccountFormType['username']) {
     if (username === user.username) return '';
     return asyncValidate('username', username);
   }
 
-  function validateEmail(email) {
+  function validateEmail(email: AccountFormType['email']) {
     if (email === user.email) return '';
     return asyncValidate('email', email);
   }
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: UpdateSettingsRequestBody) {
     return dispatch(updateSettings(formProps));
   }
 
@@ -54,11 +61,13 @@ function AccountForm() {
       validate={validateSettings}
       onSubmit={onSubmit}
     >
-      {({ handleSubmit, submitting, invalid, restart }) => (
+      {({ handleSubmit, submitting, invalid, form }) => (
         <form
           className="form"
-          onSubmit={(event) => {
-            handleSubmit(event).then(restart);
+          onSubmit={async (event: React.FormEvent) => {
+            const result = await handleSubmit(event);
+            form.restart();
+            return result;
           }}
         >
           <Field
@@ -183,5 +192,3 @@ function AccountForm() {
     </Form>
   );
 }
-
-export default AccountForm;
diff --git a/client/modules/User/components/AccountForm.unit.test.jsx b/client/modules/User/components/AccountForm.unit.test.jsx
index caaa7ddc39..b9d2baebe0 100644
--- a/client/modules/User/components/AccountForm.unit.test.jsx
+++ b/client/modules/User/components/AccountForm.unit.test.jsx
@@ -8,7 +8,7 @@ import {
   act,
   waitFor
 } from '../../../test-utils';
-import AccountForm from './AccountForm';
+import { AccountForm } from './AccountForm';
 import { initialTestState } from '../../../testData/testReduxStore';
 import * as actions from '../actions';
 
diff --git a/client/modules/User/components/CollectionMetadata.jsx b/client/modules/User/components/CollectionMetadata.jsx
index dcb47e0929..4e98bf323b 100644
--- a/client/modules/User/components/CollectionMetadata.jsx
+++ b/client/modules/User/components/CollectionMetadata.jsx
@@ -11,7 +11,7 @@ import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketc
 import EditableInput from '../../IDE/components/EditableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
 import { getCollection } from '../../IDE/selectors/collections';
-import ShareURL from './CollectionShareButton';
+import { ShareURL } from './CollectionShareButton';
 
 function CollectionMetadata({ collectionId }) {
   const { t } = useTranslation();
diff --git a/client/modules/User/components/CollectionShareButton.jsx b/client/modules/User/components/CollectionShareButton.tsx
similarity index 81%
rename from client/modules/User/components/CollectionShareButton.jsx
rename to client/modules/User/components/CollectionShareButton.tsx
index a5d8705dcd..d8e20bfbd9 100644
--- a/client/modules/User/components/CollectionShareButton.jsx
+++ b/client/modules/User/components/CollectionShareButton.tsx
@@ -1,17 +1,15 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { Button } from '../../../common/Button';
 import { DropdownArrowIcon } from '../../../common/icons';
 import { useModalClose } from '../../../common/useModalClose';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
-const ShareURL = ({ value }) => {
+export const ShareURL = ({ value }: { value: string }) => {
   const [showURL, setShowURL] = useState(false);
   const { t } = useTranslation();
   const close = useCallback(() => setShowURL(false), [setShowURL]);
-  const ref = useModalClose(close);
+  const ref = useModalClose<HTMLDivElement>(close);
 
   return (
     <div className="collection-share" ref={ref}>
@@ -29,9 +27,3 @@ const ShareURL = ({ value }) => {
     </div>
   );
 };
-
-ShareURL.propTypes = {
-  value: PropTypes.string.isRequired
-};
-
-export default ShareURL;
diff --git a/client/modules/User/components/CookieConsent.jsx b/client/modules/User/components/CookieConsent.tsx
similarity index 71%
rename from client/modules/User/components/CookieConsent.jsx
rename to client/modules/User/components/CookieConsent.tsx
index 9cfff74ac6..dd470796dc 100644
--- a/client/modules/User/components/CookieConsent.jsx
+++ b/client/modules/User/components/CookieConsent.tsx
@@ -6,17 +6,21 @@ import ReactGA from 'react-ga';
 import { Transition } from 'react-transition-group';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import { getConfig } from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
 import { Button, ButtonKinds } from '../../../common/Button';
+import { RootState } from '../../../reducers';
+import { CookieConsentOptions } from '../../../../common/types';
 
+interface CookieConsentContainerState {
+  state: string;
+}
 const CookieConsentContainer = styled.div`
   position: fixed;
   transition: 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   bottom: 0;
-  transform: ${({ state }) => {
+  transform: ${({ state }: CookieConsentContainerState) => {
     if (state === 'entered') {
       return 'translateY(0)';
     }
@@ -79,37 +83,49 @@ const CookieConsentButtons = styled.div`
 
 const GOOGLE_ANALYTICS_ID = getConfig('GA_MEASUREMENT_ID');
 
-function CookieConsent({ hide }) {
-  const user = useSelector((state) => state.user);
-  const [cookieConsent, setBrowserCookieConsent] = useState('none');
+export function CookieConsent({ hide = false }: { hide?: boolean }) {
+  const user = useSelector((state: RootState) => state.user);
+  const [
+    cookieConsent,
+    setBrowserCookieConsent
+  ] = useState<CookieConsentOptions>(CookieConsentOptions.NONE);
   const [inProp, setInProp] = useState(false);
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
   function initializeCookieConsent() {
     if (user.authenticated) {
+      if (!user.cookieConsent) {
+        return;
+      }
       setBrowserCookieConsent(user.cookieConsent);
       Cookies.set('p5-cookie-consent', user.cookieConsent, { expires: 365 });
       return;
     }
-    setBrowserCookieConsent('none');
-    Cookies.set('p5-cookie-consent', 'none', { expires: 365 });
+    setBrowserCookieConsent(CookieConsentOptions.NONE);
+    Cookies.set('p5-cookie-consent', CookieConsentOptions.NONE, {
+      expires: 365
+    });
   }
 
   function acceptAllCookies() {
     if (user.authenticated) {
-      dispatch(setUserCookieConsent('all'));
+      dispatch(setUserCookieConsent(CookieConsentOptions.ALL));
     }
-    setBrowserCookieConsent('all');
-    Cookies.set('p5-cookie-consent', 'all', { expires: 365 });
+    setBrowserCookieConsent(CookieConsentOptions.ALL);
+    Cookies.set('p5-cookie-consent', CookieConsentOptions.ALL, {
+      expires: 365
+    });
   }
 
   function acceptEssentialCookies() {
     if (user.authenticated) {
-      dispatch(setUserCookieConsent('essential'));
+      dispatch(setUserCookieConsent(CookieConsentOptions.ESSENTIAL));
     }
-    setBrowserCookieConsent('essential');
-    Cookies.set('p5-cookie-consent', 'essential', { expires: 365 });
+    setBrowserCookieConsent(CookieConsentOptions.ESSENTIAL);
+    Cookies.set('p5-cookie-consent', CookieConsentOptions.ESSENTIAL, {
+      expires: 365
+    });
     // Remove Google Analytics Cookies
     Cookies.remove('_ga');
     Cookies.remove('_gat');
@@ -118,11 +134,19 @@ function CookieConsent({ hide }) {
 
   function mergeCookieConsent() {
     if (user.authenticated) {
-      if (user.cookieConsent === 'none' && cookieConsent !== 'none') {
-        dispatch(setUserCookieConsent(cookieConsent));
-      } else if (user.cookieConsent !== 'none') {
+      if (!user.cookieConsent) {
+        user.cookieConsent = CookieConsentOptions.NONE;
+      }
+      if (
+        user.cookieConsent === CookieConsentOptions.NONE &&
+        cookieConsent !== CookieConsentOptions.NONE
+      ) {
+        dispatch(setUserCookieConsent(cookieConsent as CookieConsentOptions));
+      } else if (user.cookieConsent !== CookieConsentOptions.NONE) {
         setBrowserCookieConsent(user.cookieConsent);
-        Cookies.set('p5-cookie-consent', user.cookieConsent, { expires: 365 });
+        Cookies.set('p5-cookie-consent', user.cookieConsent, {
+          expires: 365
+        });
       }
     }
   }
@@ -130,7 +154,7 @@ function CookieConsent({ hide }) {
   useEffect(() => {
     const p5CookieConsent = Cookies.get('p5-cookie-consent');
     if (p5CookieConsent) {
-      setBrowserCookieConsent(p5CookieConsent);
+      setBrowserCookieConsent(p5CookieConsent as CookieConsentOptions);
     } else {
       initializeCookieConsent();
     }
@@ -165,9 +189,9 @@ function CookieConsent({ hide }) {
 
   return (
     <Transition in={inProp} timeout={500}>
-      {(state) => (
+      {(state: CookieConsentContainerState['state']) => (
         <CookieConsentContainer state={state}>
-          <CookieConsentDialog role="dialog" tabIndex="0">
+          <CookieConsentDialog role="dialog" tabIndex={0}>
             <CookieConsentHeader>{t('Cookies.Header')}</CookieConsentHeader>
             <CookieConsentContent>
               <CookieConsentCopy>
@@ -191,13 +215,3 @@ function CookieConsent({ hide }) {
     </Transition>
   );
 }
-
-CookieConsent.propTypes = {
-  hide: PropTypes.bool
-};
-
-CookieConsent.defaultProps = {
-  hide: false
-};
-
-export default CookieConsent;
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.tsx
similarity index 87%
rename from client/modules/User/components/DashboardTabSwitcher.jsx
rename to client/modules/User/components/DashboardTabSwitcher.tsx
index 7afbe5aec8..8ec810cf64 100644
--- a/client/modules/User/components/DashboardTabSwitcher.jsx
+++ b/client/modules/User/components/DashboardTabSwitcher.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -10,11 +9,11 @@ import { Options } from '../../IDE/components/Header/MobileNav';
 import { toggleDirectionForField } from '../../IDE/actions/sorting';
 import useIsMobile from '../../IDE/hooks/useIsMobile';
 
-export const TabKey = {
-  assets: 'assets',
-  collections: 'collections',
-  sketches: 'sketches'
-};
+export enum TabKey {
+  assets = 'assets',
+  collections = 'collections',
+  sketches = 'sketches'
+}
 
 // It is good for right now, because we need to separate the nav dropdown logic from the navBar before we can use it here
 const FilterOptions = styled(Options)`
@@ -25,7 +24,16 @@ const FilterOptions = styled(Options)`
   }
 `;
 
-const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
+export interface DashboardTabSwitcherProps {
+  currentTab: TabKey;
+  isOwner: string;
+  username: string;
+}
+export const DashboardTabSwitcher = ({
+  currentTab,
+  isOwner,
+  username
+}: DashboardTabSwitcherProps) => {
   const isMobile = useIsMobile();
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -89,11 +97,3 @@ const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
     </div>
   );
 };
-
-DashboardTabSwitcher.propTypes = {
-  currentTab: PropTypes.string.isRequired,
-  isOwner: PropTypes.bool.isRequired,
-  username: PropTypes.string.isRequired
-};
-
-export default DashboardTabSwitcher;
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.tsx
similarity index 92%
rename from client/modules/User/components/LoginForm.jsx
rename to client/modules/User/components/LoginForm.tsx
index 5bac902ecf..c3741ffce7 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.tsx
@@ -6,17 +6,21 @@ import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { Button, ButtonTypes } from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
-import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
+import {
+  FormLike,
+  useSyncFormTranslations
+} from '../../../common/useSyncFormTranslations';
+import type { LoginForm as LoginFormType } from '../../../utils/reduxFormUtils';
 
-function LoginForm() {
+export function LoginForm() {
   const { t, i18n } = useTranslation();
 
   const dispatch = useDispatch();
-  function onSubmit(formProps) {
+  function onSubmit(formProps: LoginFormType) {
     return dispatch(validateAndLoginUser(formProps));
   }
   const [showPassword, setShowPassword] = useState(false);
-  const formRef = useRef(null);
+  const formRef = useRef<FormLike<LoginFormType> | null>(null);
 
   const handleVisibility = () => {
     setShowPassword(!showPassword);
@@ -114,5 +118,3 @@ function LoginForm() {
     </Form>
   );
 }
-
-export default LoginForm;
diff --git a/client/modules/User/components/LoginForm.unit.test.jsx b/client/modules/User/components/LoginForm.unit.test.jsx
index 2f4262c16b..1b6b982733 100644
--- a/client/modules/User/components/LoginForm.unit.test.jsx
+++ b/client/modules/User/components/LoginForm.unit.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
-import LoginForm from './LoginForm';
+import { LoginForm } from './LoginForm';
 import * as actions from '../actions';
 import { initialTestState } from '../../../testData/testReduxStore';
 import { reduxRender, screen, fireEvent, act } from '../../../test-utils';
diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.tsx
similarity index 92%
rename from client/modules/User/components/NewPasswordForm.jsx
rename to client/modules/User/components/NewPasswordForm.tsx
index feca326c77..9d08f678c5 100644
--- a/client/modules/User/components/NewPasswordForm.jsx
+++ b/client/modules/User/components/NewPasswordForm.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
@@ -6,13 +5,14 @@ import { useTranslation } from 'react-i18next';
 import { validateNewPassword } from '../../../utils/reduxFormUtils';
 import { updatePassword } from '../actions';
 import { Button, ButtonTypes } from '../../../common/Button';
+import type { NewPasswordForm as NewPasswordFormType } from '../../../utils/reduxFormUtils';
 
-function NewPasswordForm(props) {
+export function NewPasswordForm(props: { resetPasswordToken: string }) {
   const { resetPasswordToken } = props;
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: NewPasswordFormType) {
     return dispatch(updatePassword(formProps, resetPasswordToken));
   }
 
@@ -75,9 +75,3 @@ function NewPasswordForm(props) {
     </Form>
   );
 }
-
-NewPasswordForm.propTypes = {
-  resetPasswordToken: PropTypes.string.isRequired
-};
-
-export default NewPasswordForm;
diff --git a/client/modules/User/components/NewPasswordForm.unit.test.jsx b/client/modules/User/components/NewPasswordForm.unit.test.jsx
index dbddf3c8cb..a55af924ed 100644
--- a/client/modules/User/components/NewPasswordForm.unit.test.jsx
+++ b/client/modules/User/components/NewPasswordForm.unit.test.jsx
@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { fireEvent } from '@storybook/testing-library';
 import { reduxRender, screen, act, waitFor } from '../../../test-utils';
 import { initialTestState } from '../../../testData/testReduxStore';
-import NewPasswordForm from './NewPasswordForm';
+import { NewPasswordForm } from './NewPasswordForm';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore(initialTestState);
diff --git a/client/modules/User/components/Notification.jsx b/client/modules/User/components/Notification.jsx
deleted file mode 100644
index c7189c3af1..0000000000
--- a/client/modules/User/components/Notification.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import Cookies from 'js-cookie';
-import { useDispatch } from 'react-redux';
-import { showToast, setToastText } from '../../IDE/actions/toast';
-
-function Notification() {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    const notification = Cookies.get('p5-notification');
-    if (!notification) {
-      // show the toast
-      dispatch(showToast(30000));
-      const text = `There is a scheduled outage on Sunday, April 9 3AM - 5AM UTC.
-        The entire site will be down, so please plan accordingly.`;
-      dispatch(setToastText(text));
-      Cookies.set('p5-notification', true, { expires: 365 });
-    }
-  });
-  return null;
-}
-
-export default Notification;
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.tsx
similarity index 85%
rename from client/modules/User/components/ResetPasswordForm.jsx
rename to client/modules/User/components/ResetPasswordForm.tsx
index fe3752fdf4..f3668b9636 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/client/modules/User/components/ResetPasswordForm.tsx
@@ -5,15 +5,17 @@ import { useDispatch, useSelector } from 'react-redux';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
 import { initiateResetPassword } from '../actions';
 import { Button, ButtonTypes } from '../../../common/Button';
+import { RootState } from '../../../reducers';
+import { ResetPasswordInitiateRequestBody } from '../../../../common/types';
 
-function ResetPasswordForm(props) {
+export function ResetPasswordForm() {
   const { t } = useTranslation();
   const resetPasswordInitiate = useSelector(
-    (state) => state.user.resetPasswordInitiate
+    (state: RootState) => state.user.resetPasswordInitiate
   );
   const dispatch = useDispatch();
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: ResetPasswordInitiateRequestBody) {
     dispatch(initiateResetPassword(formProps));
   }
 
@@ -57,5 +59,3 @@ function ResetPasswordForm(props) {
     </Form>
   );
 }
-
-export default ResetPasswordForm;
diff --git a/client/modules/User/components/ResponsiveForm.jsx b/client/modules/User/components/ResponsiveForm.jsx
deleted file mode 100644
index 829b83cd14..0000000000
--- a/client/modules/User/components/ResponsiveForm.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { remSize } from '../../../theme';
-
-const ResponsiveForm = styled.div`
-  .form-container__content {
-    width: unset !important;
-    padding-top: ${remSize(16)};
-    padding-bottom: ${remSize(64)};
-  }
-
-  .form__input {
-    min-width: unset;
-    padding: 0px ${remSize(12)};
-    height: ${remSize(28)};
-  }
-  .form-container__title {
-    margin-bottom: ${remSize(14)};
-  }
-  p.form__field {
-    margin-top: 0px !important;
-  }
-  label.form__label {
-    margin-top: ${remSize(8)} !important;
-  }
-
-  .form-error {
-    width: 100%;
-  }
-
-  .nav__items-right:last-child {
-    display: none;
-  }
-
-  .form-container {
-    height: 100%;
-  }
-
-  .nav__dropdown {
-    right: 0 !important;
-    left: unset !important;
-  }
-
-  .form-container__stack {
-    svg {
-      width: ${remSize(12)};
-      height: ${remSize(12)};
-    }
-    a {
-      padding: 0px;
-    }
-  }
-`;
-
-export default ResponsiveForm;
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.tsx
similarity index 91%
rename from client/modules/User/components/SignupForm.jsx
rename to client/modules/User/components/SignupForm.tsx
index 45d44da875..dbbac68932 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.tsx
@@ -7,16 +7,23 @@ import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import { Button, ButtonTypes } from '../../../common/Button';
 import { apiClient } from '../../../utils/apiClient';
-import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
+import {
+  FormLike,
+  useSyncFormTranslations
+} from '../../../common/useSyncFormTranslations';
+import {
+  CreateUserRequestBody,
+  DuplicateUserCheckQuery
+} from '../../../../common/types';
 
-const timeoutRef = { current: null };
+const timeoutRef: { current: (() => void) | null } = { current: null };
 
-function asyncValidate(fieldToValidate, value) {
+function asyncValidate(fieldToValidate: 'username' | 'email', value: string) {
   if (!value || value.trim().length === 0) {
     return Promise.resolve('');
   }
 
-  const queryParams = {
+  const queryParams: DuplicateUserCheckQuery = {
     [fieldToValidate]: value,
     check_type: fieldToValidate
   };
@@ -48,18 +55,18 @@ function asyncValidate(fieldToValidate, value) {
   });
 }
 
-function validateUsername(username) {
+function validateUsername(username: CreateUserRequestBody['username']) {
   return asyncValidate('username', username);
 }
 
-function validateEmail(email) {
+function validateEmail(email: CreateUserRequestBody['email']) {
   return asyncValidate('email', email);
 }
 
-function SignupForm() {
+export function SignupForm() {
   const { t, i18n } = useTranslation();
   const dispatch = useDispatch();
-  const formRef = useRef(null);
+  const formRef = useRef<FormLike<CreateUserRequestBody> | null>(null);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
@@ -69,7 +76,7 @@ function SignupForm() {
   const handleConfirmVisibility = () =>
     setShowConfirmPassword(!showConfirmPassword);
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: CreateUserRequestBody) {
     return dispatch(validateAndSignUpUser(formProps));
   }
 
@@ -216,5 +223,3 @@ function SignupForm() {
     </Form>
   );
 }
-
-export default SignupForm;
diff --git a/client/modules/User/components/SocialAuthButton.stories.jsx b/client/modules/User/components/SocialAuthButton.stories.jsx
index 770dd70162..5bd25dc16a 100644
--- a/client/modules/User/components/SocialAuthButton.stories.jsx
+++ b/client/modules/User/components/SocialAuthButton.stories.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import SocialAuthButton from './SocialAuthButton';
+import { SocialAuthButton, SocialAuthServices } from './SocialAuthButton';
 
 export default {
   title: 'User/components/SocialAuthButton',
@@ -8,13 +8,13 @@ export default {
 };
 
 export const Github = () => (
-  <SocialAuthButton service={SocialAuthButton.services.github}>
+  <SocialAuthButton service={SocialAuthServices.github}>
     Log in with Github
   </SocialAuthButton>
 );
 
 export const Google = () => (
-  <SocialAuthButton service={SocialAuthButton.services.google}>
+  <SocialAuthButton service={SocialAuthServices.google}>
     Sign up with Google
   </SocialAuthButton>
 );
diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.tsx
similarity index 80%
rename from client/modules/User/components/SocialAuthButton.jsx
rename to client/modules/User/components/SocialAuthButton.tsx
index e48c660b67..b728168b94 100644
--- a/client/modules/User/components/SocialAuthButton.jsx
+++ b/client/modules/User/components/SocialAuthButton.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
@@ -20,10 +19,10 @@ const icons = {
   google: GoogleIcon
 };
 
-const services = {
-  github: 'github',
-  google: 'google'
-};
+export enum SocialAuthServices {
+  github = 'github',
+  google = 'google'
+}
 
 const servicesLabels = {
   github: 'GitHub',
@@ -34,7 +33,16 @@ const StyledButton = styled(Button)`
   width: ${remSize(300)};
 `;
 
-function SocialAuthButton({ service, linkStyle, isConnected }) {
+export interface SocialAuthButtonProps {
+  service: SocialAuthServices;
+  linkStyle?: boolean;
+  isConnected?: boolean;
+}
+export function SocialAuthButton({
+  service,
+  linkStyle = false,
+  isConnected = false
+}: SocialAuthButtonProps) {
   const { t } = useTranslation();
 
   const ServiceIcon = icons[service];
@@ -81,18 +89,3 @@ function SocialAuthButton({ service, linkStyle, isConnected }) {
     </StyledButton>
   );
 }
-
-SocialAuthButton.services = services;
-
-SocialAuthButton.propTypes = {
-  service: PropTypes.oneOf(['github', 'google']).isRequired,
-  linkStyle: PropTypes.bool,
-  isConnected: PropTypes.bool
-};
-
-SocialAuthButton.defaultProps = {
-  linkStyle: false,
-  isConnected: false
-};
-
-export default SocialAuthButton;
diff --git a/client/modules/User/components/VisibilityDropdown.jsx b/client/modules/User/components/VisibilityDropdown.tsx
similarity index 79%
rename from client/modules/User/components/VisibilityDropdown.jsx
rename to client/modules/User/components/VisibilityDropdown.tsx
index 972ccad88a..d5ea66f234 100644
--- a/client/modules/User/components/VisibilityDropdown.jsx
+++ b/client/modules/User/components/VisibilityDropdown.tsx
@@ -1,13 +1,29 @@
 import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import LockIcon from '../../../images/lock.svg';
 import EarthIcon from '../../../images/earth.svg';
 import CheckmarkIcon from '../../../images/checkmark.svg';
 
-const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
+export interface VisibilityDropdownProps {
+  sketch: {
+    id: string;
+    name: string;
+    visibility: string;
+  };
+  onVisibilityChange: (
+    sketchId: string,
+    sketchName: string,
+    newVisibility: string
+  ) => void;
+  location?: string;
+}
+export const VisibilityDropdown = ({
+  sketch,
+  onVisibilityChange,
+  location = 'sketchlist'
+}: VisibilityDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
+  const dropdownRef = useRef<null | HTMLDivElement>(null);
 
   const { t } = useTranslation();
 
@@ -31,8 +47,13 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
     visibilityOptions[0];
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (
+        dropdownRef.current &&
+        target &&
+        !dropdownRef.current.contains(target)
+      ) {
         setIsOpen(false);
       }
     };
@@ -41,14 +62,17 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const handleVisibilitySelect = (newVisibility) => {
+  const handleVisibilitySelect = (newVisibility: string) => {
     if (newVisibility !== sketch.visibility) {
       onVisibilityChange(sketch.id, sketch.name, newVisibility);
     }
     setIsOpen(false);
   };
 
-  const handleKeyDown = (event, visibility) => {
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>,
+    visibility: string
+  ) => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       handleVisibilitySelect(visibility);
@@ -104,19 +128,3 @@ const VisibilityDropdown = ({ sketch, onVisibilityChange, location }) => {
     </div>
   );
 };
-
-VisibilityDropdown.defaultProps = {
-  location: 'sketchlist'
-};
-
-VisibilityDropdown.propTypes = {
-  sketch: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    visibility: PropTypes.string.isRequired
-  }).isRequired,
-  onVisibilityChange: PropTypes.func.isRequired,
-  location: PropTypes.string
-};
-
-export default VisibilityDropdown;
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.tsx
similarity index 76%
rename from client/modules/User/pages/AccountView.jsx
rename to client/modules/User/pages/AccountView.tsx
index e9b3da7c9a..225e9e42e8 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { parse } from 'query-string';
-import AccountForm from '../components/AccountForm';
-import SocialAuthButton from '../components/SocialAuthButton';
-import APIKeyForm from '../components/APIKeyForm';
+import { AccountForm } from '../components/AccountForm';
+import {
+  SocialAuthButton,
+  SocialAuthServices
+} from '../components/SocialAuthButton';
+import { APIKeyForm } from '../components/APIKeyForm';
 import Nav from '../../IDE/components/Header/Nav';
 import ErrorModal from '../../IDE/components/ErrorModal';
+import { hideErrorModal } from '../../IDE/actions/ide';
 import Overlay from '../../App/components/Overlay';
 import Toast from '../../IDE/components/Toast';
+import { RootState } from '../../../reducers';
 
 function SocialLoginPanel() {
   const { t } = useTranslation();
-  const isGithub = useSelector((state) => !!state.user.github);
-  const isGoogle = useSelector((state) => !!state.user.google);
+  const isGithub = useSelector((state: RootState) => !!state.user.github);
+  const isGoogle = useSelector((state: RootState) => !!state.user.google);
   return (
     <React.Fragment>
       <AccountForm />
@@ -28,12 +33,12 @@ function SocialLoginPanel() {
       </p>
       <div className="account__social-stack">
         <SocialAuthButton
-          service={SocialAuthButton.services.github}
+          service={SocialAuthServices.github}
           linkStyle
           isConnected={isGithub}
         />
         <SocialAuthButton
-          service={SocialAuthButton.services.google}
+          service={SocialAuthServices.google}
           linkStyle
           isConnected={isGoogle}
         />
@@ -42,13 +47,13 @@ function SocialLoginPanel() {
   );
 }
 
-function AccountView() {
+export function AccountView() {
   const { t } = useTranslation();
-
+  const dispatch = useDispatch();
   const location = useLocation();
   const queryParams = parse(location.search);
   const showError = !!queryParams.error;
-  const errorType = queryParams.error;
+  const errorType = queryParams.error as string;
   const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
   const history = useHistory();
 
@@ -69,7 +74,11 @@ function AccountView() {
             history.push(location.pathname);
           }}
         >
-          <ErrorModal type="oauthError" service={errorType} />
+          <ErrorModal
+            type="oauthError"
+            service={errorType}
+            closeModal={() => dispatch(hideErrorModal())}
+          />
         </Overlay>
       )}
 
@@ -108,5 +117,3 @@ function AccountView() {
     </div>
   );
 }
-
-export default AccountView;
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.tsx
similarity index 73%
rename from client/modules/User/pages/CollectionView.jsx
rename to client/modules/User/pages/CollectionView.tsx
index 8207388086..958b84737c 100644
--- a/client/modules/User/pages/CollectionView.jsx
+++ b/client/modules/User/pages/CollectionView.tsx
@@ -4,8 +4,9 @@ import Nav from '../../IDE/components/Header/Nav';
 import { RootPage } from '../../../components/RootPage';
 import Collection from '../components/Collection';
 
-const CollectionView = () => {
-  const params = useParams();
+export const CollectionView = () => {
+  // eslint-disable-next-line camelcase
+  const params = useParams<{ collection_id: string; username: string }>();
 
   return (
     <RootPage>
@@ -17,5 +18,3 @@ const CollectionView = () => {
     </RootPage>
   );
 };
-
-export default CollectionView;
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 1626d0d369..8044de028a 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -18,7 +18,8 @@ import {
 } from '../../IDE/components/Searchbar';
 
 import CollectionCreate from '../components/CollectionCreate';
-import DashboardTabSwitcherPublic, {
+import {
+  DashboardTabSwitcher,
   TabKey
 } from '../components/DashboardTabSwitcher';
 import useIsMobile from '../../IDE/hooks/useIsMobile';
@@ -123,7 +124,7 @@ const DashboardView = () => {
         <div className="dashboard-header__header">
           <h2 className="dashboard-header__header__title">{ownerName()}</h2>
           <div className="dashboard-header__nav">
-            <DashboardTabSwitcherPublic
+            <DashboardTabSwitcher
               currentTab={currentTab}
               isOwner={isOwner()}
               username={params.username}
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.tsx
similarity index 92%
rename from client/modules/User/pages/EmailVerificationView.jsx
rename to client/modules/User/pages/EmailVerificationView.tsx
index d21d2446b9..7ce98d12fa 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.tsx
@@ -6,14 +6,15 @@ import { useTranslation } from 'react-i18next';
 import { verifyEmailConfirmation } from '../actions';
 import { RootPage } from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
+import type { RootState } from '../../../reducers';
 
-const EmailVerificationView = () => {
+export const EmailVerificationView = () => {
   const { t } = useTranslation();
   const location = useLocation();
   const dispatch = useDispatch();
   const browserHistory = useHistory();
   const emailVerificationTokenState = useSelector(
-    (state) => state.user.emailVerificationTokenState
+    (state: RootState) => state.user.emailVerificationTokenState
   );
   const verificationToken = useMemo(() => {
     const searchParams = new URLSearchParams(location.search);
@@ -53,4 +54,3 @@ const EmailVerificationView = () => {
     </RootPage>
   );
 };
-export default EmailVerificationView;
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.tsx
similarity index 80%
rename from client/modules/User/pages/LoginView.jsx
rename to client/modules/User/pages/LoginView.tsx
index b931c50ea8..4dff34b650 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import LoginForm from '../components/LoginForm';
-import SocialAuthButton from '../components/SocialAuthButton';
+import { LoginForm } from '../components/LoginForm';
+import {
+  SocialAuthButton,
+  SocialAuthServices
+} from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
 import { RootPage } from '../../../components/RootPage';
 
-function LoginView() {
+export function LoginView() {
   const { t } = useTranslation();
   return (
     <RootPage>
@@ -21,8 +24,8 @@ function LoginView() {
           <LoginForm />
           <h2 className="form-container__divider">{t('LoginView.LoginOr')}</h2>
           <div className="form-container__stack">
-            <SocialAuthButton service={SocialAuthButton.services.github} />
-            <SocialAuthButton service={SocialAuthButton.services.google} />
+            <SocialAuthButton service={SocialAuthServices.github} />
+            <SocialAuthButton service={SocialAuthServices.google} />
           </div>
           <p className="form__navigation-options">
             {t('LoginView.DontHaveAccount')}
@@ -42,5 +45,3 @@ function LoginView() {
     </RootPage>
   );
 }
-
-export default LoginView;
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.tsx
similarity index 82%
rename from client/modules/User/pages/NewPasswordView.jsx
rename to client/modules/User/pages/NewPasswordView.tsx
index 2bc310e6a3..1433624df0 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.tsx
@@ -4,17 +4,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import NewPasswordForm from '../components/NewPasswordForm';
+import { NewPasswordForm } from '../components/NewPasswordForm';
 import { validateResetPasswordToken } from '../actions';
 import Nav from '../../IDE/components/Header/Nav';
 import { RootPage } from '../../../components/RootPage';
+import { RootState } from '../../../reducers';
 
-function NewPasswordView() {
+export function NewPasswordView() {
   const { t } = useTranslation();
-  const params = useParams();
+  // eslint-disable-next-line camelcase
+  const params = useParams<{ reset_password_token: string }>();
   const resetPasswordToken = params.reset_password_token;
   const resetPasswordInvalid = useSelector(
-    (state) => state.user.resetPasswordInvalid
+    (state: RootState) => state.user.resetPasswordInvalid
   );
   const dispatch = useDispatch();
 
@@ -48,5 +50,3 @@ function NewPasswordView() {
     </RootPage>
   );
 }
-
-export default NewPasswordView;
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.tsx
similarity index 87%
rename from client/modules/User/pages/ResetPasswordView.jsx
rename to client/modules/User/pages/ResetPasswordView.tsx
index e744311b7c..09916047e4 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.tsx
@@ -4,14 +4,15 @@ import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import ResetPasswordForm from '../components/ResetPasswordForm';
+import { ResetPasswordForm } from '../components/ResetPasswordForm';
 import { RootPage } from '../../../components/RootPage';
 import Nav from '../../IDE/components/Header/Nav';
+import { RootState } from '../../../reducers';
 
-function ResetPasswordView() {
+export function ResetPasswordView() {
   const { t } = useTranslation();
   const resetPasswordInitiate = useSelector(
-    (state) => state.user.resetPasswordInitiate
+    (state: RootState) => state.user.resetPasswordInitiate
   );
   const resetPasswordClass = classNames({
     'reset-password': true,
@@ -48,5 +49,3 @@ function ResetPasswordView() {
     </RootPage>
   );
 }
-
-export default ResetPasswordView;
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.tsx
similarity index 81%
rename from client/modules/User/pages/SignupView.jsx
rename to client/modules/User/pages/SignupView.tsx
index 16e038c6e0..36006d51ef 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
-import SignupForm from '../components/SignupForm';
-import SocialAuthButton from '../components/SocialAuthButton';
+import { SignupForm } from '../components/SignupForm';
+import {
+  SocialAuthButton,
+  SocialAuthServices
+} from '../components/SocialAuthButton';
 import Nav from '../../IDE/components/Header/Nav';
 import { RootPage } from '../../../components/RootPage';
 
-function SignupView() {
+export function SignupView() {
   const { t } = useTranslation();
   return (
     <RootPage>
@@ -23,8 +26,8 @@ function SignupView() {
           <SignupForm />
           <h2 className="form-container__divider">{t('SignupView.Or')}</h2>
           <div className="form-container__stack">
-            <SocialAuthButton service={SocialAuthButton.services.github} />
-            <SocialAuthButton service={SocialAuthButton.services.google} />
+            <SocialAuthButton service={SocialAuthServices.github} />
+            <SocialAuthButton service={SocialAuthServices.google} />
           </div>
           <p className="form__navigation-options">
             <Trans
@@ -46,5 +49,3 @@ function SignupView() {
     </RootPage>
   );
 }
-
-export default SignupView;
diff --git a/client/routes.jsx b/client/routes.jsx
index 2195d95da2..55d47453d6 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -10,13 +10,13 @@ import { About } from './modules/About/pages/About';
 import { CodeOfConduct } from './modules/Legal/pages/CodeOfConduct';
 import { PrivacyPolicy } from './modules/Legal/pages/PrivacyPolicy';
 import { TermsOfUse } from './modules/Legal/pages/TermsOfUse';
-import LoginView from './modules/User/pages/LoginView';
-import SignupView from './modules/User/pages/SignupView';
-import ResetPasswordView from './modules/User/pages/ResetPasswordView';
-import EmailVerificationView from './modules/User/pages/EmailVerificationView';
-import NewPasswordView from './modules/User/pages/NewPasswordView';
-import AccountView from './modules/User/pages/AccountView';
-import CollectionView from './modules/User/pages/CollectionView';
+import { LoginView } from './modules/User/pages/LoginView';
+import { SignupView } from './modules/User/pages/SignupView';
+import { ResetPasswordView } from './modules/User/pages/ResetPasswordView';
+import { EmailVerificationView } from './modules/User/pages/EmailVerificationView';
+import { NewPasswordView } from './modules/User/pages/NewPasswordView';
+import { AccountView } from './modules/User/pages/AccountView';
+import { CollectionView } from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import { getUser } from './modules/User/actions';
 import ProtectedSketchRoute from './protected-route';
diff --git a/package-lock.json b/package-lock.json
index 152601097a..9e89a34f92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -164,6 +164,7 @@
         "@types/classnames": "^2.3.0",
         "@types/friendly-words": "^1.2.2",
         "@types/jest": "^29.5.14",
+        "@types/js-cookie": "^3.0.6",
         "@types/mjml": "^4.7.4",
         "@types/node": "^16.18.126",
         "@types/nodemailer": "^7.0.1",
@@ -173,6 +174,8 @@
         "@types/react-dom": "^16.9.25",
         "@types/react-helmet": "^6.1.11",
         "@types/react-router-dom": "^5.3.3",
+        "@types/react-tabs": "^2.3.1",
+        "@types/react-transition-group": "^4.4.12",
         "@types/sinon": "^17.0.4",
         "@types/styled-components": "^5.1.34",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -16448,6 +16451,13 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/js-levenshtein": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.0.tgz",
@@ -16691,6 +16701,26 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-tabs": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.1.tgz",
+      "integrity": "sha512-4SZXSF8ibQAtHUqqfoYLO+8Rn4F7Hj/IX3CJf1712dWeFvRxYY1HjjwSoN4MgUB0SB0dY4GrdlZwNhhIKuRoNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react/node_modules/csstype": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
@@ -53160,6 +53190,12 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true
+    },
     "@types/js-levenshtein": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.0.tgz",
@@ -53398,6 +53434,22 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-tabs": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.1.tgz",
+      "integrity": "sha512-4SZXSF8ibQAtHUqqfoYLO+8Rn4F7Hj/IX3CJf1712dWeFvRxYY1HjjwSoN4MgUB0SB0dY4GrdlZwNhhIKuRoNQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "dev": true,
+      "requires": {}
+    },
     "@types/redux-devtools-themes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/redux-devtools-themes/-/redux-devtools-themes-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4da99977f3..001ee5a28a 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
     "@types/classnames": "^2.3.0",
     "@types/friendly-words": "^1.2.2",
     "@types/jest": "^29.5.14",
+    "@types/js-cookie": "^3.0.6",
     "@types/mjml": "^4.7.4",
     "@types/node": "^16.18.126",
     "@types/nodemailer": "^7.0.1",
@@ -148,6 +149,8 @@
     "@types/react-dom": "^16.9.25",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-tabs": "^2.3.1",
+    "@types/react-transition-group": "^4.4.12",
     "@types/sinon": "^17.0.4",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",