diff --git a/packages/ui-react/src/containers/AccountModal/AccountModal.tsx b/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
index 68e4ccfd4..84d093c72 100644
--- a/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
+++ b/packages/ui-react/src/containers/AccountModal/AccountModal.tsx
@@ -1,37 +1,16 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { Suspense, 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';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { modalURLFromLocation, createURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { createURLFromLocation, modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
-import Welcome from '../../components/Welcome/Welcome';
-import PaymentFailed from '../../components/PaymentFailed/PaymentFailed';
 import Dialog from '../../components/Dialog/Dialog';
-import DeleteAccountModal from '../../components/DeleteAccountModal/DeleteAccountModal';
-import FinalizePayment from '../../components/FinalizePayment/FinalizePayment';
-import WaitingForPayment from '../../components/WaitingForPayment/WaitingForPayment';
-import UpgradeSubscription from '../../components/UpgradeSubscription/UpgradeSubscription';
-import DeleteAccountPasswordWarning from '../../components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning';
-import UpdatePaymentMethod from '../UpdatePaymentMethod/UpdatePaymentMethod';
-
-import EditCardDetails from './forms/EditCardDetails';
-import EditPassword from './forms/EditPassword';
-import RenewSubscription from './forms/RenewSubscription';
-import CancelSubscription from './forms/CancelSubscription';
-import ResetPassword from './forms/ResetPassword';
-import Checkout from './forms/Checkout';
-import ChooseOffer from './forms/ChooseOffer';
-import PersonalDetails from './forms/PersonalDetails';
-import Registration from './forms/Registration';
-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'];
+import styles from './AccountModal.module.scss';
 
 export type AccountModals = {
   login: 'login';
@@ -63,19 +42,24 @@ export type AccountModals = {
   'finalize-payment': 'finalize-payment';
 };
 
-const AccountModal = () => {
+type ModalDef = {
+  key: string;
+  component: React.ReactNode;
+  public?: boolean;
+  hideBanner?: boolean;
+  size?: 'large' | 'small';
+};
+
+const AccountModal = ({ modals }: { modals: ModalDef[] }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const viewParam = useQueryParam('u');
   const viewParamRef = useRef(viewParam);
-  const message = useQueryParam('message');
   const { loading, user } = useAccountStore(({ loading, user }) => ({ loading, user }), shallow);
   const config = useConfigStore((s) => s.config);
   const {
     assets: { banner },
-    siteName,
   } = config;
-  const isPublicView = viewParam && PUBLIC_VIEWS.includes(viewParam);
 
   const toLogin = useEventCallback(() => {
     navigate(modalURLFromLocation(location, 'login'));
@@ -87,6 +71,11 @@ const AccountModal = () => {
     return viewParamRef.current;
   }, [viewParam]);
 
+  const currentModal = useMemo(() => modals.find(({ key }) => key === view), [view, modals]);
+  const isPublicView = !!currentModal?.public;
+  const shouldShowBanner = !!currentModal?.hideBanner;
+  const dialogSize = currentModal?.size || 'small';
+
   useEffect(() => {
     if (!!viewParam && !loading && !user && !isPublicView) {
       toLogin();
@@ -97,82 +86,30 @@ const AccountModal = () => {
     navigate(createURLFromLocation(location, { u: null, message: null }));
   });
 
+  const fallback = (
+    <div style={{ height: 300 }}>
+      <LoadingOverlay inline />
+    </div>
+  );
+
   const renderForm = () => {
     if (!user && loading && !isPublicView) {
-      return (
-        <div style={{ height: 300 }}>
-          <LoadingOverlay inline />
-        </div>
-      );
+      return fallback;
     }
 
-    switch (view) {
-      case 'login':
-        return <Login />;
-      case 'create-account':
-        return <Registration />;
-      case 'personal-details':
-        return <PersonalDetails />;
-      case 'choose-offer':
-        return <ChooseOffer />;
-      case 'edit-card':
-        return <EditCardDetails />;
-      case 'upgrade-subscription':
-        return <ChooseOffer />;
-      case 'upgrade-subscription-error':
-        return <UpgradeSubscription type="error" onCloseButtonClick={closeHandler} />;
-      case 'upgrade-subscription-success':
-        return <UpgradeSubscription type="success" onCloseButtonClick={closeHandler} />;
-      case 'upgrade-subscription-pending':
-        return <UpgradeSubscription type="pending" onCloseButtonClick={closeHandler} />;
-      case 'checkout':
-        return <Checkout />;
-      case 'payment-error':
-        return <PaymentFailed type="error" message={message} onCloseButtonClick={closeHandler} />;
-      case 'payment-cancelled':
-        return <PaymentFailed type="cancelled" message={message} onCloseButtonClick={closeHandler} />;
-      case 'welcome':
-        return <Welcome onCloseButtonClick={closeHandler} onCountdownCompleted={closeHandler} siteName={siteName} />;
-      case 'reset-password':
-        return <ResetPassword type="reset" />;
-      case 'forgot-password':
-        return <ResetPassword type="forgot" />;
-      case 'add-password':
-        return <EditPassword type="add" />;
-      case 'delete-account':
-      case 'delete-account-confirmation':
-        return <DeleteAccountModal />;
-      case 'warning-account-deletion':
-        return <DeleteAccountPasswordWarning />;
-      case 'send-confirmation':
-        return <ResetPassword type="confirmation" />;
-      case 'edit-password':
-        return <EditPassword />;
-      case 'unsubscribe':
-        return <CancelSubscription />;
-      case 'renew-subscription':
-        return <RenewSubscription />;
-      case 'payment-method':
-      case 'payment-method-success':
-        return <UpdatePaymentMethod onCloseButtonClick={closeHandler} />;
-      case 'waiting-for-payment':
-        return <WaitingForPayment />;
-      case 'finalize-payment':
-        return <FinalizePayment />;
-    }
-  };
+    if (!currentModal) return null;
 
-  const shouldShowBanner = !['delete-account', 'delete-account-confirmation', 'edit-card', 'warning-account-deletion'].includes(view ?? '');
-  const dialogSize = ['delete-account-confirmation'].includes(view ?? '') ? 'large' : 'small';
+    return currentModal.component;
+  };
 
   return (
     <Dialog size={dialogSize} open={!!viewParam} onClose={closeHandler}>
-      {shouldShowBanner && banner && (
+      {!shouldShowBanner && banner && (
         <div className={styles.banner}>
           <img src={banner} alt="" />
         </div>
       )}
-      {renderForm()}
+      <Suspense fallback={fallback}>{renderForm()}</Suspense>
     </Dialog>
   );
 };
diff --git a/platforms/web/src/accountModals.tsx b/platforms/web/src/accountModals.tsx
new file mode 100644
index 000000000..344bfaf43
--- /dev/null
+++ b/platforms/web/src/accountModals.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+type ModalDef = {
+  key: string;
+  component: React.ReactNode;
+  public?: boolean;
+  hideBanner?: boolean;
+  size?: 'large' | 'small';
+};
+
+const Login = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/Login'));
+const Registration = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/Registration'));
+const PersonalDetails = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/PersonalDetails'));
+const EditCard = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/EditCardDetails'));
+const Checkout = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/Checkout'));
+const Welcome = React.lazy(() => import('@jwp/ott-ui-react/src/components/Welcome/Welcome'));
+
+const ChooseOffer = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/ChooseOffer'));
+const ResetPassword = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/ResetPassword'));
+const EditPassword = React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/EditPassword'));
+const UpgradeSubscription = React.lazy(() => import('@jwp/ott-ui-react/src/components/UpgradeSubscription/UpgradeSubscription'));
+const PaymentFailed = React.lazy(() => import('@jwp/ott-ui-react/src/components/PaymentFailed/PaymentFailed'));
+const DeleteAccountModal = React.lazy(() => import('@jwp/ott-ui-react/src/components/DeleteAccountModal/DeleteAccountModal'));
+const DeleteAccountPasswordWarning = React.lazy(() => import('@jwp/ott-ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning'));
+const UpdatePaymentMethod = React.lazy(() => import('@jwp/ott-ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod'));
+
+const closeModal = () => {
+  // todo
+  console.warn('Close modal should be moved to component...');
+};
+
+const accountModals: ModalDef[] = [
+  {
+    key: 'login',
+    public: true,
+    component: <Login />,
+  },
+  {
+    key: 'create-account',
+    public: true,
+    component: <Registration />,
+  },
+  {
+    key: 'personal-details',
+    component: <PersonalDetails />,
+  },
+  { key: 'choose-offer', component: <ChooseOffer /> },
+  {
+    key: 'edit-card',
+    hideBanner: true,
+    component: <EditCard />,
+  },
+  {
+    key: 'checkout',
+    component: <Checkout />,
+  },
+  { key: 'welcome', component: <Welcome /> },
+
+  { key: 'upgrade-subscription', component: <ChooseOffer /> },
+  {
+    key: 'upgrade-subscription-error',
+    component: <UpgradeSubscription type="error" onCloseButtonClick={closeModal} />,
+  },
+  {
+    key: 'upgrade-subscription-success',
+    component: <UpgradeSubscription type="success" onCloseButtonClick={closeModal} />,
+  },
+  {
+    key: 'upgrade-subscription-pending',
+    component: <UpgradeSubscription type="pending" onCloseButtonClick={closeModal} />,
+  },
+
+  {
+    key: 'payment-error',
+    component: <PaymentFailed type="error" message="asd" onCloseButtonClick={closeModal} />,
+  },
+  {
+    key: 'payment-cancelled',
+    component: <PaymentFailed type="cancelled" message="asd" onCloseButtonClick={closeModal} />,
+  },
+
+  { key: 'reset-password', public: true, component: <ResetPassword type="reset" /> },
+  { key: 'forgot-password', public: true, component: <ResetPassword type="forgot" /> },
+  { key: 'edit-password', public: true, component: <EditPassword /> },
+  { key: 'send-confirmation', public: true, component: <ResetPassword type="confirmation" /> },
+  { key: 'add-password', component: <EditPassword type="add" /> },
+
+  { key: 'delete-account', hideBanner: true, component: <DeleteAccountModal /> },
+  { key: 'delete-account-confirmation', hideBanner: true, size: 'large', component: <DeleteAccountModal /> },
+  { key: 'warning-account-deletion', hideBanner: true, component: <DeleteAccountPasswordWarning /> },
+
+  // {
+  //   key: 'unsubscribe',
+  //   component: React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/CancelSubscription')),
+  // },
+  // {
+  //   key: 'renew-subscription',
+  //   component: React.lazy(() => import('@jwp/ott-ui-react/src/containers/AccountModal/forms/RenewSubscription')),
+  // },
+
+  { key: 'payment-method', component: <UpdatePaymentMethod onCloseButtonClick={closeModal} /> },
+  { key: 'payment-method-success', component: <UpdatePaymentMethod onCloseButtonClick={closeModal} /> },
+  // {
+  //   key: 'waiting-for-payment',
+  //   component: React.lazy(() => import('@jwp/ott-ui-react/src/components/WaitingForPayment/WaitingForPayment')),
+  // },
+  // {
+  //   key: 'finalize-payment',
+  //   component: React.lazy(() => import('@jwp/ott-ui-react/src/components/FinalizePayment/FinalizePayment')),
+  // },
+];
+
+export default accountModals;
diff --git a/platforms/web/src/containers/Root/Root.tsx b/platforms/web/src/containers/Root/Root.tsx
index 90857290f..2ce3fbf5d 100644
--- a/platforms/web/src/containers/Root/Root.tsx
+++ b/platforms/web/src/containers/Root/Root.tsx
@@ -14,6 +14,7 @@ import AppRoutes from '../AppRoutes/AppRoutes';
 
 import registerCustomScreens from '#src/screenMapping';
 import { useTrackConfigKeyChange } from '#src/hooks/useTrackConfigKeyChange';
+import accountModals from '#src/accountModals';
 
 const IS_DEMO_OR_PREVIEW = IS_DEMO_MODE || IS_PREVIEW_MODE;
 
@@ -93,7 +94,7 @@ const Root: FC = () => {
   return (
     <>
       {isReady && <AppRoutes />}
-      {isReady && <AccountModal />}
+      {isReady && <AccountModal modals={accountModals} />}
       {/*This is moved to a separate, parallel component to reduce rerenders */}
       <RootLoader onReady={onReadyCallback} />
     </>