diff --git a/packages/ui/src/components/ConfirmModal/index.tsx b/packages/ui/src/components/ConfirmModal/index.tsx
index ba22acba5..9e3146a9e 100644
--- a/packages/ui/src/components/ConfirmModal/index.tsx
+++ b/packages/ui/src/components/ConfirmModal/index.tsx
@@ -1,15 +1,2 @@
-import React from 'react';
-
-import usePlatform from '@/hooks/use-platform';
-
-import AcModal from './AcModal';
-import MobileModal from './MobileModal';
-import { ModalProps } from './type';
-
-const ConfirmModal = (props: ModalProps) => {
-  const { isMobile } = usePlatform();
-
-  return isMobile ? <MobileModal {...props} /> : <AcModal {...props} />;
-};
-
-export default ConfirmModal;
+export { default as WebModal } from './AcModal';
+export { default as MobileModal } from './MobileModal';
diff --git a/packages/ui/src/components/Input/index.tsx b/packages/ui/src/components/Input/index.tsx
index 31ec06d03..41e3f7f6b 100644
--- a/packages/ui/src/components/Input/index.tsx
+++ b/packages/ui/src/components/Input/index.tsx
@@ -6,6 +6,9 @@ import ErrorMessage, { ErrorType } from '@/components/ErrorMessage';
 
 import * as styles from './index.module.scss';
 
