diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9aa3cd486..b0d6194d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## [6.1.2](https://github.com/jwplayer/ott-web-app/compare/v6.1.1...v6.1.2) (2024-05-21)
+
+
+### Bug Fixes
+
+* **a11y:** improve accessibility of offers modal ([af654ec](https://github.com/jwplayer/ott-web-app/commit/af654ecc9b481353522b8e08a2d8078a7b91aa2a))
+* **home:** broken home skeleton ([#523](https://github.com/jwplayer/ott-web-app/issues/523)) ([35cd2db](https://github.com/jwplayer/ott-web-app/commit/35cd2db26ed3ffee65a6e2edf38447bce7957c7f))
+* **menu:** reintroduce profile menu styling ([39fd840](https://github.com/jwplayer/ott-web-app/commit/39fd840019405797069e84f7dbfd9d10a746b534))
+* **project:** alignment of password toggle button ([642068d](https://github.com/jwplayer/ott-web-app/commit/642068dc4babba8e9660e9bfee6acf16931aa8aa))
+* **project:** favicon paths ([7acf234](https://github.com/jwplayer/ott-web-app/commit/7acf234446d8dc62e3f43b13f49c3b2ad3c72a8a))
+* remove simultaneous logins ([9aa4a71](https://github.com/jwplayer/ott-web-app/commit/9aa4a71d8c12865bdf13fadf3d93b420343bd672))
+
 ## [6.1.1](https://github.com/jwplayer/ott-web-app/compare/v6.1.0...v6.1.1) (2024-04-23)
 
 
diff --git a/package.json b/package.json
index b13af62b3..4fb840f26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index bfaf1d4b8..953face35 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -75,8 +75,6 @@ export const DEFAULT_FEATURES = {
   watchListSizeLimit: MAX_WATCHLIST_ITEMS_COUNT,
 };
 
-export const simultaneousLoginWarningKey = 'simultaneous_logins';
-
 export const EPG_TYPE = {
   jwp: 'jwp',
   viewNexa: 'viewnexa',
diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index 5ee095675..af9cd99ee 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -334,7 +334,7 @@ export default class AccountController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    await this.reloadSubscriptions({ delay: 2000 });
+    await this.reloadSubscriptions({ retry: 10 });
 
     return response?.responseData;
   };
@@ -386,7 +386,7 @@ export default class AccountController {
     return !!responseData?.accessGranted;
   };
 
-  reloadSubscriptions = async ({ delay }: { delay: number } = { delay: 0 }): Promise<unknown> => {
+  reloadSubscriptions = async ({ delay, retry }: { delay?: number; retry?: number } = { delay: 0, retry: 0 }): Promise<unknown> => {
     useAccountStore.setState({ loading: true });
 
     const { getAccountInfo } = useAccountStore.getState();
@@ -395,10 +395,10 @@ export default class AccountController {
 
     // The subscription data takes a few seconds to load after it's purchased,
     // so here's a delay mechanism to give it time to process
-    if (delay > 0) {
+    if (delay && delay > 0) {
       return new Promise((resolve: (value?: unknown) => void) => {
         setTimeout(() => {
-          this.reloadSubscriptions().finally(resolve);
+          this.reloadSubscriptions({ retry }).finally(resolve);
         }, delay);
       });
     }
@@ -418,6 +418,12 @@ export default class AccountController {
 
     let pendingOffer: Offer | null = null;
 
+    if (!activeSubscription && !!retry && retry > 0) {
+      const retryDelay = 1500; // Any initial delay has already occured, so we can set this to a fixed value
+
+      return await this.reloadSubscriptions({ delay: retryDelay, retry: retry - 1 });
+    }
+
     // resolve and fetch the pending offer after upgrade/downgrade
     try {
       if (activeSubscription?.pendingSwitchId) {
diff --git a/packages/common/src/stores/UIStore.ts b/packages/common/src/stores/UIStore.ts
index af33c22b4..a328ae7ed 100644
--- a/packages/common/src/stores/UIStore.ts
+++ b/packages/common/src/stores/UIStore.ts
@@ -4,6 +4,7 @@ type UIState = {
   searchQuery: string;
   searchActive: boolean;
   userMenuOpen: boolean;
+  sideBarOpen: boolean;
   languageMenuOpen: boolean;
   preSearchPage?: string;
 };
@@ -12,5 +13,6 @@ export const useUIStore = createStore<UIState>('UIStore', () => ({
   searchQuery: '',
   searchActive: false,
   userMenuOpen: false,
+  sideBarOpen: false,
   languageMenuOpen: false,
 }));
diff --git a/packages/common/types/form.d.ts b/packages/common/types/form.d.ts
index f4616910b..336d1270f 100644
--- a/packages/common/types/form.d.ts
+++ b/packages/common/types/form.d.ts
@@ -1,5 +1,5 @@
-export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 export type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;
 
 export type GenericFormErrors = { form: string };
diff --git a/packages/hooks-react/src/useCheckAccess.ts b/packages/hooks-react/src/useCheckAccess.ts
index 4c55dca48..de50537e4 100644
--- a/packages/hooks-react/src/useCheckAccess.ts
+++ b/packages/hooks-react/src/useCheckAccess.ts
@@ -31,7 +31,7 @@ const useCheckAccess = () => {
         const hasAccess = await accountController.checkEntitlements(offerId);
 
         if (hasAccess) {
-          await accountController.reloadSubscriptions({ delay: 2000 }); // Delay needed for backend processing (Cleeng API returns empty subscription, even after accessGranted from entitlements call
+          await accountController.reloadSubscriptions({ retry: 10, delay: 2000 });
           callback?.(true);
         } else if (--iterations === 0) {
           window.clearInterval(intervalRef.current);
diff --git a/packages/hooks-react/src/useCheckout.ts b/packages/hooks-react/src/useCheckout.ts
index 29614f08b..59a6c3966 100644
--- a/packages/hooks-react/src/useCheckout.ts
+++ b/packages/hooks-react/src/useCheckout.ts
@@ -47,7 +47,7 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
     mutationKey: ['submitPaymentWithoutDetails'],
     mutationFn: checkoutController.paymentWithoutDetails,
     onSuccess: async () => {
-      await accountController.reloadSubscriptions({ delay: 1000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
       onSubmitPaymentWithoutDetailsSuccess();
     },
   });
diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index b62ef8865..06663c495 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -1,5 +1,4 @@
-import { useMutation } from 'react-query';
-import { useEffect } from 'react';
+import { useMutation, useQuery } from 'react-query';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
@@ -21,9 +20,9 @@ const useOffers = () => {
     shallow,
   );
 
-  const { mutate: initialise, isLoading: isInitialisationLoading } = useMutation<void>({
-    mutationKey: ['initialiseOffers', requestedMediaOffers],
-    mutationFn: checkoutController.initialiseOffers,
+  const { isLoading: isInitialisationLoading } = useQuery<void>({
+    queryKey: ['initialiseOffers', requestedMediaOffers],
+    queryFn: checkoutController.initialiseOffers,
   });
 
   const chooseOffer = useMutation({
@@ -34,13 +33,9 @@ const useOffers = () => {
   const switchSubscription = useMutation({
     mutationKey: ['switchSubscription'],
     mutationFn: checkoutController.switchSubscription,
-    onSuccess: () => accountController.reloadSubscriptions({ delay: 7500 }), // @todo: Is there a better way to wait?
+    onSuccess: () => accountController.reloadSubscriptions({ delay: 3000, retry: 10 }), // A subscription switch usually takes at least 3 secs
   });
 
-  useEffect(() => {
-    initialise();
-  }, [requestedMediaOffers, initialise]);
-
   const hasMediaOffers = mediaOffers.length > 0;
   const hasSubscriptionOffers = subscriptionOffers.length > 0;
   const hasPremierOffers = requestedMediaOffers.some((mediaOffer) => mediaOffer.premier);
diff --git a/packages/hooks-react/src/usePlaylists.ts b/packages/hooks-react/src/usePlaylists.ts
index c430e816f..b67945f46 100644
--- a/packages/hooks-react/src/usePlaylists.ts
+++ b/packages/hooks-react/src/usePlaylists.ts
@@ -14,9 +14,9 @@ const placeholderData = generatePlaylistPlaceholder(30);
 
 type UsePlaylistResult = {
   data: Playlist | undefined;
-  isLoading: boolean;
   isSuccess?: boolean;
   error?: unknown;
+  isPlaceholderData?: boolean;
 }[];
 
 const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undefined) => {
@@ -57,13 +57,13 @@ const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undef
     if (type === PersonalShelf.Favorites) return { data: favorites, isLoading: false, isSuccess: true };
     if (type === PersonalShelf.ContinueWatching) return { data: watchHistory, isLoading: false, isSuccess: true };
 
-    const { data, isLoading, isSuccess, error } = playlistQueries[index];
+    const { data, isSuccess, error, isPlaceholderData } = playlistQueries[index];
 
     return {
       data,
-      isLoading,
       isSuccess,
       error,
+      isPlaceholderData,
     };
   });
 
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
index aef289e6f..ebda26e9a 100644
--- a/packages/hooks-react/src/useProfiles.ts
+++ b/packages/hooks-react/src/useProfiles.ts
@@ -10,6 +10,7 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
   const accountController = getModule(AccountController, false);
@@ -94,7 +95,9 @@ export const useProfileErrorHandler = () => {
 };
 
 export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | undefined, unknown, ListProfilesResponse | undefined, string[]>) => {
-  const { user } = useAccountStore();
+  const user = useAccountStore((state) => state.user);
+  const accessModel = useConfigStore((state) => state.accessModel);
+  const { profile } = useProfileStore();
   const isLoggedIn = !!user;
 
   const profileController = getModule(ProfileController);
@@ -106,8 +109,11 @@ export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | und
     enabled: isLoggedIn && profilesEnabled,
   });
 
+  const shouldManageProfiles = !!user && profilesEnabled && query.data?.canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD');
+
   return {
     query,
+    shouldManageProfiles,
     profilesEnabled: !!query.data?.canManageProfiles,
   };
 };
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index 85b12ee45..f77b23523 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -45,7 +45,8 @@
     "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.3.1"
+    "vitest": "^1.3.1",
+    "wicg-inert": "^3.1.2"
   },
   "peerDependencies": {
     "@jwp/ott-common": "*",
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 94b61e2c7..9752b12f9 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -20,9 +20,9 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import Form from '../Form/Form';
 import IconButton from '../IconButton/IconButton';
-import TextField from '../TextField/TextField';
-import Checkbox from '../Checkbox/Checkbox';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import TextField from '../form-fields/TextField/TextField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
@@ -351,8 +351,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     name={`consentsValues.${consent.name}`}
                     checked={isTruthyCustomParamValue(section.values.consentsValues?.[consent.name])}
                     onChange={section.onChange}
-                    label={formatConsentLabel(consent.label)}
+                    checkboxLabel={formatConsentLabel(consent.label)}
                     disabled={consent.required || section.isBusy}
+                    required={consent.required}
                     lang={htmlLang}
                   />
                 ))}
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 624a6df72..25c330d33 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -25,10 +25,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_firstname"
         >
           account.firstname
@@ -36,8 +36,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           lang="en"
           name="firstName"
@@ -47,10 +48,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         />
       </div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_lastname"
         >
           account.lastname
@@ -58,8 +59,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           lang="en"
           name="lastName"
@@ -100,10 +102,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_email"
         >
           account.email
@@ -111,8 +113,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           readonly=""
@@ -183,25 +186,22 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_checkbox_531f07"
+        class="_formField_86f2f5 _checkbox_a98c3a"
       >
         <div
-          class="_row_531f07"
+          class="_row_a98c3a"
         >
           <input
             aria-describedby="helper_text_1235_consentsvalues_marketing"
-            id="check-box_1235_consentsvalues_marketing"
+            id="text-field_1235_consentsvalues_marketing"
             name="consentsValues.marketing"
             type="checkbox"
             value=""
           />
           <label
-            for="check-box_1235_consentsvalues_marketing"
+            for="text-field_1235_consentsvalues_marketing"
             lang="en"
           >
-            <span
-              aria-hidden="true"
-            />
             Receive Marketing Emails
           </label>
         </div>
diff --git a/packages/ui-react/src/components/Alert/Alert.test.tsx b/packages/ui-react/src/components/Alert/Alert.test.tsx
index f689c656d..e08c1842e 100644
--- a/packages/ui-react/src/components/Alert/Alert.test.tsx
+++ b/packages/ui-react/src/components/Alert/Alert.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { renderWithRouter } from '../../../test/utils';
 
 import Alert from './Alert';
 
 describe('<Alert>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<Alert message="Body" open={true} onClose={vi.fn()} />);
+    const { container } = renderWithRouter(<Alert message="Body" open={true} onClose={vi.fn()} />);
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/packages/ui-react/src/components/Animation/Animation.tsx b/packages/ui-react/src/components/Animation/Animation.tsx
index c0c78d1e0..50f94bf4a 100644
--- a/packages/ui-react/src/components/Animation/Animation.tsx
+++ b/packages/ui-react/src/components/Animation/Animation.tsx
@@ -1,4 +1,5 @@
 import React, { type CSSProperties, useEffect, useRef, useState } from 'react';
+import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 
 type Props = {
   className?: string;
@@ -27,35 +28,42 @@ const Animation: React.FC<Props> = ({
 }) => {
   const [status, setStatus] = useState<Status>('closed');
   const [hasOpenedBefore, setHasOpenedBefore] = useState<boolean>(false);
-  const seconds = duration / 1000;
-  const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
 
   const timeout = useRef<number>();
   const timeout2 = useRef<number>();
 
-  useEffect(() => {
-    if (timeout.current) clearTimeout(timeout.current);
-    if (timeout2.current) clearTimeout(timeout2.current);
-    if (open) {
-      setHasOpenedBefore(true);
-      timeout.current = window.setTimeout(() => setStatus('opening'), delay);
-      timeout2.current = window.setTimeout(() => {
-        setStatus('open');
-        onOpenAnimationEnd && onOpenAnimationEnd();
-      }, duration + delay);
-    } else if (hasOpenedBefore) {
+  // use event callbacks to ignore reactive dependencies
+  const openEvent = useEventCallback(() => {
+    setHasOpenedBefore(true);
+    timeout.current = window.setTimeout(() => setStatus('opening'), delay);
+    timeout2.current = window.setTimeout(() => {
+      setStatus('open');
+      onOpenAnimationEnd && onOpenAnimationEnd();
+    }, duration + delay);
+  });
+
+  const closeEvent = useEventCallback(() => {
+    if (hasOpenedBefore) {
       timeout.current = window.setTimeout(() => setStatus('closing'), delay);
       timeout2.current = window.setTimeout(() => {
         setStatus('closed');
         onCloseAnimationEnd && onCloseAnimationEnd();
       }, duration + delay);
     }
+  });
+
+  useEffect(() => {
+    if (open) {
+      openEvent();
+    } else {
+      closeEvent();
+    }
 
     return () => {
       clearTimeout(timeout.current);
       clearTimeout(timeout2.current);
     };
-  }, [duration, delay, transition, open, onOpenAnimationEnd, onCloseAnimationEnd, hasOpenedBefore, setHasOpenedBefore]);
+  }, [open, openEvent, closeEvent]);
 
   if (!open && status === 'closed' && !keepMounted) {
     return null;
diff --git a/packages/ui-react/src/components/CardGrid/CardGrid.tsx b/packages/ui-react/src/components/CardGrid/CardGrid.tsx
index 81d237e29..ed6616dd8 100644
--- a/packages/ui-react/src/components/CardGrid/CardGrid.tsx
+++ b/packages/ui-react/src/components/CardGrid/CardGrid.tsx
@@ -73,7 +73,13 @@ function CardGrid({
   }, [playlist.feedid]);
 
   return (
-    <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? defaultHasMore} loader={<InfiniteScrollLoader key="loader" />}>
+    <InfiniteScroll
+      pageStart={0}
+      loadMore={loadMore ?? defaultLoadMore}
+      hasMore={hasMore ?? defaultHasMore}
+      loader={<InfiniteScrollLoader key="loader" />}
+      useWindow={false}
+    >
       <LayoutGrid
         className={classNames(styles.container, styles[`cols-${visibleTiles}`])}
         data={loadMore ? playlist.playlist : playlist.playlist.slice(0, rowCount * visibleTiles)}
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
deleted file mode 100644
index 3bd4cf316..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Checkbox from './Checkbox';
-
-describe('<Checkbox>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Checkbox label="label" name="name" value="value" onChange={vi.fn()} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should set the checked state', () => {
-    const { getByLabelText } = render(<Checkbox label="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
-
-    expect(getByLabelText('label')).toBeChecked();
-  });
-});
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
deleted file mode 100644
index 2b07b3933..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Checkbox.module.scss';
-
-type Props = {
-  label?: ReactNode;
-  name: string;
-  value?: string;
-  checked?: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: string;
-  error?: boolean;
-  helperText?: string;
-  disabled?: boolean;
-  required?: boolean;
-  lang?: string;
-};
-
-const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('check-box', name);
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.checkbox, { [styles.error]: error })} {...rest}>
-      {header ? (
-        <div className={styles.header}>
-          {header}
-          {!required ? <span>{t('optional')}</span> : null}
-        </div>
-      ) : null}
-      <div className={styles.row}>
-        <input
-          name={name}
-          type="checkbox"
-          id={id}
-          value={value}
-          onChange={onChange}
-          checked={checked}
-          disabled={disabled}
-          aria-required={required}
-          aria-describedby={helperTextId}
-        />
-        <label htmlFor={id} lang={lang}>
-          <span aria-hidden="true">{required ? '* ' : ''}</span>
-          {label}
-        </label>
-      </div>
-      <HelperText id={helperTextId} error={error} className={error ? styles.helperTextError : undefined}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Checkbox;
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index 68dd32a08..ca30638db 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -85,22 +85,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         >
           <div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardholdername"
               >
                 checkout.card_holder_name
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardholdername"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-name"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
                   placeholder="checkout.credit_card_name"
@@ -113,22 +119,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           </div>
           <div>
             <div
-              class="_textField_e16c1b directPostCreditCardNumber"
+              class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardnumber"
               >
                 Card number
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardnumber"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-number"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
                   pattern="\\d*"
@@ -145,22 +157,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           >
             <div>
               <div
-                class="_textField_e16c1b directPostExpiryDate"
+                class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardexpiry"
                 >
                   Expiry date
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardexpiry"
                     aria-invalid="false"
+                    aria-required="true"
                     autocomplete="cc-exp"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
                     pattern="\\d*"
@@ -174,23 +192,29 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
             </div>
             <div>
               <div
-                class="_textField_e16c1b directPostSecurityCode"
+                class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardcvc"
                 >
                   payment.security_code
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardcvc"
                     aria-invalid="false"
                     aria-label="payment.security_code"
+                    aria-required="true"
                     autocomplete="cc-csc"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
                     pattern="\\d*"
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
index 7bce23ecf..f9bcbe936 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
@@ -136,3 +136,4 @@
     font-size: 12px;
   }
 }
+
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
index a380b65a3..218a1b26f 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
@@ -107,7 +107,7 @@ describe('<OffersForm>', () => {
 
     fireEvent.click(getByTestId('S345569153_NL'));
 
-    expect(onChange).toBeCalled();
+    expect(onChange).toHaveBeenCalled();
   });
 
   test('calls the onSubmit callback when submitting the form', () => {
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index a1766a602..0418f39f5 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type FC, type SVGProps } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import type { FormErrors } from '@jwp/ott-common/types/form';
@@ -40,8 +40,16 @@ const OfferBox: React.FC<OfferBoxProps> = ({ offer, selected, onChange }: OfferB
     return null;
   };
 
+  const renderListItem = (text: string, icon: FC<SVGProps<SVGSVGElement>>) => (
+    <li>
+      <Icon icon={icon} />
+      {text}
+      <span className="hidden">.</span>
+    </li>
+  );
+
   const renderOption = ({ title, periodString, secondBenefit }: { title: string; periodString?: string; secondBenefit?: string }) => (
-    <div className={styles.offer} role="option">
+    <div className={styles.offer} aria-labelledby={`title-${offer.offerId}`}>
       <input
         className={styles.radio}
         onChange={onChange}
@@ -52,30 +60,24 @@ const OfferBox: React.FC<OfferBoxProps> = ({ offer, selected, onChange }: OfferB
         checked={selected}
         data-testid={testId(offer.offerId)}
       />
-      <label className={styles.label} htmlFor={offer.offerId}>
-        <h2 className={styles.offerTitle}>{title}</h2>
-        <hr className={styles.offerDivider} />
-        <ul className={styles.offerBenefits}>
-          {offer.freeDays || offer.freePeriods ? (
-            <li>
-              <Icon icon={CheckCircle} /> {getFreeTrialText(offer)}
-            </li>
-          ) : null}
-
-          {!!secondBenefit && (
-            <li>
-              <Icon icon={CheckCircle} /> {secondBenefit}
-            </li>
-          )}
-          <li>
-            <Icon icon={CheckCircle} /> {t('choose_offer.benefits.watch_on_all_devices')}
-          </li>
-        </ul>
-        <div className={styles.fill} />
-        <div className={styles.offerPrice}>
-          {getOfferPrice(offer)} {!!periodString && <small>/{periodString}</small>}
-        </div>
-      </label>
+      <div className={styles.label}>
+        <label htmlFor={offer.offerId}>
+          <h2 className={styles.offerTitle} id={`title-${offer.offerId}`}>
+            {title}
+          </h2>
+          <span className="hidden">.</span>
+          <hr className={styles.offerDivider} aria-hidden={true} />
+          <ul className={styles.offerBenefits}>
+            {offer.freeDays || offer.freePeriods ? renderListItem(getFreeTrialText(offer) || '', CheckCircle) : null}
+            {!!secondBenefit && renderListItem(secondBenefit, CheckCircle)}
+            {renderListItem(t('choose_offer.benefits.watch_on_all_devices'), CheckCircle)}
+          </ul>
+          <div className={styles.fill} />
+          <div className={styles.offerPrice}>
+            {getOfferPrice(offer)} {!!periodString && <small>/{periodString}</small>}
+          </div>
+        </label>
+      </div>
     </div>
   );
 
diff --git a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
index 426417862..92198e490 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
@@ -51,8 +51,8 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
       class="_offers_f7961f"
     >
       <div
+        aria-labelledby="title-S916977979_NL"
         class="_offer_f7961f"
-        role="option"
       >
         <input
           checked=""
@@ -63,82 +63,104 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
           type="radio"
           value="S916977979_NL"
         />
-        <label
+        <div
           class="_label_f7961f"
-          for="S916977979_NL"
         >
-          <h2
-            class="_offerTitle_f7961f"
+          <label
+            for="S916977979_NL"
           >
-            choose_offer.monthly
-          </h2>
-          <hr
-            class="_offerDivider_f7961f"
-          />
-          <ul
-            class="_offerBenefits_f7961f"
-          >
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
-               
-              choose_offer.benefits.first_periods_free
-            </li>
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
-               
-              choose_offer.benefits.cancel_anytime
-            </li>
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
+            <h2
+              class="_offerTitle_f7961f"
+              id="title-S916977979_NL"
+            >
+              choose_offer.monthly
+            </h2>
+            <span
+              class="hidden"
+            >
+              .
+            </span>
+            <hr
+              aria-hidden="true"
+              class="_offerDivider_f7961f"
+            />
+            <ul
+              class="_offerBenefits_f7961f"
+            >
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.first_periods_free
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.cancel_anytime
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.watch_on_all_devices
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+            </ul>
+            <div
+              class="_fill_f7961f"
+            />
+            <div
+              class="_offerPrice_f7961f"
+            >
+              € 6,99
                
-              choose_offer.benefits.watch_on_all_devices
-            </li>
-          </ul>
-          <div
-            class="_fill_f7961f"
-          />
-          <div
-            class="_offerPrice_f7961f"
-          >
-            € 6,99
-             
-            <small>
-              /
-              periods.month
-            </small>
-          </div>
-        </label>
+              <small>
+                /
+                periods.month
+              </small>
+            </div>
+          </label>
+        </div>
       </div>
       <div
+        aria-labelledby="title-S345569153_NL"
         class="_offer_f7961f"
-        role="option"
       >
         <input
           class="_radio_f7961f"
@@ -148,78 +170,100 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
           type="radio"
           value="S345569153_NL"
         />
-        <label
+        <div
           class="_label_f7961f"
-          for="S345569153_NL"
         >
-          <h2
-            class="_offerTitle_f7961f"
-          >
-            choose_offer.yearly
-          </h2>
-          <hr
-            class="_offerDivider_f7961f"
-          />
-          <ul
-            class="_offerBenefits_f7961f"
+          <label
+            for="S345569153_NL"
           >
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
+            <h2
+              class="_offerTitle_f7961f"
+              id="title-S345569153_NL"
+            >
+              choose_offer.yearly
+            </h2>
+            <span
+              class="hidden"
+            >
+              .
+            </span>
+            <hr
+              aria-hidden="true"
+              class="_offerDivider_f7961f"
+            />
+            <ul
+              class="_offerBenefits_f7961f"
+            >
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.first_days_free
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.cancel_anytime
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.watch_on_all_devices
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+            </ul>
+            <div
+              class="_fill_f7961f"
+            />
+            <div
+              class="_offerPrice_f7961f"
+            >
+              € 50,00
                
-              choose_offer.benefits.first_days_free
-            </li>
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
-               
-              choose_offer.benefits.cancel_anytime
-            </li>
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
-               
-              choose_offer.benefits.watch_on_all_devices
-            </li>
-          </ul>
-          <div
-            class="_fill_f7961f"
-          />
-          <div
-            class="_offerPrice_f7961f"
-          >
-            € 50,00
-             
-            <small>
-              /
-              periods.year
-            </small>
-          </div>
-        </label>
+              <small>
+                /
+                periods.year
+              </small>
+            </div>
+          </label>
+        </div>
       </div>
     </div>
     <button
@@ -286,8 +330,8 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
       class="_offers_f7961f"
     >
       <div
+        aria-labelledby="title-R892134629_NL"
         class="_offer_f7961f"
-        role="option"
       >
         <input
           checked=""
@@ -298,46 +342,60 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
           type="radio"
           value="R892134629_NL"
         />
-        <label
+        <div
           class="_label_f7961f"
-          for="R892134629_NL"
         >
-          <h2
-            class="_offerTitle_f7961f"
+          <label
+            for="R892134629_NL"
           >
-            One Time - TVOD offer
-          </h2>
-          <hr
-            class="_offerDivider_f7961f"
-          />
-          <ul
-            class="_offerBenefits_f7961f"
-          >
-            <li>
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-                />
-              </svg>
+            <h2
+              class="_offerTitle_f7961f"
+              id="title-R892134629_NL"
+            >
+              One Time - TVOD offer
+            </h2>
+            <span
+              class="hidden"
+            >
+              .
+            </span>
+            <hr
+              aria-hidden="true"
+              class="_offerDivider_f7961f"
+            />
+            <ul
+              class="_offerBenefits_f7961f"
+            >
+              <li>
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+                  />
+                </svg>
+                choose_offer.benefits.watch_on_all_devices
+                <span
+                  class="hidden"
+                >
+                  .
+                </span>
+              </li>
+            </ul>
+            <div
+              class="_fill_f7961f"
+            />
+            <div
+              class="_offerPrice_f7961f"
+            >
+              € 2,90
                
-              choose_offer.benefits.watch_on_all_devices
-            </li>
-          </ul>
-          <div
-            class="_fill_f7961f"
-          />
-          <div
-            class="_offerPrice_f7961f"
-          >
-            € 2,90
-             
-          </div>
-        </label>
+            </div>
+          </label>
+        </div>
       </div>
     </div>
     <button
diff --git a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
index 12f25aa0c..d8e91bd98 100644
--- a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
+++ b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { renderWithRouter } from '../../../test/utils';
 
 import ConfirmationDialog from './ConfirmationDialog';
 
 describe('<ConfirmationDialog>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<ConfirmationDialog body="Body" title="Title" open={true} onConfirm={vi.fn()} onClose={vi.fn()} />);
+    const { container } = renderWithRouter(<ConfirmationDialog body="Body" title="Title" open={true} onConfirm={vi.fn()} onClose={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
index 204cd417b..5bcb0916d 100644
--- a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
+++ b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -4,17 +4,17 @@ import type { RegisterFieldOptions } from '@inplayer-org/inplayer.js';
 import type { CustomRegisterFieldVariant } from '@jwp/ott-common/types/account';
 import { isTruthyCustomParamValue, testId } from '@jwp/ott-common/src/utils/common';
 
-import Checkbox from '../Checkbox/Checkbox';
-import TextField from '../TextField/TextField';
-import Radio from '../Radio/Radio';
-import Dropdown from '../Dropdown/Dropdown';
-import DateField from '../DateField/DateField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import TextField from '../form-fields/TextField/TextField';
+import Radio from '../form-fields/Radio/Radio';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import DateField from '../form-fields/DateField/DateField';
 
 export type CustomRegisterFieldCommonProps = {
   type?: CustomRegisterFieldVariant;
   name: string;
   value: string | boolean;
-  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange: ChangeEventHandler;
 } & Partial<{
   label: ReactNode;
   placeholder: string;
@@ -27,7 +27,7 @@ export type CustomRegisterFieldCommonProps = {
   lang: string;
 }>;
 
-const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', options, editing, lang, ...props }) => {
+const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', label, options, editing, lang, ...props }) => {
   const { t, i18n } = useTranslation();
 
   const optionsList = useMemo(() => {
@@ -49,9 +49,9 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
 
   switch (type) {
     case 'input':
-      return <TextField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <TextField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     case 'radio':
-      return <Radio {...props} values={optionsList} value={value as string} header={props.label} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Radio {...props} label={label} values={optionsList} value={String(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
     case 'select':
     case 'country':
     case 'us_state':
@@ -59,17 +59,17 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
         <Dropdown
           {...props}
           options={optionsList}
-          value={value as string}
+          value={String(value)}
+          label={label}
           defaultLabel={props.placeholder}
-          fullWidth
           testId={testId(`crf-${type}`)}
           lang={lang}
         />
       );
     case 'datepicker':
-      return <DateField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <DateField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     default:
-      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Checkbox {...props} checkboxLabel={label} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
   }
 };
 
diff --git a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
index d514ad065..4e8facf32 100644
--- a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
+++ b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -3,25 +3,22 @@
 exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-checkbox"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-checkbox"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -32,42 +29,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="country"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-country"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="af"
         >
           country:af
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ax"
         >
           country:ax
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           country:al
@@ -81,31 +76,27 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="datepicker"> 1`] = `
 <div>
   <div
-    class="_dateField_eb6974"
+    class="_formField_86f2f5 _dateField_0addad"
     data-testid="crf-datepicker"
-    id="text-field_1235_name"
   >
     <label
-      class="_label_eb6974"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_eb6974"
+      class="_container_0addad"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        class="_hiddenInput_eb6974"
+        class="_hiddenInput_0addad"
         id="text-field_1235_name-hidden"
         name="name"
       />
       <input
         autocomplete="bday-day"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-date"
         maxlength="2"
         name="date"
@@ -116,7 +107,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-month"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-month"
         maxlength="2"
         name="month"
@@ -127,7 +118,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-year"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-year"
         maxlength="4"
         name="year"
@@ -143,25 +134,22 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="randomstring"> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-randomstring"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-randomstring"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -172,26 +160,24 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="select"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-select"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       />
     </div>
@@ -202,42 +188,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us_state"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-us_state"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           us_state:al
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ak"
         >
           us_state:ak
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="az"
         >
           us_state:az
@@ -251,23 +235,17 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
 exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 <div>
   <div
-    data-testid="crf-radio"
-    label="label"
+    class="_formField_86f2f5"
   >
     <label
-      class="_header_d50e6e"
-      data-testid="radio-header"
-      for="radio_1235_name"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
-      <span>
-        label
-      </span>
-      <span
-        class="_note_d50e6e"
-      >
-        optional
-      </span>
+      label
     </label>
+    <div
+      id="text-field_1235_name"
+    />
   </div>
 </div>
 `;
@@ -275,25 +253,23 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
     data-testid="crf-input"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         type="text"
diff --git a/packages/ui-react/src/components/DateField/DateField.module.scss b/packages/ui-react/src/components/DateField/DateField.module.scss
deleted file mode 100644
index c4e91652f..000000000
--- a/packages/ui-react/src/components/DateField/DateField.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use '@jwp/ott-ui-react/src/styles/variables';
-@use '@jwp/ott-ui-react/src/styles/theme';
-
-.dateField {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.disabled {
-    .container {
-      opacity: 0.7;
-    }
-  }
-
-  &:hover {
-    &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.control > div {
-  width: 48px;
-  height: 48px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  font-weight: var(--body-font-weight-bold);
-  font-size: 16px;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
-.input {
-  width: 100%;
-  min-height: 48px;
-  padding: 14px 16px;
-  color: inherit;
-  font-size: 16px;
-  line-height: variables.$base-line-height;
-  text-align: center;
-  background: transparent;
-  border: none;
-  outline: none;
-  appearance: none;
-
-  &::-webkit-inner-spin-button {
-    display: none;
-  }
-
-  &[name="date"] {
-    width: 43px;
-    padding-right: 4px;
-  }
-
-  &[name="month"] {
-    width: 35px;
-    padding-right: 4px;
-    padding-left: 4px;
-  }
-
-  &[name="year"] {
-    width: 60px;
-    padding-left: 4px;
-  }
-}
-
-.hiddenInput {
-  display: none;
-}
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 6d8a33fd6..404251e02 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 import { modalURLFromLocation } from '../../utils/location';
 import Button from '../Button/Button';
-import PasswordField from '../PasswordField/PasswordField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 import useQueryParam from '../../hooks/useQueryParam';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
diff --git a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
index 795579841..1a1f0c7a7 100644
--- a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
+++ b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
@@ -3,7 +3,7 @@ import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import { jwDevEnvConfigs, testConfigs } from '@jwp/ott-testing/constants';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 
 import styles from './DevConfigSelector.module.scss';
 
@@ -23,7 +23,7 @@ const DevConfigSelector = ({ selectedConfig }: Props) => {
   }, []);
 
   return (
-    <Dropdown
+    <Select
       className={styles.dropdown}
       size="small"
       options={configOptions}
diff --git a/packages/ui-react/src/components/Dialog/Dialog.test.tsx b/packages/ui-react/src/components/Dialog/Dialog.test.tsx
index 862221de8..88b9e56e7 100644
--- a/packages/ui-react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/ui-react/src/components/Dialog/Dialog.test.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { renderWithRouter } from '../../../test/utils';
 
 import Dialog from './Dialog';
 
 describe('<Dialog>', () => {
   test('renders and matches snapshot', () => {
-    const { baseElement } = render(
+    const { baseElement } = renderWithRouter(
       <>
         <span>Some content</span>
-        <Dialog onClose={vi.fn()} open={true} role="dialog">
+        <Dialog onClose={vi.fn()} open={true}>
           Dialog contents
         </Dialog>
         <span>Some other content</span>
@@ -17,21 +18,4 @@ describe('<Dialog>', () => {
 
     expect(baseElement).toMatchSnapshot();
   });
-
-  test('Should ensure Dialog is properly marked as a modal and has role "dialog"', () => {
-    const { getByTestId } = render(
-      <>
-        <span>Some content</span>
-        <Dialog onClose={vi.fn()} open={true} role="dialog" data-testid="dialog">
-          Dialog contents
-        </Dialog>
-        <span>Some other content</span>
-      </>,
-    );
-
-    const dialogElement = getByTestId('dialog');
-
-    expect(dialogElement).toHaveAttribute('aria-modal', 'true');
-    expect(dialogElement).toHaveAttribute('role', 'dialog');
-  });
 });
diff --git a/packages/ui-react/src/components/Dialog/Dialog.tsx b/packages/ui-react/src/components/Dialog/Dialog.tsx
index fdfa6d6f2..9bd933f7e 100644
--- a/packages/ui-react/src/components/Dialog/Dialog.tsx
+++ b/packages/ui-react/src/components/Dialog/Dialog.tsx
@@ -13,13 +13,13 @@ type Props = {
   onClose: () => void;
   size?: 'small' | 'large';
   children: React.ReactNode;
-  role: React.AriaRole;
+  role?: React.AriaRole;
 } & React.AriaAttributes;
 
-const Dialog: React.FC<Props> = ({ open, onClose, children, size = 'small', role = 'dialog', ...ariaAttributes }: Props) => {
+const Dialog: React.FC<Props> = ({ open, onClose, children, size = 'small', role, ...ariaAttributes }: Props) => {
   return (
-    <Modal open={open} onClose={onClose} AnimationComponent={Slide}>
-      <div className={classNames(styles.dialog, styles[size])} aria-modal="true" role={role} data-testid={testId('dialog')} {...ariaAttributes}>
+    <Modal open={open} onClose={onClose} AnimationComponent={Slide} role={role} centered>
+      <div className={classNames(styles.dialog, styles[size])} data-testid={testId('dialog')} {...ariaAttributes}>
         {children}
         <ModalCloseButton onClick={onClose} />
       </div>
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index ca13b6772..4f490da66 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -12,53 +12,40 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
       Some other content
     </span>
   </div>
-  <div
-    style="transition: opacity 0.3s ease-in-out; opacity: 0; will-change: opacity;"
+  <dialog
+    class="_centered_6c6c55"
+    open=""
   >
     <div
-      class="_modal_6c6c55"
+      style="transition: transform 0.3s ease, opacity 0.3s ease; transform: translate(0, -15px); opacity: 0; z-index: 15;"
     >
       <div
-        class="_backdrop_6c6c55"
-        data-testid="backdrop"
-      />
-      <div
-        class="_container_6c6c55"
+        class="_dialog_00d559 _small_00d559"
+        data-testid="dialog"
       >
-        <div
-          style="transition: transform 0.2s ease, opacity 0.2s ease; transform: translate(0, -15px); opacity: 0; z-index: 15;"
+        Dialog contents
+        <button
+          aria-label="close_modal"
+          class="_iconButton_0fef65 _modalCloseButton_b92d69"
+          type="button"
         >
-          <div
-            aria-modal="true"
-            class="_dialog_00d559 _small_00d559"
-            data-testid="dialog"
-            role="dialog"
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Dialog contents
-            <button
-              aria-label="close_modal"
-              class="_iconButton_0fef65 _modalCloseButton_b92d69"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </button>
       </div>
     </div>
-  </div>
+  </dialog>
 </body>
 `;
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index b70dfb45e..000000000
--- a/packages/ui-react/src/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Dropdown.module.scss';
-
-type Props = {
-  name: string;
-  value: string;
-  className?: string;
-  defaultLabel?: string;
-  options?: (string | { value: string; label: string })[];
-  optionsStyle?: string;
-  label?: ReactNode;
-  fullWidth?: boolean;
-  size?: 'small' | 'medium';
-  error?: boolean;
-  helperText?: string;
-  required?: boolean;
-  hideOptional?: boolean;
-  onChange: React.ChangeEventHandler;
-  testId?: string;
-  lang?: string;
-};
-
-const Dropdown: React.FC<Props & React.AriaAttributes> = ({
-  name,
-  value,
-  className,
-  defaultLabel,
-  options,
-  onChange,
-  optionsStyle,
-  label,
-  fullWidth,
-  error,
-  helperText,
-  required = false,
-  size = 'medium',
-  testId,
-  hideOptional,
-  lang,
-  ...rest
-}: Props & React.AriaAttributes) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId();
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)} data-testid={testId}>
-      {(label || (!required && !hideOptional)) && (
-        <label htmlFor={id} className={styles.label}>
-          {label}
-          {!required && !hideOptional ? <span>{t('optional')}</span> : null}
-        </label>
-      )}
-      <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
-        <select
-          id={id}
-          className={styles.select}
-          name={name}
-          value={value}
-          onChange={onChange}
-          aria-required={required}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-          lang={lang}
-          {...rest}
-        >
-          {defaultLabel && (
-            <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
-              {defaultLabel}
-            </option>
-          )}
-          {options &&
-            options.map((option) => (
-              <option
-                className={classNames(styles.option, optionsStyle)}
-                key={typeof option === 'string' ? option : option.value}
-                value={typeof option === 'string' ? option : option.value}
-              >
-                {typeof option === 'string' ? option : option.label}
-              </option>
-            ))}
-        </select>
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Dropdown;
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index 369610415..5f919445a 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -10,10 +10,10 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './EditCardPaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 8413310ac..3a2f4246d 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -4,8 +4,8 @@ import type { EditPasswordFormData } from '@jwp/ott-common/types/account';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
-import PasswordField from '../PasswordField/PasswordField';
-import TextField from '../TextField/TextField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
@@ -109,6 +109,7 @@ const EditPasswordForm: React.FC<Props> = ({
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
         autoComplete="new-password"
+        showHelperText={false}
         required
       />
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 6588c0191..05c99cb80 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       reset.password_reset
     </h2>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         reset.new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="reset.password"
@@ -36,7 +42,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -65,22 +71,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_passwordconfirmation"
       >
         reset.repeat_new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
           placeholder="reset.repeat_new_password"
@@ -89,7 +101,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -110,12 +122,6 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           </button>
         </div>
       </div>
-      <div
-        class="_helperText_da58e0"
-        id="helper_text_1235_passwordconfirmation"
-      >
-        reset.password_helper_text
-      </div>
     </div>
     <button
       aria-disabled="false"
diff --git a/packages/ui-react/src/components/Filter/Filter.tsx b/packages/ui-react/src/components/Filter/Filter.tsx
index ffe24f0db..bcd384486 100644
--- a/packages/ui-react/src/components/Filter/Filter.tsx
+++ b/packages/ui-react/src/components/Filter/Filter.tsx
@@ -2,7 +2,7 @@ import React, { type FC, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 import Button from '../Button/Button';
 
 import styles from './Filter.module.scss';
@@ -49,7 +49,7 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
         </div>
       ) : (
         <div className={styles.filterDropDown}>
-          <Dropdown
+          <Select
             className={styles.dropDown}
             size="small"
             options={options}
@@ -58,7 +58,6 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
             value={value}
             onChange={handleChange}
             aria-label={t('filter_videos_by', { name })}
-            hideOptional
           />
         </div>
       )}
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 32878c32c..979728f59 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -41,7 +41,7 @@ const FinalizePayment = () => {
 
     try {
       await checkoutController.finalizeAdyenPayment({ redirectResult: decodeURI(redirectResult) }, orderId);
-      await accountController.reloadSubscriptions({ delay: 2000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
 
       announce(t('checkout.payment_success'), 'success');
       navigate(paymentSuccessUrl);
@@ -73,7 +73,7 @@ const FinalizePayment = () => {
           />
         </>
       ) : (
-        <div className={styles.loading}>
+        <div>
           <Spinner />
         </div>
       )}
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
index 47d950cf9..a02ba78f1 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -5,7 +5,7 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './ForgotPasswordForm.module.scss';
@@ -24,7 +24,7 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
   const { t } = useTranslation('account');
 
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <p className={styles.text}>{t('reset.forgot_text')}</p>
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
index d7350f90a..0980f3f28 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -17,22 +17,28 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
       reset.forgot_text
     </p>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         reset.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="reset.email"
diff --git a/packages/ui-react/src/components/FormField/FormField.module.scss b/packages/ui-react/src/components/FormField/FormField.module.scss
new file mode 100644
index 000000000..2cf65d9b8
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.module.scss
@@ -0,0 +1,22 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.formField {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: var(--body-font-weight-bold);
+  text-align: left;
+
+  > span {
+    margin-left: 4px;
+    font-family: Verdana, sans-serif;
+    font-weight: normal;
+    font-size: 12px;
+    vertical-align: top;
+  }
+}
diff --git a/packages/ui-react/src/components/FormField/FormField.tsx b/packages/ui-react/src/components/FormField/FormField.tsx
new file mode 100644
index 000000000..db7661b9d
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+
+import HelperText from '../HelperText/HelperText';
+import type { FormControlProps } from '../../types/form';
+
+import styles from './FormField.module.scss';
+
+type RenderInputProps = {
+  helperTextId: string;
+  id: string;
+};
+
+type Props = {
+  helperText?: React.ReactNode;
+  renderInput: (fieldProps: RenderInputProps) => React.ReactElement;
+} & Omit<FormControlProps, 'value' | 'placeholder'>;
+
+export const FormField = ({ className, renderInput, required, label, error, helperText, testId, editing = true, name }: Props) => {
+  const formFieldClassName = classNames(styles.formField, className);
+  const id = useOpaqueId('text-field', name);
+  const helperTextId = useOpaqueId('helper_text', name);
+
+  return (
+    <div className={formFieldClassName} data-testid={testId}>
+      {!!label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+          {required && editing ? <span aria-hidden="true">*</span> : null}
+        </label>
+      )}
+      {renderInput({ helperTextId, id })}
+      {editing && (
+        <HelperText id={helperTextId} error={error}>
+          {helperText}
+        </HelperText>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index 18c5d00cc..0d601ac84 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -131,6 +131,7 @@
 .actions {
   position: relative;
   display: flex;
+  gap: calc(variables.$base-spacing / 2);
 
   @include responsive.mobile-and-tablet() {
     // the search container wants to position itself against the header
@@ -138,10 +139,6 @@
   }
 }
 
-.actionButton {
-  margin-left: calc(#{variables.$base-spacing} / 2);
-}
-
 //
 // Header search
 //
@@ -149,38 +146,6 @@
   max-width: 180px;
 }
 
-//
-// Header search container
-//
-.searchContainer {
-  position: absolute;
-  left: -#{variables.$search-bar-width-desktop};
-  display: flex;
-  width: variables.$search-bar-width-desktop;
-
-  > div:first-child {
-    flex: 1;
-  }
-
-  @include responsive.mobile-and-tablet() {
-    right: 0;
-    left: 0;
-    width: auto;
-  }
-}
-
-//
-// Container for the user button(s)
-//
-.buttonContainer {
-  // this is a visual fix for putting a button with background besides a transparent button
-  margin-left: variables.$base-spacing;
-
-  > button:first-child {
-    margin-right: calc(#{variables.$base-spacing} / 2);
-  }
-}
-
 .brandCentered {
   .brand {
     text-align: center;
@@ -231,8 +196,7 @@
   .searchActive {
     .menu,
     .brand,
-    .buttonContainer,
-    .actionButton {
+    .actions > *:not(:first-child) { // all action buttons except the search bar
       display: none;
     }
   }
diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 138c85367..cf59ab857 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -1,52 +1,35 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { mockService } from '@jwp/ott-common/test/mockService';
-import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
+import Language from '@jwp/ott-theme/assets/icons/language.svg?react';
 
-import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 
 import Header from './Header';
+import HeaderSkipLink from './HeaderSkipLink';
+import HeaderMenu from './HeaderMenu';
+import HeaderBrand from './HeaderBrand';
+import HeaderNavigation from './HeaderNavigation';
+import HeaderActions from './HeaderActions';
+import HeaderActionButton from './HeaderActionButton';
 
 vi.mock('react-router-dom', () => ({
   NavLink: () => 'a',
+  Link: () => 'a',
 }));
 
 describe('<Header />', () => {
-  beforeEach(() => {
-    // TODO: remove AccountController from component
-    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
-  });
-
   test('renders header', () => {
-    const homeButton = [<Button key="key" label="Home" to="/" />];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-      >
-        {homeButton}
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc={undefined} setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={[]} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
       </Header>,
     );
 
@@ -59,32 +42,17 @@ describe('<Header />', () => {
       { label: 'Button test', to: '/test' },
     ];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-        navItems={navItems}
-      />,
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc="/logo.png" setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={navItems} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
+      </Header>,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 3aedb2575..cf88147c3 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -1,247 +1,23 @@
-import React, { type ReactNode, useState } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
-import type { LanguageDefinition } from '@jwp/ott-common/types/i18n';
-import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
-import SearchIcon from '@jwp/ott-theme/assets/icons/search.svg?react';
-import CloseIcon from '@jwp/ott-theme/assets/icons/close.svg?react';
-import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
-import type { Profile } from '@jwp/ott-common/types/profiles';
-
-import SearchBar, { type Props as SearchBarProps } from '../SearchBar/SearchBar';
-import Logo from '../Logo/Logo';
-import Button from '../Button/Button';
-import UserMenu from '../UserMenu/UserMenu';
-import ProfilesMenu from '../ProfilesMenu/ProfilesMenu';
-import IconButton from '../IconButton/IconButton';
-import LanguageMenu from '../LanguageMenu/LanguageMenu';
-import Panel from '../Panel/Panel';
-import Icon from '../Icon/Icon';
-import ProfileCircle from '../ProfileCircle/ProfileCircle';
-import Popover from '../Popover/Popover';
 
 import styles from './Header.module.scss';
 
 type TypeHeader = 'static' | 'fixed';
 
-type NavItem = {
-  label: string;
-  to: string;
-};
-
 type Props = {
   headerType?: TypeHeader;
-  onMenuButtonClick: () => void;
-  logoSrc?: string | null;
-  searchBarProps: SearchBarProps;
-  searchEnabled: boolean;
   searchActive: boolean;
-  onSearchButtonClick?: () => void;
-  onCloseSearchButtonClick?: () => void;
-  onLoginButtonClick?: () => void;
-  onSignUpButtonClick?: () => void;
-  openUserPanel: () => void;
-  closeUserPanel: () => void;
-  openLanguageMenu: () => void;
-  closeLanguageMenu: () => void;
-  children?: ReactNode;
-  isLoggedIn: boolean;
-  sideBarOpen: boolean;
-  userMenuOpen: boolean;
-  languageMenuOpen: boolean;
-  canLogin: boolean;
-  showPaymentsMenuItem: boolean;
-  supportedLanguages: LanguageDefinition[];
-  currentLanguage: LanguageDefinition | undefined;
-  onLanguageClick: (code: string) => void;
-  favoritesEnabled?: boolean;
-  siteName?: string;
-  navItems?: NavItem[];
-
-  profilesData?: {
-    currentProfile: Profile | null;
-    profiles: Profile[];
-    profilesEnabled: boolean;
-    selectProfile: ({ avatarUrl, id }: { avatarUrl: string; id: string }) => void;
-    isSelectingProfile: boolean;
-  };
 };
 
-const Header: React.FC<Props> = ({
-  children,
-  headerType = 'static',
-  onMenuButtonClick,
-  logoSrc,
-  searchBarProps,
-  searchActive,
-  onSearchButtonClick,
-  searchEnabled,
-  onLoginButtonClick,
-  onCloseSearchButtonClick,
-  onSignUpButtonClick,
-  isLoggedIn,
-  sideBarOpen,
-  userMenuOpen,
-  languageMenuOpen,
-  openUserPanel,
-  closeUserPanel,
-  openLanguageMenu,
-  closeLanguageMenu,
-  canLogin = false,
-  showPaymentsMenuItem,
-  supportedLanguages,
-  currentLanguage,
-  onLanguageClick,
-  favoritesEnabled,
-  siteName,
-  profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
-  navItems = [],
-}) => {
-  const { t } = useTranslation('menu');
-  const [logoLoaded, setLogoLoaded] = useState(false);
-  const breakpoint = useBreakpoint();
+const Header = ({ children, headerType = 'static', searchActive }: PropsWithChildren<Props>) => {
   const headerClassName = classNames(styles.header, styles[headerType], {
     [styles.searchActive]: searchActive,
   });
 
-  // only show the language dropdown when there are other languages to choose from
-  const showLanguageSwitcher = supportedLanguages.length > 1;
-
-  const renderSearch = () => {
-    if (!searchEnabled) return null;
-
-    return searchActive ? (
-      <div className={styles.searchContainer}>
-        <SearchBar {...searchBarProps} onClose={onCloseSearchButtonClick} />
-        <IconButton className={styles.iconButton} aria-label="Close search" onClick={onCloseSearchButtonClick}>
-          <Icon icon={CloseIcon} />
-        </IconButton>
-      </div>
-    ) : (
-      <IconButton
-        className={classNames(styles.iconButton, styles.actionButton)}
-        aria-label="Open search"
-        onClick={() => {
-          if (onSearchButtonClick) {
-            onSearchButtonClick();
-          }
-        }}
-      >
-        <Icon icon={SearchIcon} />
-      </IconButton>
-    );
-  };
-
-  const renderUserActions = () => {
-    if (!canLogin || breakpoint <= Breakpoint.sm) return null;
-
-    return isLoggedIn ? (
-      <React.Fragment>
-        <IconButton
-          className={classNames(styles.iconButton, styles.actionButton)}
-          aria-label={t('open_user_menu')}
-          aria-controls="menu_panel"
-          aria-expanded={userMenuOpen}
-          aria-haspopup="menu"
-          onClick={openUserPanel}
-          onBlur={closeUserPanel}
-        >
-          {profilesEnabled && currentProfile ? (
-            <ProfileCircle src={currentProfile.avatar_url} alt={currentProfile.name || t('profile_icon')} />
-          ) : (
-            <Icon icon={AccountCircle} />
-          )}
-        </IconButton>
-        <Popover isOpen={userMenuOpen} onClose={closeUserPanel}>
-          <Panel id="menu_panel">
-            <div onFocus={openUserPanel} onBlur={closeUserPanel}>
-              {profilesEnabled && (
-                <ProfilesMenu
-                  onButtonClick={closeUserPanel}
-                  profiles={profiles ?? []}
-                  currentProfile={currentProfile}
-                  selectingProfile={!!isSelectingProfile}
-                  selectProfile={selectProfile}
-                  small
-                />
-              )}
-              <UserMenu
-                focusable={userMenuOpen}
-                onButtonClick={closeUserPanel}
-                showPaymentsItem={showPaymentsMenuItem}
-                currentProfile={currentProfile}
-                favoritesEnabled={favoritesEnabled}
-                small
-              />
-            </div>
-          </Panel>
-        </Popover>
-      </React.Fragment>
-    ) : (
-      <div className={styles.buttonContainer}>
-        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
-        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
-      </div>
-    );
-  };
-
-  const renderLanguageDropdown = () => {
-    if (!showLanguageSwitcher) return null;
-
-    return (
-      <LanguageMenu
-        className={classNames(styles.iconButton, styles.actionButton)}
-        openLanguageMenu={openLanguageMenu}
-        closeLanguageMenu={closeLanguageMenu}
-        languageMenuOpen={languageMenuOpen}
-        onClick={(code) => {
-          onLanguageClick(code);
-        }}
-        languages={supportedLanguages}
-        currentLanguage={currentLanguage}
-      />
-    );
-  };
-
-  const renderNav = () => {
-    if (navItems.length === 0) {
-      return children;
-    }
-    return (
-      <ul>
-        {navItems.map((item, index) => (
-          <li key={index}>
-            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
-          </li>
-        ))}
-      </ul>
-    );
-  };
-
   return (
     <header className={headerClassName}>
-      <div className={styles.container}>
-        <a href="#content" className={styles.skipToContent}>
-          {t('skip_to_content')}
-        </a>
-        <div className={styles.menu}>
-          <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={() => onMenuButtonClick()}>
-            <Icon icon={Menu} />
-          </IconButton>
-        </div>
-        {logoSrc && (
-          <div className={styles.brand}>
-            <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
-          </div>
-        )}
-        <nav className={styles.nav}>{logoLoaded || !logoSrc ? renderNav() : null}</nav>
-        <div className={styles.actions}>
-          {renderSearch()}
-          {renderLanguageDropdown()}
-          {renderUserActions()}
-        </div>
-      </div>
+      <div className={styles.container}>{children}</div>
     </header>
   );
 };
diff --git a/packages/ui-react/src/components/Header/HeaderActionButton.tsx b/packages/ui-react/src/components/Header/HeaderActionButton.tsx
new file mode 100644
index 000000000..78f6bc8cd
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderActionButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import IconButton, { type Props as IconButtonProps } from '../IconButton/IconButton';
+
+import styles from './Header.module.scss';
+
+const HeaderActionButton = ({ children, className, ...rest }: IconButtonProps) => {
+  return (
+    <IconButton className={classNames(styles.iconButton, className)} {...rest}>
+      {children}
+    </IconButton>
+  );
+};
+
+export default HeaderActionButton;
diff --git a/packages/ui-react/src/components/Header/HeaderActions.tsx b/packages/ui-react/src/components/Header/HeaderActions.tsx
new file mode 100644
index 000000000..e275f091a
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderActions.tsx
@@ -0,0 +1,9 @@
+import React, { type PropsWithChildren } from 'react';
+
+import styles from './Header.module.scss';
+
+const HeaderActions = ({ children }: PropsWithChildren) => {
+  return <div className={styles.actions}>{children}</div>;
+};
+
+export default HeaderActions;
diff --git a/packages/ui-react/src/components/Header/HeaderBrand.tsx b/packages/ui-react/src/components/Header/HeaderBrand.tsx
new file mode 100644
index 000000000..650889a11
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderBrand.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Logo from '../Logo/Logo';
+
+import styles from './Header.module.scss';
+
+type Props = {
+  siteName?: string;
+  logoSrc?: string | null;
+  setLogoLoaded: (loaded: boolean) => void;
+};
+
+const HeaderBrand = ({ siteName, logoSrc, setLogoLoaded }: Props) => {
+  const { t } = useTranslation('menu');
+
+  if (!logoSrc) return null;
+
+  return (
+    <div className={styles.brand}>
+      <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
+    </div>
+  );
+};
+
+export default HeaderBrand;
diff --git a/packages/ui-react/src/components/Header/HeaderMenu.tsx b/packages/ui-react/src/components/Header/HeaderMenu.tsx
new file mode 100644
index 000000000..5e6d9238b
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderMenu.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
+
+import Icon from '../Icon/Icon';
+import IconButton from '../IconButton/IconButton';
+
+import styles from './Header.module.scss';
+
+const HeaderMenu = ({ sideBarOpen, onClick }: { sideBarOpen: boolean; onClick: () => void }) => {
+  const { t } = useTranslation('menu');
+
+  return (
+    <div className={styles.menu}>
+      <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={onClick}>
+        <Icon icon={Menu} />
+      </IconButton>
+    </div>
+  );
+};
+
+export default HeaderMenu;
diff --git a/packages/ui-react/src/components/Header/HeaderNavigation.tsx b/packages/ui-react/src/components/Header/HeaderNavigation.tsx
new file mode 100644
index 000000000..3158c0932
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderNavigation.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Button from '../Button/Button';
+
+import styles from './Header.module.scss';
+
+type NavItem = {
+  label: string;
+  to: string;
+};
+
+const HeaderNavigation = ({ navItems }: { navItems: NavItem[] }) => {
+  return (
+    <nav className={styles.nav}>
+      <ul>
+        {navItems.map((item, index) => (
+          <li key={index}>
+            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default HeaderNavigation;
diff --git a/packages/ui-react/src/components/Header/HeaderSkipLink.tsx b/packages/ui-react/src/components/Header/HeaderSkipLink.tsx
new file mode 100644
index 000000000..22d517d80
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderSkipLink.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './Header.module.scss';
+
+const HeaderSkipLink = () => {
+  const { t } = useTranslation('menu');
+  return (
+    <a href="#content" className={styles.skipToContent}>
+      {t('skip_to_content')}
+    </a>
+  );
+};
+
+export default HeaderSkipLink;
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 63d3685b6..79060c0be 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -42,14 +42,13 @@ exports[`<Header /> > renders header 1`] = `
       <nav
         class="_nav_f4f7a7"
       >
-        a
+        <ul />
       </nav>
       <div
         class="_actions_f4f7a7"
       >
         <button
-          aria-label="Open search"
-          class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
         >
           <svg
@@ -59,32 +58,11 @@ exports[`<Header /> > renders header 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              fill="currentColor"
             />
           </svg>
         </button>
-        <div
-          class="_buttonContainer_f4f7a7"
-        >
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              sign_in
-            </span>
-          </button>
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _primary_f8f296"
-            type="button"
-          >
-            <span>
-              sign_up
-            </span>
-          </button>
-        </div>
       </div>
     </div>
   </header>
@@ -130,6 +108,11 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
           </svg>
         </button>
       </div>
+      <div
+        class="_brand_f4f7a7"
+      >
+        a
+      </div>
       <nav
         class="_nav_f4f7a7"
       >
@@ -146,8 +129,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
         class="_actions_f4f7a7"
       >
         <button
-          aria-label="Open search"
-          class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
         >
           <svg
@@ -157,32 +139,11 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              fill="currentColor"
             />
           </svg>
         </button>
-        <div
-          class="_buttonContainer_f4f7a7"
-        >
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              sign_in
-            </span>
-          </button>
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _primary_f8f296"
-            type="button"
-          >
-            <span>
-              sign_up
-            </span>
-          </button>
-        </div>
       </div>
     </div>
   </header>
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index c03f9c622..d604fbf3e 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -3,7 +3,7 @@ import React, { type ButtonHTMLAttributes } from 'react';
 
 import styles from './IconButton.module.scss';
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   onClick?: () => void;
   onBlur?: () => void;
   children: JSX.Element;
diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/Input/Input.module.scss
similarity index 64%
rename from packages/ui-react/src/components/TextField/TextField.module.scss
rename to packages/ui-react/src/components/Input/Input.module.scss
index 3457d7ac5..6e0fde3ec 100644
--- a/packages/ui-react/src/components/TextField/TextField.module.scss
+++ b/packages/ui-react/src/components/Input/Input.module.scss
@@ -1,20 +1,23 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.textField {
+.container {
+  display: flex;
   width: 100%;
-  margin-bottom: 8px;
+
+  color: theme.$text-field-resting-color;
+
+  background-color: theme.$text-field-bg-color;
+  border: 1px solid theme.$text-field-resting-border-color;
+  border-radius: 4px;
+  transition: border 0.2s ease;
 
   &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
+    border-color: theme.$text-field-error-color;
   }
 
   &.disabled {
-    .container {
-      opacity: 0.7;
-    }
+    opacity: 0.7;
   }
 
   &.leftControl .input {
@@ -25,58 +28,36 @@
     padding-right: 0;
   }
 
+  &:focus-within {
+    color: theme.$text-field-active-color;
+    border-color: theme.$text-field-active-border-color;
+  }
+
   &:hover {
     &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
+      background-color: theme.$text-field-hover-bg-color;
+      border-color: theme.$text-field-hover-border-color;
     }
   }
 }
 
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
+.control {
+  display: flex;
+  align-items: center;
 }
 
-.control > button {
+.control > button, .control > div {
   width: 48px;
   height: 48px;
 }
 
-.container {
-  display: flex;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
 .input {
   width: 100%;
   min-height: 48px;
   padding: 14px 16px;
   color: inherit;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   background: transparent;
   border: none;
   outline: none;
diff --git a/packages/ui-react/src/components/Input/Input.tsx b/packages/ui-react/src/components/Input/Input.tsx
new file mode 100644
index 000000000..e3ded1897
--- /dev/null
+++ b/packages/ui-react/src/components/Input/Input.tsx
@@ -0,0 +1,98 @@
+import React, { type InputHTMLAttributes, type RefObject, type TextareaHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Input.module.scss';
+
+type CommonProps = {
+  id?: string;
+  helperTextId?: string;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+  multiline?: boolean;
+} & FormControlProps;
+
+type HTMLInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+type HTMLTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+
+type InputProps = HTMLInputProps & {
+  type?: InputHTMLAttributes<HTMLInputElement>['type'];
+  multiline?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  textAreaRef?: never;
+} & CommonProps;
+type TextAreaProps = HTMLTextAreaProps & { type?: never; multiline: true; inputRef?: never; textAreaRef?: RefObject<HTMLTextAreaElement> } & CommonProps;
+
+export type Props = InputProps | TextAreaProps;
+
+const isTextArea = (_props: HTMLInputProps | HTMLTextAreaProps, multiline?: boolean): _props is HTMLTextAreaProps => !!multiline;
+
+const Input = ({
+  required,
+  className,
+  disabled,
+  editing = true,
+  value,
+  id,
+  name,
+  multiline,
+  error,
+  helperTextId,
+  type,
+  textAreaRef,
+  inputRef,
+  leftControl,
+  rightControl,
+  ...inputProps
+}: Props) => {
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const inputType = type || 'text';
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+      [styles.leftControl]: !!leftControl,
+      [styles.rightControl]: !!rightControl,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const commonProps: HTMLInputProps | HTMLTextAreaProps = {
+    id,
+    name,
+    value,
+    disabled,
+    rows: multiline ? 3 : undefined,
+    className: styles.input,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...inputProps,
+  };
+
+  const input = isTextArea(commonProps, multiline) ? (
+    <textarea {...commonProps} ref={textAreaRef} />
+  ) : (
+    <input {...commonProps} type={inputType} ref={inputRef} />
+  );
+
+  return editing ? (
+    <div className={containerClassName}>
+      {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
+      {input}
+      {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
+    </div>
+  ) : (
+    input
+  );
+};
+
+export default Input;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
index 32c6c21a1..f3995109a 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
@@ -2,6 +2,10 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
+.popover {
+  top: 10px;
+}
+
 .menuItems {
   margin: 0;
   padding: 0;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 8463b9df1..1faccb7cd 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -1,15 +1,15 @@
 import type { LanguageDefinition } from '@jwp/ott-common/types/i18n';
 import classNames from 'classnames';
-import { Fragment, type MouseEvent } from 'react';
+import { type MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import Language from '@jwp/ott-theme/assets/icons/language.svg?react';
 
-import IconButton from '../IconButton/IconButton';
 import Link from '../Link/Link';
 import Panel from '../Panel/Panel';
 import Popover from '../Popover/Popover';
 import Icon from '../Icon/Icon';
+import HeaderActionButton from '../Header/HeaderActionButton';
 
 import styles from './LanguageMenu.module.scss';
 
@@ -42,19 +42,19 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
   };
 
   return (
-    <Fragment>
-      <IconButton
+    <div>
+      <HeaderActionButton
         data-testid={testId('language-menu-button')}
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
         aria-haspopup="menu"
-        className={classNames(className)}
+        className={className}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
         onBlur={closeLanguageMenu}
       >
         <Icon icon={Language} />
-      </IconButton>
+      </HeaderActionButton>
       <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
         <Panel id="language-panel">
           <ul className={styles.menuItems}>
@@ -72,7 +72,7 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
           </ul>
         </Panel>
       </Popover>
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index 5d55ddd6a..f8b0e8be9 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -2,26 +2,28 @@
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>
-  <button
-    aria-controls="language-panel"
-    aria-expanded="false"
-    aria-haspopup="menu"
-    aria-label="language_menu"
-    class="_iconButton_0fef65"
-    data-testid="language-menu-button"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="_icon_585b29"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+  <div>
+    <button
+      aria-controls="language-panel"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="language_menu"
+      class="_iconButton_0fef65 _iconButton_f4f7a7"
+      data-testid="language-menu-button"
+      type="button"
     >
-      <path
-        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
-        fill="currentColor"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        class="_icon_585b29"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
index ec9b0c446..3b250a7ea 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`<UserMenu> > renders and matches snapshot 1`] = `
+exports[`<UserMenuNav> > renders and matches snapshot 1`] = `
 <div>
   <ul
     class="_menuItems_457528"
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
index d6cda2224..fd05a29f5 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
@@ -40,7 +40,6 @@ describe('<LoginForm>', () => {
         errors={{}}
         socialLoginURLs={socialLoginURLs}
         submitting={false}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
@@ -62,15 +61,14 @@ describe('<LoginForm>', () => {
         errors={{}}
         socialLoginURLs={null}
         submitting={false}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
 
     await waitForWithFakeTimers();
 
-    expect(getByLabelText('login.email')).toHaveValue('myemail@email.com');
-    expect(getByLabelText('login.password')).toHaveValue('mypassword');
+    expect(getByLabelText('login.email', { exact: false })).toHaveValue('myemail@email.com');
+    expect(getByLabelText('login.password', { exact: false })).toHaveValue('mypassword');
   });
 
   test('sets the correct errors in the form fields', async () => {
@@ -85,7 +83,6 @@ describe('<LoginForm>', () => {
         errors={{ email: 'Email error', password: 'Password error', form: 'Form error' }}
         socialLoginURLs={null}
         submitting={false}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
@@ -109,7 +106,6 @@ describe('<LoginForm>', () => {
         errors={{}}
         socialLoginURLs={null}
         submitting={true}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
@@ -133,7 +129,6 @@ describe('<LoginForm>', () => {
         errors={{}}
         socialLoginURLs={null}
         submitting={true}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
@@ -161,14 +156,13 @@ describe('<LoginForm>', () => {
         errors={{}}
         socialLoginURLs={null}
         submitting={true}
-        messageKey={null}
       />,
       { wrapper: createWrapper() },
     );
 
     act(() => {
-      fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
-      fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+      fireEvent.change(getByLabelText('login.email', { exact: false }), { target: { value: 'email' } });
+      fireEvent.change(getByLabelText('login.password', { exact: false }), { target: { value: 'password' } });
     });
 
     await waitForWithFakeTimers();
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
index 3e36ab5bb..927ba540f 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -6,11 +6,10 @@ import type { LoginFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
-import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';
@@ -32,29 +31,15 @@ type Props = {
   submitting: boolean;
   socialLoginURLs: SocialLoginURLs | null;
   siteName?: string;
-  messageKey: string | null;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, values, errors, validationError, submitting, siteName, messageKey }: Props) => {
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, values, errors, validationError, submitting, siteName }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
   const location = useLocation();
 
-  const getTranslatedErrorMessage = (messageId: string | null) => {
-    switch (messageId) {
-      case simultaneousLoginWarningKey:
-        return t('login.simultaneous_logins');
-    }
-    return t('login.unexpected_error');
-  };
-
   return (
     <form onSubmit={onSubmit} data-testid={testId('login-form')} noValidate>
-      {messageKey && (
-        <div className={styles.top}>
-          <FormFeedback variant="warning">{getTranslatedErrorMessage(messageKey)}</FormFeedback>
-        </div>
-      )}
       {errors.form ? (
         <FormFeedback variant="error" visible={!validationError}>
           {errors.form}
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 0628874b0..791901494 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -31,23 +31,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       login.sign_in
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-email-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         login.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="login.email"
@@ -58,23 +64,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-password-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         login.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="current-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="login.password"
@@ -83,7 +95,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="login.view_password"
diff --git a/packages/ui-react/src/components/Modal/Modal.module.scss b/packages/ui-react/src/components/Modal/Modal.module.scss
index 5302dff8b..c9c952a32 100644
--- a/packages/ui-react/src/components/Modal/Modal.module.scss
+++ b/packages/ui-react/src/components/Modal/Modal.module.scss
@@ -2,27 +2,64 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 
-.modal {
-  position: fixed;
+$animation-duration: 0.3s;
+
+dialog {
   top: 0;
   left: 0;
-  z-index: variables.$modals-z-index;
   width: 100vw;
-  height: 100dvh;
+  max-width: 100vw;
+  height: 100%;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--body-color);
+  background: transparent;
+  border: none;
+
+  &.centered[open] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  &.close[open] {
+    animation: fade-out $animation-duration forwards;
+
+    &::backdrop {
+      animation: fade-out $animation-duration forwards;
+    }
+  }
+
+  &[open] {
+    animation: fade-in $animation-duration forwards;
+
+    &::backdrop {
+      animation: fade-in $animation-duration forwards;
+    }
+  }
 }
 
-.backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+dialog::backdrop {
   background-color: theme.$modal-backdrop-bg;
 }
 
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
diff --git a/packages/ui-react/src/components/Modal/Modal.test.tsx b/packages/ui-react/src/components/Modal/Modal.test.tsx
index 43a04029e..d1313c941 100644
--- a/packages/ui-react/src/components/Modal/Modal.test.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.test.tsx
@@ -1,11 +1,21 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+
+import { renderWithRouter } from '../../../test/utils';
 
 import Modal from './Modal';
 
 describe('<Modal>', () => {
+  beforeAll(() => {
+    vi.useFakeTimers();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
   test('renders and matches snapshot', () => {
-    const { container } = render(
+    const { container } = renderWithRouter(
       <Modal open={true} onClose={vi.fn()}>
         <p>Test modal</p>
       </Modal>,
@@ -14,42 +24,19 @@ describe('<Modal>', () => {
     expect(container).toMatchSnapshot();
   });
 
-  test('calls the onClose function when clicking the backdrop', () => {
+  test('add overflowY hidden on the body element when open', async () => {
     const onClose = vi.fn();
-    const { getByTestId } = render(<Modal open={true} onClose={onClose} />);
-
-    fireEvent.click(getByTestId('backdrop'));
-
-    expect(onClose).toBeCalledTimes(1);
-  });
-
-  test('Should add inert attribute on the root div when open', () => {
-    const onClose = vi.fn();
-    const { getByTestId, rerender } = render(
-      <div id="root" data-testid="root">
-        <Modal open={true} onClose={onClose} />
-      </div>,
-    );
-
-    expect(getByTestId('root')).toHaveProperty('inert', true);
-
-    rerender(
-      <div id="root" data-testid="root">
-        <Modal open={false} onClose={onClose} />
-      </div>,
-    );
-
-    expect(getByTestId('root')).toHaveProperty('inert', false);
-  });
-
-  test('should add overflowY hidden on the body element when open', () => {
-    const onClose = vi.fn();
-    const { container, rerender } = render(<Modal open={true} onClose={onClose} />);
+    const { container, rerender } = await act(() => renderWithRouter(<Modal open={true} onClose={onClose} />));
 
     expect(container.parentNode).toHaveStyle({ overflowY: 'hidden' });
 
-    rerender(<Modal open={false} onClose={onClose} />);
+    act(() => {
+      rerender(<Modal open={false} onClose={onClose} />);
+    });
+
+    await act(() => vi.runAllTimers()); // wait for close animation
 
+    expect(onClose).toHaveBeenCalled();
     expect(container.parentNode).not.toHaveStyle({ overflowY: 'hidden' });
   });
 });
diff --git a/packages/ui-react/src/components/Modal/Modal.tsx b/packages/ui-react/src/components/Modal/Modal.tsx
index 2bb2c3000..e135c52b6 100644
--- a/packages/ui-react/src/components/Modal/Modal.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.tsx
@@ -1,95 +1,115 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { type HTMLAttributes, type KeyboardEventHandler, type ReactEventHandler, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { testId } from '@jwp/ott-common/src/utils/common';
+import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
+import classNames from 'classnames';
 
-import Fade from '../Animation/Fade/Fade';
 import Grow from '../Animation/Grow/Grow';
-import scrollbarSize from '../../utils/dom';
+import { useModal } from '../../hooks/useModal';
 
 import styles from './Modal.module.scss';
 
+export type AnimationProps = {
+  open?: boolean;
+  duration?: number;
+  delay?: number;
+  children: React.ReactNode;
+  className?: string;
+  onCloseAnimationEnd?: () => void;
+};
+
 type Props = {
   children?: React.ReactNode;
-  AnimationComponent?: React.JSXElementConstructor<{ open?: boolean; duration?: number; delay?: number; children: React.ReactNode; className?: string }>;
+  className?: string;
+  centered?: boolean;
+  AnimationComponent?: React.ElementType<AnimationProps>;
   open: boolean;
   onClose?: () => void;
   animationContainerClassName?: string;
+  role?: HTMLAttributes<HTMLElement>['role'];
 } & React.AriaAttributes;
 
-const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent = Grow, animationContainerClassName, ...ariaAtributes }: Props) => {
-  const [visible, setVisible] = useState(open);
-  const lastFocus = useRef<HTMLElement>() as React.MutableRefObject<HTMLElement>;
-  const modalRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+const Modal: React.FC<Props> = ({
+  open,
+  onClose,
+  children,
+  className,
+  centered,
+  role,
+  AnimationComponent = Grow,
+  animationContainerClassName,
+  ...ariaAttributes
+}: Props) => {
+  const modalRef = useRef<HTMLDialogElement>() as React.MutableRefObject<HTMLDialogElement>;
+
+  const { handleOpen, handleClose } = useModal();
+
+  const closeModalEvent = useEventCallback(() => {
+    const onAnimationEndHandler = () => {
+      // modalRef.current?.close();
+      modalRef.current?.classList.remove(styles.close);
+      modalRef.current?.removeEventListener('animationend', onAnimationEndHandler);
+    };
+
+    if (modalRef.current?.open) {
+      modalRef.current.addEventListener('animationend', onAnimationEndHandler);
+      modalRef.current.classList.add(styles.close);
+    }
+  });
+
+  const openModalEvent = useEventCallback(() => {
+    handleOpen();
+    modalRef.current?.showModal();
+    modalRef.current?.classList.remove(styles.close);
+  });
+
+  const keyDownHandler: KeyboardEventHandler<HTMLDialogElement> = (event) => {
+    if (event.key === 'Escape' && modalRef.current.contains(event.target as HTMLElement)) {
+      event.preventDefault();
+      onClose?.();
+    }
+  };
 
-  const keyDownEventHandler = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape' && onClose) {
-      onClose();
+  const closeHandler: ReactEventHandler<HTMLDialogElement> = (event) => {
+    if (modalRef.current.contains(event.target as HTMLElement)) {
+      onClose?.();
+      handleClose();
     }
   };
 
-  // delay the transition state so the CSS transition kicks in after toggling the `open` prop
-  useEffect(() => {
-    const activeElement = document.activeElement as HTMLElement;
-    const appView = document.querySelector('#root') as HTMLDivElement;
+  const closeAnimationEndHandler = () => {
+    modalRef.current?.close();
+  };
 
+  useEffect(() => {
     if (open) {
-      // store last focussed element
-      if (activeElement) {
-        lastFocus.current = activeElement;
-      }
-
-      // reset the visible state
-      setVisible(true);
-
-      // make sure main content is hidden for screen readers and inert
-      if (appView) {
-        appView.inert = true;
-      }
-
-      // prevent scrolling under the modal
-      document.body.style.marginRight = `${scrollbarSize()}px`;
-      document.body.style.overflowY = 'hidden';
+      openModalEvent();
     } else {
-      if (appView) {
-        appView.inert = false;
-      }
-
-      document.body.style.removeProperty('margin-right');
-      document.body.style.removeProperty('overflow-y');
+      closeModalEvent();
     }
-  }, [open]);
+  }, [openModalEvent, closeModalEvent, open]);
 
-  useEffect(() => {
-    if (visible) {
-      // focus the first element in the modal
-      if (modalRef.current) {
-        const interactiveElement = modalRef.current.querySelectorAll(
-          'div[role="dialog"] input, div[role="dialog"] a, div[role="dialog"] button, div[role="dialog"] [tabindex]',
-        )[0] as HTMLElement | null;
-
-        if (interactiveElement) interactiveElement.focus();
-      }
-    } else {
-      // restore last focussed element
-      if (lastFocus.current) {
-        lastFocus.current.focus();
-      }
+  const clickHandler: ReactEventHandler<HTMLDialogElement> = (event) => {
+    // Backdrop click (the dialog itself) will close the modal
+    if (event.target === modalRef.current) {
+      onClose?.();
+      handleClose();
     }
-  }, [visible]);
-
-  if (!open && !visible) return null;
+  };
 
   return ReactDOM.createPortal(
-    <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
-      <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
-        <div className={styles.backdrop} onClick={onClose} data-testid={testId('backdrop')} />
-        <div className={styles.container} {...ariaAtributes}>
-          <AnimationComponent open={open} duration={200} className={animationContainerClassName}>
-            {children}
-          </AnimationComponent>
-        </div>
-      </div>
-    </Fade>,
+    <dialog
+      className={classNames(className, { [styles.centered]: centered })}
+      onKeyDown={keyDownHandler}
+      onClose={closeHandler}
+      onClick={clickHandler}
+      ref={modalRef}
+      role={role}
+      {...ariaAttributes}
+    >
+      <AnimationComponent open={open} duration={300} className={animationContainerClassName} onCloseAnimationEnd={closeAnimationEndHandler}>
+        {children}
+      </AnimationComponent>
+    </dialog>,
     document.querySelector('body') as HTMLElement,
   );
 };
diff --git a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
index 9fbc7883e..3ced92a6e 100644
--- a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
+++ b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { Offer } from '@jwp/ott-common/types/checkout';
 import { formatLocalizedDate, formatPrice } from '@jwp/ott-common/src/utils/formatting';
 
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 
 import styles from './OfferSwitch.module.scss';
 
diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
index b209a7058..c276b0965 100644
--- a/packages/ui-react/src/components/Payment/Payment.tsx
+++ b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -18,7 +18,7 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import OfferSwitch from '../OfferSwitch/OfferSwitch';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 
diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
index 57c66f0d5..1620f8f2e 100644
--- a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
+++ b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -19,10 +19,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
     </div>
     <div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_cardnumber"
         >
           user:payment.card_number
@@ -31,8 +31,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_cardnumber"
           aria-invalid="false"
           aria-label="user:payment.card_number_hidden"
+          aria-required="false"
           autocomplete="cc-number"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_cardnumber"
           name="cardNumber"
           readonly=""
@@ -44,10 +45,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_cardDetails_c57ff5"
       >
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardexpiry"
           >
             user:payment.expiry_date
@@ -55,8 +56,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           <input
             aria-describedby="helper_text_1235_cardexpiry"
             aria-invalid="false"
+            aria-required="false"
             autocomplete="cc-exp"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardexpiry"
             name="cardExpiry"
             readonly=""
@@ -65,10 +67,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           />
         </div>
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardsecuritycode"
           >
             user:payment.security_code
@@ -77,8 +79,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-describedby="helper_text_1235_cardsecuritycode"
             aria-invalid="false"
             aria-label="user:payment.security_code_hidden"
+            aria-required="false"
             autocomplete="cc-csc"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardsecuritycode"
             name="cardSecurityCode"
             readonly=""
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
index 9d8092101..9d6220ebc 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -6,10 +6,10 @@ import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './PaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index f69cb6a33..9b31e0461 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -4,12 +4,12 @@ import type { CleengCaptureField, CleengCaptureQuestionField, PersonalDetailsFor
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import Dropdown from '../Dropdown/Dropdown';
-import Checkbox from '../Checkbox/Checkbox';
-import Radio from '../Radio/Radio';
-import DateField from '../DateField/DateField';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import Radio from '../form-fields/Radio/Radio';
+import DateField from '../form-fields/DateField/DateField';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
@@ -21,7 +21,7 @@ type Props = {
   error?: string;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
-  onQuestionChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onQuestionChange: React.ChangeEventHandler;
   questionValues: Record<string, string>;
   questionErrors: Record<string, string>;
 };
@@ -63,11 +63,11 @@ const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields,
     if (values.length === 1 && values[0].value === '') {
       return <TextField value={questionValues[key]} label={question} {...props} />;
     } else if (values.length === 1) {
-      return <Checkbox checked={!!questionValues[key]} value={values[0].value} header={question} label={values[0].label} {...props} />;
+      return <Checkbox checked={!!questionValues[key]} value={values[0].value} label={question} checkboxLabel={values[0].label} {...props} />;
     } else if (values.length === 2) {
-      return <Radio values={values} value={questionValues[key]} header={question} {...props} />;
+      return <Radio values={values} value={questionValues[key]} label={question} {...props} />;
     } else if (values.length > 2) {
-      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} fullWidth />;
+      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} />;
     }
 
     return null;
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 902240880..5e27e0881 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -38,22 +44,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -64,25 +76,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -92,22 +102,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -118,25 +134,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -146,22 +160,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -172,22 +192,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -198,22 +224,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -224,21 +256,27 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -249,28 +287,32 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -281,7 +323,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
          / 
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -292,7 +334,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
          / 
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -303,46 +345,52 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _error_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916 _error_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="true"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -356,92 +404,99 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         question 1 is invalid
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545 _error_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545 _error_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
       <div
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235"
+        id="helper_text_1235_key2"
       >
         Invalid answer
       </div>
     </div>
     <div
-      class="_checkbox_531f07 _error_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a _error_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
             aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
       </div>
       <div
-        class="_helperText_da58e0 _error_da58e0 _helperTextError_531f07"
+        class="_helperText_da58e0 _error_da58e0"
         id="helper_text_1235_ccc"
       >
         No way Jose
@@ -472,22 +527,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -498,22 +559,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -524,25 +591,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -552,22 +617,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -578,25 +649,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -606,22 +675,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -632,22 +707,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -658,22 +739,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -684,21 +771,27 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -709,28 +802,32 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -741,7 +838,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
          / 
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -752,7 +849,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
          / 
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -763,46 +860,52 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="false"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -810,80 +913,87 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         </select>
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
     </div>
     <div
-      class="_checkbox_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
             aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
diff --git a/packages/ui-react/src/components/Popover/Popover.module.scss b/packages/ui-react/src/components/Popover/Popover.module.scss
index adf5febe4..71b3053ed 100644
--- a/packages/ui-react/src/components/Popover/Popover.module.scss
+++ b/packages/ui-react/src/components/Popover/Popover.module.scss
@@ -3,7 +3,6 @@
 
 .popover {
   position: absolute;
-  top: 55px;
   right: 5px;
   z-index: variables.$header-z-index;
   min-width: 180px;
diff --git a/packages/ui-react/src/components/Popover/Popover.tsx b/packages/ui-react/src/components/Popover/Popover.tsx
index 894b3101b..77000f221 100644
--- a/packages/ui-react/src/components/Popover/Popover.tsx
+++ b/packages/ui-react/src/components/Popover/Popover.tsx
@@ -8,15 +8,16 @@ import styles from './Popover.module.scss';
 
 type Props = {
   children: ReactNode;
+  className?: string;
   isOpen: boolean;
   onClose: () => void;
 };
 
-const Popover: React.FC<Props> = ({ children, isOpen, onClose }: Props) => {
+const Popover: React.FC<Props> = ({ children, className, isOpen, onClose }: Props) => {
   return (
     <Slide open={isOpen} duration={250} direction="right" style={{ position: 'relative' }}>
       <DetectOutsideClick callback={onClose}>
-        <div className={classNames(styles.popover)}>{children}</div>
+        <div className={classNames(styles.popover, className)}>{children}</div>
       </DetectOutsideClick>
     </Slide>
   );
diff --git a/packages/ui-react/src/components/Radio/Radio.tsx b/packages/ui-react/src/components/Radio/Radio.tsx
deleted file mode 100644
index 9e7c06739..000000000
--- a/packages/ui-react/src/components/Radio/Radio.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Radio.module.scss';
-
-type Props = {
-  name: string;
-  value?: string;
-  values: { value: string; label: string }[];
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: ReactNode;
-  helperText?: string;
-  error?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  lang?: string;
-};
-
-const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, disabled, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('radio', name);
-
-  return (
-    <div className={error ? styles.error : undefined} {...rest}>
-      {header || !required ? (
-        <label className={styles.header} htmlFor={id} data-testid="radio-header">
-          <span lang={lang}>{header}</span>
-          {!required ? <span className={styles.note}>{t('optional')}</span> : null}
-        </label>
-      ) : null}
-      {values.map(({ value: optionValue, label: optionLabel }, index) => (
-        <div className={styles.radio} key={index} lang={lang}>
-          <input
-            value={optionValue}
-            name={name}
-            type="radio"
-            id={id + index}
-            onChange={onChange}
-            checked={value === optionValue}
-            required={required}
-            disabled={disabled}
-          />
-          <label htmlFor={id + index}>{optionLabel}</label>
-        </div>
-      ))}
-      <HelperText error={error}>{helperText}</HelperText>
-    </div>
-  );
-};
-
-export default Radio;
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 85c6d943f..314584c51 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -6,22 +6,17 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
-import useToggle from '@jwp/ott-hooks-react/src/useToggle';
-import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
-import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 import env from '@jwp/ott-common/src/env';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import IconButton from '../IconButton/IconButton';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
-import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -56,8 +51,6 @@ const RegistrationForm: React.FC<Props> = ({
   consentErrors,
   socialLoginURLs,
 }: Props) => {
-  const [viewPassword, toggleViewPassword] = useToggle();
-
   const { t, i18n } = useTranslation('account');
   const location = useLocation();
 
@@ -106,26 +99,14 @@ const RegistrationForm: React.FC<Props> = ({
         autoComplete="email"
         required
       />
-      <TextField
+      <PasswordField
         value={values.password}
         onChange={onChange}
         onBlur={onBlur}
         label={t('registration.password')}
         placeholder={t('registration.password')}
         error={!!errors.password}
-        helperText={
-          <React.Fragment>
-            <PasswordStrength password={values.password} />
-            {t('registration.password_helper_text')}
-          </React.Fragment>
-        }
         name="password"
-        type={viewPassword ? 'text' : 'password'}
-        rightControl={
-          <IconButton aria-label={t('registration.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
-            <Icon icon={viewPassword ? Visibility : VisibilityOff} />
-          </IconButton>
-        }
         autoComplete="new-password"
         required
       />
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 19b8ab12a..30363b236 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -32,22 +32,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       registration.sign_up
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         registration.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="registration.email"
@@ -58,22 +64,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         registration.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="registration.password"
@@ -82,10 +94,10 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
-            aria-label="registration.view_password"
+            aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
             type="button"
@@ -107,7 +119,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         class="_helperText_da58e0"
         id="helper_text_1235_password"
       >
-        registration.password_helper_text
+        reset.password_helper_text
       </div>
     </div>
     <button
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss b/packages/ui-react/src/components/Select/Select.module.scss
similarity index 55%
rename from packages/ui-react/src/components/Dropdown/Dropdown.module.scss
rename to packages/ui-react/src/components/Select/Select.module.scss
index 3dc8a7ce7..deb8e3366 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
+++ b/packages/ui-react/src/components/Select/Select.module.scss
@@ -10,45 +10,10 @@ $disabled-bg-color: #eee;
 $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
 
 .container {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .dropdown {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.medium {
-    .dropdown {
-      height: 48px;
-    }
-
-    .select {
-      height: 46px;
-      padding: 14px 16px;
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.dropdown {
   position: relative;
   display: grid;
   align-items: center;
-  width: 140px;
+  width: 100%;
   height: 36px;
   font-size: 1.25rem;
   background-color: rgba(0, 0, 0, 0.54);
@@ -71,33 +36,16 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     justify-self: end;
   }
 
-  &.fullWidth {
-    width: 100%;
-    margin-left: initial;
+  &.error {
+    border-color: theme.$text-field-error-color;
   }
 
-  .select {
-    z-index: 1;
-    width: 100%;
-    height: 36px;
-    margin: 0;
-    padding: 2px 8px;
-    color: variables.$white;
-    font-family: inherit;
-    font-weight: theme.$body-font-weight-bold;
-    font-size: 1rem;
-    line-height: variables.$base-line-height;
-    text-overflow: ellipsis;
-    background: none;
-    border: none;
-    outline: none;
-    cursor: inherit;
-    -webkit-appearance: none; /* stylelint-disable-line */
-    appearance: none;
+  &.medium {
+    height: 48px;
 
-    // Remove IE arrow
-    &::-ms-expand {
-      display: none;
+    .select {
+      height: 46px;
+      padding: 14px 16px;
     }
   }
 
@@ -106,16 +54,41 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     grid-area: select;
   }
 
-  & .disabled {
-    background-color: $disabled-bg-color;
-    background-image: $disabled-gradient;
+  &.disabled {
     cursor: not-allowed;
   }
 
   &:hover,
   &:focus-within {
-    border-color: $select-focus;
-    outline: none;
+    &:not(.disabled) {
+      border-color: $select-focus;
+      outline: none;
+    }
+  }
+}
+
+.select {
+  z-index: 1;
+  width: 100%;
+  height: 36px;
+  margin: 0;
+  padding: 2px 8px;
+  color: variables.$white;
+  font-family: inherit;
+  font-weight: theme.$body-font-weight-bold;
+  font-size: 1rem;
+  line-height: variables.$base-line-height;
+  text-overflow: ellipsis;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: inherit;
+  -webkit-appearance: none; /* stylelint-disable-line */
+  appearance: none;
+
+  // Remove IE arrow
+  &::-ms-expand {
+    display: none;
   }
 }
 
diff --git a/packages/ui-react/src/components/Select/Select.tsx b/packages/ui-react/src/components/Select/Select.tsx
new file mode 100644
index 000000000..b6a740793
--- /dev/null
+++ b/packages/ui-react/src/components/Select/Select.tsx
@@ -0,0 +1,93 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Select.module.scss';
+
+type HTMLSelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = HTMLSelectProps & {
+  id?: string;
+  helperTextId?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  defaultLabel?: string;
+} & FormControlProps;
+
+const Select = ({
+  required,
+  className,
+  disabled,
+  defaultLabel,
+  options,
+  optionsStyle,
+  editing = true,
+  value,
+  onChange,
+  id,
+  name,
+  error,
+  helperTextId,
+  type,
+  ...rest
+}: Props) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const inputProps: HTMLSelectProps = {
+    id,
+    name,
+    value,
+    disabled,
+    className: styles.select,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...rest,
+  };
+
+  return (
+    <div className={classNames({ [containerClassName]: editing })}>
+      <select {...inputProps} onChange={handleChange}>
+        {defaultLabel && (
+          <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
+            {defaultLabel}
+          </option>
+        )}
+        {options &&
+          options.map((option) => (
+            <option
+              className={classNames(styles.option, optionsStyle)}
+              key={typeof option === 'string' ? option : option.value}
+              value={typeof option === 'string' ? option : option.value}
+            >
+              {typeof option === 'string' ? option : option.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export default Select;
diff --git a/packages/ui-react/src/components/Shelf/Shelf.module.scss b/packages/ui-react/src/components/Shelf/Shelf.module.scss
index 5a3473242..f78541588 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.module.scss
+++ b/packages/ui-react/src/components/Shelf/Shelf.module.scss
@@ -1,3 +1,5 @@
+@use '@jwp/ott-ui-react/src/styles/theme';
+
 .shelf {
   margin: 0 0;
   color: var(--primary-color);
@@ -15,6 +17,14 @@
   }
 }
 
+.loadingTitle {
+  width: 35%;
+  min-height: 28px;
+  margin-bottom: 12px;
+  background-color: theme.$card-loading-bg-color;
+  border-radius: 5px;
+};
+
 .title {
   width: 100%;
   min-height: 28px;
diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
index eb89179b4..e1d05a5c2 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.tsx
+++ b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -146,7 +146,7 @@ const Shelf = ({
 
   return (
     <div className={classNames(styles.shelf)}>
-      {!featured ? <h2 className={classNames(styles.title)}>{title || playlist.title}</h2> : null}
+      {featured ? null : loading ? <div className={styles.loadingTitle} /> : <h2 className={classNames(styles.title)}>{title || playlist.title}</h2>}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
index 7bc53c321..f22948f2b 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -2,22 +2,6 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 
-//
-// jwSidebarBackdrop
-// --------------------------------
-
-.backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: variables.$sidebar-z-index - 1;
-  display: none;
-  width: 100%;
-  height: 100%;
-  background: theme.$modal-backdrop-bg;
-  transition: all 0.3s ease;
-}
-
 //
 // jwSidebar
 // --------------------------------
@@ -26,20 +10,17 @@
   position: fixed;
   top: 0;
   z-index: variables.$sidebar-z-index;
-  display: none;
+  display: inline-block;
   width: 270px;
   max-width: 90vw;
   height: 100dvh;
   overflow-y: auto;
   background-color: var(--body-background-color);
-  transform: translateX(-100%);
-  transition: transform 0.3s cubic-bezier(0.52, 0.51, 0.2, 1);
 
   ul {
     margin: 0;
-    padding: 0 0 calc(#{variables.$base-spacing} / 2) 0;
+    padding: 0;
     list-style-type: none;
-    border-bottom: 1px solid rgba(variables.$white, 0.12);
   }
 }
 
@@ -50,33 +31,9 @@
 
 .group {
   display: flex;
+  gap: variables.$base-spacing;
   flex-direction: column;
   max-height: 100%;
   padding: variables.$base-spacing 0;
   -webkit-overflow-scrolling: touch;
 }
-
-//
-// mediaQueries
-// --------------------------------
-
-@include responsive.mobile-and-tablet() {
-  .sidebar {
-    display: inline-block;
-
-    &.open {
-      transform: translateX(0);
-    }
-  }
-
-  .backdrop {
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-
-    &.visible {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
index 018a9c66f..a231a6bf3 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from '@testing-library/react';
 
 import { renderWithRouter } from '../../../test/utils';
 import Button from '../Button/Button';
@@ -8,23 +9,55 @@ import Sidebar from './Sidebar';
 describe('<SideBar />', () => {
   const playlistMenuItems = [<Button key="key" label="Home" to="/" />];
 
-  test('renders sideBar opened', () => {
-    const { container } = renderWithRouter(
-      <Sidebar isOpen={true} onClose={vi.fn()}>
-        {playlistMenuItems}
-      </Sidebar>,
+  beforeAll(() => {
+    vi.useFakeTimers();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  test('renders sideBar opened', async () => {
+    const { baseElement, getByText } = await act(() =>
+      renderWithRouter(
+        <Sidebar isOpen={true} onClose={vi.fn()}>
+          {playlistMenuItems}
+        </Sidebar>,
+      ),
     );
 
-    expect(container).toMatchSnapshot();
+    await act(() => vi.runAllTimers());
+
+    expect(getByText('Home')).toBeVisible();
+    expect(baseElement).toMatchSnapshot();
   });
 
-  test('renders sideBar closed', () => {
-    const { container } = renderWithRouter(
-      <Sidebar isOpen={false} onClose={vi.fn()}>
-        {playlistMenuItems}
-      </Sidebar>,
+  test('renders sideBar closed', async () => {
+    const { baseElement, queryByText } = await act(() =>
+      renderWithRouter(
+        <Sidebar isOpen={false} onClose={vi.fn()}>
+          {playlistMenuItems}
+        </Sidebar>,
+      ),
     );
 
-    expect(container).toMatchSnapshot();
+    await act(() => vi.runAllTimers());
+
+    expect(queryByText('Home')).toBeNull();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  test('should add overflowY hidden on the body element when open', async () => {
+    const onClose = vi.fn();
+    const { container, rerender } = await act(() => renderWithRouter(<Sidebar isOpen={true} onClose={onClose} />));
+
+    expect(container.parentNode).toHaveStyle({ overflowY: 'hidden' });
+
+    act(() => rerender(<Sidebar isOpen={false} onClose={onClose} />));
+
+    await act(() => vi.runAllTimers()); // wait for close animation
+
+    expect(onClose).toHaveBeenCalled();
+    expect(container.parentNode).not.toHaveStyle({ overflowY: 'hidden' });
   });
 });
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
index be697c743..44d1d8058 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.tsx
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
-import classNames from 'classnames';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import Close from '@jwp/ott-theme/assets/icons/close.svg?react';
 
 import IconButton from '../IconButton/IconButton';
 import Icon from '../Icon/Icon';
-import scrollbarSize from '../../utils/dom';
+import Modal, { type AnimationProps } from '../Modal/Modal';
+import Slide from '../Animation/Slide/Slide';
 
 import styles from './Sidebar.module.scss';
 
@@ -15,83 +15,18 @@ type SidebarProps = {
   children?: ReactNode;
 };
 
+const SlideLeft = ({ children, ...props }: AnimationProps) => (
+  <Slide direction="left" {...props}>
+    {children}
+  </Slide>
+);
+
 const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
   const { t } = useTranslation('menu');
-  const lastFocusedElementRef = useRef<HTMLElement | null>(null);
-  const sidebarRef = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-
-  const htmlAttributes = { inert: !isOpen ? '' : undefined }; // inert is not yet officially supported in react. see: https://github.com/facebook/react/pull/24730
-
-  useEffect(() => {
-    if (isOpen) {
-      // Before inert on the body is applied in Layout, we need to set this ref
-      lastFocusedElementRef.current = document.activeElement as HTMLElement;
-
-      // When opened, adjust the margin-right to accommodate for the scrollbar width to prevent UI shifts in background
-      document.body.style.marginRight = `${scrollbarSize()}px`;
-      document.body.style.overflowY = 'hidden';
-
-      // Scroll the sidebar to the top if the user has previously scrolled down in the sidebar
-      if (sidebarRef.current) {
-        sidebarRef.current.scrollTop = 0;
-      }
-    } else {
-      document.body.style.removeProperty('margin-right');
-      document.body.style.removeProperty('overflow-y');
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (isOpen && event.key === 'Escape') {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscKey);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscKey);
-    };
-  }, [isOpen, onClose]);
-
-  useEffect(() => {
-    const sidebarElement = sidebarRef.current;
-    const handleTransitionEnd = () => {
-      setVisible(isOpen);
-    };
-
-    sidebarElement?.addEventListener('transitionend', handleTransitionEnd);
-
-    return () => {
-      sidebarElement?.removeEventListener('transitionend', handleTransitionEnd);
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (visible) {
-      sidebarRef.current?.querySelectorAll('a')[0]?.focus({ preventScroll: true });
-    } else {
-      lastFocusedElementRef.current?.focus({ preventScroll: true });
-    }
-  }, [visible]);
 
   return (
-    <Fragment>
-      <div
-        className={classNames(styles.backdrop, {
-          [styles.visible]: isOpen,
-        })}
-        onClick={onClose}
-      />
-      <div
-        ref={sidebarRef}
-        className={classNames(styles.sidebar, {
-          [styles.open]: isOpen,
-        })}
-        id="sidebar"
-        {...htmlAttributes}
-      >
+    <Modal open={isOpen} onClose={onClose} AnimationComponent={SlideLeft}>
+      <div className={styles.sidebar} id="sidebar">
         <div className={styles.heading}>
           <IconButton onClick={onClose} aria-label={t('close_menu')}>
             <Icon icon={Close} />
@@ -101,7 +36,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
           {children}
         </nav>
       </div>
-    </Fragment>
+    </Modal>
   );
 };
 
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index d63f367da..147084db0 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -1,102 +1,71 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<SideBar /> > renders sideBar closed 1`] = `
-<div>
-  <div
-    class="_backdrop_577f70"
+<body
+  style=""
+>
+  <div />
+  <dialog
+    class=""
   />
-  <div
-    class="_sidebar_577f70"
-    id="sidebar"
-    inert=""
-  >
-    <div
-      class="_heading_577f70"
-    >
-      <button
-        aria-label="close_menu"
-        class="_iconButton_0fef65"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="_icon_585b29"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-        </svg>
-      </button>
-    </div>
-    <nav
-      class="_group_577f70"
-    >
-      <a
-        aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
-        href="/"
-      >
-        <span>
-          Home
-        </span>
-      </a>
-    </nav>
-  </div>
-</div>
+</body>
 `;
 
 exports[`<SideBar /> > renders sideBar opened 1`] = `
-<div>
-  <div
-    class="_backdrop_577f70 _visible_577f70"
-  />
-  <div
-    class="_sidebar_577f70 _open_577f70"
-    id="sidebar"
+<body
+  style="margin-right: 0px; overflow-y: hidden;"
+>
+  <div />
+  <dialog
+    class=""
+    open=""
   >
     <div
-      class="_heading_577f70"
+      style="transition: transform 0.3s ease, opacity 0.3s ease; transform: translate(0, 0); opacity: 1; z-index: 15;"
     >
-      <button
-        aria-label="close_menu"
-        class="_iconButton_0fef65"
-        type="button"
+      <div
+        class="_sidebar_577f70"
+        id="sidebar"
       >
-        <svg
-          aria-hidden="true"
-          class="_icon_585b29"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="_heading_577f70"
         >
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          />
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-        </svg>
-      </button>
+          <button
+            aria-label="close_menu"
+            class="_iconButton_0fef65"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_585b29"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+            </svg>
+          </button>
+        </div>
+        <nav
+          class="_group_577f70"
+        >
+          <a
+            aria-current="page"
+            class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+            href="/"
+          >
+            <span>
+              Home
+            </span>
+          </a>
+        </nav>
+      </div>
     </div>
-    <nav
-      class="_group_577f70"
-    >
-      <a
-        aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
-        href="/"
-      >
-        <span>
-          Home
-        </span>
-      </a>
-    </nav>
-  </div>
-</div>
+  </dialog>
+</body>
 `;
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
index 9c8daf45c..24c78503d 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -16,6 +16,19 @@
   }
 }
 
+.popover {
+  top: 10px;
+}
+
+.buttonContainer {
+  // this is a visual fix for putting a button with background besides a transparent button
+  margin-left: variables.$base-spacing;
+
+  > button:first-child {
+    margin-right: calc(#{variables.$base-spacing} / 2);
+  }
+}
+
 .menuItems {
   width: auto;
   margin: 0;
@@ -28,10 +41,6 @@
   }
 }
 
-.button {
-  margin-bottom: variables.$base-spacing;
-}
-
 .divider {
   @include divider-before(variables.$base-spacing, 0, 0.12);
 
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
index 8ac1fcc28..f422eb851 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
@@ -1,20 +1,27 @@
 import React from 'react';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { mockService } from '@jwp/ott-common/test/mockService';
-import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
 import { renderWithRouter } from '../../../test/utils';
 
 import UserMenu from './UserMenu';
 
 describe('<UserMenu>', () => {
-  beforeEach(() => {
-    // TODO: Remove AccountController from component
-    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
-  });
-
   test('renders and matches snapshot', () => {
-    const { container } = renderWithRouter(<UserMenu focusable={true} showPaymentsItem={true} />);
+    const { container } = renderWithRouter(
+      <UserMenu
+        open={false}
+        onOpen={vi.fn()}
+        onClose={vi.fn()}
+        favoritesEnabled
+        isLoggedIn
+        onLoginButtonClick={vi.fn()}
+        onSelectProfile={vi.fn()}
+        profile={null}
+        onSignUpButtonClick={vi.fn()}
+        profilesEnabled={true}
+        profileLoading={false}
+        profiles={[]}
+      />,
+    );
 
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index 8cfc147ab..4c94dbfcb 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -1,104 +1,89 @@
-import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
-import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
-import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
-import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
-import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
-import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
 import type { Profile } from '@jwp/ott-common/types/profiles';
 
-import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
 import ProfileCircle from '../ProfileCircle/ProfileCircle';
+import Popover from '../Popover/Popover';
+import Panel from '../Panel/Panel';
+import ProfilesMenu from '../ProfilesMenu/ProfilesMenu';
+import Button from '../Button/Button';
+import UserMenuNav from '../UserMenuNav/UserMenuNav';
+import HeaderActionButton from '../Header/HeaderActionButton';
 
 import styles from './UserMenu.module.scss';
 
 type Props = {
-  small?: boolean;
-  focusable: boolean;
-  showPaymentsItem: boolean;
-  onButtonClick?: () => void;
-  titleId?: string;
-  currentProfile?: Profile | null;
-  favoritesEnabled?: boolean;
+  open: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+  onLoginButtonClick: () => void;
+  onSignUpButtonClick: () => void;
+  isLoggedIn: boolean;
+  favoritesEnabled: boolean;
+  profilesEnabled: boolean;
+  profile: Profile | null;
+  profiles: Profile[] | null;
+  profileLoading: boolean;
+  onSelectProfile: (params: { id: string; avatarUrl: string }) => void;
 };
 
-const UserMenu = ({ showPaymentsItem, small = false, onButtonClick, currentProfile, favoritesEnabled, focusable, titleId }: Props) => {
-  const { t } = useTranslation('user');
-  const navigate = useNavigate();
-  const accountController = getModule(AccountController);
-  const tabIndex = focusable ? 0 : -1;
+const UserMenu = ({
+  isLoggedIn,
+  favoritesEnabled,
+  open,
+  onClose,
+  onOpen,
+  onLoginButtonClick,
+  onSignUpButtonClick,
+  profilesEnabled,
+  profile,
+  profiles,
+  profileLoading,
+  onSelectProfile,
+}: Props) => {
+  const { t } = useTranslation('menu');
 
-  const onLogout = useCallback(async () => {
-    if (onButtonClick) {
-      onButtonClick();
-    }
-
-    await accountController.logout();
-    navigate('/', { replace: true });
-  }, [onButtonClick, navigate, accountController]);
+  if (!isLoggedIn) {
+    return (
+      <div className={styles.buttonContainer}>
+        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
+        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
+      </div>
+    );
+  }
 
   return (
-    <>
-      <h2 className={styles.sectionHeader} id={titleId}>
-        {t('nav.settings')}
-      </h2>
-      <ul className={styles.menuItems}>
-        {currentProfile && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={userProfileURL(currentProfile.id ?? '')}
-              label={t('nav.profile')}
-              startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
-            />
-          </li>
-        )}
-        <li>
-          <MenuButton
-            small={small}
-            onClick={onButtonClick}
-            to={PATH_USER_ACCOUNT}
-            label={t('nav.account')}
-            startIcon={<Icon icon={AccountCircle} />}
-            tabIndex={tabIndex}
-          />
-        </li>
-        {favoritesEnabled && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={PATH_USER_FAVORITES}
-              label={t('nav.favorites')}
-              startIcon={<Icon icon={Favorite} />}
-              tabIndex={tabIndex}
-            />
-          </li>
-        )}
-        {showPaymentsItem && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={PATH_USER_PAYMENTS}
-              label={t('nav.payments')}
-              startIcon={<Icon icon={BalanceWallet} />}
-              tabIndex={tabIndex}
-            />
-          </li>
-        )}
-        <li className={classNames(styles.divider, { [styles.small]: small })}>
-          <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
-        </li>
-      </ul>
-    </>
+    <div>
+      <HeaderActionButton
+        aria-label={t('open_user_menu')}
+        aria-controls="menu_panel"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        onClick={onOpen}
+        onBlur={onClose}
+      >
+        {profilesEnabled && profile ? <ProfileCircle src={profile.avatar_url} alt={profile.name || t('profile_icon')} /> : <Icon icon={AccountCircle} />}
+      </HeaderActionButton>
+      <Popover className={styles.popover} isOpen={open} onClose={onClose}>
+        <Panel id="menu_panel">
+          <div onFocus={onOpen} onBlur={onClose}>
+            {profilesEnabled && (
+              <ProfilesMenu
+                onButtonClick={onClose}
+                profiles={profiles ?? []}
+                currentProfile={profile}
+                selectingProfile={profileLoading}
+                selectProfile={onSelectProfile}
+                small
+              />
+            )}
+            <UserMenuNav focusable={open} onButtonClick={onClose} showPaymentItems={true} currentProfile={profile} favoritesEnabled={favoritesEnabled} small />
+          </div>
+        </Panel>
+      </Popover>
+    </div>
   );
 };
 
diff --git a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index b971d187b..0a2bac89e 100644
--- a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -2,91 +2,26 @@
 
 exports[`<UserMenu> > renders and matches snapshot 1`] = `
 <div>
-  <h2
-    class="_sectionHeader_457528"
-  >
-    nav.settings
-  </h2>
-  <ul
-    class="_menuItems_457528"
-  >
-    <li>
-      <a
-        class="_menuButton_91706b"
-        href="/u/my-account"
-        tabindex="0"
-      >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.account
-        </span>
-      </a>
-    </li>
-    <li>
-      <a
-        class="_menuButton_91706b"
-        href="/u/payments"
-        tabindex="0"
-      >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.payments
-        </span>
-      </a>
-    </li>
-    <li
-      class="_divider_457528"
+  <div>
+    <button
+      aria-controls="menu_panel"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="open_user_menu"
+      class="_iconButton_0fef65 _iconButton_f4f7a7"
+      type="button"
     >
-      <div
-        class="_menuButton_91706b"
-        role="button"
-        tabindex="0"
+      <svg
+        aria-hidden="true"
+        class="_icon_585b29"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.logout
-        </span>
-      </div>
-    </li>
-  </ul>
+        <path
+          d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx
new file mode 100644
index 000000000..2baf6bf93
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import { mockService } from '@jwp/ott-common/test/mockService';
+import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
+
+import { renderWithRouter } from '../../../test/utils';
+
+import UserMenuNav from './UserMenuNav';
+
+describe('<UserMenu>', () => {
+  beforeEach(() => {
+    // TODO: Remove AccountController from component
+    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
+  });
+
+  test('renders and matches snapshot', () => {
+    const { container } = renderWithRouter(<UserMenuNav focusable={true} showPaymentItems={true} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
new file mode 100644
index 000000000..962ff8298
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
@@ -0,0 +1,104 @@
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
+import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
+import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
+import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
+import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
+import type { Profile } from '@jwp/ott-common/types/profiles';
+
+import styles from '../UserMenu/UserMenu.module.scss'; // TODO inherit styling
+import MenuButton from '../MenuButton/MenuButton';
+import Icon from '../Icon/Icon';
+import ProfileCircle from '../ProfileCircle/ProfileCircle';
+
+type Props = {
+  small?: boolean;
+  focusable: boolean;
+  showPaymentItems: boolean;
+  onButtonClick?: () => void;
+  titleId?: string;
+  currentProfile?: Profile | null;
+  favoritesEnabled?: boolean;
+};
+
+const UserMenuNav = ({ showPaymentItems, small = false, onButtonClick, currentProfile, favoritesEnabled, focusable, titleId }: Props) => {
+  const { t } = useTranslation('user');
+  const navigate = useNavigate();
+  const accountController = getModule(AccountController);
+  const tabIndex = focusable ? 0 : -1;
+
+  const onLogout = useCallback(async () => {
+    if (onButtonClick) {
+      onButtonClick();
+    }
+
+    await accountController.logout();
+    navigate('/', { replace: true });
+  }, [onButtonClick, navigate, accountController]);
+
+  return (
+    <>
+      <h2 className={styles.sectionHeader} id={titleId}>
+        {t('nav.settings')}
+      </h2>
+      <ul className={styles.menuItems}>
+        {currentProfile && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={userProfileURL(currentProfile.id ?? '')}
+              label={t('nav.profile')}
+              startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
+            />
+          </li>
+        )}
+        <li>
+          <MenuButton
+            small={small}
+            onClick={onButtonClick}
+            to={PATH_USER_ACCOUNT}
+            label={t('nav.account')}
+            startIcon={<Icon icon={AccountCircle} />}
+            tabIndex={tabIndex}
+          />
+        </li>
+        {favoritesEnabled && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_FAVORITES}
+              label={t('nav.favorites')}
+              startIcon={<Icon icon={Favorite} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        {showPaymentItems && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_PAYMENTS}
+              label={t('nav.payments')}
+              startIcon={<Icon icon={BalanceWallet} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        <li className={classNames(styles.divider, { [styles.small]: small })}>
+          <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default UserMenuNav;
diff --git a/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
new file mode 100644
index 000000000..b971d187b
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
@@ -0,0 +1,92 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<UserMenu> > renders and matches snapshot 1`] = `
+<div>
+  <h2
+    class="_sectionHeader_457528"
+  >
+    nav.settings
+  </h2>
+  <ul
+    class="_menuItems_457528"
+  >
+    <li>
+      <a
+        class="_menuButton_91706b"
+        href="/u/my-account"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.account
+        </span>
+      </a>
+    </li>
+    <li>
+      <a
+        class="_menuButton_91706b"
+        href="/u/payments"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.payments
+        </span>
+      </a>
+    </li>
+    <li
+      class="_divider_457528"
+    >
+      <div
+        class="_menuButton_91706b"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.logout
+        </span>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/ui-react/src/components/VideoList/VideoList.tsx b/packages/ui-react/src/components/VideoList/VideoList.tsx
index ef0293d32..55d834bc5 100644
--- a/packages/ui-react/src/components/VideoList/VideoList.tsx
+++ b/packages/ui-react/src/components/VideoList/VideoList.tsx
@@ -58,6 +58,7 @@ function VideoList({
           hasMore={hasMore ?? false}
           className={styles.list}
           loader={<InfiniteScrollLoader key="loader" />}
+          useWindow={false}
         >
           {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
             <li key={playlistItem.mediaid}>
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
similarity index 81%
rename from packages/ui-react/src/components/Checkbox/Checkbox.module.scss
rename to packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
index 8f8491a28..8bd161386 100644
--- a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
@@ -9,6 +9,10 @@
     font-size: 14px;
     cursor: pointer;
 
+    > span {
+      margin-right: 4px;
+    }
+
     a {
       color: variables.$white;
       font-weight: var(--body-font-weight-bold);
@@ -24,20 +28,6 @@
     }
   }
 
-  .header {
-    display: inline-block;
-    width: 100%;
-    margin-bottom: 8px;
-    font-weight: var(--body-font-weight-bold);
-    text-align: left;
-
-    > span {
-      float: right;
-      color: rgba(variables.$white, 0.7);
-      font-weight: normal;
-    }
-  }
-
   input {
     display: inline-flex;
     flex-shrink: 0;
@@ -77,7 +67,7 @@
 
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
@@ -96,10 +86,3 @@
   display: flex;
   align-items: center;
 }
-
-.helperTextError {
-  margin-top: -5px;
-  margin-left: 35px;
-  color: theme.$text-field-error-color;
-  font-size: 10px;
-}
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
new file mode 100644
index 000000000..ed2d6f7ba
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Checkbox from './Checkbox';
+
+describe('<Checkbox>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Checkbox checkboxLabel="label" name="name" value="value" onChange={vi.fn()} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should set the checked state', () => {
+    const { getByLabelText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
+
+    expect(getByLabelText('label')).toBeChecked();
+  });
+
+  test('should mark when required ', () => {
+    const { getByText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} required />);
+
+    expect(getByText('*')).toBeVisible();
+  });
+});
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..4476c0d13
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -0,0 +1,77 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './Checkbox.module.scss';
+
+type HTMLCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLCheckboxProps & {
+  checkboxLabel?: React.ReactNode;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Checkbox: React.FC<Props> = ({
+  className,
+  label,
+  checkboxLabel,
+  name,
+  onChange,
+  editing = true,
+  value,
+  helperText,
+  error,
+  required,
+  lang,
+  size,
+  ...rest
+}) => {
+  const fieldClassName = classNames(styles.checkbox, { [styles.error]: error }, className);
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      className={fieldClassName}
+      name={name}
+      label={label}
+      editing={editing}
+      required={required}
+      error={error}
+      helperText={helperText}
+      renderInput={({ id, helperTextId }) => (
+        <div className={styles.row}>
+          <input
+            name={name}
+            type="checkbox"
+            id={id}
+            value={value}
+            aria-required={required}
+            aria-describedby={helperTextId}
+            {...rest}
+            onChange={handleChange}
+            readOnly={!editing}
+          />
+          <label htmlFor={id} lang={lang}>
+            {required ? (
+              <span role="presentation" aria-hidden="true">
+                *
+              </span>
+            ) : (
+              ''
+            )}
+            {checkboxLabel}
+          </label>
+        </div>
+      )}
+    />
+  );
+};
+
+export default Checkbox;
diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
similarity index 67%
rename from packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index dbf01ce28..07d166cc5 100644
--- a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,24 +3,21 @@
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value="value"
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
similarity index 70%
rename from packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
index b8a970262..3d13971c5 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -3,23 +3,29 @@
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostSecurityCode"
+    class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardcvc"
     >
       payment.security_code
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardcvc"
         aria-invalid="false"
         aria-label="payment.security_code"
+        aria-required="true"
         autocomplete="cc-csc"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardcvc"
         name="cardCVC"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
index 04274f67f..c73763e68 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostExpiryDate"
+    class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardexpiry"
     >
       Expiry date
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardexpiry"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-exp"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
index 471171761..1830eca82 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostCreditCardNumber"
+    class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardnumber"
     >
       Card number
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardnumber"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-number"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardnumber"
         name="cardNumber"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
new file mode 100644
index 000000000..62488fdec
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
@@ -0,0 +1,64 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+@use '../../Input/Input.module.scss';
+
+.dateField {
+  width: 100%;
+  margin-bottom: 8px;
+
+  &.error {
+    .container {
+      border-color: theme.$text-field-error-color;
+    }
+  }
+
+  &.disabled {
+    .container {
+      opacity: 0.7;
+    }
+  }
+
+  &:hover {
+    &:not(.disabled) {
+      .container {
+        background-color: theme.$text-field-hover-bg-color;
+        border-color: theme.$text-field-hover-border-color;
+      }
+    }
+  }
+}
+
+// below is inferred and extended from Input.module.scss
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  text-align: center;
+
+  &::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  &[name="date"] {
+    width: 43px;
+    padding-right: 4px;
+  }
+
+  &[name="month"] {
+    width: 35px;
+    padding-right: 4px;
+    padding-left: 4px;
+  }
+
+  &[name="year"] {
+    width: 60px;
+    padding-left: 4px;
+  }
+}
+
+.hiddenInput {
+  display: none;
+}
diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
similarity index 50%
rename from packages/ui-react/src/components/DateField/DateField.tsx
rename to packages/ui-react/src/components/form-fields/DateField/DateField.tsx
index 41b7e6130..a9f1987aa 100644
--- a/packages/ui-react/src/components/DateField/DateField.tsx
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
@@ -1,32 +1,47 @@
-import React, { type ReactNode, useRef, useState } from 'react';
+import React, { type InputHTMLAttributes, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
-import HelperText from '../HelperText/HelperText';
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
 
 import styles from './DateField.module.scss';
 
-type Props = {
-  className?: string;
-  label?: ReactNode;
-  name?: string;
-  value: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   format?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
-  error?: boolean;
-  required?: boolean;
-  testId?: string;
-};
+} & FormControlProps;
+
+const parseDateString = (dateString: string | undefined) => {
+  if (!dateString) return null;
 
-const parseDateString = (dateString: string) => {
   const date = new Date(dateString);
 
   return isNaN(date.getTime()) ? null : date;
 };
 
+const padLeft = (value: number) => {
+  return value > 0 && value < 10 ? `0${value}` : value.toString();
+};
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+const parseBlurValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
+const parseInputValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
 const DateField: React.FC<Props> = ({
   className,
   label,
@@ -36,12 +51,12 @@ const DateField: React.FC<Props> = ({
   onChange,
   format = 'YYYY-MM-DD',
   name,
+  editing,
+  lang,
   required,
   onFocus,
   testId,
-  ...rest
 }: Props) => {
-  const { t } = useTranslation('common');
   const parsedDate = parseDateString(value);
 
   const [values, setValues] = useState({
@@ -55,7 +70,7 @@ const DateField: React.FC<Props> = ({
 
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
-  const DateFieldClassName = classNames(
+  const dateFieldClassName = classNames(
     styles.dateField,
     {
       [styles.error]: error,
@@ -80,26 +95,6 @@ const DateField: React.FC<Props> = ({
     }
   };
 
-  const padLeft = (value: number) => {
-    return value > 0 && value < 10 ? `0${value}` : value.toString();
-  };
-
-  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
-
-  const parseBlurValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
-  const parseInputValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
@@ -142,71 +137,75 @@ const DateField: React.FC<Props> = ({
   };
 
   return (
-    <div className={DateFieldClassName} {...rest} data-testid={testId} id={id}>
-      <label htmlFor={id} className={styles.label}>
-        {label}
-        {!required ? <span>{t('optional')}</span> : null}
-      </label>
-      <div className={styles.container}>
-        {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
-        <input
-          ref={hiddenInputRef}
-          id={`${id}-hidden`}
-          className={styles.hiddenInput}
-          name={name}
-          onChange={onChange}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-        />
-        <input
-          className={styles.input}
-          name="date"
-          placeholder="dd"
-          value={values.date}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-date`}
-          autoComplete="bday-day"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="month"
-          placeholder="mm"
-          value={values.month}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-month`}
-          autoComplete="bday-month"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="year"
-          placeholder="yyyy"
-          value={values.year}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={4}
-          type="number"
-          id={`${id}-year`}
-          autoComplete="bday-year"
-        />
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
+    <FormField
+      className={dateFieldClassName}
+      name={name}
+      helperText={helperText}
+      error={error}
+      label={label}
+      editing={editing}
+      lang={lang}
+      required={required}
+      testId={testId}
+      renderInput={() => (
+        <div className={styles.container}>
+          {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
+          <input
+            ref={hiddenInputRef}
+            id={`${id}-hidden`}
+            className={styles.hiddenInput}
+            name={name}
+            onChange={onChange}
+            aria-invalid={error}
+            aria-describedby={helperTextId}
+          />
+          <input
+            className={styles.input}
+            name="date"
+            placeholder="dd"
+            value={values.date}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-date`}
+            autoComplete="bday-day"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="month"
+            placeholder="mm"
+            value={values.month}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-month`}
+            autoComplete="bday-month"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="year"
+            placeholder="yyyy"
+            value={values.year}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={4}
+            type="number"
+            id={`${id}-year`}
+            autoComplete="bday-year"
+          />
+        </div>
+      )}
+    />
   );
 };
 
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.test.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/Dropdown/Dropdown.test.tsx
rename to packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..865328322
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
@@ -0,0 +1,46 @@
+import React, { type InputHTMLAttributes } from 'react';
+
+import { FormField } from '../../FormField/FormField';
+import Select from '../../Select/Select';
+import type { FormControlProps } from '../../../types/form';
+
+type SelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = SelectProps & {
+  defaultLabel?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Dropdown: React.FC<Props> = ({
+  name,
+  className,
+  label,
+  error,
+  helperText,
+  editing = true,
+  required = false,
+  size = 'medium',
+  testId,
+  lang,
+  ...inputProps
+}) => {
+  return (
+    <FormField
+      className={className}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      size={size}
+      lang={lang}
+      renderInput={(fieldProps) => <Select name={name} required={required} editing={editing} error={error} size={size} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default Dropdown;
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.test.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/PasswordField/PasswordField.test.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
similarity index 70%
rename from packages/ui-react/src/components/PasswordField/PasswordField.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
index a4eceecd3..8e5e708d3 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
@@ -1,27 +1,22 @@
-import React from 'react';
+import React, { type InputHTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
 import TextField from '../TextField/TextField';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
-import IconButton from '../IconButton/IconButton';
-import Icon from '../Icon/Icon';
+import PasswordStrength from '../../PasswordStrength/PasswordStrength';
+import IconButton from '../../IconButton/IconButton';
+import Icon from '../../Icon/Icon';
+import type { FormControlProps } from '../../../types/form';
 
-type Props = React.InputHTMLAttributes<HTMLInputElement> & {
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  error?: boolean;
-  value?: string;
-  label?: string;
-  placeholder?: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   helperText?: React.ReactNode;
-  name: string;
-  required?: boolean;
   showToggleView?: boolean;
   showHelperText?: boolean;
-};
+} & FormControlProps;
 
 const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperText, showHelperText = true, ...props }: Props) => {
   const { t } = useTranslation('account');
@@ -31,7 +26,7 @@ const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperTe
     <TextField
       {...props}
       helperText={
-        helperText ||
+        helperText ??
         (showHelperText ? (
           <React.Fragment>
             <PasswordStrength password={value || ''} />
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
similarity index 85%
rename from packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 52ffd8085..e339a2012 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -3,21 +3,27 @@
 exports[`<PasswordField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b _rightControl_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_password"
     >
       Label
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20 _rightControl_859b20"
     >
       <input
         aria-describedby="helper_text_1235_password"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="true"
+        class="_input_859b20"
         id="text-field_1235_password"
         name="password"
         placeholder="Placeholder"
@@ -26,7 +32,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
         value=""
       />
       <div
-        class="_control_e16c1b"
+        class="_control_859b20"
       >
         <button
           aria-label="reset.view_password"
diff --git a/packages/ui-react/src/components/Radio/Radio.module.scss b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
similarity index 77%
rename from packages/ui-react/src/components/Radio/Radio.module.scss
rename to packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
index e28160388..dddf1b517 100644
--- a/packages/ui-react/src/components/Radio/Radio.module.scss
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
@@ -1,24 +1,19 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.header {
-  display: flex;
-  margin-bottom: 8px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span.note {
-    margin-left: auto;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
 .radio {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
 
+  &.error {
+    input {
+      &:not(:checked) {
+        border: 2px solid theme.$input-field-error-color;
+      }
+    }
+  }
+
   > label {
     margin-left: calc(#{variables.$base-spacing} / 2);
     font-size: 14px;
@@ -31,12 +26,22 @@
     height: 20px;
     margin: 0;
     border-radius: 15px;
+    cursor: pointer;
     transition: all 0.1s;
     appearance: none;
 
+    &:disabled {
+      opacity: 0.6;
+      pointer-events: none;
+
+      + label {
+        pointer-events: none;
+      }
+    }
+
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
diff --git a/packages/ui-react/src/components/Radio/Radio.test.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
similarity index 94%
rename from packages/ui-react/src/components/Radio/Radio.test.tsx
rename to packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
index 177460d4d..1889d668b 100644
--- a/packages/ui-react/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
@@ -8,7 +8,7 @@ describe('<Radio>', () => {
     const { container } = render(
       <Radio
         name="radio"
-        header={'Choose a Value'}
+        label={'Choose a Value'}
         onChange={vi.fn()}
         value="value1"
         values={Array.of({ value: 'value1', label: 'Label 1 ' }, { value: 'value2', label: 'Label 2 ' }, { value: 'value3', label: 'Label 3 ' })}
diff --git a/packages/ui-react/src/components/form-fields/Radio/Radio.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
new file mode 100644
index 000000000..e37d6d0ee
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
@@ -0,0 +1,56 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../../types/form';
+import { FormField } from '../../FormField/FormField';
+
+import styles from './Radio.module.scss';
+
+type HTMLRadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLRadioProps & {
+  values: { value: string; label: string }[];
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Radio: React.FC<Props> = ({ name, onChange, label, value, editing = true, size, values, helperText, error, required, disabled, lang, ...rest }) => {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      name={name}
+      label={label}
+      error={error}
+      helperText={helperText}
+      required={required}
+      renderInput={({ id, helperTextId }) => (
+        <div id={id}>
+          {values.map(({ value: optionValue, label: optionLabel }, index) => (
+            <div className={classNames(styles.radio, { [styles.error]: error })} key={index} lang={lang}>
+              <input
+                value={optionValue}
+                name={name}
+                type="radio"
+                id={id + index}
+                onChange={handleChange}
+                checked={value === optionValue}
+                required={required}
+                disabled={disabled}
+                aria-describedby={helperTextId}
+                {...rest}
+              />
+              <label htmlFor={id + index}>{optionLabel}</label>
+            </div>
+          ))}
+        </div>
+      )}
+    />
+  );
+};
+
+export default Radio;
diff --git a/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
new file mode 100644
index 000000000..fa69ae07f
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
@@ -0,0 +1,75 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Radio> > renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="_formField_86f2f5"
+  >
+    <label
+      class="_label_86f2f5"
+      for="text-field_1235_radio"
+    >
+      Choose a Value
+    </label>
+    <div
+      id="text-field_1235_radio"
+    >
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          checked=""
+          id="text-field_1235_radio0"
+          name="radio"
+          type="radio"
+          value="value1"
+        />
+        <label
+          for="text-field_1235_radio0"
+        >
+          Label 1 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio1"
+          name="radio"
+          type="radio"
+          value="value2"
+        />
+        <label
+          for="text-field_1235_radio1"
+        >
+          Label 2 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio2"
+          name="radio"
+          type="radio"
+          value="value3"
+        />
+        <label
+          for="text-field_1235_radio2"
+        >
+          Label 3 
+        </label>
+      </div>
+    </div>
+    <div
+      class="_helperText_da58e0"
+      id="helper_text_1235_radio"
+    >
+      This is required!
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
new file mode 100644
index 000000000..e1bdad729
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
@@ -0,0 +1,7 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.textField {
+  width: 100%;
+  margin-bottom: 8px;
+}
diff --git a/packages/ui-react/src/components/TextField/TextField.test.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/TextField/TextField.test.tsx
rename to packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
new file mode 100644
index 000000000..858952dc9
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
@@ -0,0 +1,35 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import Input from '../../Input/Input';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './TextField.module.scss';
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
+  helperText?: React.ReactNode;
+  multiline?: boolean;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+} & FormControlProps;
+
+const TextField: React.FC<Props> = ({ className, helperText, label, error, required, editing = true, testId, name, ...inputProps }) => {
+  return (
+    <FormField
+      className={classNames(styles.textField, className)}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      renderInput={(fieldProps) => <Input editing={editing} error={error} name={name} required={required} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default TextField;
diff --git a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
similarity index 72%
rename from packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
index baef0b215..ea0ff8492 100644
--- a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
@@ -3,24 +3,22 @@
 exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -35,24 +33,22 @@ exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -66,24 +62,22 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -99,24 +93,22 @@ exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
diff --git a/packages/ui-react/src/containers/AccountModal/AccountModal.module.scss b/packages/ui-react/src/containers/AccountModal/AccountModal.module.scss
index b38ca6e99..c8b3ca892 100644
--- a/packages/ui-react/src/containers/AccountModal/AccountModal.module.scss
+++ b/packages/ui-react/src/containers/AccountModal/AccountModal.module.scss
@@ -2,9 +2,11 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 
 .banner {
+  height: 80px;
   text-align: center;
 
   > img {
     max-width: 50%;
+    max-height: 100%;
   }
 }
diff --git a/packages/ui-react/src/containers/AccountModal/AccountModal.tsx b/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
index 5626a9344..68e4ccfd4 100644
--- a/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
+++ b/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
@@ -31,7 +31,7 @@ import Login from './forms/Login';
 import styles from './AccountModal.module.scss';
 
 // @todo: connect with route typings
-const PUBLIC_VIEWS = ['login', 'create-account', 'forgot-password', 'reset-password', 'send-confirmation', 'edit-password', 'simultaneous-logins'];
+const PUBLIC_VIEWS = ['login', 'create-account', 'forgot-password', 'reset-password', 'send-confirmation', 'edit-password'];
 
 export type AccountModals = {
   login: 'login';
@@ -67,7 +67,7 @@ const AccountModal = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const viewParam = useQueryParam('u');
-  const [view, setView] = useState(viewParam);
+  const viewParamRef = useRef(viewParam);
   const message = useQueryParam('message');
   const { loading, user } = useAccountStore(({ loading, user }) => ({ loading, user }), shallow);
   const config = useConfigStore((s) => s.config);
@@ -81,9 +81,10 @@ const AccountModal = () => {
     navigate(modalURLFromLocation(location, 'login'));
   });
 
-  useEffect(() => {
-    // make sure the last view is rendered even when the modal gets closed
-    if (viewParam) setView(viewParam);
+  // make sure the last view is rendered even when the modal gets closed
+  const view = useMemo(() => {
+    if (viewParam) viewParamRef.current = viewParam;
+    return viewParamRef.current;
   }, [viewParam]);
 
   useEffect(() => {
@@ -107,7 +108,7 @@ const AccountModal = () => {
 
     switch (view) {
       case 'login':
-        return <Login messageKey={message} />;
+        return <Login />;
       case 'create-account':
         return <Registration />;
       case 'personal-details':
@@ -165,8 +166,12 @@ const AccountModal = () => {
   const dialogSize = ['delete-account-confirmation'].includes(view ?? '') ? 'large' : 'small';
 
   return (
-    <Dialog size={dialogSize} open={!!viewParam} onClose={closeHandler} role="dialog">
-      {shouldShowBanner && banner && <div className={styles.banner}>{<img src={banner} alt="" />}</div>}
+    <Dialog size={dialogSize} open={!!viewParam} onClose={closeHandler}>
+      {shouldShowBanner && banner && (
+        <div className={styles.banner}>
+          <img src={banner} alt="" />
+        </div>
+      )}
       {renderForm()}
     </Dialog>
   );
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
index d477bf5e0..7d016a11b 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
@@ -13,11 +13,7 @@ import type { LoginFormData } from '@jwp/ott-common/types/account';
 import LoginForm from '../../../components/LoginForm/LoginForm';
 import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
-type Props = {
-  messageKey: string | null;
-};
-
-const Login: React.FC<Props> = ({ messageKey }: Props) => {
+const Login = () => {
   const accountController = getModule(AccountController);
 
   const { siteName } = useConfigStore((s) => s.config);
@@ -53,7 +49,6 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
       submitting={submitting}
       siteName={siteName}
       socialLoginURLs={socialLoginURLs}
-      messageKey={messageKey}
       onSubmit={handleSubmit}
       onChange={handleChange}
     />
diff --git a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
index 5ac43a7f2..776fb5782 100644
--- a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
+++ b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
@@ -75,7 +75,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
           handleAction(result.action);
         }
 
-        await accountController.reloadSubscriptions({ delay: 2000 });
+        await accountController.reloadSubscriptions({ retry: 10 });
         announce(t('account:checkout.payment_success'), 'success');
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
diff --git a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
index 6e0d25569..8c1c6ea42 100644
--- a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
+++ b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -43,7 +43,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
       setProcessing(true);
 
       await checkoutController.finalizeAdyenPaymentDetails({ redirectResult: decodeURI(redirectResult) }, paymentMethodId);
-      await accountController.reloadSubscriptions({ delay: 2000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
 
       setProcessing(false);
 
@@ -102,7 +102,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
           handleAction(result.action);
         }
 
-        await accountController.reloadSubscriptions({ delay: 2000 });
+        await accountController.reloadSubscriptions({ retry: 5 });
 
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
index 5219bbb63..1711f49e4 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
+++ b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
@@ -6,6 +6,7 @@ import ApiService from '@jwp/ott-common/src/services/ApiService';
 import GenericEntitlementService from '@jwp/ott-common/src/services/GenericEntitlementService';
 import JWPEntitlementService from '@jwp/ott-common/src/services/JWPEntitlementService';
 import WatchHistoryController from '@jwp/ott-common/src/controllers/WatchHistoryController';
+import { act } from '@testing-library/react';
 
 import { renderWithRouter } from '../../../test/utils';
 
@@ -38,17 +39,19 @@ describe('<Cinema>', () => {
       tracks: [],
     } as PlaylistItem;
 
-    const { baseElement } = renderWithRouter(
-      <Cinema
-        item={item}
-        onPlay={() => null}
-        onPause={() => null}
-        open
-        title={item.title}
-        primaryMetadata="Primary metadata"
-        onClose={vi.fn()}
-        onNext={vi.fn()}
-      />,
+    const { baseElement } = await act(() =>
+      renderWithRouter(
+        <Cinema
+          item={item}
+          onPlay={() => null}
+          onPause={() => null}
+          open
+          title={item.title}
+          primaryMetadata="Primary metadata"
+          onClose={vi.fn()}
+          onNext={vi.fn()}
+        />,
+      ),
     );
 
     expect(baseElement).toMatchSnapshot();
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.tsx b/packages/ui-react/src/containers/Cinema/Cinema.tsx
index e6ca7b7b3..43b2b87ab 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.tsx
+++ b/packages/ui-react/src/containers/Cinema/Cinema.tsx
@@ -80,8 +80,8 @@ const Cinema: React.FC<Props> = ({
   }, [open]);
 
   return (
-    <Modal open={open} animationContainerClassName={styles.cinemaContainer} onClose={onClose}>
-      <div className={styles.cinema} aria-modal="true" role="dialog" aria-label={t('videoplayer')}>
+    <Modal open={open} animationContainerClassName={styles.cinemaContainer} onClose={onClose} aria-label={t('videoplayer')}>
+      <div className={styles.cinema}>
         <Fade className={styles.overlayFade} open={!isPlaying || userActive || overlayHasFocus} keepMounted>
           <div className={styles.playerOverlay} onFocus={() => setOverlayHasFocus(true)} onBlur={() => setOverlayHasFocus(false)}>
             <div className={styles.playerContent}>
diff --git a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index c44677b05..d4b5c64c8 100644
--- a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -5,90 +5,77 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
   style="margin-right: 0px; overflow-y: hidden;"
 >
   <div />
-  <div
-    style="transition: opacity 0.3s ease-in-out; opacity: 0; will-change: opacity;"
+  <dialog
+    aria-label="videoplayer"
+    class=""
+    open=""
   >
     <div
-      class="_modal_6c6c55"
+      class="_cinemaContainer_555f3c"
+      style="transition: transform 0.3s ease-out; transform: scale(1);"
     >
       <div
-        class="_backdrop_6c6c55"
-        data-testid="backdrop"
-      />
-      <div
-        class="_container_6c6c55"
+        class="_cinema_555f3c"
       >
         <div
-          class="_cinemaContainer_555f3c"
-          style="transition: transform 0.2s ease-out; transform: scale(0.7);"
+          class="_overlayFade_555f3c"
+          style="transition: opacity 0.25s ease-in-out; opacity: 1; will-change: opacity;"
         >
           <div
-            aria-label="videoplayer"
-            aria-modal="true"
-            class="_cinema_555f3c"
-            role="dialog"
+            class="_playerOverlay_555f3c"
           >
             <div
-              class="_overlayFade_555f3c"
-              style="transition: opacity 0.25s ease-in-out; opacity: 0; will-change: opacity;"
+              class="_playerContent_555f3c"
             >
-              <div
-                class="_playerOverlay_555f3c"
+              <button
+                aria-label="common:back"
+                class="_iconButton_0fef65 _backButton_555f3c"
+                type="button"
               >
+                <svg
+                  aria-hidden="true"
+                  class="_icon_585b29"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+                  />
+                </svg>
+              </button>
+              <div>
+                <h1
+                  class="_title_555f3c"
+                >
+                  Test item title
+                </h1>
                 <div
-                  class="_playerContent_555f3c"
+                  class="_metaContainer_555f3c"
                 >
-                  <button
-                    aria-label="common:back"
-                    class="_iconButton_0fef65 _backButton_555f3c"
-                    type="button"
+                  <div
+                    class="_primaryMetadata_555f3c"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="_icon_585b29"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-                      />
-                    </svg>
-                  </button>
-                  <div>
-                    <h1
-                      class="_title_555f3c"
-                    >
-                      Test item title
-                    </h1>
-                    <div
-                      class="_metaContainer_555f3c"
-                    >
-                      <div
-                        class="_primaryMetadata_555f3c"
-                      >
-                        Primary metadata
-                      </div>
-                    </div>
+                    Primary metadata
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="_loadingOverlay_eb61cb _inline_eb61cb"
-            >
-              <div
-                class="_buffer_d122df"
-              >
-                <div />
-                <div />
-                <div />
-                <div />
-              </div>
-            </div>
+          </div>
+        </div>
+        <div
+          class="_loadingOverlay_eb61cb _inline_eb61cb"
+        >
+          <div
+            class="_buffer_d122df"
+          >
+            <div />
+            <div />
+            <div />
+            <div />
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </dialog>
 </body>
 `;
diff --git a/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx b/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx
new file mode 100644
index 000000000..1513d9089
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+
+import LanguageMenu from '../../components/LanguageMenu/LanguageMenu';
+
+const HeaderLanguageSwitcher = () => {
+  const { i18n } = useTranslation('menu');
+  const supportedLanguages = useConfigStore((state) => state.supportedLanguages);
+  const languageMenuOpen = useUIStore((state) => state.languageMenuOpen);
+
+  const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
+  const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
+
+  const languageClickHandler = (code: string) => {
+    i18n.changeLanguage(code);
+  };
+
+  const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
+
+  if (supportedLanguages.length < 2) return null;
+
+  return (
+    <LanguageMenu
+      openLanguageMenu={openLanguageMenu}
+      closeLanguageMenu={closeLanguageMenu}
+      languageMenuOpen={languageMenuOpen}
+      onClick={languageClickHandler}
+      languages={supportedLanguages}
+      currentLanguage={currentLanguage}
+    />
+  );
+};
+
+export default HeaderLanguageSwitcher;
diff --git a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss
new file mode 100644
index 000000000..ee12f170d
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss
@@ -0,0 +1,22 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
+@use '@jwp/ott-ui-react/src/styles/mixins/responsive';
+@use '@jwp/ott-ui-react/src/styles/mixins/utils';
+
+.searchContainer {
+  position: absolute;
+  left: -#{variables.$search-bar-width-desktop};
+  display: flex;
+  width: variables.$search-bar-width-desktop;
+
+  > div:first-child {
+    flex: 1;
+  }
+
+  @include responsive.mobile-and-tablet() {
+    right: 0;
+    left: 0;
+    width: auto;
+  }
+}
diff --git a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx
new file mode 100644
index 000000000..18345c9c2
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import SearchIcon from '@jwp/ott-theme/assets/icons/search.svg?react';
+import CloseIcon from '@jwp/ott-theme/assets/icons/close.svg?react';
+
+import Icon from '../../components/Icon/Icon';
+import SearchBar from '../../components/SearchBar/SearchBar';
+import useSearchQueryUpdater from '../../hooks/useSearchQueryUpdater';
+import HeaderActionButton from '../../components/Header/HeaderActionButton';
+
+import styles from './HeaderSearch.module.scss';
+
+const HeaderSearch = () => {
+  const location = useLocation();
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
+
+  const config = useConfigStore(({ config }) => config);
+  const { features, custom } = config;
+
+  const { searchPlaylist } = features || {};
+  const hasAppContentSearch = isTruthyCustomParamValue(custom?.appContentSearch);
+  const searchEnabled = !!searchPlaylist || hasAppContentSearch;
+
+  const { searchQuery, searchActive } = useUIStore(
+    ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
+      languageMenuOpen,
+      searchQuery,
+      searchActive,
+      userMenuOpen,
+    }),
+    shallow,
+  );
+  const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
+
+  const closeSearchButtonClickHandler = () => {
+    resetSearchQuery();
+
+    useUIStore.setState({
+      searchActive: false,
+    });
+  };
+
+  const searchButtonClickHandler = () => {
+    useUIStore.setState({
+      searchActive: true,
+      preSearchPage: `${location.pathname}${location.search || ''}`,
+    });
+  };
+
+  useEffect(() => {
+    if (searchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [searchActive]);
+
+  if (!searchEnabled) return null;
+
+  return searchActive ? (
+    <div className={styles.searchContainer}>
+      <SearchBar
+        query={searchQuery}
+        onQueryChange={(event) => updateSearchQuery(event.target.value)}
+        onClearButtonClick={() => updateSearchQuery('')}
+        inputRef={searchInputRef}
+        onClose={closeSearchButtonClickHandler}
+      />
+      <HeaderActionButton aria-label="Close search" onClick={closeSearchButtonClickHandler}>
+        <Icon icon={CloseIcon} />
+      </HeaderActionButton>
+    </div>
+  ) : (
+    <HeaderActionButton aria-label="Open search" onClick={searchButtonClickHandler}>
+      <Icon icon={SearchIcon} />
+    </HeaderActionButton>
+  );
+};
+
+export default HeaderSearch;
diff --git a/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx b/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx
new file mode 100644
index 000000000..e474186ba
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
+import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
+import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { useLocation, useNavigate } from 'react-router';
+import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
+
+import UserMenu from '../../components/UserMenu/UserMenu';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import { modalURLFromLocation } from '../../utils/location';
+
+const HeaderUserMenu = () => {
+  const breakpoint = useBreakpoint();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const userMenuOpen = useUIStore((state) => state.userMenuOpen);
+  const {
+    config: { features },
+    accessModel,
+  } = useConfigStore((state) => ({
+    config: state.config,
+    accessModel: state.accessModel,
+  }));
+  const isLoggedIn = useAccountStore(({ user }) => !!user);
+  const { profile } = useProfileStore();
+
+  const {
+    query: { data: { collection: profiles = [] } = {} },
+    profilesEnabled,
+  } = useProfiles();
+
+  const selectProfile = useSelectProfile({
+    onSuccess: () => navigate(PATH_HOME),
+    onError: () => navigate(PATH_USER_PROFILES),
+  });
+
+  const favoritesEnabled = !!features?.favoritesList;
+  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
+
+  const openUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
+  const closeUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
+
+  const loginButtonClickHandler = () => navigate(modalURLFromLocation(location, 'login'));
+  const signUpButtonClickHandler = () => navigate(modalURLFromLocation(location, 'create-account'));
+
+  if (!canLogin || breakpoint <= Breakpoint.sm) return null;
+
+  return (
+    <UserMenu
+      open={userMenuOpen}
+      onOpen={openUserPanel}
+      onClose={closeUserPanel}
+      isLoggedIn={isLoggedIn}
+      favoritesEnabled={favoritesEnabled}
+      onLoginButtonClick={loginButtonClickHandler}
+      onSignUpButtonClick={signUpButtonClickHandler}
+      profilesEnabled={profilesEnabled}
+      profile={profile}
+      profiles={profiles}
+      profileLoading={selectProfile.isLoading}
+      onSelectProfile={selectProfile.mutate}
+    />
+  );
+};
+
+export default HeaderUserMenu;
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 19d703a84..467b71faa 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -6,16 +6,6 @@
   z-index: 0;
 }
 
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  padding: 0 variables.$base-spacing;
-
-  > button:first-child {
-    margin-bottom: calc(#{variables.$base-spacing} / 2);
-  }
-}
-
 .main {
   height: 100%;
 }
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index f4bba8739..c9876f230 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -1,224 +1,82 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useNavigate } from 'react-router';
+import { Outlet } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { isTruthyCustomParamValue, unicodeToChar } from '@jwp/ott-common/src/utils/common';
-import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
-import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
-import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import env from '@jwp/ott-common/src/env';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
 
 import Header from '../../components/Header/Header';
-import Sidebar from '../../components/Sidebar/Sidebar';
-import MenuButton from '../../components/MenuButton/MenuButton';
-import UserMenu from '../../components/UserMenu/UserMenu';
-import Button from '../../components/Button/Button';
 import Footer from '../../components/Footer/Footer';
+import HeaderMenu from '../../components/Header/HeaderMenu';
+import HeaderNavigation from '../../components/Header/HeaderNavigation';
+import HeaderBrand from '../../components/Header/HeaderBrand';
+import HeaderActions from '../../components/Header/HeaderActions';
+import HeaderSkipLink from '../../components/Header/HeaderSkipLink';
+import SidebarContainer from '../SidebarContainer/SidebarContainer';
+import SiteMetadata from '../SiteMetadata/SiteMetadata';
+import HeaderSearch from '../HeaderSearch/HeaderSearch';
+import HeaderLanguageSwitcher from '../HeaderLanguageSwitcher/HeaderLanguageSwitcher';
+import HeaderUserMenu from '../HeaderUserMenu/HeaderUserMenu';
 
 import styles from './Layout.module.scss';
 
 const Layout = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { t, i18n } = useTranslation('common');
+  const { t } = useTranslation('common');
 
-  const { config, accessModel, supportedLanguages } = useConfigStore(
-    ({ config, accessModel, supportedLanguages }) => ({ config, accessModel, supportedLanguages }),
+  const { config } = useConfigStore(
+    ({ config, accessModel, supportedLanguages }) => ({
+      config,
+      accessModel,
+      supportedLanguages,
+    }),
     shallow,
   );
-  const userMenuTitleId = useOpaqueId('usermenu-title');
-  const isLoggedIn = !!useAccountStore(({ user }) => user);
-  const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, features, styling, custom } = config;
-  const metaDescription = description || t('default_description');
+  const { menu, assets, siteName, styling } = config;
   const { footerText: configFooterText } = styling || {};
   const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
 
-  const profileController = getModule(ProfileController, false);
-
-  const { searchPlaylist } = features || {};
-  const hasAppContentSearch = isTruthyCustomParamValue(custom?.appContentSearch);
-  const searchEnabled = !!searchPlaylist || hasAppContentSearch;
-
-  const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
-
-  const {
-    query: { data: { collection: profiles = [] } = {} },
-    profilesEnabled,
-  } = useProfiles();
-
-  const selectProfile = useSelectProfile({
-    onSuccess: () => navigate(PATH_HOME),
-    onError: () => navigate(PATH_USER_PROFILES),
-  });
-
-  const { searchQuery, searchActive, userMenuOpen, languageMenuOpen } = useUIStore(
-    ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
-      languageMenuOpen,
-      searchQuery,
-      searchActive,
-      userMenuOpen,
-    }),
-    shallow,
-  );
-  const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
-  const { profile } = useProfileStore();
-
-  const searchInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
-
-  const [sideBarOpen, setSideBarOpen] = useState(false);
+  const { sideBarOpen, searchActive } = useUIStore((state) => ({
+    sideBarOpen: state.sideBarOpen,
+    searchActive: state.searchActive,
+  }));
   const banner = assets.banner;
-  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
 
-  useEffect(() => {
-    if (isLoggedIn && profilesEnabled && !profiles?.length) {
-      profileController?.unpersistProfile();
-    }
-    // Trigger once on the initial page load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.setAttribute('lang', i18n.language);
-  }, [i18n.language]);
-
-  useEffect(() => {
-    if (searchActive && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [searchActive]);
-
-  const searchButtonClickHandler = () => {
-    useUIStore.setState({
-      searchActive: true,
-      preSearchPage: `${location.pathname}${location.search || ''}`,
-    });
-  };
-
-  const closeSearchButtonClickHandler = () => {
-    resetSearchQuery();
-
-    useUIStore.setState({
-      searchActive: false,
-    });
-  };
-
-  const loginButtonClickHandler = () => {
-    navigate(modalURLFromLocation(location, 'login'));
-  };
-
-  const signUpButtonClickHandler = () => {
-    navigate(modalURLFromLocation(location, 'create-account'));
-  };
-
-  const languageClickHandler = async (code: string) => {
-    await i18n.changeLanguage(code);
-  };
-
-  // useCallbacks are used here to fix a bug in the Popover when using a Reactive onClose callback
-  const openUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
-  const closeUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
-  const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
-  const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
-
-  const renderUserActions = (sideBarOpen: boolean) => {
-    if (!canLogin) return null;
-
-    return isLoggedIn ? (
-      <section aria-labelledby={userMenuTitleId}>
-        <UserMenu focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} titleId={userMenuTitleId} showPaymentsItem />
-      </section>
-    ) : (
-      <div className={styles.buttonContainer}>
-        <Button tabIndex={sideBarOpen ? 0 : -1} onClick={loginButtonClickHandler} label={t('sign_in')} fullWidth />
-        <Button tabIndex={sideBarOpen ? 0 : -1} variant="contained" color="primary" onClick={signUpButtonClickHandler} label={t('sign_up')} fullWidth />
-      </div>
-    );
-  };
+  const openSideBar = () => useUIStore.setState({ sideBarOpen: true });
 
-  const navItems = [{ label: t('home'), to: '/' }, ...menu.map((item) => ({ label: item.label, to: playlistURL(item.contentId) }))];
+  const navItems = [
+    { label: t('home'), to: '/' },
+    ...menu.map((item) => ({
+      label: item.label,
+      to: playlistURL(item.contentId),
+    })),
+  ];
 
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
     <div className={styles.layout}>
-      <Helmet>
-        <title>{siteName}</title>
-        <meta name="description" content={metaDescription} />
-        <meta property="og:description" content={metaDescription} />
-        <meta property="og:title" content={siteName} />
-        <meta name="twitter:title" content={siteName} />
-        <meta name="twitter:description" content={metaDescription} />
-      </Helmet>
+      <SiteMetadata />
       <div {...containerProps}>
-        <Header
-          onMenuButtonClick={() => setSideBarOpen(true)}
-          logoSrc={banner}
-          searchEnabled={searchEnabled}
-          searchBarProps={{
-            query: searchQuery,
-            onQueryChange: (event) => updateSearchQuery(event.target.value),
-            onClearButtonClick: () => updateSearchQuery(''),
-            inputRef: searchInputRef,
-          }}
-          searchActive={searchActive}
-          onSearchButtonClick={searchButtonClickHandler}
-          onCloseSearchButtonClick={closeSearchButtonClickHandler}
-          onLoginButtonClick={loginButtonClickHandler}
-          onSignUpButtonClick={signUpButtonClickHandler}
-          onLanguageClick={languageClickHandler}
-          supportedLanguages={supportedLanguages}
-          currentLanguage={currentLanguage}
-          isLoggedIn={isLoggedIn}
-          sideBarOpen={sideBarOpen}
-          userMenuOpen={userMenuOpen}
-          languageMenuOpen={languageMenuOpen}
-          openUserPanel={openUserPanel}
-          closeUserPanel={closeUserPanel}
-          openLanguageMenu={openLanguageMenu}
-          closeLanguageMenu={closeLanguageMenu}
-          canLogin={canLogin}
-          showPaymentsMenuItem={accessModel !== ACCESS_MODEL.AVOD}
-          favoritesEnabled={favoritesEnabled}
-          siteName={siteName}
-          profilesData={{
-            currentProfile: profile,
-            profiles,
-            profilesEnabled,
-            selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
-            isSelectingProfile: selectProfile.isLoading,
-          }}
-          navItems={navItems}
-        />
+        <Header searchActive={searchActive}>
+          <HeaderSkipLink />
+          <HeaderMenu sideBarOpen={sideBarOpen} onClick={openSideBar} />
+          <HeaderBrand siteName={siteName} logoSrc={banner} setLogoLoaded={() => undefined} />
+          <HeaderNavigation navItems={navItems} />
+          <HeaderActions>
+            <HeaderSearch />
+            <HeaderLanguageSwitcher />
+            <HeaderUserMenu />
+          </HeaderActions>
+        </Header>
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>
         {!!footerText && <Footer text={footerText} />}
       </div>
-      <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
-        <ul>
-          <li>
-            <MenuButton label={t('home')} to="/" />
-          </li>
-          {menu.map((item) => (
-            <li key={item.contentId}>
-              <MenuButton label={item.label} to={playlistURL(item.contentId)} />
-            </li>
-          ))}
-        </ul>
-        {renderUserActions(sideBarOpen)}
-      </Sidebar>
+      <SidebarContainer />
     </div>
   );
 };
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 9ce8ed38b..84655abd4 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -71,57 +71,6 @@ exports[`<Layout /> > renders layout 1`] = `
         tabindex="-1"
       />
     </div>
-    <div
-      class="_backdrop_577f70"
-    />
-    <div
-      class="_sidebar_577f70"
-      id="sidebar"
-      inert=""
-    >
-      <div
-        class="_heading_577f70"
-      >
-        <button
-          aria-label="close_menu"
-          class="_iconButton_0fef65"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </svg>
-        </button>
-      </div>
-      <nav
-        class="_group_577f70"
-      >
-        <ul>
-          <li>
-            <a
-              aria-current="page"
-              class="_menuButton_91706b _active_91706b"
-              href="/"
-              tabindex="0"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx b/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
index 87e2f1a59..f7051a057 100644
--- a/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
@@ -47,7 +47,7 @@ const DeleteProfile = () => {
   if (view !== 'delete-profile') return null;
   return (
     <div>
-      <Dialog open={!!viewParam} onClose={closeHandler} role="dialog" aria-labelledby="delete-profile-heading">
+      <Dialog open={!!viewParam} onClose={closeHandler} aria-labelledby="delete-profile-heading">
         {isDeleting && <LoadingOverlay />}
         <div className={styles.deleteModal}>
           <div>
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index 212986202..a367fd538 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -10,9 +10,9 @@ import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import Button from '../../components/Button/Button';
-import Dropdown from '../../components/Dropdown/Dropdown';
+import Dropdown from '../../components/form-fields/Dropdown/Dropdown';
 import FormFeedback from '../../components/FormFeedback/FormFeedback';
-import TextField from '../../components/TextField/TextField';
+import TextField from '../../components/form-fields/TextField/TextField';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import ProfileBox from '../../components/ProfileBox/ProfileBox';
 
@@ -84,11 +84,9 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
           />
           {showContentRating && (
             <Dropdown
-              fullWidth
               required
               name="adult"
               label={t('profile.content_rating')}
-              className={styles.dropdown}
               options={options}
               value={values?.adult?.toString() || 'true'}
               onChange={handleChange}
diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
index ec67216bd..de19fb526 100644
--- a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
+++ b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -59,9 +59,10 @@ const ShelfList = ({ rows }: Props) => {
         loadMore={() => setRowsToLoad((current) => current + ROWS_TO_LOAD_STEP)}
         hasMore={rowsToLoad < rows.length}
         loader={<InfiniteScrollLoader key="loader" />}
+        useWindow={false}
       >
         {rows.slice(0, rowsToLoad).map(({ type, featured, title }, index) => {
-          const { data: playlist, isLoading, error } = playlists[index];
+          const { data: playlist, isPlaceholderData, error } = playlists[index];
 
           if (!playlist?.playlist?.length) return null;
 
@@ -76,7 +77,7 @@ const ShelfList = ({ rows }: Props) => {
               aria-label={title || playlist?.title}
             >
               <Shelf
-                loading={isLoading}
+                loading={isPlaceholderData}
                 error={error}
                 type={type}
                 playlist={playlist}
diff --git a/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss
new file mode 100644
index 000000000..f126d5fb6
--- /dev/null
+++ b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss
@@ -0,0 +1,20 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0 variables.$base-spacing;
+
+  > button:first-child {
+    margin-bottom: calc(#{variables.$base-spacing} / 2);
+  }
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  background: rgba(variables.$white, 0.12);
+  border: none;
+}
diff --git a/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
new file mode 100644
index 000000000..6f4377d6a
--- /dev/null
+++ b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+import { useLocation, useNavigate } from 'react-router';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+
+import Button from '../../components/Button/Button';
+import Sidebar from '../../components/Sidebar/Sidebar';
+import MenuButton from '../../components/MenuButton/MenuButton';
+import { modalURLFromLocation } from '../../utils/location';
+import UserMenuNav from '../../components/UserMenuNav/UserMenuNav';
+
+import styles from './SidebarContainer.module.scss';
+
+const SidebarUserActions = ({
+  sideBarOpen,
+  canLogin,
+  isLoggedIn,
+  favoritesEnabled,
+  onLoginClick,
+  onSignUpClick,
+}: {
+  sideBarOpen: boolean;
+  canLogin: boolean;
+  isLoggedIn: boolean;
+  favoritesEnabled: boolean;
+  onLoginClick: () => void;
+  onSignUpClick: () => void;
+}) => {
+  const { t } = useTranslation('menu');
+  const userMenuTitleId = useOpaqueId('usermenu-title');
+
+  if (!canLogin) return null;
+
+  return isLoggedIn ? (
+    <section aria-labelledby={userMenuTitleId}>
+      <UserMenuNav focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} titleId={userMenuTitleId} showPaymentItems />
+    </section>
+  ) : (
+    <div className={styles.buttonContainer}>
+      <Button tabIndex={sideBarOpen ? 0 : -1} onClick={onLoginClick} label={t('sign_in')} fullWidth />
+      <Button tabIndex={sideBarOpen ? 0 : -1} variant="contained" color="primary" onClick={onSignUpClick} label={t('sign_up')} fullWidth />
+    </div>
+  );
+};
+
+const SidebarContainer = () => {
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const sideBarOpen = useUIStore((state) => state.sideBarOpen);
+  const {
+    config: { menu, features },
+    accessModel,
+  } = useConfigStore((state) => ({
+    config: state.config,
+    accessModel: state.accessModel,
+  }));
+  const isLoggedIn = useAccountStore(({ user }) => !!user);
+
+  const favoritesEnabled = !!features?.favoritesList;
+  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
+
+  const closeSideBar = () => useUIStore.setState({ sideBarOpen: false });
+
+  const loginButtonClickHandler = () => {
+    navigate(modalURLFromLocation(location, 'login'));
+  };
+
+  const signUpButtonClickHandler = () => {
+    navigate(modalURLFromLocation(location, 'create-account'));
+  };
+
+  return (
+    <Sidebar isOpen={sideBarOpen} onClose={closeSideBar}>
+      <ul>
+        <li>
+          <MenuButton label={t('home')} to="/" />
+        </li>
+        {menu.map((item) => (
+          <li key={item.contentId}>
+            <MenuButton label={item.label} to={playlistURL(item.contentId)} />
+          </li>
+        ))}
+      </ul>
+      <hr className={styles.separator} />
+      <SidebarUserActions
+        sideBarOpen={sideBarOpen}
+        favoritesEnabled={favoritesEnabled}
+        canLogin={canLogin}
+        isLoggedIn={isLoggedIn}
+        onLoginClick={loginButtonClickHandler}
+        onSignUpClick={signUpButtonClickHandler}
+      />
+    </Sidebar>
+  );
+};
+
+export default SidebarContainer;
diff --git a/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx b/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx
new file mode 100644
index 000000000..f16eb9d42
--- /dev/null
+++ b/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx
@@ -0,0 +1,24 @@
+import { Helmet } from 'react-helmet';
+import React from 'react';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import { useTranslation } from 'react-i18next';
+
+const SiteMetadata = () => {
+  const { t } = useTranslation('common');
+  const { siteName, description } = useConfigStore(({ config }) => config, shallow);
+  const metaDescription = description || t('default_description');
+
+  return (
+    <Helmet>
+      <title>{siteName}</title>
+      <meta name="description" content={metaDescription} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:title" content={siteName} />
+      <meta name="twitter:title" content={siteName} />
+      <meta name="twitter:description" content={metaDescription} />
+    </Helmet>
+  );
+};
+
+export default SiteMetadata;
diff --git a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
index d825d9441..7765c7b04 100644
--- a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
+++ b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
@@ -27,8 +27,8 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
   if (!item) return null;
 
   return (
-    <Modal open={open} onClose={onClose}>
-      <div className={styles.container} role="dialog" aria-modal="true" aria-labelledby="trailer-modal-title">
+    <Modal open={open} onClose={onClose} aria-labelledby="trailer-modal-title" centered>
+      <div className={styles.container}>
         <Player
           item={item}
           onPlay={handlePlay}
diff --git a/packages/ui-react/src/hooks/useModal.ts b/packages/ui-react/src/hooks/useModal.ts
new file mode 100644
index 000000000..454a75bed
--- /dev/null
+++ b/packages/ui-react/src/hooks/useModal.ts
@@ -0,0 +1,61 @@
+import { useCallback, useEffect } from 'react';
+
+import scrollbarSize from '../utils/dom';
+
+const removeBodyScrolling = () => {
+  document.body.style.marginRight = `${scrollbarSize(true)}px`;
+  document.body.style.overflowY = 'hidden';
+};
+
+const restoreBodyScrolling = () => {
+  const dialogs = Array.from(document.querySelectorAll('dialog'));
+  const openDialogs = dialogs.filter((dialog) => dialog.open).length;
+
+  if (!openDialogs) {
+    document.body.style.removeProperty('margin-right');
+    document.body.style.removeProperty('overflow-y');
+  }
+};
+
+// shared variable between `useModal` usages
+let originElement: HTMLElement | undefined;
+
+export const useModal = () => {
+  const restoreFocus = useCallback(() => {
+    // restore focus when the focus is "lost" to the body element
+    if (!originElement || document.activeElement !== document.body) {
+      return;
+    }
+
+    const dialogs = Array.from(document.querySelectorAll('dialog'));
+    const openDialogs = dialogs.filter((dialog) => dialog.open).length;
+
+    // this was the last open dialog
+    if (openDialogs === 0) {
+      originElement.focus();
+      originElement = undefined;
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      restoreBodyScrolling();
+      restoreFocus();
+    };
+  }, [restoreFocus]);
+
+  const handleOpen = useCallback(() => {
+    if (!originElement) {
+      originElement = document.activeElement as HTMLElement;
+    }
+
+    removeBodyScrolling();
+  }, []);
+
+  const handleClose = useCallback(() => {
+    restoreFocus();
+    restoreBodyScrolling();
+  }, [restoreFocus]);
+
+  return { handleOpen, handleClose };
+};
diff --git a/packages/ui-react/src/pages/Home/Home.tsx b/packages/ui-react/src/pages/Home/Home.tsx
index 82baf59e1..b58bceaed 100644
--- a/packages/ui-react/src/pages/Home/Home.tsx
+++ b/packages/ui-react/src/pages/Home/Home.tsx
@@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next';
 
 import ShelfList from '../../containers/ShelfList/ShelfList';
 
-import '../../styles/accessibility.scss';
-
 const Home = () => {
   const { config } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const content: Content[] = config?.content;
diff --git a/packages/ui-react/src/pages/User/User.test.tsx b/packages/ui-react/src/pages/User/User.test.tsx
index 33d164115..4366cd48d 100644
--- a/packages/ui-react/src/pages/User/User.test.tsx
+++ b/packages/ui-react/src/pages/User/User.test.tsx
@@ -87,7 +87,11 @@ describe('User Component tests', () => {
       })),
     });
     mockService(FavoritesController, { clear: vi.fn() });
-    mockService(CheckoutController, { getSubscriptionSwitches: vi.fn(), getSubscriptionOfferIds: vi.fn().mockReturnValue([]) });
+    mockService(CheckoutController, {
+      initialiseOffers: vi.fn().mockResolvedValue([]),
+      getSubscriptionSwitches: vi.fn(),
+      getSubscriptionOfferIds: vi.fn().mockReturnValue([]),
+    });
     mockService(ProfileController, { listProfiles: vi.fn(), isEnabled: vi.fn().mockReturnValue(false) });
 
     useConfigStore.setState({
@@ -109,15 +113,17 @@ describe('User Component tests', () => {
     expect(container).toMatchSnapshot();
   });
 
-  test('Payments Page', () => {
+  test('Payments Page', async () => {
     act(() => {
       useAccountStore.setState(data);
       mockWindowLocation('u/payments');
     });
-    const { container } = renderWithRouter(
-      <Routes>
-        <Route path="/u/*" element={<User />} />
-      </Routes>,
+    const { container } = await act(() =>
+      renderWithRouter(
+        <Routes>
+          <Route path="/u/*" element={<User />} />
+        </Routes>,
+      ),
     );
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 033dbb54c..c6c0ec92b 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -116,10 +116,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_firstname"
             >
               account.firstname
@@ -127,8 +127,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_firstname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="given-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_firstname"
               lang="en"
               name="firstName"
@@ -138,10 +139,10 @@ exports[`User Component tests > Account Page 1`] = `
             />
           </div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_lastname"
             >
               account.lastname
@@ -149,8 +150,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_lastname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="family-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_lastname"
               lang="en"
               name="lastName"
@@ -191,10 +193,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_email"
             >
               account.email
@@ -202,8 +204,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_email"
               aria-invalid="false"
+              aria-required="true"
               autocomplete="email"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_email"
               name="email"
               readonly=""
@@ -712,10 +715,10 @@ exports[`User Component tests > Payments Page 1`] = `
         </div>
         <div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_cardnumber"
             >
               user:payment.card_number
@@ -724,8 +727,9 @@ exports[`User Component tests > Payments Page 1`] = `
               aria-describedby="helper_text_1235_cardnumber"
               aria-invalid="false"
               aria-label="user:payment.card_number_hidden"
+              aria-required="false"
               autocomplete="cc-number"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_cardnumber"
               name="cardNumber"
               readonly=""
@@ -737,10 +741,10 @@ exports[`User Component tests > Payments Page 1`] = `
             class="_cardDetails_c57ff5"
           >
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardexpiry"
               >
                 user:payment.expiry_date
@@ -748,8 +752,9 @@ exports[`User Component tests > Payments Page 1`] = `
               <input
                 aria-describedby="helper_text_1235_cardexpiry"
                 aria-invalid="false"
+                aria-required="false"
                 autocomplete="cc-exp"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardexpiry"
                 name="cardExpiry"
                 readonly=""
@@ -758,10 +763,10 @@ exports[`User Component tests > Payments Page 1`] = `
               />
             </div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardsecuritycode"
               >
                 user:payment.security_code
@@ -770,8 +775,9 @@ exports[`User Component tests > Payments Page 1`] = `
                 aria-describedby="helper_text_1235_cardsecuritycode"
                 aria-invalid="false"
                 aria-label="user:payment.security_code_hidden"
+                aria-required="false"
                 autocomplete="cc-csc"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardsecuritycode"
                 name="cardSecurityCode"
                 readonly=""
diff --git a/packages/ui-react/src/types/form.ts b/packages/ui-react/src/types/form.ts
new file mode 100644
index 000000000..1c72e463f
--- /dev/null
+++ b/packages/ui-react/src/types/form.ts
@@ -0,0 +1,15 @@
+import type React from 'react';
+
+export type FormControlProps = {
+  name: string;
+  label?: React.ReactNode;
+  placeholder?: string;
+  className?: string;
+  required?: boolean;
+  error?: boolean;
+  editing?: boolean;
+  testId?: string;
+  value?: string;
+  lang?: string;
+  size?: 'small' | 'medium';
+};
diff --git a/packages/ui-react/test/utils.tsx b/packages/ui-react/test/utils.tsx
index ce732f7ad..b040b60b5 100644
--- a/packages/ui-react/test/utils.tsx
+++ b/packages/ui-react/test/utils.tsx
@@ -1,7 +1,7 @@
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
 import React, { type ReactElement, type ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { render, act, type RenderOptions } from '@testing-library/react';
+import { act, render, type RenderOptions } from '@testing-library/react';
 
 import QueryProvider from '../src/containers/QueryProvider/QueryProvider';
 import { AriaAnnouncerProvider } from '../src/containers/AnnouncementProvider/AnnoucementProvider';
diff --git a/packages/ui-react/vitest.setup.ts b/packages/ui-react/vitest.setup.ts
index f97e711f3..a4748a99d 100644
--- a/packages/ui-react/vitest.setup.ts
+++ b/packages/ui-react/vitest.setup.ts
@@ -2,7 +2,23 @@ import 'vi-fetch/setup';
 import 'reflect-metadata';
 import '@testing-library/jest-dom'; // Including this for the expect extensions
 import 'react-app-polyfill/stable';
+import 'wicg-inert';
 import type { ComponentType } from 'react';
+import { fireEvent } from '@testing-library/react';
+
+beforeAll(() => {
+  // these methods don't exist in JSDOM: https://github.com/jsdom/jsdom/issues/3294
+  HTMLDialogElement.prototype.show = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.showModal = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+    fireEvent(this, new Event('close'));
+  });
+});
 
 const country = {
   af: 'Afghanistan',
diff --git a/platforms/web/package.json b/platforms/web/package.json
index 15420174b..ddd55da58 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -35,8 +35,7 @@
     "react-i18next": "^12.3.1",
     "react-router": "6.14.2",
     "react-router-dom": "6.14.2",
-    "wicg-inert": "^3.1.1",
-    "zustand": "^3.6.9"
+    "wicg-inert": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index d1a5f837e..8e876f2c2 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -89,9 +89,7 @@
     "sign_in": "Sign in",
     "sign_in_success": "Sign in successful",
     "sign_up": "Sign up",
-    "simultaneous_logins": "The maximum number of active sessions for this account has been reached. Signing in here will sign you out from another session or device.",
     "twitter": "Sign in with Twitter",
-    "unexpected_error": "An unexpected error occurred.",
     "view_password": "View password",
     "wrong_combination": "Incorrect email/password combination",
     "wrong_email": "Please check your email and try again."
@@ -146,7 +144,6 @@
     "field_required": "This field is required",
     "invalid_password": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password": "Password",
-    "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_strength": {
       "fair": "Fair",
       "invalid": "",
@@ -160,8 +157,7 @@
     "terms_and_conditions": "Terms and Conditions",
     "terms_consent": "I accept the {{termsLink}}.",
     "terms_consent_jwplayer": "I accept the {{termsLink}} of JW Player.",
-    "user_exists": "There is already a user with this email address",
-    "view_password": "View password"
+    "user_exists": "There is already a user with this email address"
   },
   "renew_subscription": {
     "explanation": "By clicking the button below you can renew your plan.",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index ab871dec2..2943ea3b3 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -95,9 +95,7 @@
     "sign_in": "Iniciar sesión",
     "sign_in_success": "Has iniciado sesión correctamente.",
     "sign_up": "Registrarse",
-    "simultaneous_logins": "Se ha alcanzado el número máximo de sesiones activas para esta cuenta. Iniciar sesión aquí lo cerrará en otra sesión o dispositivo.",
     "twitter": "Inicia sesión con Twitter",
-    "unexpected_error": "Ocurrió un error inesperado.",
     "view_password": "Ver contraseña",
     "wrong_combination": "Combinación de correo electrónico/contraseña incorrecta",
     "wrong_email": "Por favor, verifica tu correo electrónico e intenta nuevamente."
@@ -156,7 +154,6 @@
     "field_required": "Este campo es obligatorio",
     "invalid_password": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password": "Contraseña",
-    "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_strength": {
       "fair": "Regular",
       "invalid": "",
@@ -170,8 +167,7 @@
     "terms_and_conditions": "Términos y condiciones",
     "terms_consent": "Acepto los {{termsLink}}.",
     "terms_consent_jwplayer": "Acepto los {{termsLink}} de JW Player.",
-    "user_exists": "Ya existe un usuario con esta dirección de correo electrónico",
-    "view_password": "Ver contraseña"
+    "user_exists": "Ya existe un usuario con esta dirección de correo electrónico"
   },
   "renew_subscription": {
     "explanation": "Al hacer clic en el botón de abajo, puedes renovar tu plan.",
diff --git a/platforms/web/scripts/build-tools/buildTools.ts b/platforms/web/scripts/build-tools/buildTools.ts
index 4a5d4f25c..3df535c96 100644
--- a/platforms/web/scripts/build-tools/buildTools.ts
+++ b/platforms/web/scripts/build-tools/buildTools.ts
@@ -82,10 +82,10 @@ export const getGoogleFontTags = (fonts: ExternalFont[]): HtmlTagDescriptor[] =>
 
 export const generateIconTags = (basePath: string, favIconSizes: number[], appleIconSizes: number[]) => {
   const favIconTags = favIconSizes.map((size) => {
-    return `<link rel="icon" type="image/png" sizes="${size}x${size}" href="${basePath}/favicon-${size}x${size}.png">`;
+    return `<link rel="icon" type="image/png" sizes="${size}x${size}" href="${basePath}pwa-${size}x${size}.png">`;
   });
   const appleIconTags = appleIconSizes.map((size) => {
-    return `<link rel="apple-touch-icon" href="${basePath}/apple-touch-icon-${size}x${size}.png">`;
+    return `<link rel="apple-touch-icon" href="${basePath}apple-touch-icon-${size}x${size}.png">`;
   });
   return [...favIconTags, ...appleIconTags].join('\n');
 };
diff --git a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index 69a55e671..29bad61f0 100644
--- a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -5,7 +5,7 @@ import { Helmet } from 'react-helmet';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import ErrorPage from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
-import TextField from '@jwp/ott-ui-react/src/components/TextField/TextField';
+import TextField from '@jwp/ott-ui-react/src/components/form-fields/TextField/TextField';
 import Button from '@jwp/ott-ui-react/src/components/Button/Button';
 import ConfirmationDialog from '@jwp/ott-ui-react/src/components/ConfirmationDialog/ConfirmationDialog';
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 32c75eedb..346cd5950 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -55,20 +55,17 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
             target="/"
           >
             <div
-              class="_textField_25c745 _error_25c745 _maxWidth_561a54"
+              class="_formField_a245e1 _textField_0fa545 _maxWidth_561a54"
             >
-              <label
-                class="_label_25c745"
-                for="text-field_1235_app-config"
-              />
               <div
-                class="_container_25c745"
+                class="_container_ac31ed _error_ac31ed"
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
                   aria-invalid="true"
+                  aria-required="true"
                   autocapitalize="none"
-                  class="_input_25c745"
+                  class="_input_ac31ed"
                   id="text-field_1235_app-config"
                   maxlength="8"
                   name="app-config"
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index e53461d92..1e5bd1bc6 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -1,15 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import shallow from 'zustand/shallow';
-import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
-import { useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
+import { Route, Routes } from 'react-router-dom';
 import ErrorPage from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
 import RootErrorPage from '@jwp/ott-ui-react/src/components/RootErrorPage/RootErrorPage';
-import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
 import About from '@jwp/ott-ui-react/src/pages/About/About';
 import Home from '@jwp/ott-ui-react/src/pages/Home/Home';
 import Search from '@jwp/ott-ui-react/src/pages/Search/Search';
@@ -26,71 +19,39 @@ import {
   PATH_LEGACY_SERIES,
   PATH_MEDIA,
   PATH_PLAYLIST,
+  PATH_SEARCH,
+  PATH_USER,
   PATH_USER_PROFILES,
   PATH_USER_PROFILES_CREATE,
   PATH_USER_PROFILES_EDIT,
   PATH_USER_PROFILES_EDIT_PROFILE,
-  PATH_SEARCH,
-  PATH_USER,
 } from '@jwp/ott-common/src/paths';
 
-import useNotifications from '#src/hooks/useNotifications';
+import RoutesContainer from '#src/containers/RoutesContainer/RoutesContainer';
 
 export default function AppRoutes() {
-  const location = useLocation();
-
   const { t } = useTranslation('error');
-  const userModal = useQueryParam('u');
-
-  const { accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
-  const user = useAccountStore(({ user }) => user, shallow);
-  const { profile, selectingProfileAvatar } = useProfileStore();
-  const { profilesEnabled } = useProfiles();
-
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }));
-
-  // listen to websocket notifications
-  useNotifications();
-
-  if (userData.user && !userData.loading && location.hash.includes('#token')) {
-    // leave the location intact and only remove the token from the hash
-    return <Navigate to={{ ...location, hash: '' }} replace />; // component instead of hook to prevent extra re-renders
-  }
-
-  if (userData.user && selectingProfileAvatar !== null) {
-    return <LoadingOverlay profileImageUrl={selectingProfileAvatar || profile?.avatar_url} />;
-  }
-
-  const shouldManageProfiles =
-    !!user &&
-    profilesEnabled &&
-    !profile &&
-    (accessModel === 'SVOD' || accessModel === 'AUTHVOD') &&
-    !userModal &&
-    !location.pathname.includes(PATH_USER_PROFILES);
-
-  if (shouldManageProfiles) {
-    return <Navigate to={PATH_USER_PROFILES} />;
-  }
 
   return (
     <Routes>
-      <Route path={PATH_USER_PROFILES} element={<Profiles />} />
-      <Route path={PATH_USER_PROFILES_CREATE} element={<CreateProfile />} />
-      <Route path={PATH_USER_PROFILES_EDIT} element={<Profiles editMode />} />
-      <Route path={PATH_USER_PROFILES_EDIT_PROFILE} element={<EditProfile />} />
-      <Route element={<Layout />} errorElement={<RootErrorPage />}>
-        <Route index element={<Home />} />
-        <Route path={PATH_PLAYLIST} element={<PlaylistScreenRouter />} />
-        <Route path={PATH_MEDIA} element={<MediaScreenRouter />} />
-        <Route path={PATH_LEGACY_SERIES} element={<LegacySeries />} />
-        <Route path={PATH_SEARCH} element={<Search />} />
-        <Route path={PATH_USER} element={<User />} />
-        <Route path={PATH_ABOUT} element={<About />} />
-        <Route
-          path="/*"
-          element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}
-        />
+      <Route element={<RoutesContainer />}>
+        <Route path={PATH_USER_PROFILES} element={<Profiles />} />
+        <Route path={PATH_USER_PROFILES_CREATE} element={<CreateProfile />} />
+        <Route path={PATH_USER_PROFILES_EDIT} element={<Profiles editMode />} />
+        <Route path={PATH_USER_PROFILES_EDIT_PROFILE} element={<EditProfile />} />
+        <Route element={<Layout />} errorElement={<RootErrorPage />}>
+          <Route index element={<Home />} />
+          <Route path={PATH_PLAYLIST} element={<PlaylistScreenRouter />} />
+          <Route path={PATH_MEDIA} element={<MediaScreenRouter />} />
+          <Route path={PATH_LEGACY_SERIES} element={<LegacySeries />} />
+          <Route path={PATH_SEARCH} element={<Search />} />
+          <Route path={PATH_USER} element={<User />} />
+          <Route path={PATH_ABOUT} element={<About />} />
+          <Route
+            path="/*"
+            element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}
+          />
+        </Route>
       </Route>
     </Routes>
   );
diff --git a/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx b/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx
new file mode 100644
index 000000000..e9e67ac00
--- /dev/null
+++ b/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
+import { useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
+import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
+
+import useNotifications from '#src/hooks/useNotifications';
+
+const RoutesContainer = () => {
+  const { i18n } = useTranslation();
+  const location = useLocation();
+  const userModal = useQueryParam('u');
+
+  const { profile, selectingProfileAvatar } = useProfileStore();
+  const { shouldManageProfiles } = useProfiles();
+
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }), shallow);
+
+  // listen to websocket notifications
+  useNotifications();
+
+  // set/update lang html lang attribute
+  useEffect(() => {
+    document.documentElement.setAttribute('lang', i18n.language);
+  }, [i18n.language]);
+
+  // used for social logins
+  // @todo should users be redirected away from a page after login?
+  if (userData.user && !userData.loading && window.location.href.includes('#token')) {
+    return <Navigate to={{ ...location, hash: '' }} replace />; // component instead of hook to prevent extra re-renders
+  }
+
+  // show a loading overlay when a profile is loading
+  if (userData.user && selectingProfileAvatar !== null) {
+    return <LoadingOverlay profileImageUrl={selectingProfileAvatar || profile?.avatar_url} />;
+  }
+
+  // the user must choose a profile first
+  if (shouldManageProfiles && !location.pathname.includes(PATH_USER_PROFILES) && !userModal) {
+    return <Navigate to={PATH_USER_PROFILES} />;
+  }
+
+  return <Outlet />;
+};
+
+export default RoutesContainer;
diff --git a/platforms/web/src/hooks/useNotifications.ts b/platforms/web/src/hooks/useNotifications.ts
index 35b9fd2ef..6de5aa374 100644
--- a/platforms/web/src/hooks/useNotifications.ts
+++ b/platforms/web/src/hooks/useNotifications.ts
@@ -3,7 +3,6 @@ import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { queryClient } from '@jwp/ott-ui-react/src/containers/QueryProvider/QueryProvider';
-import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
@@ -63,15 +62,6 @@ export default function useNotifications() {
             case NotificationsTypes.SUBSCRIBE_REQUIRES_ACTION:
               window.location.href = notification.resource?.redirect_to_url;
               break;
-            case NotificationsTypes.ACCOUNT_LOGOUT:
-              try {
-                await accountController?.logout();
-              } finally {
-                if (notification.resource?.reason === 'sessions_limit') {
-                  navigateToModal('login', { message: simultaneousLoginWarningKey });
-                }
-              }
-              break;
             default:
               break;
           }
diff --git a/platforms/web/test-e2e/tests/login/account_test.ts b/platforms/web/test-e2e/tests/login/account_test.ts
index 7171f6317..edc5a3da4 100644
--- a/platforms/web/test-e2e/tests/login/account_test.ts
+++ b/platforms/web/test-e2e/tests/login/account_test.ts
@@ -31,12 +31,12 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
   });
 
   Scenario(`I can close the modal by clicking outside - ${providerName}`, async ({ I }) => {
-    I.forceClick('div[data-testid="backdrop"]');
+    I.forceClick('dialog[open]');
 
     I.dontSee('Email');
     I.dontSee('Password');
     I.dontSeeElement(constants.loginFormSelector);
-  });
+  }).tag('@desktop-only');
 
   Scenario(`I can toggle to view password - ${providerName}`, async ({ I }) => {
     await passwordUtils.testPasswordToggling(I);
diff --git a/platforms/web/test-e2e/tests/offers/choose_offer_test.ts b/platforms/web/test-e2e/tests/offers/choose_offer_test.ts
index 61b233243..5a7b4fb52 100644
--- a/platforms/web/test-e2e/tests/offers/choose_offer_test.ts
+++ b/platforms/web/test-e2e/tests/offers/choose_offer_test.ts
@@ -66,6 +66,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.amOnPage(constants.paymentsUrl);
 
     I.click('Complete subscription');
+    I.waitForLoaderDone();
     I.see('Choose plan');
     I.see('Watch this on JW OTT Web App');
 
@@ -92,6 +93,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
     I.amOnPage(constants.offersUrl);
+    I.waitForLoaderDone();
 
     I.click(props.monthlyOffer.label);
     I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#000000' });
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index 41cafddc1..65a5e6731 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,19 +66,6 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The Sign up modal will invalidate upon submit only if a value is inputted - ${providerName}`, async ({ I }) => {
-    I.click('Continue');
-    I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'false' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'false' });
-
-    I.fillField('Email', 'test');
-    I.fillField('Password', 'test');
-    I.click('Continue');
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
-  });
-
   Scenario(`I get warned when filling in incorrect credentials - ${providerName}`, async ({ I }) => {
     I.fillField('Email', 'test');
     I.pressKey('Tab');
diff --git a/platforms/web/test-e2e/tests/seo_test.ts b/platforms/web/test-e2e/tests/seo_test.ts
index c092ea437..e5cec1539 100644
--- a/platforms/web/test-e2e/tests/seo_test.ts
+++ b/platforms/web/test-e2e/tests/seo_test.ts
@@ -1,5 +1,7 @@
 import { testConfigs } from '@jwp/ott-testing/constants';
 
+import { favIconSizes, appleIconSizes } from './../../pwa-assets.config';
+
 import constants from '#utils/constants';
 
 Feature('seo').retry(Number(process.env.TEST_RETRY_COUNT) || 0);
@@ -8,6 +10,18 @@ Before(({ I }) => {
   I.useConfig(testConfigs.basicNoAuth);
 });
 
+Scenario('It renders all favicons correcty', ({ I }) => {
+  I.seeAttributesOnElements('link[sizes="any"]', { href: `${constants.baseUrl}images/icons/favicon.ico`, rel: 'icon', type: 'image/x-icon' });
+  for (const size of favIconSizes) {
+    const sizes = `${size}x${size}`;
+    I.seeAttributesOnElements(`link[sizes="${sizes}"]`, { href: `${constants.baseUrl}images/icons/pwa-${sizes}.png`, rel: 'icon', type: 'image/png' });
+  }
+  for (const size of appleIconSizes) {
+    const sizes = `${size}x${size}`;
+    I.seeElementInDOM(`link[rel="apple-touch-icon"][href="/images/icons/apple-touch-icon-${sizes}.png"]`);
+  }
+});
+
 Scenario('It renders the correct meta tags for the home screen', ({ I }) => {
   I.seeTitleEquals('JW OTT Web App');
 
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index e7af276e5..070101fba 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -129,7 +129,7 @@ const stepsObj = {
     const requiredTextInputNames: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="text"]') as HTMLInputElement)?.name),
       [container, constants.customRegFields.crfTextInput],
     );
@@ -146,7 +146,7 @@ const stepsObj = {
     const requiredRadioValues: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !(element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('(Optional)'))
+          .filter((element) => (element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="radio"]') as HTMLInputElement)?.value),
       [container, constants.customRegFields.crfRadioBox],
     );
@@ -164,7 +164,7 @@ const stepsObj = {
       const querySelector = ['crf-select', 'crf-country', 'crf-us_state'].map((testId) => `${container} [data-testid="${testId}"]`).join(', ');
 
       return Array.from(document.querySelectorAll(querySelector))
-        .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+        .filter((element) => element.querySelector('label')?.innerText.includes('*'))
         .map((element) => element.querySelector('select')?.name);
     }, container);
 
@@ -185,7 +185,7 @@ const stepsObj = {
     const requiredDatepickerIds: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => element.id),
       [container, constants.customRegFields.crfDateField],
     );
diff --git a/yarn.lock b/yarn.lock
index e8d77714d..0cf5643b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11447,7 +11447,7 @@ why-is-node-running@^2.2.2:
     siginfo "^2.0.0"
     stackback "0.0.2"
 
-wicg-inert@^3.1.1:
+wicg-inert@^3.1.1, wicg-inert@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/wicg-inert/-/wicg-inert-3.1.2.tgz#df10cf756b773a96fce107c3ddcd43be5d1e3944"
   integrity sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==