+export { default as PasswordInput } from './PasswordInput';
+export { default as PhoneInput } from './PhoneInput';
+
 export type Props = HTMLProps<HTMLInputElement> & {
   className?: string;
   error?: ErrorType;
diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
index 3183c36ce..3a6f66f95 100644
--- a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
@@ -6,7 +6,6 @@ import { useNavigate } from 'react-router-dom';
 import { getSendPasscodeApi } from '@/apis/utils';
 import Button from '@/components/Button';
 import Input from '@/components/Input';
-import PasswordlessConfirmModal from '@/containers/PasswordlessConfirmModal';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
@@ -14,6 +13,7 @@ import useTerms from '@/hooks/use-terms';
 import { UserFlow } from '@/types';
 import { emailValidation } from '@/utils/field-validations';
 
+import PasswordlessConfirmModal from './PasswordlessConfirmModal';
 import * as styles from './index.module.scss';
 
 type Props = {
diff --git a/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx b/packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
similarity index 89%
rename from packages/ui/src/containers/PasswordlessConfirmModal/index.tsx
rename to packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
index 4701c0e4c..126cf0255 100644
--- a/packages/ui/src/containers/PasswordlessConfirmModal/index.tsx
+++ b/packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
@@ -3,8 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { getSendPasscodeApi, PasscodeChannel } from '@/apis/utils';
-import ConfirmModal from '@/components/ConfirmModal';
+import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import useApi from '@/hooks/use-api';
+import usePlatform from '@/hooks/use-platform';
 import { UserFlow } from '@/types';
 
 type Props = {
@@ -20,8 +21,10 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const sendPasscode = getSendPasscodeApi(type, method);
   const navigate = useNavigate();
+  const { isMobile } = usePlatform();
 
   const { result, run: asyncSendPasscode } = useApi(sendPasscode);
+  const ConfirmModal = isMobile ? MobileModal : WebModal;
 
   const onConfirmHandler = useCallback(() => {
     onClose();
diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
index ab9142922..f28175049 100644
--- a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
+++ b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
@@ -5,8 +5,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { getSendPasscodeApi } from '@/apis/utils';
 import Button from '@/components/Button';
-import PhoneInput from '@/components/Input/PhoneInput';
-import PasswordlessConfirmModal from '@/containers/PasswordlessConfirmModal';
+import { PhoneInput } from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
@@ -14,6 +13,7 @@ import usePhoneNumber, { countryList } from '@/hooks/use-phone-number';
 import useTerms from '@/hooks/use-terms';
 import { UserFlow } from '@/types';
 
+import PasswordlessConfirmModal from './PasswordlessConfirmModal';
 import * as styles from './index.module.scss';
 
 type Props = {
diff --git a/packages/ui/src/components/TermsOfUseModal/index.test.tsx b/packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.test.tsx
similarity index 100%
rename from packages/ui/src/components/TermsOfUseModal/index.test.tsx
rename to packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.test.tsx
diff --git a/packages/ui/src/components/TermsOfUseModal/index.tsx b/packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.tsx
similarity index 70%
rename from packages/ui/src/components/TermsOfUseModal/index.tsx
rename to packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.tsx
index 3ac0918ee..0fba84241 100644
--- a/packages/ui/src/components/TermsOfUseModal/index.tsx
+++ b/packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModal/index.tsx
@@ -2,8 +2,9 @@ import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import reactStringReplace from 'react-string-replace';
 
-import ConfirmModal from '@/components/ConfirmModal';
+import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import TextLink from '@/components/TextLink';
+import usePlatform from '@/hooks/use-platform';
 
 type Props = {
   isOpen?: boolean;
@@ -12,8 +13,10 @@ type Props = {
   termsUrl: string;
 };
 
-const TermsOfUseModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props) => {
+const TermsOfUseConfirmModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+  const { isMobile } = usePlatform();
+  const ConfirmModal = isMobile ? MobileModal : WebModal;
 
   const terms = t('description.terms_of_use');
   const content = t('description.agree_with_terms_modal', { terms });
@@ -29,4 +32,4 @@ const TermsOfUseModal = ({ isOpen = false, termsUrl, onConfirm, onClose }: Props
   );
 };
 
-export default TermsOfUseModal;
+export default TermsOfUseConfirmModal;
diff --git a/packages/ui/src/containers/TermsOfUsePromiseModal/index.tsx b/packages/ui/src/containers/TermsOfUse/TermsOfUsePromiseModal/index.tsx
similarity index 88%
rename from packages/ui/src/containers/TermsOfUsePromiseModal/index.tsx
rename to packages/ui/src/containers/TermsOfUse/TermsOfUsePromiseModal/index.tsx
index e051e4e2b..4e4b7cc34 100644
--- a/packages/ui/src/containers/TermsOfUsePromiseModal/index.tsx
+++ b/packages/ui/src/containers/TermsOfUse/TermsOfUsePromiseModal/index.tsx
@@ -1,15 +1,16 @@
 import React, { useContext } from 'react';
 import { create, InstanceProps } from 'react-modal-promise';
 
-import TermsOfUseModal from '@/components/TermsOfUseModal';
 import { PageContext } from '@/hooks/use-page-context';
 
+import TermsOfUseConfirmModal from '../TermsOfUseConfirmModal';
+
 const TermsOfUsePromiseModal = ({ isOpen, onResolve, onReject }: InstanceProps<boolean>) => {
   const { setTermsAgreement, experienceSettings } = useContext(PageContext);
   const { termsOfUse } = experienceSettings ?? {};
 
   return (
-    <TermsOfUseModal
+    <TermsOfUseConfirmModal
       isOpen={isOpen}
       termsUrl={termsOfUse?.contentUrl ?? ''}
       onConfirm={() => {
diff --git a/packages/ui/src/containers/TermsOfUse/index.tsx b/packages/ui/src/containers/TermsOfUse/index.tsx
index 20dc34f6f..0842d3f75 100644
--- a/packages/ui/src/containers/TermsOfUse/index.tsx
+++ b/packages/ui/src/containers/TermsOfUse/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ModalContainer from 'react-modal-promise';
 
-import PureTermsOfUse from '@/components/TermsOfUse';
+import TermsOfUseComponent from '@/components/TermsOfUse';
 import useTerms from '@/hooks/use-terms';
 
 type Props = {
@@ -17,7 +17,7 @@ const TermsOfUse = ({ className }: Props) => {
 
   return (
     <>
-      <PureTermsOfUse
+      <TermsOfUseComponent
         className={className}
         name="termsAgreement"
         termsUrl={termsSettings.contentUrl}
diff --git a/packages/ui/src/containers/UsernameSignin/index.tsx b/packages/ui/src/containers/UsernameSignin/index.tsx
index 5d3ae77a7..72224b8e1 100644
--- a/packages/ui/src/containers/UsernameSignin/index.tsx
+++ b/packages/ui/src/containers/UsernameSignin/index.tsx
@@ -5,8 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { signInBasic } from '@/apis/sign-in';
 import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
-import Input from '@/components/Input';
-import PasswordInput from '@/components/Input/PasswordInput';
+import Input, { PasswordInput } from '@/components/Input';
 import TermsOfUse from '@/containers/TermsOfUse';
 import useApi, { ErrorHandlers } from '@/hooks/use-api';
 import useForm from '@/hooks/use-form';
diff --git a/packages/ui/src/hooks/use-terms.ts b/packages/ui/src/hooks/use-terms.ts
index 1b679bd6c..78b7dbf89 100644
--- a/packages/ui/src/hooks/use-terms.ts
+++ b/packages/ui/src/hooks/use-terms.ts
@@ -1,6 +1,6 @@
 import { useContext, useCallback } from 'react';
 
-import { termsOfUseModalPromise } from '@/containers/TermsOfUsePromiseModal';
+import { termsOfUseModalPromise } from '@/containers/TermsOfUse/TermsOfUsePromiseModal';
 
 import { PageContext } from './use-page-context';