From 4ec20e3af0f5999a2dd82f461e36af37a62adec0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Wed, 13 Aug 2025 22:36:56 +0900
Subject: [PATCH 1/4] fix: resolve conflicts (merge develop into
 feature-query-integration)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../workflows/dispatch_storybook_release.yaml |   2 +-
 apps/web/package.json                         |   2 +-
 .../composables/use-user-profile-api.ts       |  17 +-
 .../schema/api-verbs/disable-mfa.ts           |   4 +
 .../identity/user-profile/schema/constant.ts  |   5 +
 .../identity/user-profile/schema/type.ts      |   3 +-
 .../identity/user/schema/api-verbs/create.ts  |   3 +
 .../identity/user/schema/api-verbs/update.ts  |   3 +
 .../api-clients/identity/user/schema/model.ts |  10 +-
 .../workspace-user/schema/api-verbs/create.ts |   3 +
 .../components/info-tooltip/InfoTooltip.vue   |   4 +-
 .../mfa/components/EmailFoldingInfo.vue}      |  48 +-
 .../components/mfa/components/EmailInfo.vue}  |  15 +-
 .../components/mfa/components/OTPForm.vue     |  40 ++
 .../components/mfa/components/OTPQRInfo.vue}  |  77 +--
 .../mfa/components/VerificationCodeForm.vue   |  42 ++
 .../mfa/composables/use-user-mfa-qr-info.ts   |  25 +
 .../use-user-profile-confirm-mfa-mutation.ts  |  32 ++
 .../use-user-profile-enable-mfa-query.ts      |  26 +
 .../components/modals/ModalController.vue     |  46 ++
 .../global-config/api-client-manager.ts       |  23 -
 apps/web/src/router/helpers/route-helper.ts   |   1 +
 .../authenticator/local/template/ID_PW.vue    |  20 +-
 .../mfa/MultifactorAuthConfigured.vue         |  44 ++
 .../auth/pages/MultiFactorAuthSetUpPage.vue   | 241 +++++++++
 .../services/auth/routes/route-constant.ts    |   1 +
 apps/web/src/services/auth/routes/routes.ts   |  14 +
 .../iam/components/UserManagementAddModal.vue |  26 +-
 .../components/UserManagementAddPassword.vue  |  55 +-
 .../components/UserManagementFormInfoForm.vue |  21 +-
 .../components/UserManagementFormModal.vue    | 149 +++---
 ...serManagementFormNotificationEmailForm.vue |  17 +-
 .../UserManagementFormPasswordForm.vue        |  31 +-
 .../iam/components/UserManagementTab.vue      |  13 +-
 .../components/UserManagementTabDetail.vue    |  19 +-
 .../iam/components/UserManagementTable.vue    |   2 +-
 .../components/UserManagementTableToolbox.vue |  29 +-
 .../mfa/UserBulkMFASettingModal.vue           | 167 ++++++
 .../mfa/UserMFASecretKeyDeleteModal.vue       | 133 +++++
 .../mfa/UserMFASettingDisableButton.vue       |  40 ++
 .../mfa/UserMFASettingEnforceForm.vue         | 104 ++++
 .../mfa/UserMFASettingFormLayout.vue          | 136 +++++
 .../use-user-mfa-disable-mutation.ts          |  60 +++
 .../mutations/use-user-update-mutation.ts     |  54 ++
 .../services/iam/constants/modal.constant.ts  |   5 +
 .../services/iam/constants/user-constant.ts   |   2 +
 .../src/services/iam/store/user-page-store.ts |  39 +-
 apps/web/src/services/iam/types/modal.type.ts |   3 +
 apps/web/src/services/iam/types/user-type.ts  |   4 +-
 .../components/UserAccountMultiFactorAuth.vue |  64 ++-
 .../UserAccountMultiFactorAuthFormModal.vue   | 261 ----------
 .../UserAccountMultiFactorAuthItems.vue       | 162 +++---
 ...ccountMultiFactorAuthEmailDisableModal.vue | 180 +++++++
 ...AccountMultiFactorAuthEmailEnableModal.vue | 183 +++++++
 ...rAccountMultiFactorAuthOTPDisableModal.vue | 176 +++++++
 ...erAccountMultiFactorAuthOTPEnableModal.vue | 180 +++++++
 .../my-page/pages/UserAccountPage.vue         |  22 +-
 .../my-page/stores/multi-factor-auth-store.ts |  49 ++
 apps/web/src/store/user/constant.ts           |   6 +
 apps/web/src/store/user/type.ts               |   6 +-
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 .../core-lib/src/space-connector/index.ts     |  17 +-
 .../src/space-connector/service-api.ts        |  19 -
 .../core-lib/src/space-connector/token-api.ts |   5 +
 .../console-translation-2.8.babel             | 488 ++++++++++++++++++
 packages/language-pack/en.json                |  26 +
 packages/language-pack/ja.json                |  26 +
 packages/language-pack/ko.json                |  26 +
 .../src/controls/select-card/PSelectCard.vue  |  13 +-
 70 files changed, 3128 insertions(+), 649 deletions(-)
 create mode 100644 apps/web/src/api-clients/identity/user-profile/schema/api-verbs/disable-mfa.ts
 rename apps/web/src/{services/my-page/components/UserAccountMultiFactorAuthModalFolding.vue => common/components/mfa/components/EmailFoldingInfo.vue} (68%)
 rename apps/web/src/{services/my-page/components/UserAccountMultiFactorAuthModalEmailInfo.vue => common/components/mfa/components/EmailInfo.vue} (92%)
 create mode 100644 apps/web/src/common/components/mfa/components/OTPForm.vue
 rename apps/web/src/{services/my-page/components/UserAccountMultiFactorAuthModalMSInfo.vue => common/components/mfa/components/OTPQRInfo.vue} (61%)
 create mode 100644 apps/web/src/common/components/mfa/components/VerificationCodeForm.vue
 create mode 100644 apps/web/src/common/components/mfa/composables/use-user-mfa-qr-info.ts
 create mode 100644 apps/web/src/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation.ts
 create mode 100644 apps/web/src/common/components/mfa/composables/use-user-profile-enable-mfa-query.ts
 create mode 100644 apps/web/src/common/components/modals/ModalController.vue
 create mode 100644 apps/web/src/services/auth/components/mfa/MultifactorAuthConfigured.vue
 create mode 100644 apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
 create mode 100644 apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
 create mode 100644 apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
 create mode 100644 apps/web/src/services/iam/components/mfa/UserMFASettingDisableButton.vue
 create mode 100644 apps/web/src/services/iam/components/mfa/UserMFASettingEnforceForm.vue
 create mode 100644 apps/web/src/services/iam/components/mfa/UserMFASettingFormLayout.vue
 create mode 100644 apps/web/src/services/iam/composables/mutations/use-user-mfa-disable-mutation.ts
 create mode 100644 apps/web/src/services/iam/composables/mutations/use-user-update-mutation.ts
 create mode 100644 apps/web/src/services/iam/constants/modal.constant.ts
 create mode 100644 apps/web/src/services/iam/types/modal.type.ts
 delete mode 100644 apps/web/src/services/my-page/components/UserAccountMultiFactorAuthFormModal.vue
 create mode 100644 apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailDisableModal.vue
 create mode 100644 apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailEnableModal.vue
 create mode 100644 apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPDisableModal.vue
 create mode 100644 apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPEnableModal.vue

diff --git a/.github/workflows/dispatch_storybook_release.yaml b/.github/workflows/dispatch_storybook_release.yaml
index 78dc4a3b2e..7b37ae36a1 100644
--- a/.github/workflows/dispatch_storybook_release.yaml
+++ b/.github/workflows/dispatch_storybook_release.yaml
@@ -48,7 +48,7 @@ jobs:
           aws-region: ap-northeast-2
 
       - name: Deploy to s3
-        run: aws s3 sync apps/storybook/storybook-static/ s3://${{ secrets.STORYBOOK_S3_BUCKET }} --delete
+        run: aws s3 sync apps/mirinae-storybook/storybook-static/ s3://${{ secrets.STORYBOOK_S3_BUCKET }} --delete
 
       - name: Invalidate CloudFront Cache
         run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CDN_DISTRIBUTION_ID }} --paths "/*"
diff --git a/apps/web/package.json b/apps/web/package.json
index bed1108cff..0940cfe084 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev377",
+  "version": "2.0.0-dev378",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",
diff --git a/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts b/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
index b155920e69..c08aa42a31 100644
--- a/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
+++ b/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
@@ -1,16 +1,16 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserProfileConfirmEmailParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/confirm-email';
 import type { UserProfileConfirmMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/confirm-mfa';
+import type { UserProfileDisableMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/disable-mfa';
 import type { UserProfileEnableMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/enable-mfa';
 import type { UserProfileGetWorkspacesParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/get-workspaces';
 import type { UserProfileResetPasswordParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/reset-password';
 import type { UserProfileUpdateParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/update';
 import type { UserProfileUpdatePasswordParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/update-password';
 import type { UserProfileVerifyEmailParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/verify-email';
-import type { WorkspaceGroupModel } from '@/api-clients/identity/workspace-group/schema/model';
-import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+
 
 
 export const useUserProfileApi = () => {
@@ -19,12 +19,11 @@ export const useUserProfileApi = () => {
         updatePassword: SpaceConnector.clientV2.identity.userProfile.updatePassword<UserProfileUpdatePasswordParameters, any>,
         resetPassword: SpaceConnector.clientV2.identity.userProfile.resetPassword<UserProfileResetPasswordParameters, any>,
         verifyEmail: SpaceConnector.clientV2.identity.userProfile.verifyEmail<UserProfileVerifyEmailParameters, any>,
-        confirmEmail: SpaceConnector.clientV2.identity.userProfile.confirmEmail<UserProfileConfirmEmailParameters, any>,
-        enableMfa: SpaceConnector.clientV2.identity.userProfile.enableMfa<UserProfileEnableMfaParameters, any>,
-        confirmMfa: SpaceConnector.clientV2.identity.userProfile.confirmMfa<UserProfileConfirmMfaParameters, any>,
-        getWorkspaces: SpaceConnector.clientV2.identity.userProfile.getWorkspaces<UserProfileGetWorkspacesParameters, ListResponse<WorkspaceModel>>,
-        getWorkspaceGroups: SpaceConnector.clientV2.identity.userProfile.getWorkspaceGroups<undefined, ListResponse<WorkspaceGroupModel>>,
-
+        confirmEmail: SpaceConnector.clientV2.identity.userProfile.confirmEmail<UserProfileConfirmEmailParameters, UserModel>,
+        disableMfa: SpaceConnector.clientV2.identity.userProfile.disableMfa<UserProfileDisableMfaParameters, UserModel>,
+        enableMfa: SpaceConnector.clientV2.identity.userProfile.enableMfa<UserProfileEnableMfaParameters, UserModel>,
+        confirmMfa: SpaceConnector.clientV2.identity.userProfile.confirmMfa<UserProfileConfirmMfaParameters, UserModel>,
+        getWorkspaces: SpaceConnector.clientV2.identity.userProfile.getWorkspaces<UserProfileGetWorkspacesParameters, any>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/identity/user-profile/schema/api-verbs/disable-mfa.ts b/apps/web/src/api-clients/identity/user-profile/schema/api-verbs/disable-mfa.ts
new file mode 100644
index 0000000000..619b9e7e9f
--- /dev/null
+++ b/apps/web/src/api-clients/identity/user-profile/schema/api-verbs/disable-mfa.ts
@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+export interface UserProfileDisableMfaParameters {
+    // No parameters
+}
diff --git a/apps/web/src/api-clients/identity/user-profile/schema/constant.ts b/apps/web/src/api-clients/identity/user-profile/schema/constant.ts
index 2eb11920bf..be88fccd66 100644
--- a/apps/web/src/api-clients/identity/user-profile/schema/constant.ts
+++ b/apps/web/src/api-clients/identity/user-profile/schema/constant.ts
@@ -2,3 +2,8 @@ export const MULTI_FACTOR_AUTH_TYPE = {
     OTP: 'OTP',
     EMAIL: 'EMAIL',
 } as const;
+
+export const MFA_STATE = {
+    ENABLED: 'ENABLED',
+    DISABLED: 'DISABLED',
+} as const;
diff --git a/apps/web/src/api-clients/identity/user-profile/schema/type.ts b/apps/web/src/api-clients/identity/user-profile/schema/type.ts
index 1c6a813feb..d1d614f889 100644
--- a/apps/web/src/api-clients/identity/user-profile/schema/type.ts
+++ b/apps/web/src/api-clients/identity/user-profile/schema/type.ts
@@ -1,3 +1,4 @@
-import type { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MFA_STATE, MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
 
 export type MultiFactorAuthType = typeof MULTI_FACTOR_AUTH_TYPE[keyof typeof MULTI_FACTOR_AUTH_TYPE];
+export type MfaState = typeof MFA_STATE[keyof typeof MFA_STATE];
diff --git a/apps/web/src/api-clients/identity/user/schema/api-verbs/create.ts b/apps/web/src/api-clients/identity/user/schema/api-verbs/create.ts
index 7ad83faf97..e55cbc6693 100644
--- a/apps/web/src/api-clients/identity/user/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/identity/user/schema/api-verbs/create.ts
@@ -1,4 +1,5 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
+import type { MfaState, MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import type { AuthType } from '@/api-clients/identity/user/schema/type';
 
 
@@ -12,4 +13,6 @@ export interface UserCreateParameters {
     timezone?: string;
     tags?: Tags;
     reset_password?: boolean;
+    enforce_mfa_state?: MfaState;
+    enforce_mfa_type?: MultiFactorAuthType; // only when enforce_mfa_state is ENABLED, this field is required
 }
diff --git a/apps/web/src/api-clients/identity/user/schema/api-verbs/update.ts b/apps/web/src/api-clients/identity/user/schema/api-verbs/update.ts
index c7278cc482..dd46464b3c 100644
--- a/apps/web/src/api-clients/identity/user/schema/api-verbs/update.ts
+++ b/apps/web/src/api-clients/identity/user/schema/api-verbs/update.ts
@@ -1,4 +1,5 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
+import type { MfaState, MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 
 
 export interface UserUpdateParameters {
@@ -10,4 +11,6 @@ export interface UserUpdateParameters {
     timezone?: string;
     tags?: Tags;
     reset_password?: boolean;
+    enforce_mfa_state?: MfaState;
+    enforce_mfa_type?: MultiFactorAuthType; // only when enforce_mfa_state is ENABLED, this field is required
 }
diff --git a/apps/web/src/api-clients/identity/user/schema/model.ts b/apps/web/src/api-clients/identity/user/schema/model.ts
index 7edf82ba1d..3cfb3c6e10 100644
--- a/apps/web/src/api-clients/identity/user/schema/model.ts
+++ b/apps/web/src/api-clients/identity/user/schema/model.ts
@@ -14,7 +14,7 @@ export interface UserModel {
     auth_type: AuthType; // backend
     role_type: RoleType;
     role_id?: string;
-    mfa: UserMfa;
+    mfa?: UserMfa;
     language: string;
     timezone: string;
     api_key_count: number;
@@ -26,11 +26,13 @@ export interface UserModel {
 }
 
 export interface UserMfa {
-    state: UserMfaState,
-    mfa_type: MultiFactorAuthType,
-    options: {
+    state?: UserMfaState,
+    mfa_type?: MultiFactorAuthType,
+    options?: {
+        enforce?: boolean, // if true, mfa_type is required
         email?: string,
         user_secret_id?: string,
+        otp_qrcode_uri?: string, // response from 'enable-mfa' verb only
     }
 }
 
diff --git a/apps/web/src/api-clients/identity/workspace-user/schema/api-verbs/create.ts b/apps/web/src/api-clients/identity/workspace-user/schema/api-verbs/create.ts
index ed17d6383a..5a36caaa45 100644
--- a/apps/web/src/api-clients/identity/workspace-user/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/identity/workspace-user/schema/api-verbs/create.ts
@@ -1,4 +1,5 @@
 import type { Tags } from '@/api-clients/_common/schema/model';
+import type { MfaState, MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import type { AuthType } from '@/api-clients/identity/user/schema/type';
 
 export interface WorkspaceUserCreateParameters {
@@ -11,5 +12,7 @@ export interface WorkspaceUserCreateParameters {
     timezone?: string;
     tags?: Tags;
     reset_password?: boolean;
+    enforce_mfa_state?: MfaState;
+    enforce_mfa_type?: MultiFactorAuthType;
     role_id: string;
 }
diff --git a/apps/web/src/common/components/info-tooltip/InfoTooltip.vue b/apps/web/src/common/components/info-tooltip/InfoTooltip.vue
index 5274de29c2..03550df8f2 100644
--- a/apps/web/src/common/components/info-tooltip/InfoTooltip.vue
+++ b/apps/web/src/common/components/info-tooltip/InfoTooltip.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { TranslateResult } from 'vue-i18n';
+
 import { PTooltip, PI } from '@cloudforet/mirinae';
 import type { TooltipPosition } from '@cloudforet/mirinae/types/data-display/tooltips/type';
 
 interface Props {
-    tooltipContents: string;
+    tooltipContents: string|TranslateResult;
     tooltipPosition?: TooltipPosition;
     width?: string;
     height?: string;
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalFolding.vue b/apps/web/src/common/components/mfa/components/EmailFoldingInfo.vue
similarity index 68%
rename from apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalFolding.vue
rename to apps/web/src/common/components/mfa/components/EmailFoldingInfo.vue
index 164baf9911..fbe3f4df46 100644
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalFolding.vue
+++ b/apps/web/src/common/components/mfa/components/EmailFoldingInfo.vue
@@ -11,10 +11,12 @@ import { postUserProfileDisableMfa, postEnableMfa } from '@/lib/helper/multi-fac
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+const RE_SEND_CODE_COOLDOWN_TIME = 10000;
+
 interface Props {
-    isDisabledModal: boolean
-    isReSyncModal: boolean
-    isSentCode: boolean
+    isDisabledModal?: boolean
+    isReSyncModal?: boolean
+    isSentCode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,20 +34,38 @@ const storeState = reactive({
 const state = reactive({
     isCollapsed: true,
     proxyIsSentCode: useProxyValue('is-sent-code', props, emit),
+    loading: false,
+    cooldown: false,
 });
 
+const startCooldown = () => {
+    state.cooldown = true;
+    setTimeout(() => {
+        state.cooldown = false;
+    }, RE_SEND_CODE_COOLDOWN_TIME);
+};
+
 const handleClickSendEmailButton = async () => {
-    if (props.isDisabledModal || props.isReSyncModal) {
-        await postUserProfileDisableMfa();
-    } else {
-        await postEnableMfa({
-            mfa_type: MULTI_FACTOR_AUTH_TYPE.EMAIL,
-            options: {
-                email: storeState.email,
-            },
-        });
+    if (state.cooldown) return;
+
+    state.loading = true;
+
+    try {
+        if (props.isDisabledModal || props.isReSyncModal) {
+            await postUserProfileDisableMfa();
+        } else {
+            await postEnableMfa({
+                mfa_type: MULTI_FACTOR_AUTH_TYPE.EMAIL,
+                options: {
+                    email: storeState.email,
+                },
+            });
+        }
+        state.proxyIsSentCode = true;
+        startCooldown();
+    } finally {
+        state.loading = false;
     }
-    state.proxyIsSentCode = true;
 };
 </script>
 
@@ -62,7 +82,7 @@ const handleClickSendEmailButton = async () => {
             {{ $t('COMMON.MFA_MODAL.COLLAPSE_DESC') }}
             <p-text-button class="send-code-button"
                            style-type="highlight"
-                           :disabled="(props.isDisabledModal || props.isReSyncModal) ? !storeState.email : !props.isSentCode"
+                           :disabled="((props.isDisabledModal || props.isReSyncModal) ? !storeState.email : !props.isSentCode) || state.loading || state.cooldown"
                            @click.prevent="handleClickSendEmailButton"
             >
                 <span class="emphasis">{{ $t('COMMON.MFA_MODAL.SEND_NEW_CODE') }}</span>
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalEmailInfo.vue b/apps/web/src/common/components/mfa/components/EmailInfo.vue
similarity index 92%
rename from apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalEmailInfo.vue
rename to apps/web/src/common/components/mfa/components/EmailInfo.vue
index 18d1d2024b..0330e6f4d7 100644
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalEmailInfo.vue
+++ b/apps/web/src/common/components/mfa/components/EmailInfo.vue
@@ -16,25 +16,22 @@ import { emailValidator } from '@/lib/helper/user-validation-helper';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
-
 interface Props {
-    isSentCode?: boolean
+    isSentCode?: boolean;
+    isForm?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isSentCode: false,
+    isForm: false,
 });
 
-const multiFactorAuthStore = useMultiFactorAuthStore();
-const multiFactorAuthState = multiFactorAuthStore.state;
 const userStore = useUserStore();
 
 const emit = defineEmits<{(e: 'update:is-sent-code'): void }>();
 
 const storeState = reactive({
     email: computed<string|undefined>(() => userStore.state.mfa?.options?.email),
-    isFormModal: computed(() => multiFactorAuthState.modalType === 'FORM'),
 });
 const state = reactive({
     loading: false,
@@ -58,7 +55,7 @@ const {
 const handleClickSendCodeButton = async () => {
     state.loading = true;
     try {
-        if (storeState.isFormModal) {
+        if (props.isForm) {
             await postEnableMfa({
                 mfa_type: MULTI_FACTOR_AUTH_TYPE.EMAIL,
                 options: {
@@ -82,9 +79,9 @@ const handleClickSendCodeButton = async () => {
 
 <template>
     <div class="email-info-wrapper"
-         :class="{'form-modal': storeState.isFormModal}"
+         :class="{'form-modal': props.isForm}"
     >
-        <div v-if="storeState.isFormModal"
+        <div v-if="props.isForm"
              class="email-form-wrapper"
         >
             <p-field-group
diff --git a/apps/web/src/common/components/mfa/components/OTPForm.vue b/apps/web/src/common/components/mfa/components/OTPForm.vue
new file mode 100644
index 0000000000..ea6e7f0c32
--- /dev/null
+++ b/apps/web/src/common/components/mfa/components/OTPForm.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import OTPQRInfo from '@/common/components/mfa/components/OTPQRInfo.vue';
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+interface Props {
+    verificationCode: string;
+    verificationCodeInvalid: boolean;
+    invalidText: string;
+}
+
+interface Emits {
+    (e: 'update:verification-code', value: string): void;
+    (e: 'update:verification-code-invalid', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    verificationCode: '',
+    verificationCodeInvalid: false,
+    invalidText: '',
+});
+
+const emit = defineEmits<Emits>();
+
+/* State */
+const verificationCode = useProxyValue<string>('verificationCode', props, emit);
+const verificationCodeInvalid = useProxyValue<boolean>('verificationCodeInvalid', props, emit);
+
+
+</script>
+
+<template>
+    <div class="o-t-p-form">
+        <o-t-p-q-r-info />
+        <verification-code-form :invalid.sync="verificationCodeInvalid"
+                                :code-value.sync="verificationCode"
+                                :invalid-text="props.invalidText"
+        />
+    </div>
+</template>
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalMSInfo.vue b/apps/web/src/common/components/mfa/components/OTPQRInfo.vue
similarity index 61%
rename from apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalMSInfo.vue
rename to apps/web/src/common/components/mfa/components/OTPQRInfo.vue
index 4056b365c8..de28434b2e 100644
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthModalMSInfo.vue
+++ b/apps/web/src/common/components/mfa/components/OTPQRInfo.vue
@@ -1,72 +1,29 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core';
-import { useQRCode } from '@vueuse/integrations/useQRCode';
-import { computed, reactive, watch } from 'vue';
+import { computed } from 'vue';
 
 import {
     PTextInput, PIconButton, PSpinner, screens, PTextarea,
 } from '@cloudforet/mirinae';
 
-import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
-
-import { postEnableMfa } from '@/lib/helper/multi-factor-auth-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
-
-const multiFactorAuthStore = useMultiFactorAuthStore();
-const multiFactorAuthState = multiFactorAuthStore.state;
+import { useUserMfaQrInfo } from '@/common/components/mfa/composables/use-user-mfa-qr-info';
 
 const { width } = useWindowSize();
+const isMobileSize = computed<boolean>(() => width.value < screens.mobile.max);
 
-const storeState = reactive({
-    modalInitLoading: computed<boolean>(() => multiFactorAuthState.modalInitLoading),
-});
-
-const state = reactive({
-    passkey: '',
-    qrUri: '',
-    qrcode: '',
-    isMobileSize: computed<boolean>(() => width.value < screens.mobile.max),
-});
+/* QR Code Data */
+const {
+    qrCode,
+    passKey,
+    isLoading,
+    refetchQrInfo,
+} = useUserMfaQrInfo();
 
-const initState = () => {
-    state.passkey = '';
-    state.qrUri = '';
-    state.qrcode = '';
-};
+/* Event */
 const handleClickRefreshButton = () => {
-    initState();
-    initQrCodeInfo();
+    refetchQrInfo();
 };
 
-const initQrCodeInfo = async () => {
-    multiFactorAuthStore.setModalInitLoading(true);
-    try {
-        const userInfo = await postEnableMfa({
-            mfa_type: MULTI_FACTOR_AUTH_TYPE.OTP,
-            options: {},
-        });
-        if (!userInfo) return;
-        state.qrUri = userInfo?.mfa?.options.otp_qrcode_uri;
-        state.passkey = state.qrUri.match(/secret=([^&]*)/)?.[1] || '';
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        multiFactorAuthStore.setModalInitLoading(false);
-    }
-};
-
-watch(() => state.qrUri, (qrUri) => {
-    state.qrcode = useQRCode(qrUri, {
-        margin: 0,
-    });
-});
-
-(() => {
-    initQrCodeInfo();
-})();
 </script>
 
 <template>
@@ -89,24 +46,24 @@ watch(() => state.qrUri, (qrUri) => {
             <li>{{ $t('MY_PAGE.MFA.STEP1') }}</li>
             <li>{{ $t('MY_PAGE.MFA.STEP2') }}</li>
         </ol>
-        <p-spinner v-if="storeState.modalInitLoading"
+        <p-spinner v-if="isLoading"
                    size="md"
                    class="loading qrcode"
         />
         <img v-else
-             :src="state.qrcode"
+             :src="qrCode"
              alt="QR Code"
              class="qrcode"
         >
         <div class="passkey-wrapper">
-            <p-text-input v-if="!state.isMobileSize"
-                          :value="state.passkey"
+            <p-text-input v-if="!isMobileSize"
+                          :value="passKey"
                           class="passkey"
                           disabled
                           block
             />
             <p-textarea v-else
-                        :value="state.passkey"
+                        :value="passKey"
                         class="passkey"
                         disabled
                         block
diff --git a/apps/web/src/common/components/mfa/components/VerificationCodeForm.vue b/apps/web/src/common/components/mfa/components/VerificationCodeForm.vue
new file mode 100644
index 0000000000..37aece3eb4
--- /dev/null
+++ b/apps/web/src/common/components/mfa/components/VerificationCodeForm.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { PFieldGroup, PTextInput, useProxyValue } from '@cloudforet/mirinae';
+
+
+interface Props {
+    invalid: boolean;
+    codeValue: string;
+    invalidText: string;
+}
+
+interface Emits {
+    (e: 'update:code-value', value: string): void;
+    (e: 'update:invalid', value: boolean): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const proxyTextInputValue = useProxyValue<string>('codeValue', props, emit);
+const proxyInvalid = useProxyValue<boolean>('invalid', props, emit);
+
+watch(proxyTextInputValue, () => {
+    proxyInvalid.value = false;
+});
+
+</script>
+
+<template>
+    <p-field-group :label="$t('COMMON.MFA_MODAL.VERIFICATION_CODE')"
+                   :invalid="proxyInvalid"
+                   :invalid-text="invalidText"
+                   required
+                   class="verification-code-form"
+    >
+        <p-text-input v-model="proxyTextInputValue"
+                      :invalid="proxyInvalid"
+                      class="text-input"
+                      block
+        />
+    </p-field-group>
+</template>
diff --git a/apps/web/src/common/components/mfa/composables/use-user-mfa-qr-info.ts b/apps/web/src/common/components/mfa/composables/use-user-mfa-qr-info.ts
new file mode 100644
index 0000000000..1b328a687a
--- /dev/null
+++ b/apps/web/src/common/components/mfa/composables/use-user-mfa-qr-info.ts
@@ -0,0 +1,25 @@
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+import { computed } from 'vue';
+
+import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
+
+import { useUserProfileEnableMfaQuery } from '@/common/components/mfa/composables/use-user-profile-enable-mfa-query';
+
+
+export const useUserMfaQrInfo = () => {
+    const { data: userInfo, isFetching, refetch } = useUserProfileEnableMfaQuery({
+        params: computed(() => ({
+            mfa_type: MULTI_FACTOR_AUTH_TYPE.OTP,
+            options: {},
+        })),
+    });
+
+    const qrUri = computed<string>(() => userInfo.value?.mfa?.options?.otp_qrcode_uri || '');
+
+    return {
+        isLoading: isFetching,
+        qrCode: useQRCode(qrUri, { margin: 0 }),
+        passKey: computed(() => qrUri.value?.match(/secret=([^&]*)/)?.[1] || ''),
+        refetchQrInfo: refetch,
+    };
+};
diff --git a/apps/web/src/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation.ts b/apps/web/src/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation.ts
new file mode 100644
index 0000000000..5e46b7a08a
--- /dev/null
+++ b/apps/web/src/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation.ts
@@ -0,0 +1,32 @@
+import { useMutation } from '@tanstack/vue-query';
+
+import { useUserProfileApi } from '@/api-clients/identity/user-profile/composables/use-user-profile-api';
+import type { UserProfileConfirmMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/confirm-mfa';
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+
+interface UserUserProfileConfirmMfaMutationOptions {
+    onSuccess?: (data: UserModel, variables: UserProfileConfirmMfaParameters) => Promise<void> | void;
+    onError?: (error: Error, variables: UserProfileConfirmMfaParameters) => Promise<void> | void;
+    onSettled?: (data: UserModel | undefined, error: Error | null, variables: UserProfileConfirmMfaParameters) => Promise<void> | void;
+}
+
+export const useUserProfileConfirmMfaMutation = ({
+    onSuccess,
+    onError,
+    onSettled,
+}: UserUserProfileConfirmMfaMutationOptions) => {
+    const { userProfileAPI } = useUserProfileApi();
+
+    return useMutation({
+        mutationFn: (params: UserProfileConfirmMfaParameters) => userProfileAPI.confirmMfa(params),
+        onSuccess: async (data, variables) => {
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: async (error, variables) => {
+            if (onError) await onError(error, variables);
+        },
+        onSettled: async (data, error, variables) => {
+            if (onSettled) await onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/common/components/mfa/composables/use-user-profile-enable-mfa-query.ts b/apps/web/src/common/components/mfa/composables/use-user-profile-enable-mfa-query.ts
new file mode 100644
index 0000000000..a574118903
--- /dev/null
+++ b/apps/web/src/common/components/mfa/composables/use-user-profile-enable-mfa-query.ts
@@ -0,0 +1,26 @@
+import type { ComputedRef } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useUserProfileApi } from '@/api-clients/identity/user-profile/composables/use-user-profile-api';
+import type { UserProfileEnableMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/enable-mfa';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+interface UserUserProfileEnableMfaQueryOptions {
+    params: ComputedRef<UserProfileEnableMfaParameters>;
+}
+
+export const useUserProfileEnableMfaQuery = ({
+    params,
+}: UserUserProfileEnableMfaQueryOptions) => {
+    const { userProfileAPI } = useUserProfileApi();
+    const { key, params: queryParams } = useServiceQueryKey('identity', 'user-profile', 'enable-mfa', {
+        params,
+    });
+
+    return useQuery({
+        queryKey: key,
+        queryFn: () => userProfileAPI.enableMfa(queryParams.value),
+        enabled: true,
+    });
+};
diff --git a/apps/web/src/common/components/modals/ModalController.vue b/apps/web/src/common/components/modals/ModalController.vue
new file mode 100644
index 0000000000..4f5ca450c3
--- /dev/null
+++ b/apps/web/src/common/components/modals/ModalController.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface ModalControllerProps {
+    modalTarget: string;
+}
+
+interface ModalControllerEmits {
+    (e: 'close'): void;
+    (e: 'trigger'): void;
+}
+
+const props = defineProps<ModalControllerProps>();
+const emit = defineEmits<ModalControllerEmits>();
+
+const modalVisible = ref<boolean>(false);
+
+const handleOpen = () => {
+    modalVisible.value = true;
+    emit('trigger');
+};
+
+const handleClose = () => {
+    modalVisible.value = false;
+    emit('close');
+};
+
+</script>
+
+<template>
+    <fragment>
+        <slot name="trigger"
+              v-bind="{
+                  trigger: handleOpen,
+              }"
+        />
+        <portal :to="props.modalTarget">
+            <slot name="modal"
+                  v-bind="{
+                      visible: modalVisible,
+                      onClose: handleClose,
+                  }"
+            />
+        </portal>
+    </fragment>
+</template>
diff --git a/apps/web/src/lib/config/global-config/api-client-manager.ts b/apps/web/src/lib/config/global-config/api-client-manager.ts
index e4c489ae32..6831ac7b1f 100644
--- a/apps/web/src/lib/config/global-config/api-client-manager.ts
+++ b/apps/web/src/lib/config/global-config/api-client-manager.ts
@@ -1,9 +1,7 @@
 import camelCase from 'lodash/camelCase';
-import kebabCase from 'lodash/kebabCase';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import { DEFAULT_VERSION } from '@/lib/config/global-config/constants/constants';
 import { ApiClientEndpoint } from '@/lib/config/global-config/schema/api-client-schema';
 import type { ApiClientsSchemaType, GlobalServiceConfig } from '@/lib/config/global-config/types/type';
 
@@ -40,27 +38,6 @@ class APIClientManager {
         if (!this.config || !this.apiClientsSchema) {
             throw new APIClientManagerError('Configuration or schema is not initialized');
         }
-
-        const serviceConfig: Record<string, { enabled: boolean }> = {};
-
-        Object.entries(this.config).forEach(([serviceName, config]) => {
-            if (this.apiClientsSchema?.[serviceName]) {
-                const version = config.VERSION || DEFAULT_VERSION;
-                const endpoint = this.apiClientsSchema[serviceName][version];
-                if (endpoint) {
-                    const formattedEndpoint = APIClientManager.formatEndpoint(endpoint);
-                    serviceConfig[formattedEndpoint] = {
-                        enabled: config.ENABLED,
-                    };
-                }
-            }
-        });
-
-        SpaceConnector.setServiceConfig(serviceConfig);
-    }
-
-    private static formatEndpoint(endpoint: string): string {
-        return kebabCase(endpoint);
     }
 
     private defineDynamicServices(): void {
diff --git a/apps/web/src/router/helpers/route-helper.ts b/apps/web/src/router/helpers/route-helper.ts
index fb27627324..180f9b3e3e 100644
--- a/apps/web/src/router/helpers/route-helper.ts
+++ b/apps/web/src/router/helpers/route-helper.ts
@@ -81,6 +81,7 @@ export const processTokenVerification = (to: Route, next: NavigationGuardNext, r
         AUTH_ROUTE.SIGN_OUT._NAME,
         ERROR_ROUTE._NAME,
         AUTH_ROUTE.PASSWORD.STATUS.RESET._NAME,
+        AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH_SETUP._NAME,
         ERROR_ROUTE.EXPIRED_LINK._NAME,
         ...EXTERNAL_PAGES,
     ];
diff --git a/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue b/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
index 033f17e6e6..c830c3b63e 100644
--- a/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
+++ b/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
@@ -12,10 +12,12 @@ import {
 import { i18n } from '@/translations';
 
 import { useDisplayStore } from '@/store/display/display-store';
+import { REQUIRED_ACTIONS } from '@/store/user/constant';
 import { useUserStore } from '@/store/user/user-store';
 
 import config from '@/lib/config';
 import { isMobile } from '@/lib/helper/cross-browsing-helper';
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -82,7 +84,23 @@ const signIn = async () => {
     try {
         await loadAuth().signIn(credentials, 'LOCAL');
         displayStore.setIsSignInFailed(false);
-        if (userStore.state.requiredActions?.includes('UPDATE_PASSWORD')) {
+
+        // console.log('userStore.state.requiredActions', userStore.state.requiredActions, userStore.state.mfa);
+        if (userStore.state.requiredActions?.includes(REQUIRED_ACTIONS.ENFORCE_MFA)) {
+            const MFA_TYPE = userStore.state.mfa?.mfa_type;
+            const isMFAEnforced = !!userStore.state.mfa?.options?.enforce && !!MFA_TYPE;
+            const needToEnableMFA = isMFAEnforced && userStore.state.mfa?.state !== 'ENABLED';
+            if (needToEnableMFA) { // Enforced MFA by admin. Always has both `options.enforce` and `mfa_type`.
+                if (import.meta.env.DEV) console.debug(`[ID_PW.vue] MFA_TYPE: ${MFA_TYPE}`);
+                await router.push({ name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH_SETUP._NAME, params: { mfaType: MFA_TYPE } });
+            } else {
+                showErrorMessage('Something went wrong! Contact support.', 'MFA_NOT_SETUP');
+                await router.push({ name: AUTH_ROUTE.SIGN_OUT._NAME });
+            }
+            return;
+        }
+
+        if (userStore.state.requiredActions?.includes(REQUIRED_ACTIONS.UPDATE_PASSWORD)) {
             await router.push({ name: AUTH_ROUTE.PASSWORD.STATUS.RESET._NAME });
         } else {
             emit('sign-in', state.userId);
diff --git a/apps/web/src/services/auth/components/mfa/MultifactorAuthConfigured.vue b/apps/web/src/services/auth/components/mfa/MultifactorAuthConfigured.vue
new file mode 100644
index 0000000000..73c3f908ac
--- /dev/null
+++ b/apps/web/src/services/auth/components/mfa/MultifactorAuthConfigured.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+
+import { useRouter } from 'vue-router/composables';
+
+import { PHeading, PButton } from '@cloudforet/mirinae';
+
+import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
+
+const router = useRouter();
+
+const handleClickConfirmButton = () => {
+    router.push({ name: AUTH_ROUTE.SIGN_IN._NAME });
+};
+</script>
+
+<template>
+    <div class="multifactor-auth-configured flex flex-col items-center justify-center p-8 bg-white gap-6 w-full border border-gray-200 rounded-lg">
+        <div class="flex flex-col items-center justify-center gap-2">
+            <lottie-vue-player autoplay
+                               src="/lottiefiles/lottie_done.json"
+                               :style="{ height: '5rem', width: '5rem', backgroundColor: 'transparent' }"
+            />
+            <p-heading class="text-center">
+                {{ $t('AUTH.MFA.MFA_CONFIGURED') }}
+            </p-heading>
+            <span class="text-center mt-2">
+                {{ $t('AUTH.MFA.MFA_CONFIGURED_DESC') }}
+            </span>
+        </div>
+        <p-button size="lg"
+                  class="confirm-button"
+                  @click="handleClickConfirmButton"
+        >
+            {{ $t('COMMON.EXPIRED_PAGE.SIGN_IN') }}
+        </p-button>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.multifactor-auth-configured {
+    max-width: 28.5rem;
+    align-self: center;
+}
+</style>
diff --git a/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue b/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
new file mode 100644
index 0000000000..34d1f4488f
--- /dev/null
+++ b/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import {
+    computed, onBeforeUnmount, onMounted, reactive, ref,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import {
+    PButton, PI, PTextButton,
+} from '@cloudforet/mirinae';
+
+import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
+import { i18n as _i18n } from '@/translations';
+
+import { ROOT_ROUTE } from '@/router/constant';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+
+import EmailFoldingInfo from '@/common/components/mfa/components/EmailFoldingInfo.vue';
+import EmailInfo from '@/common/components/mfa/components/EmailInfo.vue';
+import OTPForm from '@/common/components/mfa/components/OTPForm.vue';
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useUserProfileConfirmMfaMutation } from '@/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import MultifactorAuthConfigured from '@/services/auth/components/mfa/MultifactorAuthConfigured.vue';
+import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
+
+
+type TitleType = {
+    icon: string;
+    title: string;
+    desc: TranslateResult;
+};
+
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+
+const {
+    mfaType: mfaTypeRouteParam,
+} = route.params as { mfaType: MultiFactorAuthType | undefined };
+
+const state = reactive({
+    isLocalLogin: computed<boolean>(() => userStore.state.authType === 'LOCAL'),
+    myMFAType: computed<MultiFactorAuthType|undefined>(() => userStore.state.mfa?.mfa_type),
+    isInvalidMfaType: computed<boolean>(() => state.myMFAType !== mfaTypeRouteParam || !state.myMFAType || !mfaTypeRouteParam),
+    needToEnableMFA: computed<boolean>(() => {
+        const isMFAEnforced = !!userStore.state.mfa?.options?.enforce && !!state.myMFAType;
+        const needToEnableMFA = isMFAEnforced && userStore.state.mfa?.state !== 'ENABLED';
+        return needToEnableMFA;
+    }),
+    titleInfo: computed<TitleType>(() => {
+        if (mfaTypeRouteParam === MULTI_FACTOR_AUTH_TYPE.EMAIL) {
+            return {
+                icon: 'ic_notification-protocol_envelope',
+                title: 'Email',
+                desc: _i18n.t('AUTH.MFA.EMAIL_INFO'),
+            };
+        }
+        return {
+            icon: 'ic_microsoft_auth',
+            title: 'Microsoft Authenticator App',
+            desc: _i18n.t('AUTH.MFA.OTP_INFO'),
+        };
+    }),
+});
+
+const validationState = reactive({
+    verificationCode: '',
+    isVerificationCodeInvalid: false,
+    verificationCodeInvalidText: computed<TranslateResult>(() => {
+        if (mfaTypeRouteParam === MULTI_FACTOR_AUTH_TYPE.EMAIL) {
+            return _i18n.t('COMMON.MFA_MODAL.INVALID_CODE_EMAIL');
+        }
+        return _i18n.t('COMMON.MFA_MODAL.INVALID_CODE_OTP');
+    }),
+});
+
+const isSentCode = ref<boolean>(false);
+const isVerified = ref<boolean>(false);
+
+/* Components */
+const handleClickGoBackButton = () => {
+    SpaceConnector.flushToken();
+    router.replace({ name: AUTH_ROUTE.SIGN_IN._NAME });
+};
+
+/* API */
+const { mutate: confirmMfa, isPending: isConfirmMfaPending } = useUserProfileConfirmMfaMutation({
+    onSuccess: () => {
+        SpaceConnector.flushToken();
+        isVerified.value = true;
+    },
+    onError: (error) => {
+        validationState.isVerificationCodeInvalid = true;
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+    },
+});
+
+
+/* Events */
+const handleClickConfirmButton = async () => {
+    await confirmMfa({
+        verify_code: validationState.verificationCode,
+    });
+};
+
+onMounted(() => {
+    // Remove refresh token to prevent forced access to other pages
+    SpaceConnector.removeRefreshToken();
+
+    if (!SpaceConnector.getAccessToken() || !state.needToEnableMFA || state.isInvalidMfaType) {
+        router.push({ name: AUTH_ROUTE.SIGN_OUT._NAME });
+        return;
+    } if (!state.isLocalLogin) {
+        router.push({ name: ROOT_ROUTE._NAME });
+    }
+});
+
+onBeforeUnmount(() => {
+    SpaceConnector.flushToken();
+});
+</script>
+
+<template>
+    <div class="multi-factor-authentication-page">
+        <div v-if="!isVerified"
+             class="form-wrapper"
+        >
+            <div class="headline-wrapper">
+                <p-i :name="state.titleInfo.icon"
+                     height="2rem"
+                     width="2rem"
+                />
+                <span>{{ state.titleInfo.title }}</span>
+            </div>
+            <div v-if="mfaTypeRouteParam === MULTI_FACTOR_AUTH_TYPE.OTP"
+                 class="o-t-p-form-wrapper pt-2 pb-6"
+            >
+                <o-t-p-form :verification-code.sync="validationState.verificationCode"
+                            :verification-code-invalid.sync="validationState.isVerificationCodeInvalid"
+                            :invalid-text="validationState.verificationCodeInvalidText"
+                />
+            </div>
+            <div v-else-if="mfaTypeRouteParam === MULTI_FACTOR_AUTH_TYPE.EMAIL"
+                 class="email-info-wrapper"
+            >
+                <email-info :is-sent-code.sync="isSentCode"
+                            is-form
+                />
+                <verification-code-form :invalid.sync="validationState.isVerificationCodeInvalid"
+                                        :code-value.sync="validationState.verificationCode"
+                                        :invalid-text="validationState.verificationCodeInvalidText"
+                />
+                <email-folding-info :is-sent-code.sync="isSentCode" />
+            </div>
+            <p-button size="lg"
+                      :loading="isConfirmMfaPending"
+                      class="confirm-button"
+                      :disabled="validationState.verificationCode === ''"
+                      @click="handleClickConfirmButton"
+            >
+                {{ $t('AUTH.MFA.SETUP_VERIFY') }}
+            </p-button>
+            <div class="toolbox-wrapper">
+                <p-text-button class="go-back-button mr-2"
+                               icon-left="ic_arrow-left"
+                               style-type="highlight"
+                               size="md"
+                               @click="handleClickGoBackButton"
+                >
+                    {{ $t('AUTH.MFA.GO_BACK') }}
+                </p-text-button>
+            </div>
+        </div>
+        <multifactor-auth-configured v-else />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.multi-factor-authentication-page {
+    @apply flex flex-col;
+    width: 100%;
+    margin-top: 6rem;
+    .form-wrapper {
+        @apply relative flex flex-col border border-gray-200 bg-white;
+        width: 100%;
+        max-width: 28.5rem;
+        padding: 2rem;
+        align-self: center;
+        gap: 0.5rem;
+        border-radius: 0.375rem;
+        .headline-wrapper {
+            @apply flex items-center text-display-md font-bold;
+            gap: 0.75rem;
+        }
+        .email-info-wrapper {
+            .email-info-desc {
+                @apply block text-label-md;
+            }
+            .email-text {
+                @apply block text-violet-600 font-medium;
+                padding-top: 0.25rem;
+            }
+        }
+        .input-form {
+            margin-top: 1rem;
+            .text-input {
+                width: 100%;
+            }
+        }
+        .toolbox-wrapper {
+            margin-top: 2rem;
+            .go-back-button {
+                @apply inline-flex items-center justify-center;
+                gap: 0.25rem;
+            }
+        }
+        .collapsible-container {
+            @apply relative bg-gray-100 border border-gray-200;
+            width: 100%;
+            max-width: initial;
+            margin-top: 1rem;
+            padding: 2rem 1rem 1rem;
+            border-radius: 0.375rem;
+            .close-button {
+                @apply absolute;
+                top: 0.5rem;
+                right: 1rem;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/auth/routes/route-constant.ts b/apps/web/src/services/auth/routes/route-constant.ts
index 17b737fec6..7baa5012d5 100644
--- a/apps/web/src/services/auth/routes/route-constant.ts
+++ b/apps/web/src/services/auth/routes/route-constant.ts
@@ -4,6 +4,7 @@ export const AUTH_ROUTE = Object.freeze({
         _NAME: 'signIn',
         KEYCLOAK: { _NAME: 'keycloak' },
         MULTI_FACTOR_AUTH: { _NAME: 'multiFactorAuth' },
+        MULTI_FACTOR_AUTH_SETUP: { _NAME: 'multiFactorAuthSetup' },
         KB: { _NAME: 'KB_SSO', _PATH: 'kbfg-sso' },
     },
     SIGN_OUT: {
diff --git a/apps/web/src/services/auth/routes/routes.ts b/apps/web/src/services/auth/routes/routes.ts
index 0f72352e8f..d924abe24e 100644
--- a/apps/web/src/services/auth/routes/routes.ts
+++ b/apps/web/src/services/auth/routes/routes.ts
@@ -9,6 +9,7 @@ const KeycloakPage = () => import('@/services/auth/pages/KeycloakPage.vue');
 const PasswordPage = () => import('@/services/auth/pages/PasswordPage.vue');
 const ValidationEmailPage = () => import('@/services/auth/pages/ValidationEmailPage.vue');
 const MultiFactorAuthPage = () => import('@/services/auth/pages/MultiFactorAuthPage.vue');
+const MultiFactorAuthSetUpPage = () => import('@/services/auth/pages/MultiFactorAuthSetUpPage.vue');
 
 const SamlRedirectPage = () => import('@/services/auth/pages/SamlRedirectPage.vue');
 
@@ -65,6 +66,19 @@ export default [
                 }),
                 component: MultiFactorAuthPage,
             },
+            {
+                path: 'mfa-setup/:mfaType',
+                name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH_SETUP._NAME,
+                meta: {
+                    isSignInPage: true,
+                    isCentered: true,
+                },
+                props: (route) => ({
+                    previousPath: route.query.previousPath,
+                    redirectPath: route.query.redirectPath,
+                }),
+                component: MultiFactorAuthSetUpPage,
+            },
         ],
     },
     {
diff --git a/apps/web/src/services/iam/components/UserManagementAddModal.vue b/apps/web/src/services/iam/components/UserManagementAddModal.vue
index 1409c985b8..518f85a482 100644
--- a/apps/web/src/services/iam/components/UserManagementAddModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddModal.vue
@@ -12,6 +12,8 @@ import { PButtonModal } from '@cloudforet/mirinae';
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleCreateParameters } from '@/api-clients/identity/role-binding/schema/api-verbs/create';
+import { MFA_STATE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import type { UserCreateParameters } from '@/api-clients/identity/user/schema/api-verbs/create';
 import type { AuthType } from '@/api-clients/identity/user/schema/type';
 import type { WorkspaceUserCreateParameters } from '@/api-clients/identity/workspace-user/schema/api-verbs/create';
@@ -25,6 +27,7 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import UserMFASettingEnforceForm from '@/services/iam/components/mfa/UserMFASettingEnforceForm.vue';
 import UserManagementAddAdminRole from '@/services/iam/components/UserManagementAddAdminRole.vue';
 import UserManagementAddPassword from '@/services/iam/components/UserManagementAddPassword.vue';
 import UserManagementAddRole from '@/services/iam/components/UserManagementAddRole.vue';
@@ -34,11 +37,15 @@ import { useRoleBindingCreateMutation } from '@/services/iam/composables/use-rol
 import { useUserCreateMutation } from '@/services/iam/composables/use-user-create-mutation';
 import { useWorkspaceGroupAddUsersMutation } from '@/services/iam/composables/use-workspace-group-add-users-mutation';
 import { useWorkspaceUserCreateMutation } from '@/services/iam/composables/use-workspace-user-create-mutation';
-import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
+import { MULTI_FACTOR_AUTH_ITEMS, USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
 import { checkEmailFormat } from '@/services/iam/helpers/user-management-form-validations';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 import type { AddModalMenuItem, AddAdminRoleFormState } from '@/services/iam/types/user-type';
 
+interface UserMFASettingFormState {
+    isRequiredMfa: boolean;
+    selectedMfaType: MultiFactorAuthType;
+}
 
 
 const userPageStore = useUserPageStore();
@@ -88,6 +95,11 @@ const state = reactive({
     tags: {} as Tags,
 });
 
+const mfaSettingState = reactive<UserMFASettingFormState>({
+    isRequiredMfa: false,
+    selectedMfaType: MULTI_FACTOR_AUTH_ITEMS[0].type,
+});
+
 /* Component */
 const handleAdminRoleChangeInput = (items: AddAdminRoleFormState) => {
     if (items.role) state.role = items.role;
@@ -165,6 +177,11 @@ const fetchCreateUser = async (item: AddModalMenuItem): Promise<void> => {
         timezone: domainSettings?.timezone || 'UTC',
     };
 
+    if (userPageState.isAdminMode && userInfoParams.auth_type === 'LOCAL') {
+        userInfoParams.enforce_mfa_state = mfaSettingState.isRequiredMfa ? MFA_STATE.ENABLED : undefined;
+        userInfoParams.enforce_mfa_type = mfaSettingState.isRequiredMfa ? mfaSettingState.selectedMfaType : undefined;
+    }
+
     const createRoleBinding = async () => {
         if (userPageStore.getters.isWorkspaceOwner || state.isSetAdminRole) {
             await fetchCreateRoleBinding(item);
@@ -271,6 +288,13 @@ watch(() => route.query, (query) => {
                                               :password.sync="state.password"
                                               :disabled-reset-password="state.disabledResetPassword"
                 />
+                <div v-if="userPageState.isAdminMode && state.userList.length > 0 && !state.userList.some((item) => item.auth_type === 'EXTERNAL')"
+                     class="p-3 bg-white rounded-lg"
+                >
+                    <user-m-f-a-setting-enforce-form :is-required-mfa.sync="mfaSettingState.isRequiredMfa"
+                                                     :selected-mfa-type.sync="mfaSettingState.selectedMfaType"
+                    />
+                </div>
                 <user-management-add-admin-role v-if="userPageState.isAdminMode"
                                                 :is-set-admin-role.sync="state.isSetAdminRole"
                                                 @change-input="handleAdminRoleChangeInput"
diff --git a/apps/web/src/services/iam/components/UserManagementAddPassword.vue b/apps/web/src/services/iam/components/UserManagementAddPassword.vue
index 3903365669..7ddb2b3713 100644
--- a/apps/web/src/services/iam/components/UserManagementAddPassword.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddPassword.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
 
 import {
     PTextInput, PFieldGroup, PToggleButton, PDivider, PFieldTitle, PButton, PCopyButton,
 } from '@cloudforet/mirinae';
 
+import { i18n } from '@/translations';
+
+import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { generatePassword } from '@/services/iam/helpers/generate-helper';
@@ -31,20 +33,49 @@ const state = reactive({
     isGenerate: false,
     copyButtonVisible: true,
 });
-const validationState = reactive({
-    isPasswordValid: undefined as undefined | boolean,
-    passwordInvalidText: '' as TranslateResult | string,
+
+const {
+    forms: {
+        password,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+} = useFormValidator({
+    password: '',
+}, {
+    password(value: string) {
+        if (value === '') return '';
+        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
+
+        if (!passwordRegex.test(value)) {
+            return i18n.t('IAM.USER.FORM.PASSWORD_VALIDATION_INVALID');
+        }
+
+        return '';
+    },
 });
 
 /* Components */
+const handleChangeInput = (value: string) => {
+    setForm('password', value);
+
+    if (!invalidState.password) {
+        state.proxyPassword = value;
+    } else {
+        state.proxyPassword = '';
+    }
+};
 const handleChangeToggleButton = () => {
     state.proxyIsReset = !state.proxyIsReset;
-};
-const handleChangeInput = (value) => {
-    state.proxyPassword = value;
+    if (state.proxyIsReset) {
+        state.proxyPassword = '';
+        handleChangeInput('');
+    }
 };
 const handleClickGenerate = () => {
-    state.proxyPassword = generatePassword();
+    const newPassword = generatePassword();
+    handleChangeInput(newPassword);
 };
 </script>
 
@@ -64,8 +95,8 @@ const handleClickGenerate = () => {
             <p-field-group
                 :label="$t('IAM.USER.FORM.PASSWORD')"
                 :required="true"
-                :invalid="validationState.isPasswordValid"
-                :invalid-text="validationState.passwordInvalidText"
+                :invalid="invalidState.password"
+                :invalid-text="invalidTexts.password"
                 class="password-form-wrapper"
             >
                 <div class="password-form">
@@ -74,10 +105,10 @@ const handleClickGenerate = () => {
                     >
                         {{ $t('IAM.USER.FORM.GENERATE') }}
                     </p-button>
-                    <p-text-input :value="state.proxyPassword"
+                    <p-text-input :value="password"
                                   class="password-input"
                                   :placeholder="$t('IAM.USER.FORM.GENERATE_PLACEHOLDER')"
-                                  :invalid="validationState.isPasswordValid"
+                                  :invalid="invalidState.password"
                                   @update:value="handleChangeInput"
                                   @focusin="() => state.copyButtonVisible = false"
                                   @focusout="() => state.copyButtonVisible = true"
diff --git a/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue b/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
index e0b5cd2322..6500b32d9f 100644
--- a/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
@@ -5,11 +5,13 @@ import {
     PFieldGroup, PTextInput,
 } from '@cloudforet/mirinae';
 
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
+import { useUserGetQuery } from '@/services/iam/composables/use-admin-user-get-query';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import type { UserListItemType } from '@/services/iam/types/user-type';
+
 
 
 interface Props {
@@ -22,22 +24,24 @@ const props = withDefaults(defineProps<Props>(), {
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 
-const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
-const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
-
 const emit = defineEmits<{(e: 'update:name', value: string): void}>();
 
+const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
+    userId: computed(() => userPageState.selectedUserForForm?.user_id || ''),
+});
+
 const state = reactive({
-    data: computed<UserListItemType>(() => selectedUsers.value?.[0] ?? {}),
+    data: computed<UserModel|undefined>(() => userData.value),
     proxyName: useProxyValue('name', props, emit),
 });
 
+
 /* Components */
 const handleChangeName = (value: string) => {
     state.proxyName = value;
 };
 const setForm = () => {
-    state.proxyName = state.data.name || '';
+    state.proxyName = state.data?.name || '';
 };
 
 /* Init */
@@ -51,7 +55,7 @@ onMounted(() => {
         <p-field-group :label="$t('IAM.USER.FORM.USER_ID')"
                        required
         >
-            <p-text-input :value="state.data.user_id"
+            <p-text-input :value="state.data?.user_id"
                           disabled
                           block
             />
@@ -60,6 +64,7 @@ onMounted(() => {
                        class="input-form"
         >
             <p-text-input :value="state.proxyName"
+                          :loading="isUserLoading"
                           class="text-input"
                           block
                           @update:value="handleChangeName"
diff --git a/apps/web/src/services/iam/components/UserManagementFormModal.vue b/apps/web/src/services/iam/components/UserManagementFormModal.vue
index f2d5e9e09c..469eec5486 100644
--- a/apps/web/src/services/iam/components/UserManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormModal.vue
@@ -16,6 +16,8 @@ import type { RoleBindingListParameters } from '@/api-clients/identity/role-bind
 import type { RoleBindingUpdateRoleParameters } from '@/api-clients/identity/role-binding/schema/api-verbs/update-role';
 import type { RoleBindingModel } from '@/api-clients/identity/role-binding/schema/model';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { MFA_STATE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import { useUserApi } from '@/api-clients/identity/user/composables/use-user-api';
 import type { UserUpdateParameters } from '@/api-clients/identity/user/schema/api-verbs/update';
 import type { UserMfa, UserModel } from '@/api-clients/identity/user/schema/model';
@@ -25,51 +27,44 @@ import { i18n } from '@/translations';
 import { useUserStore } from '@/store/user/user-store';
 
 import config from '@/lib/config';
-import { postUserDisableMfa } from '@/lib/helper/multi-factor-auth-helper';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import { postUserValidationEmail } from '@/lib/helper/verify-email-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import UserMFASettingFormLayout from '@/services/iam/components/mfa/UserMFASettingFormLayout.vue';
 import UserManagementAddTag from '@/services/iam/components/UserManagementAddTag.vue';
 import UserManagementFormAdminRole from '@/services/iam/components/UserManagementFormAdminRole.vue';
 import UserManagementFormInfoForm from '@/services/iam/components/UserManagementFormInfoForm.vue';
-import UserManagementFormMultiFactorAuth
-    from '@/services/iam/components/UserManagementFormMultiFactorAuth.vue';
 import UserManagementFormNotificationEmailForm
     from '@/services/iam/components/UserManagementFormNotificationEmailForm.vue';
 import UserManagementFormPasswordForm from '@/services/iam/components/UserManagementFormPasswordForm.vue';
+import { useUserGetQuery } from '@/services/iam/composables/use-admin-user-get-query';
 import { useRoleListQuery } from '@/services/iam/composables/use-role-list-query';
-import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
-import { PASSWORD_TYPE } from '@/services/iam/constants/user-constant';
+import { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
+import { MULTI_FACTOR_AUTH_ITEMS, PASSWORD_TYPE } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import type { AddModalMenuItem, UserListItemType } from '@/services/iam/types/user-type';
-
-
-interface UserManagementData {
-    user_id: string;
-    name: string;
-    email: string;
-    tags: Tags;
-    password: string;
-    reset_password?: boolean;
-    backend?: string;
-    user_type?: string;
+import type { AddModalMenuItem } from '@/services/iam/types/user-type';
+
+interface UserMFASettingFormState {
+    isRequiredMfa: boolean;
+    selectedMfaType: MultiFactorAuthType;
 }
 
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const userStore = useUserStore();
 
-const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
-const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
 const { roleListData: roles } = useRoleListQuery();
+const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
+    userId: computed(() => userPageState.selectedUserForForm?.user_id || ''),
+});
 
 const emit = defineEmits<{(e: 'confirm'): void; }>();
 
 const state = reactive({
     mfaLoading: false,
-    data: computed<UserListItemType>(() => selectedUsers.value?.[0] ?? {}),
+    data: computed<UserModel|undefined>(() => userData.value as UserModel),
     smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
     mfa: computed<UserMfa|undefined>(() => userStore.state.mfa),
     loginUserId: computed<string|undefined>(() => userStore.state.userId),
@@ -77,6 +72,12 @@ const state = reactive({
     isChangedRoleToggle: false,
     roleBindingList: [] as RoleBindingModel[],
 });
+
+const mfaSettingFormState = reactive<UserMFASettingFormState>({
+    isRequiredMfa: false,
+    selectedMfaType: MULTI_FACTOR_AUTH_ITEMS[0].type,
+});
+
 const formState = reactive({
     name: '',
     email: '',
@@ -92,16 +93,20 @@ const formState = reactive({
 });
 
 /* Components */
-const handleClose = () => {
+const closeModal = () => {
     userPageStore.$patch((_state) => {
         _state.state.modal.visible = undefined;
         _state.state.modal = cloneDeep(_state.state.modal);
     });
 };
+const handleClose = () => {
+    closeModal();
+    userPageStore.setSelectedUserForForm(undefined);
+};
 const setForm = () => {
-    formState.name = state.data.name || '';
-    formState.email = state.data.email || '';
-    formState.tags = state.data.tags || {};
+    formState.name = state.data?.name || '';
+    formState.email = state.data?.email || '';
+    formState.tags = state.data?.tags || {};
 };
 const handleChangeInputs = (value) => {
     if (value.email) formState.email = value.email;
@@ -110,13 +115,13 @@ const handleChangeInputs = (value) => {
     if (value.passwordType) formState.passwordType = value.passwordType;
     if (value.role) formState.role = value.role;
 };
-const buildUserInfoParams = (): UserManagementData => ({
-    user_id: state.data.user_id || '',
+const buildUserInfoParams = (): UserUpdateParameters => ({
+    user_id: state.data?.user_id || '',
     name: formState.name,
-    email: formState.isValidEmail ? formState.email : state.data.email || '',
+    email: formState.isValidEmail ? formState.email : state.data?.email || '',
     tags: formState.tags || {},
     password: formState.password || '',
-    reset_password: state.data.auth_type === 'LOCAL' && formState.passwordType === PASSWORD_TYPE.RESET,
+    reset_password: state.data?.auth_type === 'LOCAL' && formState.passwordType === PASSWORD_TYPE.RESET,
 });
 
 const { userAPI } = useUserApi();
@@ -124,22 +129,27 @@ const { key: userListQueryKey } = useServiceQueryKey('identity', 'user', 'list')
 const { withSuffix: userGetQueryKey } = useServiceQueryKey('identity', 'user', 'get');
 const queryClient = useQueryClient();
 
+const handleOpenDisableMfaModal = () => {
+    closeModal();
+    userPageStore.setMfaSecretKeyDeleteModalVisible(true);
+    userPageStore.setPreviousModalType(USER_MODAL_MAP.UPDATE);
+    console.log('handleOpenDisableMfaModal22');
+};
+
+
 const { mutateAsync: updateUser } = useMutation({
     mutationFn: userAPI.update,
     onSuccess: async () => {
         if (formState.isValidEmail) {
             await updateUserEmail();
             await verifyUserEmail();
-            if (state.loginUserId === state.data.user_id) {
+            if (state.loginUserId === state.data?.user_id) {
                 await userStore.updateUser({
-                    email: state.data.email,
+                    email: state.data?.email,
                 });
                 userStore.setEmailVerified(true);
             }
-            userPageStore.setUserEmail(state.data.user_id, state.data.email);
-        }
-        if (state.isChangedMfaToggle) {
-            await fetchPostDisableMfa();
+            userPageStore.setUserEmail(state.data?.user_id, state.data?.email);
         }
 
         if (state.roleBindingList.length > 0 && !state.isChangedRoleToggle) {
@@ -149,23 +159,40 @@ const { mutateAsync: updateUser } = useMutation({
         }
 
         await queryClient.invalidateQueries({ queryKey: userListQueryKey.value });
-        await queryClient.invalidateQueries({ queryKey: userGetQueryKey(state.data.user_id ?? '') });
+        await queryClient.invalidateQueries({ queryKey: userGetQueryKey(state.data?.user_id ?? '') });
+
         showSuccessMessage(i18n.t('IAM.USER.MAIN.MODAL.ALT_S_UPDATE_USER'), '');
-        handleClose();
+        closeModal();
         emit('confirm');
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('IAM.USER.MAIN.MODAL.ALT_E_UPDATE_USER'));
     },
+    onSettled: () => {
+        userPageStore.setSelectedUserForForm(undefined);
+    },
 });
 
 /* API */
 const handleConfirm = async () => {
     const userInfoParams = buildUserInfoParams();
+    if (state.data?.auth_type === 'LOCAL') { // Only Local Auth Type Users can be updated
+        const existingMfa = state.data?.mfa;
+        if (!!existingMfa?.options?.enforce !== mfaSettingFormState.isRequiredMfa) { // switch required mfa state Case
+            userInfoParams.enforce_mfa_state = mfaSettingFormState.isRequiredMfa ? MFA_STATE.ENABLED : MFA_STATE.DISABLED;
+            if (userInfoParams.enforce_mfa_state === MFA_STATE.ENABLED) {
+                userInfoParams.enforce_mfa_type = mfaSettingFormState.isRequiredMfa ? mfaSettingFormState.selectedMfaType : undefined;
+            }
+        } else if (mfaSettingFormState.isRequiredMfa && existingMfa?.mfa_type !== mfaSettingFormState.selectedMfaType) { // switch mfa type Case (enforce mfa state is true)
+            userInfoParams.enforce_mfa_state = MFA_STATE.ENABLED;
+            userInfoParams.enforce_mfa_type = mfaSettingFormState.selectedMfaType;
+        }
+    }
     await updateUser(userInfoParams);
 };
+
 const fetchRoleBinding = async (item?: AddModalMenuItem) => {
-    if (state.data.user_id === userStore.state.userId) return;
+    if (state.data?.user_id === userStore.state.userId) return;
     if (isEmpty(formState.role)) return;
 
     const roleParams = {
@@ -179,7 +206,7 @@ const fetchRoleBinding = async (item?: AddModalMenuItem) => {
             await SpaceConnector.clientV2.identity.roleBinding.create<RoleCreateParameters, RoleBindingModel>({
                 ...roleParams,
                 workspace_id: item?.name || '',
-                user_id: state.data.user_id || '',
+                user_id: state.data?.user_id || '',
                 resource_group: RESOURCE_GROUP.DOMAIN,
             });
         } else {
@@ -203,27 +230,10 @@ const fetchDeleteRoleBinding = async () => {
         ErrorHandler.handleRequestError(e, e.message);
     }
 };
-const fetchPostDisableMfa = async () => {
-    state.mfaLoading = true;
-    try {
-        await postUserDisableMfa({
-            user_id: state.data.user_id || '',
-        });
-        if (state.loginUserId === state.data.user_id) {
-            userStore.setMfa({
-                ...state.data.mfa as UserMfa,
-                state: 'DISABLED',
-            });
-        }
-    } catch (e: any) {
-        ErrorHandler.handleRequestError(e, e.message);
-    } finally {
-        state.mfaLoading = false;
-    }
-};
+
 const fetchListRoleBindingInfo = async () => {
     const response = await SpaceConnector.clientV2.identity.roleBinding.list<RoleBindingListParameters, ListResponse<RoleBindingModel>>({
-        user_id: state.data.user_id || '',
+        user_id: state.data?.user_id || '',
         query: {
             filter: [{ k: 'role_type', v: ROLE_TYPE.DOMAIN_ADMIN, o: 'eq' }],
         },
@@ -242,14 +252,14 @@ const fetchListRoleBindingInfo = async () => {
 };
 const updateUserEmail = async () => {
     await SpaceConnector.clientV2.identity.user.update<UserUpdateParameters, UserModel>({
-        user_id: state.data.user_id || '',
-        email: state.data.email || '',
+        user_id: state.data?.user_id || '',
+        email: state.data?.email || '',
     });
 };
 const verifyUserEmail = async () => {
     await postUserValidationEmail({
-        user_id: state.data.user_id || '',
-        email: state.data.email || '',
+        user_id: state.data?.user_id || '',
+        email: state.data?.email || '',
     });
 };
 
@@ -266,12 +276,20 @@ watch(() => userPageState.modal.visible, async (visible) => {
         formState.role = {} as AddModalMenuItem;
     }
 });
+
+watch(() => state.data?.mfa, (mfa) => {
+    if (mfa) {
+        mfaSettingFormState.isRequiredMfa = !!mfa.options?.enforce;
+        mfaSettingFormState.selectedMfaType = mfa.mfa_type || MULTI_FACTOR_AUTH_ITEMS[0].type;
+    }
+}, { immediate: true });
 </script>
 
 <template>
     <p-button-modal class="user-management-modal"
                     :header-title="userPageState.modal.title"
                     size="md"
+                    :loading="isUserLoading"
                     :fade="true"
                     :backdrop="true"
                     :visible="userPageState.modal.visible === 'form'"
@@ -288,10 +306,15 @@ watch(() => userPageState.modal.visible, async (visible) => {
                     @change-input="handleChangeInputs"
                 />
                 <user-management-form-password-form
-                    v-if="state.data.auth_type === 'LOCAL'"
+                    v-if="state.data?.auth_type === 'LOCAL'"
                     @change-input="handleChangeInputs"
                 />
-                <user-management-form-multi-factor-auth :is-changed-toggle.sync="state.isChangedMfaToggle" />
+                <user-m-f-a-setting-form-layout v-if="state.data?.auth_type === 'LOCAL'"
+                                                :selected-mfa-controllable-target="state.data"
+                                                :is-required-mfa.sync="mfaSettingFormState.isRequiredMfa"
+                                                :selected-mfa-type.sync="mfaSettingFormState.selectedMfaType"
+                                                @click-disable-mfa="handleOpenDisableMfaModal"
+                />
                 <user-management-form-admin-role v-if="userPageState.isAdminMode"
                                                  :role.sync="formState.role"
                                                  :is-changed-toggle.sync="state.isChangedRoleToggle"
diff --git a/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue b/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
index ea6ad2ed3c..d507101523 100644
--- a/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
@@ -7,6 +7,7 @@ import {
     PFieldGroup, PTextInput, PTooltip, PI, PButton, PBadge,
 } from '@cloudforet/mirinae';
 
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
 import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
@@ -15,9 +16,8 @@ import { emailValidator } from '@/lib/helper/user-validation-helper';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
+import { useUserGetQuery } from '@/services/iam/composables/use-admin-user-get-query';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import type { UserListItemType } from '@/services/iam/types/user-type';
 
 
 
@@ -25,15 +25,17 @@ const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const userStore = useUserStore();
 
-const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
-const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
-
 const emit = defineEmits<{(e: 'change-input', formState): void,
     (e: 'change-verify', value: boolean): void,
 }>();
 
+
+const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
+    userId: computed(() => userPageState.selectedUserForForm?.user_id || ''),
+});
+
 const state = reactive({
-    data: computed<UserListItemType>(() => selectedUsers.value?.[0] ?? {}),
+    data: computed<UserModel|undefined>(() => userData.value),
     loading: false,
     isEdit: false,
     isCollapsed: true,
@@ -47,7 +49,7 @@ const {
     invalidState,
     invalidTexts,
 } = useFormValidator({
-    email: state.data.email,
+    email: state.data?.email || '',
 }, {
     email(value: string) { return !emailValidator(value) ? '' : i18n.t('IAM.USER.FORM.EMAIL_INVALID'); },
 });
@@ -107,6 +109,7 @@ watch(() => state.data?.email_verified, (value) => {
                 <div class="input-form">
                     <!-- HACK: need to apply placeholder changes based on the distinction between open source and SaaS. -->
                     <p-text-input :value="email"
+                                  :loading="isUserLoading"
                                   :invalid="invalid"
                                   placeholder="user@spaceone.io"
                                   :disabled="!state.isEdit"
diff --git a/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue b/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
index 820cd1bcf1..01b1637843 100644
--- a/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
@@ -5,34 +5,33 @@ import {
     PTextInput, PFieldGroup, PRadio, PDivider, PRadioGroup, PI,
 } from '@cloudforet/mirinae';
 
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
 import { i18n } from '@/translations';
 
 import config from '@/lib/config';
 import {
-    oneLowerCaseValidator,
-    oneNumberValidator,
-    oneUpperCaseValidator,
     samePasswordValidator,
 } from '@/lib/helper/user-validation-helper';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
+import { useUserGetQuery } from '@/services/iam/composables/use-admin-user-get-query';
 import { PASSWORD_TYPE } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import type { UserListItemType } from '@/services/iam/types/user-type';
 
 
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 
-const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
-const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
-
 const emit = defineEmits<{(e: 'change-input', formState): void}>();
 
+
+const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
+    userId: computed(() => userPageState.selectedUserForForm?.user_id || ''),
+});
+
 const state = reactive({
-    data: computed<UserListItemType>(() => selectedUsers.value?.[0] ?? {}),
+    data: computed<UserModel|undefined>(() => userData.value),
     smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
     passwordStatus: 0,
     passwordTypeArr: computed(() => {
@@ -41,7 +40,7 @@ const state = reactive({
             additionalItems.push({
                 name: PASSWORD_TYPE.RESET,
                 label: i18n.t('COMMON.PROFILE.SEND_LINK'),
-                disabled: !state.data.email_verified,
+                disabled: !state.data?.email_verified,
             });
         }
         return [
@@ -72,9 +71,11 @@ const {
 }, {
     password(value: string) {
         if (value === '') return '';
-        if (!oneLowerCaseValidator(value)) return i18n.t('IDENTITY.USER.FORM.ONE_LOWER_CASE_INVALID');
-        if (!oneUpperCaseValidator(value)) return i18n.t('IDENTITY.USER.FORM.ONE_UPPER_CASE_INVALID');
-        if (!oneNumberValidator(value)) return i18n.t('IDENTITY.USER.FORM.ONE_NUMBER_INVALID');
+        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
+
+        if (!passwordRegex.test(value)) {
+            return i18n.t('IAM.USER.FORM.PASSWORD_VALIDATION_INVALID');
+        }
         return '';
     },
     passwordCheck(value: string) {
@@ -145,6 +146,7 @@ onMounted(() => {
                 >
                     <template #default="{invalid}">
                         <p-text-input :value="password"
+                                      :loading="isUserLoading"
                                       type="password"
                                       autocomplete="current-password"
                                       appearance-type="masking"
@@ -178,8 +180,9 @@ onMounted(() => {
                 </p-field-group>
             </form>
         </div>
-        <div v-if="!state.data.email_verified"
+        <div v-if="!state.data?.email_verified && !isUserLoading"
              class="help-text-wrapper"
+             :loading="isUserLoading"
         >
             <p-i name="ic_info-circle"
                  height="0.875rem"
diff --git a/apps/web/src/services/iam/components/UserManagementTab.vue b/apps/web/src/services/iam/components/UserManagementTab.vue
index 80dfb5d317..b8d8cd9758 100644
--- a/apps/web/src/services/iam/components/UserManagementTab.vue
+++ b/apps/web/src/services/iam/components/UserManagementTab.vue
@@ -198,15 +198,20 @@ const dropdownMenuHandler: AutocompleteHandler = async (inputText: string) => {
         results: dropdownState.menuItems,
     };
 };
+
 const { key: userListQueryKey } = useServiceQueryKey('identity', 'workspace-user', 'list');
 const { key: userGroupListQueryKey } = useServiceQueryKey('identity', 'role-binding', 'list');
+const { key: userGetQueryKey } = useServiceQueryKey('identity', 'workspace-user', 'get', {
+    contextKey: computed(() => userPageState.selectedUserIds[0] ?? ''),
+});
 const queryClient = useQueryClient();
 
 const { mutateAsync: updateRoleBinding } = useRoleBindingUpdateRoleMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
         showSuccessMessage(i18n.t('IAM.USER.MAIN.ALT_S_CHANGE_ROLE'), '');
-        queryClient.invalidateQueries({ queryKey: userListQueryKey.value });
-        queryClient.invalidateQueries({ queryKey: userGroupListQueryKey.value });
+        await queryClient.invalidateQueries({ queryKey: userListQueryKey.value });
+        await queryClient.invalidateQueries({ queryKey: userGroupListQueryKey.value });
+        await queryClient.invalidateQueries({ queryKey: userGetQueryKey.value });
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, e.message);
@@ -356,7 +361,7 @@ watch(() => selectedUsers.value, (val) => {
                         <div v-else />
                     </template>
                     <template #col-tags-format="{value}">
-                        <template v-if="value !== undefined && Object.keys(value).length > 0">
+                        <template v-if="value && typeof value === 'object' && Object.keys(value).length > 0">
                             <p-badge v-for="([key, val], idx) in Object.entries(value)"
                                      :key="`${key}-${val}-${idx}`"
                                      badge-type="subtle"
diff --git a/apps/web/src/services/iam/components/UserManagementTabDetail.vue b/apps/web/src/services/iam/components/UserManagementTabDetail.vue
index 198487b2f8..73af10f818 100644
--- a/apps/web/src/services/iam/components/UserManagementTabDetail.vue
+++ b/apps/web/src/services/iam/components/UserManagementTabDetail.vue
@@ -50,7 +50,7 @@ const storeState = reactive({
     smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
 });
 
-const selectedUserId = computed(() => userPageState.selectedUserIds[0] ?? '');
+const selectedUserId = computed<string>(() => userPageState.selectedUserIds[0] ?? '');
 const { userData, workspaceUserData } = useUserGetQuery(selectedUserId);
 
 const selectedUser = computed<UserListItemType>(() => userData.value ?? workspaceUserData.value ?? {});
@@ -164,12 +164,17 @@ const handleClickButton = (type: string) => {
         themeColor: 'alert',
         modalVisibleType: 'status',
     }); break;
-    case USER_MODAL_TYPE.UPDATE: userPageStore.updateModalSettings({
-        type,
-        title: i18n.t('IAM.USER.MAIN.MODAL.UPDATE_TITLE'),
-        themeColor: 'primary',
-        modalVisibleType: 'form',
-    }); break;
+    case USER_MODAL_TYPE.UPDATE:
+        userPageStore.updateModalSettings({
+            type,
+            title: i18n.t('IAM.USER.MAIN.MODAL.UPDATE_TITLE'),
+            themeColor: 'primary',
+            modalVisibleType: 'form',
+        });
+        if (userPageState.selectedIndices.length) {
+            userPageStore.setSelectedUserForForm(selectedUser.value);
+        }
+        break;
     default: break;
     }
 };
diff --git a/apps/web/src/services/iam/components/UserManagementTable.vue b/apps/web/src/services/iam/components/UserManagementTable.vue
index efc9935ef8..171d207ddb 100644
--- a/apps/web/src/services/iam/components/UserManagementTable.vue
+++ b/apps/web/src/services/iam/components/UserManagementTable.vue
@@ -476,7 +476,7 @@ const isWorkspaceGroupUser = (item: ExtendUserListItemType) => !!item?.role_bind
                 </span>
             </template>
             <template #col-tags-format="{value}">
-                <template v-if="value && !!Object.keys(value).length">
+                <template v-if="value && typeof value === 'object' && !!Object.keys(value).length">
                     <p-badge v-for="([key, val], idx) in Object.entries(value)"
                              :key="`${key}-${val}-${idx}`"
                              badge-type="subtle"
diff --git a/apps/web/src/services/iam/components/UserManagementTableToolbox.vue b/apps/web/src/services/iam/components/UserManagementTableToolbox.vue
index 4a343be2db..907c241116 100644
--- a/apps/web/src/services/iam/components/UserManagementTableToolbox.vue
+++ b/apps/web/src/services/iam/components/UserManagementTableToolbox.vue
@@ -44,11 +44,19 @@ const state = reactive({
             label: i18n.t('IAM.USER.MAIN.DISABLE'),
             disabled: !state.isSelected || selectedUsers.value?.[0]?.state === USER_STATE.DISABLE,
         },
+        {
+            type: 'item',
+            name: USER_MODAL_TYPE.SET_MFA,
+            label: i18n.t('IAM.USER.MAIN.SET_MFA'),
+            disabled: !state.isSelected || !isMfaBulkControlEnabled.value,
+        },
     ])),
 });
 
+const isMfaBulkControlEnabled = computed(() => selectedUsers.value?.some((user) => user.auth_type === 'LOCAL') || false);
+
 /* Component */
-const handleSelectDropdown = (name:string) => {
+const handleSelectDropdown = (name: typeof USER_MODAL_TYPE[keyof typeof USER_MODAL_TYPE]) => {
     switch (name) {
     case USER_MODAL_TYPE.ENABLE: userPageStore.updateModalSettings({
         type: name,
@@ -68,12 +76,19 @@ const handleSelectDropdown = (name:string) => {
         themeColor: 'alert',
         modalVisibleType: 'status',
     }); break;
-    case USER_MODAL_TYPE.UPDATE: userPageStore.updateModalSettings({
-        type: name,
-        title: i18n.t('IAM.USER.MAIN.MODAL.UPDATE_TITLE'),
-        themeColor: 'primary',
-        modalVisibleType: 'form',
-    }); break;
+    case USER_MODAL_TYPE.UPDATE:
+        userPageStore.updateModalSettings({
+            type: name,
+            title: i18n.t('IAM.USER.MAIN.MODAL.UPDATE_TITLE'),
+            themeColor: 'primary',
+            modalVisibleType: 'form',
+        });
+        if (selectedUsers.value?.length) { // NOTE: temporarily setting before vue query is ready
+            const selectedUser = selectedUsers.value[0];
+            userPageStore.setSelectedUserForForm(selectedUser);
+        }
+        break;
+    case USER_MODAL_TYPE.SET_MFA: userPageStore.setBulkMfaSettingModalVisible(true); break;
     default: break;
     }
 };
diff --git a/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue b/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
new file mode 100644
index 0000000000..9b46527e0b
--- /dev/null
+++ b/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import {
+    PButtonModal, PScopedNotification,
+} from '@cloudforet/mirinae';
+
+import { MFA_STATE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
+import type { UserUpdateParameters } from '@/api-clients/identity/user/schema/api-verbs/update';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import UserMFASettingFormLayout from '@/services/iam/components/mfa/UserMFASettingFormLayout.vue';
+import { useUserUpdateMutation } from '@/services/iam/composables/mutations/use-user-update-mutation';
+import { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
+import { MULTI_FACTOR_AUTH_ITEMS } from '@/services/iam/constants/user-constant';
+import { useUserPageStore } from '@/services/iam/store/user-page-store';
+import type { UserListItemType } from '@/services/iam/types/user-type';
+
+
+interface UserBulkMFASettingModalEmits {
+    (e: 'confirm'): void;
+}
+const emit = defineEmits<UserBulkMFASettingModalEmits>();
+
+/* Store */
+const userPageStore = useUserPageStore();
+const userPageState = userPageStore.state;
+const userPageModalState = userPageStore.modalState;
+const userPageGetters = userPageStore.getters;
+const userStore = useUserStore();
+
+/* State */
+const selectedMfaType = ref<MultiFactorAuthType>(MULTI_FACTOR_AUTH_ITEMS[0].type);
+const isRequiredMfa = ref(false);
+
+/* Computed */
+// Only Local Auth Type Users can be updated
+const selectedMFAControllableUsers = computed<UserListItemType[]>(() => userPageGetters.selectedUsers.filter((user) => user.auth_type === 'LOCAL'));
+
+// UI Conditions
+const isIncludedExternalAuthTypeUser = computed<boolean>(() => userPageGetters.selectedUsers.some((user) => user.auth_type !== 'LOCAL'));
+
+/* API */
+// Store failed user IDs
+const failedUserIds = new Set<string>();
+
+const { mutateAsync: updateUser, isPending: isUpdateUserPending } = useUserUpdateMutation({
+    onError: (error: any, variables: UserUpdateParameters) => {
+        // Store failed user IDs for logging failed users
+        failedUserIds.add(variables.user_id);
+        throw new Error(error.message);
+    },
+});
+
+/* Utils */
+const closeModal = () => {
+    userPageStore.setBulkMfaSettingModalVisible(false);
+};
+
+/* Events */
+const handleOpenDisableMfaModal = () => {
+    closeModal();
+    userPageStore.setMfaSecretKeyDeleteModalVisible(true);
+    userPageStore.setPreviousModalType(USER_MODAL_MAP.SET_MFA);
+};
+const handleClose = () => {
+    closeModal();
+};
+
+const handleConfirm = async () => {
+    if (isUpdateUserPending.value) return;
+
+    // Update MFA Promise for each user (Bulk)
+    const userUpdatePromises = selectedMFAControllableUsers.value.map(async (user) => {
+        if (!user.user_id) {
+            if (import.meta.env.DEV) throw new Error('[UserMFASettingModal.vue] There are users without user_id');
+            else throw new Error('[User MFA Setting] Something went wrong! Try again later. If the problem persists, please contact support.');
+        }
+
+        // API Policy: enforce_mfa_type is required when enforce_mfa_state is ENABLED
+        if (isRequiredMfa.value && !selectedMfaType.value) {
+            if (import.meta.env.DEV) throw new Error('[UserMFASettingModal.vue] MFA type is required when required MFA is true.');
+            else throw new Error('[User MFA Setting] Something went wrong! Try again later. If the problem persists, please contact support.');
+        }
+
+        return updateUser({
+            user_id: user.user_id,
+            enforce_mfa_state: isRequiredMfa.value ? MFA_STATE.ENABLED : MFA_STATE.DISABLED,
+            enforce_mfa_type: selectedMfaType.value,
+        });
+    });
+
+    if (userUpdatePromises.length === 0) {
+        showErrorMessage('[User MFA Setting] There are no users to update.', '');
+        return;
+    }
+
+    try {
+        const results = await Promise.allSettled(userUpdatePromises);
+        if (results.every((result) => result.status === 'fulfilled')) {
+            showSuccessMessage(i18n.t('IAM.USER.MAIN.MODAL.MFA.SET_MFA_SUCCESS_MESSAGE'), '');
+            closeModal();
+            emit('confirm');
+        } else if (results.some((result) => result.status === 'rejected')) { // Bulk update MFA failed
+            if (import.meta.env.DEV) {
+                const joinedFailedUserIds = Array.from(failedUserIds.keys()).join(', ');
+                throw new Error(`[UserMFASettingModal.vue] Bulk update MFA failed user IDs: [${joinedFailedUserIds}]`);
+            } else throw new Error('[User MFA Setting] Something went wrong! Try again later. If the problem persists, please contact support.');
+        }
+    } catch (error: any) {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+    } finally {
+        // Clear failed user IDs
+        failedUserIds.clear();
+    }
+};
+
+watch(() => userStore.state.mfa, (mfa) => {
+    if (mfa) {
+        isRequiredMfa.value = !!mfa.options?.enforce;
+        selectedMfaType.value = mfa.mfa_type || MULTI_FACTOR_AUTH_ITEMS[0].type;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal class="user-bulk-mfa-setting-modal"
+                    size="sm"
+                    :visible="userPageModalState.bulkMfaSettingModalVisible"
+                    :header-title="$t('IAM.USER.MAIN.MODAL.MFA.SET_MFA_MODAL_TITLE')"
+                    :theme-color="userPageState.modal.themeColor"
+                    :loading="isUpdateUserPending"
+                    @cancel="handleClose"
+                    @close="handleClose"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-scoped-notification v-if="isIncludedExternalAuthTypeUser"
+                                   type="warning"
+                                   :title="$t('IAM.USER.MAIN.MODAL.MFA.SET_MFA_WARNING_TITLE')"
+                                   icon="ic_warning-filled"
+                                   layout="in-section"
+            >
+                <span>{{ $t('IAM.USER.MAIN.MODAL.MFA.SET_MFA_WARNING_DESC') }}</span>
+            </p-scoped-notification>
+
+            <div class="p-4 bg-gray-100 rounded-lg mt-4">
+                <user-m-f-a-setting-form-layout :selected-mfa-controllable-target="selectedMFAControllableUsers"
+                                                :is-required-mfa.sync="isRequiredMfa"
+                                                :selected-mfa-type.sync="selectedMfaType"
+                                                @click-disable-mfa="handleOpenDisableMfaModal"
+                />
+            </div>
+        </template>
+        <template #confirm-button>
+            {{ $t('IAM.USER.MAIN.MODAL.MFA.SET_MFA_MODAL_CONFIRM_BUTTON_TEXT') }}
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue b/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
new file mode 100644
index 0000000000..83142a312d
--- /dev/null
+++ b/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { UserDisableMfaParameters } from '@/api-clients/identity/user/schema/api-verbs/disable-mfa';
+import { i18n as _i18n } from '@/translations';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+import { useUserMfaDisableMutation } from '@/services/iam/composables/mutations/use-user-mfa-disable-mutation';
+import { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
+import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
+import { useUserPageStore } from '@/services/iam/store/user-page-store';
+import type { UserListItemType } from '@/services/iam/types/user-type';
+
+interface UserMFASecretKeyDeleteModalEmits {
+    (e: 'confirm'): void;
+}
+
+const emit = defineEmits<UserMFASecretKeyDeleteModalEmits>();
+
+/* Store */
+const userPageStore = useUserPageStore();
+const userPageModalState = userPageStore.modalState;
+const userPageGetters = userPageStore.getters;
+
+/* Computed */
+// Only Local Auth Type Users can be disabled (disable = delete secret key)
+const selectedMFAEnabledUsers = computed<UserListItemType[]>(() => userPageGetters.selectedUsers.filter((user) => user.auth_type === 'LOCAL' && user.mfa?.state === 'ENABLED') || []);
+
+/* API */
+// Store failed user IDs
+const failedUserIds = new Set<string>();
+
+const { mutateAsync: disableMfa, isPending: isDisableMfaPending } = useUserMfaDisableMutation({
+    onError: (error: any, variables: UserDisableMfaParameters) => {
+        failedUserIds.add(variables.user_id);
+        throw new Error(error.message);
+    },
+});
+
+/* Utils */
+const closeModal = () => {
+    userPageStore.setMfaSecretKeyDeleteModalVisible(false);
+    userPageStore.setPreviousModalType(undefined);
+};
+const openPreviousModal = () => {
+    if (userPageModalState.previousModalType === USER_MODAL_MAP.SET_MFA) {
+        userPageStore.setBulkMfaSettingModalVisible(true);
+    }
+    if (userPageModalState.previousModalType === USER_MODAL_MAP.UPDATE) {
+        userPageStore.updateModalSettings({
+            type: USER_MODAL_TYPE.UPDATE,
+            title: '',
+            themeColor: 'primary',
+            modalVisibleType: 'form',
+        });
+    }
+};
+
+/* Events */
+const handleCancel = () => {
+    openPreviousModal();
+    closeModal();
+};
+
+const handleClose = () => {
+    closeModal();
+};
+
+/* Events */
+const handleDeleteMfaSecretKey = async () => {
+    if (isDisableMfaPending.value) return;
+
+    // Disable MFA Promise for each user (Bulk)
+    const userMFADisablePromises = selectedMFAEnabledUsers.value.map(async (user) => {
+        if (!user.user_id) {
+            if (import.meta.env.DEV) throw new Error('[UserMFASettingDisableButton.vue] There are users without user_id');
+            else throw new Error('[User MFA Secret Key Delete] Something went wrong! Try again later. If the problem persists, please contact support.');
+        }
+        return disableMfa({ user_id: user.user_id });
+    });
+
+
+    try {
+        // Disable MFA Promise for each user (Bulk)
+        const results = await Promise.allSettled(userMFADisablePromises);
+        if (results.every((result) => result.status === 'fulfilled')) {
+            showSuccessMessage(_i18n.t('IAM.USER.MAIN.MODAL.MFA.DELETE_MFA_SECRET_KEY_SUCCESS_MESSAGE'), '');
+            openPreviousModal();
+            closeModal();
+            emit('confirm');
+        } else if (results.some((result) => result.status === 'rejected')) { // Bulk disable MFA failed
+            if (import.meta.env.DEV) {
+                const joinedFailedUserIds = Array.from(failedUserIds.keys()).join(', ');
+                throw new Error(`[UserMFASettingDisableButton.vue] Bulk disable MFA failed user IDs: [${joinedFailedUserIds}]`);
+            } else throw new Error('[User MFA Secret Key Delete] Something went wrong! Try again later. If the problem persists, please contact support.');
+        }
+    } catch (error: any) {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+    } finally {
+        // Clear failed user IDs
+        failedUserIds.clear();
+    }
+};
+</script>
+
+<template>
+    <delete-modal :visible="userPageModalState.mfaSecretKeyDeleteModalVisible"
+                  :header-title="$t('IAM.USER.MAIN.MODAL.MFA.DELETE_MFA_SECRET_KEY_MODAL_TITLE')"
+                  :disabled="selectedMFAEnabledUsers.length === 0"
+                  :loading="isDisableMfaPending"
+                  :confirm-text="$t('COMMON.BUTTONS.DELETE')"
+                  @confirm="handleDeleteMfaSecretKey"
+                  @cancel="handleCancel"
+                  @close="handleClose"
+    >
+        <template v-if="selectedMFAEnabledUsers.length === 1 && userPageModalState.previousModalType === USER_MODAL_MAP.UPDATE">
+            {{ $t('IAM.USER.MAIN.MODAL.MFA.DELETE_SINGLE_MFA_SECRET_KEY_MODAL_DESC') }}
+        </template>
+        <i18n v-else
+              path="IAM.USER.MAIN.MODAL.MFA.DELETE_MULTI_MFA_SECRET_KEY_MODAL_DESC"
+        >
+            <template #selectedUsers>
+                {{ selectedMFAEnabledUsers.length }}
+            </template>
+        </i18n>
+    </delete-modal>
+</template>
diff --git a/apps/web/src/services/iam/components/mfa/UserMFASettingDisableButton.vue b/apps/web/src/services/iam/components/mfa/UserMFASettingDisableButton.vue
new file mode 100644
index 0000000000..d010446cf0
--- /dev/null
+++ b/apps/web/src/services/iam/components/mfa/UserMFASettingDisableButton.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { PButton } from '@cloudforet/mirinae';
+
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+
+
+interface UserMFASettingDisableButtonProps {
+    selectedTarget?: UserModel | UserModel[];
+}
+
+interface Emits {
+    (e: 'click'): void;
+}
+
+const props = defineProps<UserMFASettingDisableButtonProps>();
+const emit = defineEmits<Emits>();
+
+/* Computed */
+const selectedTargetUsers = computed<UserModel[]>(() => {
+    if (!props.selectedTarget) return [];
+    if (Array.isArray(props.selectedTarget)) return props.selectedTarget;
+    return [props.selectedTarget];
+});
+const buttonDisabled = computed<boolean>(() => !props.selectedTarget || selectedTargetUsers.value.length === 0);
+
+</script>
+
+<template>
+    <p-button style-type="negative-secondary"
+              class="mt-4"
+              size="md"
+              :disabled="buttonDisabled"
+              icon-left="ic_delete"
+              @click="emit('click')"
+    >
+        {{ $t('IAM.USER.MAIN.MODAL.MFA.DELETE_MFA_SECRET_KEY_BUTTON_TEXT') }}
+    </p-button>
+</template>
diff --git a/apps/web/src/services/iam/components/mfa/UserMFASettingEnforceForm.vue b/apps/web/src/services/iam/components/mfa/UserMFASettingEnforceForm.vue
new file mode 100644
index 0000000000..7b32372e24
--- /dev/null
+++ b/apps/web/src/services/iam/components/mfa/UserMFASettingEnforceForm.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { reactive, type Ref } from 'vue';
+
+import {
+    PFieldGroup, PDivider, PToggleButton, PRadioGroup, PRadio,
+    useProxyValue,
+} from '@cloudforet/mirinae';
+
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
+
+import InfoTooltip from '@/common/components/info-tooltip/InfoTooltip.vue';
+
+import { MULTI_FACTOR_AUTH_ITEMS } from '@/services/iam/constants/user-constant';
+
+interface UserMFAEnforceFormProps {
+    isRequiredMfa: boolean;
+    selectedMfaType: MultiFactorAuthType;
+}
+
+interface UserMFAEnforceFormEmits {
+    (e: 'update:is-required-mfa', value: boolean): void;
+    (e: 'update:selected-mfa-type', value: MultiFactorAuthType): void;
+}
+
+interface UserMFAEnforceFormState {
+    selectedMfaType: Ref<MultiFactorAuthType>;
+    isRequiredMfa: Ref<boolean>;
+}
+
+const props = withDefaults(defineProps<UserMFAEnforceFormProps>(), {
+    isRequiredMfa: false,
+    selectedMfaType: MULTI_FACTOR_AUTH_ITEMS[0].type,
+});
+const emit = defineEmits<UserMFAEnforceFormEmits>();
+
+/* State */
+const mfaSettingState = reactive<UserMFAEnforceFormState>({
+    isRequiredMfa: useProxyValue<boolean>('isRequiredMfa', props, emit),
+    selectedMfaType: useProxyValue<MultiFactorAuthType>('selectedMfaType', props, emit),
+});
+
+/* Events */
+const handleChangeRequiredMfa = (value: boolean) => {
+    if (!value) {
+        // if required mfa is false, set mfa type to default
+        mfaSettingState.selectedMfaType = MULTI_FACTOR_AUTH_ITEMS[0].type;
+    }
+    mfaSettingState.isRequiredMfa = value;
+};
+
+const handleChangeMfaType = (value: MultiFactorAuthType) => {
+    mfaSettingState.selectedMfaType = value;
+};
+
+</script>
+
+<template>
+    <div class="user-mfa-setting-enforce-form bg-white">
+        <p-field-group :label="$t('IAM.USER.MAIN.MODAL.MFA.REQUIRED_SETTING_FIELD_TITLE')"
+                       required
+        >
+            <template #label-extra>
+                <info-tooltip :tooltip-contents="$t('IAM.USER.MAIN.MODAL.MFA.REQUIRED_FIELD_TOOLTIP_TEXT')"
+                              tooltip-position="bottom"
+                              width="1rem"
+                              height="1rem"
+                />
+            </template>
+            <p-toggle-button :value="mfaSettingState.isRequiredMfa"
+                             show-state-text
+                             true-state-text="Required"
+                             false-state-text="Optional"
+                             position="left"
+                             @change-toggle="handleChangeRequiredMfa"
+            />
+        </p-field-group>
+
+        <p-divider horizontal />
+
+        <p-field-group v-if="mfaSettingState.isRequiredMfa"
+                       :label="$t('IAM.USER.MAIN.MODAL.MFA.MFA_TYPE_SELECT_FIELD_TITLE')"
+                       required
+        >
+            <p-radio-group direction="vertical">
+                <p-radio v-for="item in MULTI_FACTOR_AUTH_ITEMS"
+                         :key="item.type"
+                         :value="item.type"
+                         :selected="mfaSettingState.selectedMfaType"
+                         :disabled="!mfaSettingState.isRequiredMfa"
+                         @change="handleChangeMfaType"
+                >
+                    {{ item.title }}
+                </p-radio>
+            </p-radio-group>
+        </p-field-group>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+/* custom design-system component - p-divider */
+:deep(.p-divider) {
+    margin-bottom: 1rem;
+}
+</style>
diff --git a/apps/web/src/services/iam/components/mfa/UserMFASettingFormLayout.vue b/apps/web/src/services/iam/components/mfa/UserMFASettingFormLayout.vue
new file mode 100644
index 0000000000..5cf40b72cc
--- /dev/null
+++ b/apps/web/src/services/iam/components/mfa/UserMFASettingFormLayout.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, ref, type Ref,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PCollapsibleToggle, PDivider, PStatus, useProxyValue,
+} from '@cloudforet/mirinae';
+import type { StatusTheme } from '@cloudforet/mirinae/types/data-display/status/type';
+
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { i18n } from '@/translations';
+
+import { gray, green, red } from '@/styles/colors';
+
+import UserMFASettingDisableButton from '@/services/iam/components/mfa/UserMFASettingDisableButton.vue';
+import UserMFASettingEnforceForm from '@/services/iam/components/mfa/UserMFASettingEnforceForm.vue';
+import { MULTI_FACTOR_AUTH_ITEMS } from '@/services/iam/constants/user-constant';
+
+interface UserMFASettingFormLayoutProps {
+    isRequiredMfa: boolean;
+    selectedMfaType: MultiFactorAuthType;
+    selectedMfaControllableTarget: UserModel | UserModel[];
+}
+
+interface UserMFASettingFormLayoutEmits {
+    (e: 'update:is-required-mfa', value: boolean): void;
+    (e: 'update:selected-mfa-type', value: MultiFactorAuthType): void;
+    (e: 'click-disable-mfa'): void;
+}
+
+interface UserMFASettingFormState {
+    selectedMfaType: Ref<MultiFactorAuthType>;
+    isRequiredMfa: Ref<boolean>;
+}
+
+const props = withDefaults(defineProps<UserMFASettingFormLayoutProps>(), {
+    isRequiredMfa: false,
+    selectedMfaType: MULTI_FACTOR_AUTH_ITEMS[0].type,
+});
+const emit = defineEmits<UserMFASettingFormLayoutEmits>();
+
+/* State */
+const mfaSettingState = reactive<UserMFASettingFormState>({
+    isRequiredMfa: useProxyValue<boolean>('isRequiredMfa', props, emit),
+    selectedMfaType: useProxyValue<MultiFactorAuthType>('selectedMfaType', props, emit),
+});
+// UI State
+const isCollapsed = ref(false);
+
+/* Computed */
+// Single Target Form Case
+const isSingleTargetForm = computed<boolean>(() => !Array.isArray(props.selectedMfaControllableTarget));
+// Only Local Auth Type Users can be updated
+const selectedMFAControllableUsers = computed<UserModel[]>(() => {
+    if (!props.selectedMfaControllableTarget) return [];
+    if (Array.isArray(props.selectedMfaControllableTarget)) {
+        return props.selectedMfaControllableTarget;
+    }
+    return [props.selectedMfaControllableTarget];
+});
+
+// MFA Type Info Visible Condition
+const isMFATypeInfoVisible = computed<boolean>(() => selectedMFAControllableUsers.value.length === 1);
+const noActiveMfaType = computed<boolean>(() => {
+    if (!isMFATypeInfoVisible.value) return false;
+    const selectedUserMFAType = selectedMFAControllableUsers.value[0].mfa?.mfa_type;
+    const selectedUserMFAState = selectedMFAControllableUsers.value[0].mfa?.state;
+    if (!selectedUserMFAType || !selectedUserMFAState) return true;
+    return false;
+});
+const currentSelectedMfaType = computed<string|TranslateResult|undefined>(() => {
+    if (!isMFATypeInfoVisible.value) return '';
+    const selectedUserMFAType = selectedMFAControllableUsers.value[0].mfa?.mfa_type;
+    const selectedUserMFAState = selectedMFAControllableUsers.value[0].mfa?.state;
+    if (!selectedUserMFAType || !selectedUserMFAState) return i18n.t('IAM.USER.MAIN.MODAL.MFA.MFA_TYPE_NO_ACTIVE_METHOD');
+    return MULTI_FACTOR_AUTH_ITEMS.find((item) => item.type === selectedUserMFAType)?.title;
+});
+const singleUserMfaTypeStatusTheme = computed<StatusTheme|undefined>(() => {
+    if (!isMFATypeInfoVisible.value) return undefined;
+    if (noActiveMfaType.value) return gray[300];
+    const selectedUserMFAState = selectedMFAControllableUsers.value[0].mfa?.state;
+    if (!selectedUserMFAState) return gray[300];
+    return selectedUserMFAState === 'ENABLED' ? green[600] : red[500];
+});
+
+// MFA Disable Target
+const selectedMFAEnabledTarget = computed<UserModel | UserModel[] | undefined>(() => {
+    if (isSingleTargetForm.value) {
+        return selectedMFAControllableUsers.value.filter((user) => user.mfa?.state === 'ENABLED')?.[0];
+    }
+    return selectedMFAControllableUsers.value.filter((user) => user.mfa?.state === 'ENABLED');
+});
+
+
+
+</script>
+
+<template>
+    <div class="user-mfa-setting-form-layout rounded-lg p-3 bg-white">
+        <user-m-f-a-setting-enforce-form :is-required-mfa.sync="mfaSettingState.isRequiredMfa"
+                                         :selected-mfa-type.sync="mfaSettingState.selectedMfaType"
+        />
+
+        <div v-if="isMFATypeInfoVisible"
+             class="single-user-mfa-type-info inline-flex flex-col gap-1 mb-4"
+        >
+            <p-collapsible-toggle v-model="isCollapsed">
+                {{ $t('IAM.USER.MAIN.MODAL.MFA.SINGLE_USER_MFA_TYPE_INFO_TEXT') }}
+            </p-collapsible-toggle>
+            <p-status v-if="!isCollapsed"
+                      :text="currentSelectedMfaType"
+                      :icon-color="singleUserMfaTypeStatusTheme"
+                      :text-color="noActiveMfaType ? gray[400] : undefined"
+            />
+        </div>
+
+        <p-divider horizontal />
+
+        <user-m-f-a-setting-disable-button :selected-target="selectedMFAEnabledTarget"
+                                           @click="emit('click-disable-mfa')"
+        />
+    </div>
+</template>
+
+<style scoped lang="postcss">
+/* custom design-system component - p-status */
+:deep(.p-status) {
+    justify-content: unset;
+    .text {
+        @apply text-label-md;
+    }
+}
+</style>
diff --git a/apps/web/src/services/iam/composables/mutations/use-user-mfa-disable-mutation.ts b/apps/web/src/services/iam/composables/mutations/use-user-mfa-disable-mutation.ts
new file mode 100644
index 0000000000..5caf516cff
--- /dev/null
+++ b/apps/web/src/services/iam/composables/mutations/use-user-mfa-disable-mutation.ts
@@ -0,0 +1,60 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { useUserApi } from '@/api-clients/identity/user/composables/use-user-api';
+import type { UserDisableMfaParameters } from '@/api-clients/identity/user/schema/api-verbs/disable-mfa';
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+interface UseUserMfaDisableMutationOptions {
+    onSuccess?: (data: UserModel, variables: UserDisableMfaParameters) => Promise<void> | void;
+    onError?: (error: Error, variables: UserDisableMfaParameters) => Promise<void> | void;
+    onSettled?: (data: UserModel | undefined, error: Error | null, variables: UserDisableMfaParameters) => Promise<void> | void;
+    mutationOptions?: {
+        manualInvalidate?: boolean;
+    };
+}
+
+export const useUserMfaDisableMutation = ({
+    onSuccess,
+    onError,
+    onSettled,
+    mutationOptions = { manualInvalidate: false },
+}: UseUserMfaDisableMutationOptions = {}) => {
+    const { userAPI } = useUserApi();
+
+    const queryClient = useQueryClient();
+    const { withSuffix: userGetSuffix } = useServiceQueryKey('identity', 'user', 'get');
+    const { key: userListKey } = useServiceQueryKey('identity', 'user', 'list');
+    const { withSuffix: userProfileGetSuffix } = useServiceQueryKey('identity', 'user-profile', 'get');
+    const { key: userProfileListKey } = useServiceQueryKey('identity', 'user-profile', 'list');
+    const { withSuffix: workspaceUserGetSuffix } = useServiceQueryKey('identity', 'workspace-user', 'get');
+    const { key: workspaceUserListKey } = useServiceQueryKey('identity', 'workspace-user', 'list');
+
+
+    return useMutation({
+        mutationFn: (params: UserDisableMfaParameters) => {
+            if (!params.user_id) {
+                if (import.meta.env.DEV) throw new Error('[useUserMfaDisableMutation.ts] User ID is required');
+                else throw new Error('[User MFA Disable] Something went wrong! Try again later. If the problem persists, please contact support.');
+            }
+            return userAPI.disableMfa(params);
+        },
+        onSuccess: async (data, variables) => {
+            if (!mutationOptions?.manualInvalidate) {
+                await queryClient.invalidateQueries({ queryKey: userGetSuffix(variables.user_id) });
+                await queryClient.invalidateQueries({ queryKey: userListKey.value });
+                await queryClient.invalidateQueries({ queryKey: userProfileGetSuffix(variables.user_id) });
+                await queryClient.invalidateQueries({ queryKey: userProfileListKey.value });
+                await queryClient.invalidateQueries({ queryKey: workspaceUserGetSuffix(variables.user_id) });
+                await queryClient.invalidateQueries({ queryKey: workspaceUserListKey.value });
+            }
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: async (error, variables) => {
+            if (onError) await onError(error, variables);
+        },
+        onSettled: async (data, error, variables) => {
+            if (onSettled) await onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/iam/composables/mutations/use-user-update-mutation.ts b/apps/web/src/services/iam/composables/mutations/use-user-update-mutation.ts
new file mode 100644
index 0000000000..ad58073d7b
--- /dev/null
+++ b/apps/web/src/services/iam/composables/mutations/use-user-update-mutation.ts
@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { useUserApi } from '@/api-clients/identity/user/composables/use-user-api';
+import type { UserUpdateParameters } from '@/api-clients/identity/user/schema/api-verbs/update';
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+interface UseUserUpdateMutationOptions {
+    onSuccess?: (data: UserModel, variables: UserUpdateParameters) => Promise<void> | void;
+    onError?: (error: Error, variables: UserUpdateParameters) => Promise<void> | void;
+    onSettled?: (data: UserModel | undefined, error: Error | null, variables: UserUpdateParameters) => Promise<void> | void;
+}
+
+export const useUserUpdateMutation = ({
+    onSuccess,
+    onError,
+    onSettled,
+}: UseUserUpdateMutationOptions = {}) => {
+    const { userAPI } = useUserApi();
+
+    const queryClient = useQueryClient();
+    const { withSuffix: userGetSuffix } = useServiceQueryKey('identity', 'user', 'get');
+    const { key: userListKey } = useServiceQueryKey('identity', 'user', 'list');
+    const { withSuffix: userProfileGetSuffix } = useServiceQueryKey('identity', 'user-profile', 'get');
+    const { key: userProfileListKey } = useServiceQueryKey('identity', 'user-profile', 'list');
+    const { withSuffix: workspaceUserGetSuffix } = useServiceQueryKey('identity', 'workspace-user', 'get');
+    const { key: workspaceUserListKey } = useServiceQueryKey('identity', 'workspace-user', 'list');
+
+
+    return useMutation({
+        mutationFn: (params: UserUpdateParameters) => {
+            if (!params.user_id) {
+                if (import.meta.env.DEV) throw new Error('[useUserUpdateMutation.ts] User ID is required');
+                else throw new Error('[User Update] Something went wrong! Try again later. If the problem persists, please contact support.');
+            }
+            return userAPI.update(params);
+        },
+        onSuccess: async (data, variables) => {
+            await queryClient.invalidateQueries({ queryKey: userGetSuffix(variables.user_id) });
+            await queryClient.invalidateQueries({ queryKey: userListKey.value });
+            await queryClient.invalidateQueries({ queryKey: userProfileGetSuffix(variables.user_id) });
+            await queryClient.invalidateQueries({ queryKey: userProfileListKey.value });
+            await queryClient.invalidateQueries({ queryKey: workspaceUserGetSuffix(variables.user_id) });
+            await queryClient.invalidateQueries({ queryKey: workspaceUserListKey.value });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: async (error, variables) => {
+            if (onError) await onError(error, variables);
+        },
+        onSettled: async (data, error, variables) => {
+            if (onSettled) await onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/iam/constants/modal.constant.ts b/apps/web/src/services/iam/constants/modal.constant.ts
new file mode 100644
index 0000000000..884152f249
--- /dev/null
+++ b/apps/web/src/services/iam/constants/modal.constant.ts
@@ -0,0 +1,5 @@
+export const USER_MODAL_MAP = {
+    UPDATE: 'update',
+    SET_MFA: 'set-mfa',
+    DISABLE_MFA: 'disable-mfa',
+} as const;
diff --git a/apps/web/src/services/iam/constants/user-constant.ts b/apps/web/src/services/iam/constants/user-constant.ts
index a198fd1beb..ed657fbd8b 100644
--- a/apps/web/src/services/iam/constants/user-constant.ts
+++ b/apps/web/src/services/iam/constants/user-constant.ts
@@ -19,6 +19,8 @@ export const USER_MODAL_TYPE = {
     DISABLE: 'disable',
     UPDATE: 'update',
     ASSIGN: 'assign',
+    SET_MFA: 'set-mfa',
+    DELETE_MFA_SECRET_KEY: 'delete-mfa-secret-key',
 } as const;
 
 // Table
diff --git a/apps/web/src/services/iam/store/user-page-store.ts b/apps/web/src/services/iam/store/user-page-store.ts
index 30fabcffa3..4c09cafbf4 100644
--- a/apps/web/src/services/iam/store/user-page-store.ts
+++ b/apps/web/src/services/iam/store/user-page-store.ts
@@ -17,8 +17,15 @@ import { useAuthorizationStore } from '@/store/authorization/authorization-store
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import type { UserModalType } from '@/services/iam/types/modal.type';
 import type { UserListItemType, ModalSettingState, ModalState } from '@/services/iam/types/user-type';
 
+interface UserPageModalState {
+    previousModalType: UserModalType | undefined;
+    bulkMfaSettingModalVisible: boolean;
+    mfaSecretKeyDeleteModalVisible: boolean;
+}
+
 export const useUserPageStore = defineStore('page-user', () => {
     const authorizationStore = useAuthorizationStore();
 
@@ -28,7 +35,10 @@ export const useUserPageStore = defineStore('page-user', () => {
         selectedUserIds: [] as string[],
         users: [] as UserListItemType[],
         roles: [] as RoleModel[],
-        selectedIndices: [],
+        totalCount: 0,
+        selectedIndices: [] as number[],
+        pageStart: 1,
+        pageLimit: 15,
         searchFilters: [] as ConsoleFilter[],
         // This is for workspace created case in admin mode
         afterWorkspaceCreated: false,
@@ -41,9 +51,18 @@ export const useUserPageStore = defineStore('page-user', () => {
         } as ModalState,
         // Store the selected users from API call (single source of truth for selected users)
         selectedUsers: [] as UserListItemType[],
+        selectedUserForForm: undefined as UserListItemType | undefined,
+    });
+
+    const modalState = reactive<UserPageModalState>({
+        previousModalType: undefined,
+        bulkMfaSettingModalVisible: false,
+        mfaSecretKeyDeleteModalVisible: false,
     });
+
     const getters = reactive({
         isWorkspaceOwner: computed(() => authorizationStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
+        selectedOnlyWorkspaceUsers: computed(():UserListItemType[] => state.users.filter((user) => !user.role_binding_info?.workspace_group_id)),
         roleMap: computed(() => {
             const map: Record<string, RoleModel> = {};
             state.roles.forEach((role) => {
@@ -52,6 +71,22 @@ export const useUserPageStore = defineStore('page-user', () => {
             return map;
         }),
     });
+
+    const mutations = {
+        setPreviousModalType(type: UserModalType | undefined) {
+            modalState.previousModalType = type;
+        },
+        setBulkMfaSettingModalVisible(visible: boolean) {
+            modalState.bulkMfaSettingModalVisible = visible;
+        },
+        setMfaSecretKeyDeleteModalVisible(visible: boolean) {
+            modalState.mfaSecretKeyDeleteModalVisible = visible;
+        },
+        setSelectedUserForForm(user: UserListItemType | undefined) {
+            state.selectedUserForForm = user;
+        },
+    };
+
     const actions = {
         // User
         reset() {
@@ -107,7 +142,9 @@ export const useUserPageStore = defineStore('page-user', () => {
     };
     return {
         state,
+        modalState,
         getters,
+        ...mutations,
         ...actions,
     };
 });
diff --git a/apps/web/src/services/iam/types/modal.type.ts b/apps/web/src/services/iam/types/modal.type.ts
new file mode 100644
index 0000000000..2e27ffdb02
--- /dev/null
+++ b/apps/web/src/services/iam/types/modal.type.ts
@@ -0,0 +1,3 @@
+import type { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
+
+export type UserModalType = typeof USER_MODAL_MAP[keyof typeof USER_MODAL_MAP];
diff --git a/apps/web/src/services/iam/types/user-type.ts b/apps/web/src/services/iam/types/user-type.ts
index 2449b503af..babf7421c4 100644
--- a/apps/web/src/services/iam/types/user-type.ts
+++ b/apps/web/src/services/iam/types/user-type.ts
@@ -24,7 +24,7 @@ export interface ExtendUserListItemType extends UserListItemType {
     mfa_state?: 'ON'|'OFF'
 }
 
-export type UserPageModalType = 'removeMixed' | 'removeOnlyWorkspaceGroup' | 'removeOnlyWorkspace' | 'add' | 'form' | 'status' | 'assignToUserGroup';
+export type UserPageModalType = 'removeMixed' | 'removeOnlyWorkspaceGroup' | 'removeOnlyWorkspace' | 'add' | 'form' | 'status' | 'assignToUserGroup' | 'setMfa' | 'deleteMfaSecretKey';
 
 export interface ModalSettingState {
     type: string;
@@ -36,7 +36,7 @@ export interface ModalSettingState {
 export interface ModalState {
     visible?: UserPageModalType;
     type: string;
-    title: string;
+    title: string | TranslateResult;
     themeColor: string;
 }
 
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuth.vue b/apps/web/src/services/my-page/components/UserAccountMultiFactorAuth.vue
index 0365d51dd7..048ebd9a81 100644
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuth.vue
+++ b/apps/web/src/services/my-page/components/UserAccountMultiFactorAuth.vue
@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { onUnmounted } from 'vue';
+import { computed, onUnmounted } from 'vue';
 
+import { useUserStore } from '@/store/user/user-store';
+
+import InfoTooltip from '@/common/components/info-tooltip/InfoTooltip.vue';
+
+import { blue } from '@/styles/colors';
+
+import UserAccountMultiFactorAuthEmailDisableModal from '@/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailDisableModal.vue';
+import UserAccountMultiFactorAuthEmailEnableModal from '@/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailEnableModal.vue';
+import UserAccountMultiFactorAuthOTPDisableModal from '@/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPDisableModal.vue';
+import UserAccountMultiFactorAuthOTPEnableModal from '@/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPEnableModal.vue';
 import UserAccountModuleContainer from '@/services/my-page/components/UserAccountModuleContainer.vue';
-import UserAccountMultiFactorAuthFormModal from '@/services/my-page/components/UserAccountMultiFactorAuthFormModal.vue';
 import UserAccountMultiFactorAuthItems from '@/services/my-page/components/UserAccountMultiFactorAuthItems.vue';
 import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
 
+
+
 interface Props {
     readonlyMode?: boolean;
 }
@@ -13,7 +24,11 @@ interface Props {
 const props = defineProps<Props>();
 
 const multiFactorAuthStore = useMultiFactorAuthStore();
-const multiFactorAuthState = multiFactorAuthStore.state;
+const multiFactorAuthModalState = multiFactorAuthStore.modalState;
+
+const userStore = useUserStore();
+
+const isMFAEnforced = computed<boolean>(() => !!userStore.state.mfa?.options?.enforce);
 
 onUnmounted(() => {
     multiFactorAuthStore.initState();
@@ -25,14 +40,42 @@ onUnmounted(() => {
         class="user-account-multi-factor-auth"
     >
         <template #headline>
-            <div class="headline-wrapper">
-                <p class="form-title">
+            <div class="headline-wrapper flex items-center gap-2">
+                <span class="form-title text-display-md m-0">
                     {{ $t('MY_PAGE.MFA.TITLE') }}
-                </p>
+                </span>
+                <div v-if="isMFAEnforced"
+                     class="inline-flex items-center gap-1"
+                >
+                    <info-tooltip :tooltip-contents="$t('AUTH.MFA.ENFORCE_INFO_TEXT')"
+                                  width="1rem"
+                                  height="1rem"
+                                  :color="blue[600]"
+                    />
+                    <span class="text-label-sm text-blue-600">
+                        {{ $t('AUTH.MFA.REQUIRED_BY_ADMIN') }}
+                    </span>
+                </div>
             </div>
         </template>
         <user-account-multi-factor-auth-items :readonly-mode="props.readonlyMode" />
-        <user-account-multi-factor-auth-form-modal v-if="multiFactorAuthState.modalVisible" />
+
+        <user-account-multi-factor-auth-o-t-p-enable-modal v-if="multiFactorAuthModalState.OTPEnableModalVisible" />
+        <user-account-multi-factor-auth-o-t-p-enable-modal v-if="multiFactorAuthModalState.OTPReSyncModalVisible"
+                                                           re-sync
+        />
+        <user-account-multi-factor-auth-o-t-p-disable-modal v-if="multiFactorAuthModalState.OTPDisableModalVisible" />
+        <user-account-multi-factor-auth-o-t-p-disable-modal v-if="multiFactorAuthModalState.OTPSwitchModalVisible"
+                                                            switch
+        />
+        <user-account-multi-factor-auth-email-enable-modal v-if="multiFactorAuthModalState.emailEnableModalVisible" />
+        <user-account-multi-factor-auth-email-enable-modal v-if="multiFactorAuthModalState.emailReSyncModalVisible"
+                                                           re-sync
+        />
+        <user-account-multi-factor-auth-email-disable-modal v-if="multiFactorAuthModalState.emailDisableModalVisible" />
+        <user-account-multi-factor-auth-email-disable-modal v-if="multiFactorAuthModalState.emailSwitchModalVisible"
+                                                            switch
+        />
     </user-account-module-container>
 </template>
 
@@ -41,13 +84,6 @@ onUnmounted(() => {
     @apply flex flex-col;
     padding: 1.5rem 1rem 2.5rem;
     gap: 1.5rem;
-    .headline-wrapper {
-        @apply flex items-center;
-        .form-title {
-            @apply text-display-md;
-            margin-bottom: 0;
-        }
-    }
 }
 
 /* custom design-system component - p-field-group */
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthFormModal.vue b/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthFormModal.vue
deleted file mode 100644
index 8fcd989b76..0000000000
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthFormModal.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive, watch,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import { cloneDeep } from 'lodash';
-
-import {
-    PButtonModal, PFieldGroup, PTextInput,
-} from '@cloudforet/mirinae';
-
-import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
-import type { UserMfa } from '@/api-clients/identity/user/schema/model';
-import { i18n as _i18n } from '@/translations';
-
-import { useUserStore } from '@/store/user/user-store';
-
-import { postValidationMfaCode } from '@/lib/helper/multi-factor-auth-helper';
-
-import UserAccountMultiFactorAuthModalEmailInfo from '@/services/my-page/components/UserAccountMultiFactorAuthModalEmailInfo.vue';
-import UserAccountMultiFactorAuthModalFolding from '@/services/my-page/components/UserAccountMultiFactorAuthModalFolding.vue';
-import UserAccountMultiFactorAuthModalMSInfo
-    from '@/services/my-page/components/UserAccountMultiFactorAuthModalMSInfo.vue';
-import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
-import type {
-    UserInfoType,
-} from '@/services/my-page/types/multi-factor-auth-type';
-
-const multiFactorAuthStore = useMultiFactorAuthStore();
-const multiFactorAuthState = multiFactorAuthStore.state;
-const userStore = useUserStore();
-
-const emit = defineEmits<{(e: 'refresh'): void }>();
-
-const storeState = reactive({
-    userId: computed<string|undefined>(() => userStore.state.userId),
-    mfa: computed<UserMfa|undefined>(() => userStore.state.mfa || undefined),
-    selectedType: computed<string>(() => multiFactorAuthState.selectedType),
-    isReSyncModal: computed<boolean>(() => multiFactorAuthState.modalType === 'RE_SYNC'),
-    isDisabledModal: computed<boolean>(() => multiFactorAuthState.modalType === 'DISABLED'),
-    isSwitchModal: computed<boolean>(() => multiFactorAuthState.modalType === 'SWITCH'),
-});
-const state = reactive({
-    loading: false,
-    userInfo: {} as UserInfoType,
-    isCollapsed: true,
-    isSentCode: false,
-    isVerified: computed<boolean>(() => storeState.mfa?.state === 'ENABLED'),
-    type: computed<string|undefined>(() => storeState.mfa?.mfa_type || undefined),
-    otherType: computed<string|undefined>(() => Object.keys(MULTI_FACTOR_AUTH_TYPE).find((key) => key !== storeState.selectedType)),
-});
-
-const modalState = reactive({
-    title: computed<TranslateResult>(() => {
-        if (storeState.isReSyncModal) {
-            return _i18n.t('MY_PAGE.MFA.RESYNC_TITLE');
-        }
-        if (storeState.isDisabledModal) {
-            return _i18n.t('COMMON.MFA_MODAL.ALT.TITLE');
-        }
-        if (storeState.isSwitchModal) {
-            return _i18n.t('MY_PAGE.MFA.CHANGE_TITLE');
-        }
-        if (storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL) {
-            return _i18n.t('MY_PAGE.MFA.MODAL_EMAIL_TITLE');
-        }
-        return _i18n.t('MY_PAGE.MFA.MODAL_MS_TITLE');
-    }),
-});
-
-const validationState = reactive({
-    verificationCode: '',
-    isValidationCodeValid: true as undefined | boolean,
-    validationCodeInvalidText: '' as TranslateResult | string,
-});
-
-/* Components */
-const resetFormData = () => {
-    validationState.verificationCode = '';
-    state.isCollapsed = false;
-    emit('refresh');
-};
-const handleChangeInput = (value: string) => {
-    validationState.verificationCode = value;
-    validationState.isValidationCodeValid = true;
-    validationState.validationCodeInvalidText = '';
-};
-const handleClickCancel = async () => {
-    resetFormData();
-    if (storeState.isSwitchModal && state.otherType) {
-        multiFactorAuthStore.setEnableMfaMap({
-            [storeState.selectedType]: true,
-            [state.otherType]: false,
-        });
-    }
-    multiFactorAuthStore.setModalVisible(false);
-};
-
-const handleClickVerifyButton = async () => {
-    state.loading = true;
-    try {
-        state.userInfo = await postValidationMfaCode({
-            verify_code: validationState.verificationCode,
-        }) as UserInfoType;
-        if (storeState.userId === state.userInfo.user_id && state.userInfo.mfa) {
-            userStore.setMfa(state.userInfo.mfa);
-        }
-        resetFormData();
-        if (storeState.isReSyncModal || storeState.isSwitchModal) {
-            if (storeState.isSwitchModal && state.otherType) {
-                multiFactorAuthStore.setEnableMfaMap({
-                    [storeState.selectedType]: false,
-                    [state.otherType]: true,
-                });
-                multiFactorAuthStore.setSelectedType(state.otherType);
-            }
-            multiFactorAuthStore.setModalType('FORM');
-        } else {
-            multiFactorAuthStore.setModalVisible(false);
-        }
-    } catch (e: any) {
-        validationState.isValidationCodeValid = false;
-        validationState.validationCodeInvalidText = storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL
-            ? _i18n.t('COMMON.MFA_MODAL.INVALID_CODE_EMAIL')
-            : _i18n.t('COMMON.MFA_MODAL.INVALID_CODE_OTP');
-    } finally {
-        state.loading = false;
-    }
-};
-
-watch(() => storeState.userId, (userId) => {
-    if (userId) {
-        state.userInfo = cloneDeep(userStore.state);
-    }
-}, { immediate: true });
-watch(() => multiFactorAuthState.modalType, () => {
-    state.isSentCode = false;
-    validationState.isValidationCodeValid = true;
-    validationState.validationCodeInvalidText = '';
-});
-</script>
-
-<template>
-    <div>
-        <p-button-modal :visible="multiFactorAuthState.modalVisible"
-                        :header-title="modalState.title"
-                        class="mfa-modal-wrapper"
-                        size="sm"
-                        :theme-color="storeState.isDisabledModal || storeState.isSwitchModal? 'alert' : 'primary'"
-                        :disabled="validationState.verificationCode === '' || (storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL && !state.isSentCode)"
-                        :loading="state.loading"
-                        @confirm="handleClickVerifyButton"
-                        @cancel="handleClickCancel"
-                        @close="handleClickCancel"
-        >
-            <template #body>
-                <div class="modal-content-wrapper">
-                    <p v-if="storeState.isReSyncModal"
-                       class="re-sync-desc"
-                    >
-                        {{ $t('MY_PAGE.MFA.RESYNC_DESC') }}
-                    </p>
-                    <span v-if="storeState.isDisabledModal"
-                          class="disable-modal-desc"
-                    >
-                        {{ storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL ? $t('COMMON.MFA_MODAL.ALT.DESC') : $t('COMMON.MFA_MODAL.ALT.DESC_MS') }}
-                    </span>
-                    <span v-if="storeState.isSwitchModal"
-                          class="disable-modal-desc"
-                    >
-                        {{ $t('MY_PAGE.MFA.CHANGE_DESC') }}
-                    </span>
-                    <user-account-multi-factor-auth-modal-email-info v-if="storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL"
-                                                                     :is-sent-code.sync="state.isSentCode"
-                    />
-                    <user-account-multi-factor-auth-modal-m-s-info v-else-if="storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.OTP
-                                                                       && !storeState.isDisabledModal
-                                                                       && !storeState.isSwitchModal
-                                                                       && !storeState.isReSyncModal"
-                                                                   :is-re-sync-modal="storeState.isReSyncModal"
-                    />
-                    <div class="validation-code-form">
-                        <p-field-group :label="$t('COMMON.MFA_MODAL.VERIFICATION_CODE')"
-                                       :invalid="!validationState.isValidationCodeValid"
-                                       :invalid-text="validationState.validationCodeInvalidText"
-                                       required
-                                       class="form"
-                        >
-                            <p-text-input :value="validationState.verificationCode"
-                                          :invalid="!validationState.isValidationCodeValid"
-                                          class="text-input"
-                                          block
-                                          @update:value="handleChangeInput"
-                            />
-                        </p-field-group>
-                    </div>
-                    <user-account-multi-factor-auth-modal-folding v-if="storeState.selectedType === MULTI_FACTOR_AUTH_TYPE.EMAIL"
-                                                                  :is-disabled-modal="storeState.isDisabledModal || storeState.isSwitchModal"
-                                                                  :is-re-sync-modal="storeState.isReSyncModal"
-                                                                  :is-sent-code.sync="state.isSentCode"
-                    />
-                </div>
-            </template>
-            <template v-if="!storeState.isReSyncModal"
-                      #confirm-button
-            >
-                <span v-if="storeState.isDisabledModal || storeState.isSwitchModal">
-                    {{ $t('COMMON.MFA_MODAL.ALT.DISABLED') }}
-                </span>
-                <span v-else>
-                    {{ $t('COMMON.MFA_MODAL.VERIFY') }}
-                </span>
-            </template>
-        </p-button-modal>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.mfa-modal-wrapper {
-    .disable-modal-desc {
-        @apply block;
-        margin-top: 1.625rem;
-        margin-bottom: 1rem;
-    }
-    .re-sync-desc {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-    }
-    .validation-code-form {
-        @apply flex items-end;
-        gap: 1rem;
-        .form {
-            flex: 1;
-        }
-        .verified {
-            @apply inline-flex items-center text-label-md font-normal text-green-600;
-            gap: 0.25rem;
-        }
-
-        /* custom design-system component - p-field-group */
-        :deep(.p-field-group) {
-            .title-wrapper .title {
-                @apply flex items-center;
-                gap: 0.5rem;
-            }
-        }
-    }
-    .change-confirm-button {
-        @apply flex items-center;
-        gap: 0.25rem;
-    }
-}
-
-/* custom design-system component - p-button-modal */
-:deep(.p-button-modal) {
-    .modal-content .header .modal-header {
-        min-height: initial;
-    }
-}
-</style>
diff --git a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthItems.vue b/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthItems.vue
index f1c1ed984c..e5df4e9569 100644
--- a/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthItems.vue
+++ b/apps/web/src/services/my-page/components/UserAccountMultiFactorAuthItems.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import {
-    computed, reactive, watch,
+    computed, reactive,
 } from 'vue';
 
 import {
-    PI, PToggleButton, PBadge, PButton,
+    PI, PBadge, PButton, PSelectCard,
 } from '@cloudforet/mirinae';
 
+import { useUserProfileApi } from '@/api-clients/identity/user-profile/composables/use-user-profile-api';
 import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/schema/constant';
+import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import type { UserMfa } from '@/api-clients/identity/user/schema/model';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import { postUserProfileDisableMfa } from '@/lib/helper/multi-factor-auth-helper';
-
 import { MULTI_FACTOR_AUTH_ITEMS } from '@/services/my-page/constants/multi-factor-auth-constants';
 import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
 
@@ -27,6 +27,8 @@ const multiFactorAuthStore = useMultiFactorAuthStore();
 const multiFactorAuthState = multiFactorAuthStore.state;
 const userStore = useUserStore();
 
+const { userProfileAPI } = useUserProfileApi();
+
 const storeState = reactive({
     mfa: computed<UserMfa|undefined>(() => userStore.state.mfa),
     selectedType: computed<string>(() => multiFactorAuthState.selectedType),
@@ -34,102 +36,100 @@ const storeState = reactive({
 });
 const state = reactive({
     isVerified: computed<boolean>(() => storeState.mfa?.state === 'ENABLED'),
-    type: computed<string|undefined>(() => storeState.mfa?.mfa_type || undefined),
+    currentType: computed<string|undefined>(() => userStore.state.mfa?.mfa_type || undefined),
+    isEnforced: computed<boolean>(() => !!userStore.state.mfa?.options?.enforce),
 });
 
-const handleChangeToggle = async (type: string, value: boolean) => {
-    storeState.enableMfaMap[type] = value;
-    multiFactorAuthStore.setModalVisible(true);
-
-    if (state.isVerified && state.type !== type) {
-        const otherType = Object.keys(storeState.enableMfaMap).find((key) => key !== type && key !== '');
-        multiFactorAuthStore.setModalType('SWITCH');
-
-        if (otherType) {
-            multiFactorAuthStore.setSelectedType(otherType);
+const handleChange = async (isSelected: boolean, selected: MultiFactorAuthType) => {
+    if (props.readonlyMode || state.isEnforced) return;
+    if (state.isEnforced && state.currentType !== selected) return;
+    if (state.isVerified && state.currentType !== selected) {
+        if (selected === MULTI_FACTOR_AUTH_TYPE.OTP) {
+            multiFactorAuthStore.setEmailSwitchModalVisible(true);
+        } else {
+            multiFactorAuthStore.setOTPSwitchModalVisible(true);
+            await userProfileAPI.disableMfa({});
+        }
+        return;
+    }
 
-            if (otherType === MULTI_FACTOR_AUTH_TYPE.OTP) {
-                await postUserProfileDisableMfa();
-            }
+    if (!isSelected) {
+        if (selected === MULTI_FACTOR_AUTH_TYPE.OTP) {
+            multiFactorAuthStore.setOTPEnableModalVisible(true);
+        } else {
+            multiFactorAuthStore.setEmailEnableModalVisible(true);
         }
+    } else if (selected === MULTI_FACTOR_AUTH_TYPE.OTP) {
+        multiFactorAuthStore.setOTPDisableModalVisible(true);
+        await userProfileAPI.disableMfa({});
     } else {
-        multiFactorAuthStore.setModalType(value ? 'FORM' : 'DISABLED');
-        multiFactorAuthStore.setSelectedType(type);
-        if (!value && type === MULTI_FACTOR_AUTH_TYPE.OTP) {
-            await postUserProfileDisableMfa();
-        }
+        multiFactorAuthStore.setEmailDisableModalVisible(true);
     }
 };
-const handleClickReSyncButton = async (type: string) => {
-    multiFactorAuthStore.setSelectedType(type);
-    multiFactorAuthStore.setModalVisible(true);
-    multiFactorAuthStore.setModalType('RE_SYNC');
+
+const handleClickReSyncButton = async (type: MultiFactorAuthType, event: MouseEvent) => {
+    if (props.readonlyMode) return;
+    if (state.isEnforced && state.currentType !== type) return;
+    event.stopPropagation();
     if (type === MULTI_FACTOR_AUTH_TYPE.OTP) {
-        await postUserProfileDisableMfa();
+        multiFactorAuthStore.setOTPReSyncModalVisible(true);
+        await userProfileAPI.disableMfa({});
+    } else {
+        multiFactorAuthStore.setEmailReSyncModalVisible(true);
     }
 };
-
-watch(() => storeState.mfa, (mfa) => {
-    if (mfa?.mfa_type) {
-        multiFactorAuthStore.setEnableMfaMapType(mfa.mfa_type, storeState.mfa?.state === 'ENABLED');
-    }
-}, { immediate: true });
-watch(() => multiFactorAuthState.modalVisible, (modalVisible) => {
-    if (!modalVisible) {
-        multiFactorAuthStore.setEnableMfaMapType(storeState.selectedType, state.type === storeState.selectedType ? state.isVerified : false);
-        multiFactorAuthStore.setSelectedType('');
-    }
-}, { immediate: true });
 </script>
 
 <template>
     <div class="user-account-multi-factor-auth-items">
-        <div v-for="(item, idx) in MULTI_FACTOR_AUTH_ITEMS"
-             :key="`${item.type} - ${idx}`"
-             class="user-account-multi-factor-auth-item"
+        <p-select-card v-for="(item, idx) in MULTI_FACTOR_AUTH_ITEMS"
+                       :key="`${item.type} - ${idx}`"
+                       block
+                       :readonly="props.readonlyMode || state.isEnforced"
+                       :selected="state.isVerified ? state.currentType : undefined"
+                       :disabled="state.isEnforced && state.currentType !== item.type"
+                       :value="item.type"
+                       @change="handleChange(state.isVerified && state.currentType === item.type, $event)"
         >
-            <div class="user-account-multi-factor-auth-item-inner">
-                <p-i class="icon"
-                     :name="item.icon"
-                     height="2rem"
-                     width="2rem"
-                />
-                <div class="title-wrapper">
-                    <div class="toggle-wrapper">
-                        <div class="toggle-inner">
-                            <p-toggle-button :value="storeState.enableMfaMap[item.type]"
-                                             :read-only="props.readonlyMode"
-                                             :show-state-text="props.readonlyMode"
-                                             @change-toggle="handleChangeToggle(item.type, $event)"
-                            />
-                            <p class="title">
-                                {{ item.title }}
-                            </p>
-                        </div>
-                        <p-badge v-if="state.type === item.type && state.isVerified"
-                                 style-type="green200"
-                                 badge-type="subtle"
-                                 class="badge"
+            <div class="flex w-full justify-between px-4 items-center ">
+                <div class="flex items-center gap-3">
+                    <p-i class="icon"
+                         :class="{'opacity-20': state.isEnforced && state.currentType !== item.type}"
+                         :name="item.icon"
+                         height="2.5rem"
+                         width="2.5rem"
+                    />
+                    <div class="flex flex-col justify-center gap-1">
+                        <span class="text-label-md font-bold">
+                            {{ item.title }}
+                        </span>
+                        <span class="text-label-md text-gray-600"
+                              :class="{'opacity-20': state.isEnforced && state.currentType !== item.type}"
                         >
-                            {{ $t('MY_PAGE.MFA.SYNC') }}
-                        </p-badge>
+                            {{ item.type === MULTI_FACTOR_AUTH_TYPE.OTP ? $t('MY_PAGE.MFA.MS_DESC') : $t('MY_PAGE.MFA.EMAIL_DESC') }}
+                        </span>
                     </div>
-                    <p class="desc">
-                        <span v-if="item.type === MULTI_FACTOR_AUTH_TYPE.OTP">{{ $t('MY_PAGE.MFA.MS_DESC') }}</span>
-                        <span v-else>{{ $t('MY_PAGE.MFA.EMAIL_DESC') }}</span>
-                    </p>
+                </div>
+                <div v-if="state.currentType === item.type && state.isVerified"
+                     class="inline-flex items-center gap-2"
+                >
+                    <p-badge class="badge"
+                             style-type="green200"
+                             badge-type="subtle"
+                    >
+                        {{ $t('MY_PAGE.MFA.SYNC') }}
+                    </p-badge>
+                    <p-button class="re-sync-button"
+                              style-type="tertiary"
+                              size="sm"
+                              :readonly="props.readonlyMode"
+                              @click="handleClickReSyncButton(item.type, $event)"
+                    >
+                        {{ $t('MY_PAGE.MFA.RESYNC') }}
+                    </p-button>
                 </div>
             </div>
-            <p-button v-if="state.type === item.type && state.isVerified"
-                      class="re-sync-button"
-                      style-type="tertiary"
-                      size="sm"
-                      :readonly="props.readonlyMode"
-                      @click="handleClickReSyncButton(item.type)"
-            >
-                {{ $t('MY_PAGE.MFA.RESYNC') }}
-            </p-button>
-        </div>
+        </p-select-card>
     </div>
 </template>
 
diff --git a/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailDisableModal.vue b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailDisableModal.vue
new file mode 100644
index 0000000000..e3355b4fd0
--- /dev/null
+++ b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailDisableModal.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import { reactive, ref, computed } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import { PButtonModal } from '@cloudforet/mirinae';
+
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import EmailFoldingInfo from '@/common/components/mfa/components/EmailFoldingInfo.vue';
+import EmailInfo from '@/common/components/mfa/components/EmailInfo.vue';
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useUserProfileConfirmMfaMutation } from '@/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
+
+interface Props {
+    switch?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    switch: false,
+});
+
+
+const emit = defineEmits<{(e: 'refresh'): void }>();
+
+/* Store */
+const multiFactorAuthStore = useMultiFactorAuthStore();
+const multiFactorAuthState = multiFactorAuthStore.modalState;
+const userStore = useUserStore();
+
+/* State */
+const validationState = reactive({
+    verificationCode: '',
+    isInvalidationCodeValid: false as undefined | boolean,
+});
+const isSentCode = ref<boolean>(false);
+
+/* Computed */
+const visible = computed<boolean>(() => {
+    if (props.switch) {
+        return multiFactorAuthState.emailSwitchModalVisible;
+    }
+    return multiFactorAuthState.emailDisableModalVisible;
+});
+const headerTitle = computed<TranslateResult>(() => {
+    if (props.switch) {
+        return i18n.t('MY_PAGE.MFA.CHANGE_TITLE');
+    }
+    return i18n.t('COMMON.MFA_MODAL.ALT.TITLE');
+});
+
+/* Utils */
+const closeModal = () => {
+    if (props.switch) {
+        multiFactorAuthStore.setEmailSwitchModalVisible(false);
+    } else {
+        multiFactorAuthStore.setEmailDisableModalVisible(false);
+    }
+};
+/* API */
+const { mutateAsync: confirmMfa, isPending: isConfirmingMfa } = useUserProfileConfirmMfaMutation({
+    onSuccess: (data: UserModel) => {
+        showSuccessMessage(i18n.t('COMMON.MFA_MODAL.ALT_S_ENABLED'), '');
+        userStore.setMfa(data.mfa ?? {});
+        closeModal();
+        if (props.switch) multiFactorAuthStore.setOTPEnableModalVisible(true);
+    },
+    onError: (error: Error) => {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+        validationState.isInvalidationCodeValid = true;
+    },
+});
+
+/* Events */
+const handleClickCancel = async () => {
+    closeModal();
+    emit('refresh');
+};
+
+const handleClickVerifyButton = async () => {
+    await confirmMfa({
+        verify_code: validationState.verificationCode,
+    });
+    emit('refresh');
+};
+
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="headerTitle"
+                    class="mfa-modal-wrapper"
+                    size="sm"
+                    theme-color="alert"
+                    :disabled="validationState.verificationCode === '' || !isSentCode"
+                    :loading="isConfirmingMfa"
+                    @confirm="handleClickVerifyButton"
+                    @cancel="handleClickCancel"
+                    @close="handleClickCancel"
+    >
+        <template #body>
+            <div class="modal-content-wrapper">
+                <span v-if="props.switch"
+                      class="disable-modal-desc"
+                >
+                    {{ $t('MY_PAGE.MFA.CHANGE_DESC') }}
+                </span>
+                <span v-else
+                      class="disable-modal-desc"
+                >
+                    {{ $t('COMMON.MFA_MODAL.ALT.DESC') }}
+                </span>
+                <email-info :is-sent-code.sync="isSentCode" />
+                <verification-code-form :invalid.sync="validationState.isInvalidationCodeValid"
+                                        :code-value.sync="validationState.verificationCode"
+                                        :invalid-text="$t('COMMON.MFA_MODAL.INVALID_CODE_EMAIL')"
+                />
+                <email-folding-info is-disabled-modal
+                                    :is-sent-code.sync="isSentCode"
+                />
+            </div>
+        </template>
+        <template #confirm-button>
+            {{ $t('COMMON.MFA_MODAL.ALT.DISABLED') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.mfa-modal-wrapper {
+    .disable-modal-desc {
+        @apply block;
+        margin-top: 1.625rem;
+        margin-bottom: 1rem;
+    }
+    .re-sync-desc {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    .validation-code-form {
+        @apply flex items-end;
+        gap: 1rem;
+        .form {
+            flex: 1;
+        }
+        .verified {
+            @apply inline-flex items-center text-label-md font-normal text-green-600;
+            gap: 0.25rem;
+        }
+
+        /* custom design-system component - p-field-group */
+        :deep(.p-field-group) {
+            .title-wrapper .title {
+                @apply flex items-center;
+                gap: 0.5rem;
+            }
+        }
+    }
+    .change-confirm-button {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+}
+
+/* custom design-system component - p-button-modal */
+:deep(.p-button-modal) {
+    .modal-content .header .modal-header {
+        min-height: initial;
+    }
+}
+</style>
diff --git a/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailEnableModal.vue b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailEnableModal.vue
new file mode 100644
index 0000000000..5a8fc32518
--- /dev/null
+++ b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthEmailEnableModal.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, ref,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PButtonModal,
+} from '@cloudforet/mirinae';
+
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import EmailFoldingInfo from '@/common/components/mfa/components/EmailFoldingInfo.vue';
+import EmailInfo from '@/common/components/mfa/components/EmailInfo.vue';
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useUserProfileConfirmMfaMutation } from '@/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+
+import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
+
+interface Props {
+    reSync?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    reSync: false,
+});
+
+const emit = defineEmits<{(e: 'refresh'): void }>();
+
+/* Store */
+const multiFactorAuthStore = useMultiFactorAuthStore();
+const multiFactorAuthState = multiFactorAuthStore.modalState;
+const userStore = useUserStore();
+
+/* State */
+const validationState = reactive({
+    verificationCode: '',
+    isInvalidationCodeValid: false as undefined | boolean,
+});
+const isSentCode = ref<boolean>(false);
+
+/* Computed */
+const visible = computed<boolean>(() => {
+    if (props.reSync) {
+        return multiFactorAuthState.emailReSyncModalVisible;
+    }
+    return multiFactorAuthState.emailEnableModalVisible;
+});
+const headerTitle = computed<TranslateResult>(() => {
+    if (props.reSync) {
+        return i18n.t('MY_PAGE.MFA.RESYNC_TITLE');
+    }
+    return i18n.t('MY_PAGE.MFA.MODAL_EMAIL_TITLE');
+});
+
+/* Utils */
+const closeModal = () => {
+    if (props.reSync) {
+        multiFactorAuthStore.setEmailReSyncModalVisible(false);
+    } else {
+        multiFactorAuthStore.setEmailEnableModalVisible(false);
+    }
+};
+
+/* API */
+const { mutateAsync: confirmMfa, isPending: isConfirmingMfa } = useUserProfileConfirmMfaMutation({
+    onSuccess: (data: UserModel) => {
+        showSuccessMessage(i18n.t('COMMON.MFA_MODAL.ALT_S_ENABLED'), '');
+        userStore.setMfa(data.mfa ?? {});
+        closeModal();
+        isSentCode.value = false;
+        validationState.verificationCode = '';
+        if (props.reSync) multiFactorAuthStore.setEmailEnableModalVisible(true);
+    },
+    onError: (error: Error) => {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+        validationState.isInvalidationCodeValid = true;
+    },
+});
+
+/* Events */
+const handleClickCancel = async () => {
+    closeModal();
+    emit('refresh');
+};
+
+const handleClickVerifyButton = async () => {
+    await confirmMfa({
+        verify_code: validationState.verificationCode,
+    });
+    emit('refresh');
+};
+
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="headerTitle"
+                    class="mfa-modal-wrapper"
+                    size="sm"
+                    theme-color="primary"
+                    :disabled="validationState.verificationCode === '' || !isSentCode"
+                    :loading="isConfirmingMfa"
+                    @confirm="handleClickVerifyButton"
+                    @cancel="handleClickCancel"
+                    @close="handleClickCancel"
+    >
+        <template #body>
+            <div class="modal-content-wrapper">
+                <p class="re-sync-desc">
+                    {{ $t('MY_PAGE.MFA.RESYNC_DESC') }}
+                </p>
+                <email-info :is-sent-code.sync="isSentCode"
+                            :is-form="!props.reSync"
+                />
+                <verification-code-form :invalid.sync="validationState.isInvalidationCodeValid"
+                                        :code-value.sync="validationState.verificationCode"
+                                        :invalid-text="$t('COMMON.MFA_MODAL.INVALID_CODE_EMAIL')"
+                />
+                <email-folding-info :is-re-sync-modal="props.reSync"
+                                    :is-sent-code.sync="isSentCode"
+                />
+            </div>
+        </template>
+        <template v-if="!props.reSync"
+                  #confirm-button
+        >
+            {{ $t('COMMON.MFA_MODAL.VERIFY') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.mfa-modal-wrapper {
+    .disable-modal-desc {
+        @apply block;
+        margin-top: 1.625rem;
+        margin-bottom: 1rem;
+    }
+    .re-sync-desc {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    .validation-code-form {
+        @apply flex items-end;
+        gap: 1rem;
+        .form {
+            flex: 1;
+        }
+        .verified {
+            @apply inline-flex items-center text-label-md font-normal text-green-600;
+            gap: 0.25rem;
+        }
+
+        /* custom design-system component - p-field-group */
+        :deep(.p-field-group) {
+            .title-wrapper .title {
+                @apply flex items-center;
+                gap: 0.5rem;
+            }
+        }
+    }
+    .change-confirm-button {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+}
+
+/* custom design-system component - p-button-modal */
+:deep(.p-button-modal) {
+    .modal-content .header .modal-header {
+        min-height: initial;
+    }
+}
+</style>
diff --git a/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPDisableModal.vue b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPDisableModal.vue
new file mode 100644
index 0000000000..dad9962fdd
--- /dev/null
+++ b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPDisableModal.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import { computed, reactive } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PButtonModal,
+} from '@cloudforet/mirinae';
+
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useUserProfileConfirmMfaMutation } from '@/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
+
+
+interface Props {
+    switch?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    switch: false,
+});
+
+const emit = defineEmits<{(e: 'refresh'): void }>();
+
+/* Store */
+const multiFactorAuthStore = useMultiFactorAuthStore();
+const multiFactorAuthState = multiFactorAuthStore.modalState;
+const userStore = useUserStore();
+
+/* State */
+const validationState = reactive({
+    verificationCode: '',
+    isInvalidationCodeValid: false as undefined | boolean,
+});
+
+/* Computed */
+const visible = computed<boolean>(() => {
+    if (props.switch) {
+        return multiFactorAuthState.OTPSwitchModalVisible;
+    }
+    return multiFactorAuthState.OTPDisableModalVisible;
+});
+const headerTitle = computed<TranslateResult>(() => {
+    if (props.switch) {
+        return i18n.t('MY_PAGE.MFA.CHANGE_TITLE');
+    }
+    return i18n.t('COMMON.MFA_MODAL.ALT.TITLE');
+});
+
+/* Utils */
+const closeModal = () => {
+    if (props.switch) {
+        multiFactorAuthStore.setOTPSwitchModalVisible(false);
+    } else {
+        multiFactorAuthStore.setOTPDisableModalVisible(false);
+    }
+};
+
+/* API */
+const { mutateAsync: confirmMfa, isPending: isConfirmingMfa } = useUserProfileConfirmMfaMutation({
+    onSuccess: (data: UserModel) => {
+        showSuccessMessage(i18n.t('COMMON.MFA_MODAL.ALT_S_DISABLED'), '');
+        userStore.setMfa(data.mfa ?? {});
+        closeModal();
+        if (props.switch) multiFactorAuthStore.setEmailEnableModalVisible(true);
+    },
+    onError: (error: Error) => {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+        validationState.isInvalidationCodeValid = true;
+    },
+});
+
+
+/* Events */
+const handleClickCancel = async () => {
+    closeModal();
+    emit('refresh');
+};
+
+const handleClickVerifyButton = async () => {
+    await confirmMfa({
+        verify_code: validationState.verificationCode,
+    });
+    emit('refresh');
+};
+
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="headerTitle"
+                    class="mfa-modal-wrapper"
+                    size="sm"
+                    theme-color="alert"
+                    :disabled="validationState.verificationCode === ''"
+                    :loading="isConfirmingMfa"
+                    @confirm="handleClickVerifyButton"
+                    @cancel="handleClickCancel"
+                    @close="handleClickCancel"
+    >
+        <template #body>
+            <div class="modal-content-wrapper">
+                <span v-if="props.switch"
+                      class="disable-modal-desc"
+                >
+                    {{ $t('MY_PAGE.MFA.CHANGE_DESC') }}
+                </span>
+                <span v-else
+                      class="disable-modal-desc"
+                >
+                    {{ $t('COMMON.MFA_MODAL.ALT.DESC_MS') }}
+                </span>
+                <verification-code-form :invalid.sync="validationState.isInvalidationCodeValid"
+                                        :code-value.sync="validationState.verificationCode"
+                                        :invalid-text="$t('COMMON.MFA_MODAL.INVALID_CODE_OTP')"
+                />
+            </div>
+        </template>
+        <template #confirm-button>
+            {{ $t('COMMON.MFA_MODAL.ALT.DISABLED') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.mfa-modal-wrapper {
+    .disable-modal-desc {
+        @apply block;
+        margin-top: 1.625rem;
+        margin-bottom: 1rem;
+    }
+    .re-sync-desc {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    .validation-code-form {
+        @apply flex items-end;
+        gap: 1rem;
+        .form {
+            flex: 1;
+        }
+        .verified {
+            @apply inline-flex items-center text-label-md font-normal text-green-600;
+            gap: 0.25rem;
+        }
+
+        /* custom design-system component - p-field-group */
+        :deep(.p-field-group) {
+            .title-wrapper .title {
+                @apply flex items-center;
+                gap: 0.5rem;
+            }
+        }
+    }
+    .change-confirm-button {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+}
+
+/* custom design-system component - p-button-modal */
+:deep(.p-button-modal) {
+    .modal-content .header .modal-header {
+        min-height: initial;
+    }
+}
+</style>
diff --git a/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPEnableModal.vue b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPEnableModal.vue
new file mode 100644
index 0000000000..7d768dd477
--- /dev/null
+++ b/apps/web/src/services/my-page/components/mfa/UserAccountMultiFactorAuthOTPEnableModal.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import { reactive, computed } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PButtonModal,
+} from '@cloudforet/mirinae';
+
+import type { UserModel } from '@/api-clients/identity/user/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import OTPForm from '@/common/components/mfa/components/OTPForm.vue';
+import VerificationCodeForm from '@/common/components/mfa/components/VerificationCodeForm.vue';
+import { useUserProfileConfirmMfaMutation } from '@/common/components/mfa/composables/use-user-profile-confirm-mfa-mutation';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useMultiFactorAuthStore } from '@/services/my-page/stores/multi-factor-auth-store';
+
+
+interface Props {
+    reSync?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    reSync: false,
+});
+
+const emit = defineEmits<{(e: 'refresh'): void }>();
+
+/* Store */
+const multiFactorAuthStore = useMultiFactorAuthStore();
+const multiFactorAuthState = multiFactorAuthStore.modalState;
+const userStore = useUserStore();
+
+/* State */
+const validationState = reactive({
+    verificationCode: '',
+    isInvalidationCodeValid: false as undefined | boolean,
+});
+
+/* Computed */
+const visible = computed<boolean>(() => {
+    if (props.reSync) {
+        return multiFactorAuthState.OTPReSyncModalVisible;
+    }
+    return multiFactorAuthState.OTPEnableModalVisible;
+});
+const headerTitle = computed<TranslateResult>(() => {
+    if (props.reSync) {
+        return i18n.t('MY_PAGE.MFA.RESYNC_TITLE');
+    }
+    return i18n.t('MY_PAGE.MFA.MODAL_MS_TITLE');
+});
+
+/* Utils */
+const closeModal = () => {
+    if (props.reSync) {
+        multiFactorAuthStore.setOTPReSyncModalVisible(false);
+    } else {
+        multiFactorAuthStore.setOTPEnableModalVisible(false);
+    }
+};
+
+/* API */
+const { mutateAsync: confirmMfa, isPending: isConfirmingMfa } = useUserProfileConfirmMfaMutation({
+    onSuccess: (data: UserModel) => {
+        showSuccessMessage(i18n.t('COMMON.MFA_MODAL.ALT_S_ENABLED'), '');
+        userStore.setMfa(data.mfa ?? {});
+        closeModal();
+        validationState.verificationCode = '';
+        if (props.reSync) multiFactorAuthStore.setOTPEnableModalVisible(true);
+    },
+    onError: (error: Error) => {
+        ErrorHandler.handleError(error);
+        showErrorMessage(error.message, error);
+        validationState.isInvalidationCodeValid = true;
+    },
+});
+
+/* Events */
+const handleClickCancel = async () => {
+    closeModal();
+    emit('refresh');
+};
+
+const handleClickVerifyButton = async () => {
+    await confirmMfa({
+        verify_code: validationState.verificationCode,
+    });
+    emit('refresh');
+};
+
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="headerTitle"
+                    class="mfa-modal-wrapper"
+                    size="sm"
+                    theme-color="primary"
+                    :disabled="validationState.verificationCode === ''"
+                    :loading="isConfirmingMfa"
+                    @confirm="handleClickVerifyButton"
+                    @cancel="handleClickCancel"
+                    @close="handleClickCancel"
+    >
+        <template #body>
+            <div class="modal-content-wrapper">
+                <p v-if="props.reSync"
+                   class="re-sync-desc"
+                >
+                    {{ $t('MY_PAGE.MFA.RESYNC_DESC') }}
+                </p>
+                <o-t-p-form v-if="!props.reSync"
+                            :verification-code.sync="validationState.verificationCode"
+                            :verification-code-invalid.sync="validationState.isInvalidationCodeValid"
+                            :invalid-text="$t('COMMON.MFA_MODAL.INVALID_CODE_OTP')"
+                />
+                <verification-code-form v-else
+                                        :invalid.sync="validationState.isInvalidationCodeValid"
+                                        :code-value.sync="validationState.verificationCode"
+                                        :invalid-text="$t('COMMON.MFA_MODAL.INVALID_CODE_OTP')"
+                />
+            </div>
+        </template>
+        <template v-if="!props.reSync"
+                  #confirm-button
+        >
+            {{ $t('COMMON.MFA_MODAL.VERIFY') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.mfa-modal-wrapper {
+    .disable-modal-desc {
+        @apply block;
+        margin-top: 1.625rem;
+        margin-bottom: 1rem;
+    }
+    .re-sync-desc {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+    .validation-code-form {
+        @apply flex items-end;
+        gap: 1rem;
+        .form {
+            flex: 1;
+        }
+        .verified {
+            @apply inline-flex items-center text-label-md font-normal text-green-600;
+            gap: 0.25rem;
+        }
+
+        /* custom design-system component - p-field-group */
+        :deep(.p-field-group) {
+            .title-wrapper .title {
+                @apply flex items-center;
+                gap: 0.5rem;
+            }
+        }
+    }
+    .change-confirm-button {
+        @apply flex items-center;
+        gap: 0.25rem;
+    }
+}
+
+/* custom design-system component - p-button-modal */
+:deep(.p-button-modal) {
+    .modal-content .header .modal-header {
+        min-height: initial;
+    }
+}
+</style>
diff --git a/apps/web/src/services/my-page/pages/UserAccountPage.vue b/apps/web/src/services/my-page/pages/UserAccountPage.vue
index 542beaae41..d5d546f32c 100644
--- a/apps/web/src/services/my-page/pages/UserAccountPage.vue
+++ b/apps/web/src/services/my-page/pages/UserAccountPage.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import {
+    computed, onMounted, reactive,
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
@@ -31,7 +34,7 @@ import UserAccountChangePassword from '@/services/my-page/components/UserAccount
 import UserAccountMultiFactorAuth from '@/services/my-page/components/UserAccountMultiFactorAuth.vue';
 import UserAccountNotificationEmail from '@/services/my-page/components/UserAccountNotificationEmail.vue';
 
-
+const PASSWORD_MIN_LENGTH = 8;
 
 const domainStore = useDomainStore();
 const userStore = useUserStore();
@@ -71,12 +74,13 @@ const passwordFormState = reactive({
     loading: false,
     userId: computed<string|undefined>(() => userStore.state.userId),
     isTokenChecked: undefined as boolean|undefined,
-    invalidText: '',
+    invalidText: '' as string|TranslateResult,
 });
 
 const passwordCheckFecher = getCancellableFetcher(SpaceConnector.clientV2.identity.token.issue);
 
 const handleConfirmPasswordCheckModal = async () => {
+    if (passwordFormState.password.length < PASSWORD_MIN_LENGTH) return;
     passwordFormState.loading = true;
     try {
         const result = await passwordCheckFecher<TokenIssueParameters, TokenIssueModel>({
@@ -93,7 +97,7 @@ const handleConfirmPasswordCheckModal = async () => {
                 passwordFormState.isTokenChecked = true;
                 passwordFormState.invalidText = '';
                 passwordFormState.passwordCheckModalVisible = false;
-                showSuccessMessage(i18n.t('COMMON.PROFILE.SUCCESS_PASSWORD_CHECK'));
+                showSuccessMessage(i18n.t('COMMON.PROFILE.SUCCESS_PASSWORD_CHECK'), '');
             } else {
                 passwordFormState.isTokenChecked = false;
                 passwordFormState.invalidText = i18n.t('COMMON.PROFILE.CURRENT_PASSWORD_INVALID');
@@ -105,7 +109,7 @@ const handleConfirmPasswordCheckModal = async () => {
             passwordFormState.isTokenChecked = true;
             passwordFormState.invalidText = '';
             passwordFormState.passwordCheckModalVisible = false;
-            showSuccessMessage(i18n.t('COMMON.PROFILE.SUCCESS_PASSWORD_CHECK'));
+            showSuccessMessage(i18n.t('COMMON.PROFILE.SUCCESS_PASSWORD_CHECK'), '');
         } else {
             passwordFormState.isTokenChecked = false;
             passwordFormState.invalidText = i18n.t('COMMON.PROFILE.CURRENT_PASSWORD_INVALID');
@@ -125,6 +129,11 @@ const handleClickCancel = () => {
     passwordFormState.invalidText = '';
 };
 
+// TODO: remove this after tanstack query is implemented
+onMounted(async () => {
+    await userStore.getUserInfo();
+});
+
 </script>
 
 <template>
@@ -174,7 +183,7 @@ const handleClickCancel = () => {
         <p-button-modal :header-title="$t('COMMON.PROFILE.PASSWORD_CHECK_TITLE')"
                         :visible.sync="passwordFormState.passwordCheckModalVisible"
                         :loading="passwordFormState.loading"
-                        :disabled="passwordFormState.password.length < 8"
+                        :disabled="passwordFormState.password.length < PASSWORD_MIN_LENGTH"
                         size="sm"
                         @confirm="handleConfirmPasswordCheckModal"
                         @cancel="handleClickCancel"
@@ -194,6 +203,7 @@ const handleClickCancel = () => {
                                           appearance-type="masking"
                                           :invalid="invalid"
                                           block
+                                          @keyup.enter="handleConfirmPasswordCheckModal"
                             />
                         </template>
                     </p-field-group>
diff --git a/apps/web/src/services/my-page/stores/multi-factor-auth-store.ts b/apps/web/src/services/my-page/stores/multi-factor-auth-store.ts
index 78c989a5bf..94bf8778c9 100644
--- a/apps/web/src/services/my-page/stores/multi-factor-auth-store.ts
+++ b/apps/web/src/services/my-page/stores/multi-factor-auth-store.ts
@@ -14,6 +14,18 @@ interface multiFactorAuthState {
     modalInitLoading: boolean,
     modalType: modelType,
 }
+
+interface ModalState {
+    OTPEnableModalVisible: boolean,
+    OTPDisableModalVisible: boolean,
+    emailEnableModalVisible: boolean,
+    emailDisableModalVisible: boolean,
+    OTPReSyncModalVisible: boolean,
+    emailReSyncModalVisible: boolean,
+    OTPSwitchModalVisible: boolean,
+    emailSwitchModalVisible: boolean,
+}
+
 export const useMultiFactorAuthStore = defineStore('multi-factor-auth-store', () => {
     const state = reactive<multiFactorAuthState>({
         enableMfaMap: mapValues(MULTI_FACTOR_AUTH_TYPE, constant(false)),
@@ -23,6 +35,17 @@ export const useMultiFactorAuthStore = defineStore('multi-factor-auth-store', ()
         modalType: 'FORM',
     });
 
+    const modalState = reactive<ModalState>({
+        OTPEnableModalVisible: false,
+        OTPDisableModalVisible: false,
+        emailEnableModalVisible: false,
+        emailDisableModalVisible: false,
+        OTPReSyncModalVisible: false,
+        emailReSyncModalVisible: false,
+        OTPSwitchModalVisible: false,
+        emailSwitchModalVisible: false,
+    });
+
     const mutations = {
         setEnableMfaMap: (map: Record<string, boolean>) => {
             state.enableMfaMap = map;
@@ -42,6 +65,31 @@ export const useMultiFactorAuthStore = defineStore('multi-factor-auth-store', ()
         setModalType: (value: modelType) => {
             state.modalType = value;
         },
+        /* Modal Mutations */
+        setOTPEnableModalVisible: (value: boolean) => {
+            modalState.OTPEnableModalVisible = value;
+        },
+        setOTPDisableModalVisible: (value: boolean) => {
+            modalState.OTPDisableModalVisible = value;
+        },
+        setEmailEnableModalVisible: (value: boolean) => {
+            modalState.emailEnableModalVisible = value;
+        },
+        setEmailDisableModalVisible: (value: boolean) => {
+            modalState.emailDisableModalVisible = value;
+        },
+        setOTPReSyncModalVisible: (value: boolean) => {
+            modalState.OTPReSyncModalVisible = value;
+        },
+        setEmailReSyncModalVisible: (value: boolean) => {
+            modalState.emailReSyncModalVisible = value;
+        },
+        setOTPSwitchModalVisible: (value: boolean) => {
+            modalState.OTPSwitchModalVisible = value;
+        },
+        setEmailSwitchModalVisible: (value: boolean) => {
+            modalState.emailSwitchModalVisible = value;
+        },
     };
 
     const actions = {
@@ -56,6 +104,7 @@ export const useMultiFactorAuthStore = defineStore('multi-factor-auth-store', ()
 
     return {
         state,
+        modalState,
         ...mutations,
         ...actions,
     };
diff --git a/apps/web/src/store/user/constant.ts b/apps/web/src/store/user/constant.ts
index bcf4400e9d..21f3e71f16 100644
--- a/apps/web/src/store/user/constant.ts
+++ b/apps/web/src/store/user/constant.ts
@@ -10,3 +10,9 @@ export const languages = {
     ko: '한국어',
     ja: '日本語',
 };
+
+
+export const REQUIRED_ACTIONS = {
+    ENFORCE_MFA: 'ENFORCE_MFA',
+    UPDATE_PASSWORD: 'UPDATE_PASSWORD',
+};
diff --git a/apps/web/src/store/user/type.ts b/apps/web/src/store/user/type.ts
index 4ab06f9427..788843a8ab 100644
--- a/apps/web/src/store/user/type.ts
+++ b/apps/web/src/store/user/type.ts
@@ -4,6 +4,8 @@ import type { RoleType } from '@/api-clients/identity/role/type';
 import type { UserMfa } from '@/api-clients/identity/user/schema/model';
 import type { AuthType, UserType } from '@/api-clients/identity/user/schema/type';
 
+import type { REQUIRED_ACTIONS } from '@/store/user/constant';
+
 
 export type LanguageCode = 'ko' | 'en' | string;
 // export type Timezone = 'UTC' | 'Asia/Seoul' | string;
@@ -18,7 +20,7 @@ export interface UserStoreState {
     email?: string;
     language?: string;
     timezone?: string;
-    requiredActions?: string[];
+    requiredActions?: RequiredAction[];
     emailVerified?: boolean;
     isSignInLoading?: boolean;
     mfa?: UserMfa
@@ -30,3 +32,5 @@ export interface UserStoreGetters {
     languageLabel: ComputedRef<string>;
     hasAdminOrWorkspaceOwnerRole: ComputedRef<boolean>;
 }
+
+export type RequiredAction = typeof REQUIRED_ACTIONS[keyof typeof REQUIRED_ACTIONS];
diff --git a/package-lock.json b/package-lock.json
index f19aae3456..65c0801904 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev377",
+  "version": "2.0.0-dev378",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cloudforet-console",
-      "version": "2.0.0-dev377",
+      "version": "2.0.0-dev378",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -117,7 +117,7 @@
       }
     },
     "apps/web": {
-      "version": "2.0.0-dev377",
+      "version": "2.0.0-dev378",
       "license": "Apache-2.0",
       "dependencies": {
         "@amcharts/amcharts5": "^5.4.7",
diff --git a/package.json b/package.json
index 3a24033566..2e7c50ffe1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev377",
+  "version": "2.0.0-dev378",
   "private": true,
   "workspaces": [
     "apps/*",
diff --git a/packages/core-lib/src/space-connector/index.ts b/packages/core-lib/src/space-connector/index.ts
index a33c937af3..081310b26f 100644
--- a/packages/core-lib/src/space-connector/index.ts
+++ b/packages/core-lib/src/space-connector/index.ts
@@ -1,10 +1,14 @@
-import type { InternalAxiosRequestConfig, CreateAxiosDefaults, Axios } from 'axios';
+import type { Axios, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
 import axios from 'axios';
 import type { CustomAxiosRequestConfig } from 'axios-auth-refresh/dist/utils';
 import { camelCase } from 'lodash';
 
 import type {
-    APIInfo, MockConfig, AxiosPostResponse, AuthConfig, DevConfig,
+    APIInfo,
+    AuthConfig,
+    AxiosPostResponse,
+    DevConfig,
+    MockConfig,
 } from '@/space-connector/type';
 
 import ServiceAPI from './service-api';
@@ -146,13 +150,8 @@ export class SpaceConnector {
         SpaceConnector.instance.tokenApi.flushToken();
     }
 
-    static setServiceConfig(serviceConfig: Record<string, any>): void {
-        if (SpaceConnector.instance) {
-            SpaceConnector.instance.serviceApi.updateServiceConfig(serviceConfig);
-            SpaceConnector.instance.serviceApiV2.updateServiceConfig(serviceConfig);
-        } else {
-            throw new Error('Not initialized client!');
-        }
+    static removeRefreshToken(): void {
+        SpaceConnector.instance.tokenApi.removeRefreshToken();
     }
 
     static async refreshAccessToken(executeSessionTimeoutCallback: boolean): Promise<boolean|undefined> {
diff --git a/packages/core-lib/src/space-connector/service-api.ts b/packages/core-lib/src/space-connector/service-api.ts
index d0477253f9..3af681b2d7 100644
--- a/packages/core-lib/src/space-connector/service-api.ts
+++ b/packages/core-lib/src/space-connector/service-api.ts
@@ -15,8 +15,6 @@ export default class ServiceAPI {
 
     tokenApi: TokenAPI;
 
-    serviceConfig: Record<string, any> = {};
-
     constructor(baseURL: string, tokenApi: TokenAPI, settings: CreateAxiosDefaults = {}) {
         this.instance = axios.create({
             ...settings,
@@ -56,13 +54,6 @@ export default class ServiceAPI {
             const token = this.tokenApi.getAccessToken();
             if (!auth && token) request.headers.Authorization = `Bearer ${token}`;
 
-            // Check if the service is enabled
-            const serviceName = ServiceAPI.extractServiceNameFromEndpoint(request.url || '');
-            const serviceInfo = this.serviceConfig[serviceName];
-            if (serviceInfo && serviceInfo.enabled === false) {
-                throw new Error(`[ServiceAPI] ${serviceName} service is disabled.`);
-            }
-
             return request;
         });
 
@@ -72,14 +63,4 @@ export default class ServiceAPI {
             this.handleResponseError,
         );
     }
-
-    private static extractServiceNameFromEndpoint(url: string): string {
-        const service = url.split('/')[1];
-        if (service) return service;
-        return '';
-    }
-
-    updateServiceConfig(serviceConfig: Record<string, any>): void {
-        this.serviceConfig = serviceConfig;
-    }
 }
diff --git a/packages/core-lib/src/space-connector/token-api.ts b/packages/core-lib/src/space-connector/token-api.ts
index acdd138617..606e7fdcf8 100644
--- a/packages/core-lib/src/space-connector/token-api.ts
+++ b/packages/core-lib/src/space-connector/token-api.ts
@@ -62,6 +62,11 @@ export default class TokenAPI {
         this.refreshToken = undefined;
     }
 
+    removeRefreshToken(): void {
+        LocalStorageAccessor.removeItem(REFRESH_TOKEN_KEY);
+        this.refreshToken = undefined;
+    }
+
     setToken(accessToken: string, refreshToken?: string): void {
         try {
             this.accessToken = accessToken;
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 6811079a45..8851929344 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -8350,6 +8350,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>ENFORCE_INFO_TEXT</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>ENTER_CODE</name>
                                 <definition_loaded>false</definition_loaded>
@@ -8392,6 +8413,48 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>MFA_CONFIGURED</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>MFA_CONFIGURED_DESC</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>OTP_INFO</name>
                                 <definition_loaded>false</definition_loaded>
@@ -8434,6 +8497,48 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>REQUIRED_BY_ADMIN</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                            <concept_node>
+                                <name>SETUP_VERIFY</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>SUB_TITLE</name>
                                 <definition_loaded>false</definition_loaded>
@@ -60788,6 +60893,368 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <folder_node>
+                                                <name>MFA</name>
+                                                <children>
+                                                    <concept_node>
+                                                        <name>DELETE_MFA_SECRET_KEY_BUTTON_TEXT</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>DELETE_MFA_SECRET_KEY_FAILED_MESSAGE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>DELETE_MFA_SECRET_KEY_MODAL_TITLE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>DELETE_MFA_SECRET_KEY_SUCCESS_MESSAGE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>DELETE_MULTI_MFA_SECRET_KEY_MODAL_DESC</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>DELETE_SINGLE_MFA_SECRET_KEY_MODAL_DESC</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>MFA_TYPE_NO_ACTIVE_METHOD</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>MFA_TYPE_SELECT_FIELD_TITLE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>MFA_TYPE_SELECT_FIELD_TOOLTIP_TEXT</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>REQUIRED_FIELD_TOOLTIP_TEXT</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>REQUIRED_SETTING_FIELD_TITLE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET_MFA_MODAL_CONFIRM_BUTTON_TEXT</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET_MFA_MODAL_TITLE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET_MFA_SUCCESS_MESSAGE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET_MFA_WARNING_DESC</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SET_MFA_WARNING_TITLE</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                    <concept_node>
+                                                        <name>SINGLE_USER_MFA_TYPE_INFO_TEXT</name>
+                                                        <definition_loaded>false</definition_loaded>
+                                                        <description/>
+                                                        <comment/>
+                                                        <default_text/>
+                                                        <translations>
+                                                            <translation>
+                                                                <language>en-US</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ja-JP</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                            <translation>
+                                                                <language>ko-KR</language>
+                                                                <approved>false</approved>
+                                                            </translation>
+                                                        </translations>
+                                                    </concept_node>
+                                                </children>
+                                            </folder_node>
                                             <concept_node>
                                                 <name>NON_REMOVABLE</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -61210,6 +61677,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>SET_MFA</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>STATE</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 337cdfecc0..a9c7b893bc 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -424,10 +424,15 @@
 			"AUTHENTICATION_CODE_LOWER": "authentication code",
 			"CONFIRM": "Confirm",
 			"EMAIL_INFO": "Allows multi-factor authentication(MFA) for account logins. A MFA code has been sent to an email address:",
+			"ENFORCE_INFO_TEXT": "Multi-factor authentication (MFA) is required for\nyour account by your administrator.\nTo disable this feature, please contact your admin.",
 			"ENTER_CODE": "Enter Code",
 			"GO_BACK": "Back to Sign in",
+			"MFA_CONFIGURED": "Multi-Factor Authentication Configured.",
+			"MFA_CONFIGURED_DESC": "Please sign-in again using the authentication method you set.",
 			"OTP_INFO": "Allows multi-factor authentication(MFA) for account logins. Enter the code that you see in the app.",
 			"PROBLEM_TITLE": "Having problems?",
+			"REQUIRED_BY_ADMIN": "Required by admin",
+			"SETUP_VERIFY": "Verify",
 			"SUB_TITLE": "Your account required to verify with email MFA.",
 			"TITLE": "Multi-factor\nauthentication"
 		},
@@ -3221,6 +3226,7 @@
 				"NO_WORKSPACE": "No Workspace",
 				"OWNER": "Owner",
 				"PASSWORD": "Password",
+				"PASSWORD_VALIDATION_INVALID": "Password must be at least 8 characters with lowercase, uppercase, and number.",
 				"PASSWORD_SEND_LINK": "Send new local users a password reset link",
 				"REQUIRED_FIELD": "Required field",
 				"ROLE_PLACEHOLDER": "Select a workspace role",
@@ -3291,6 +3297,25 @@
 					"GO_TO_WORKSPACE_GROUP": "Go to set up workspace groups",
 					"INVITE_TITLE": "Invite Users to '{workspace_name}'",
 					"KEEP_ONLY_REMOVABLE_URERS": "Keep only removable users in the list below",
+					"MFA": {
+						"DELETE_MFA_SECRET_KEY_BUTTON_TEXT": "Delete MFA Secret Key",
+						"DELETE_MFA_SECRET_KEY_FAILED_MESSAGE": "",
+						"DELETE_MFA_SECRET_KEY_MODAL_TITLE": "Delete Multi-factor Authentication Secret Key",
+						"DELETE_MFA_SECRET_KEY_SUCCESS_MESSAGE": "MFA secret key successfully deleted for the selected users.",
+						"DELETE_MULTI_MFA_SECRET_KEY_MODAL_DESC": "Deletes the Multi-factor Authentication(MFA) secret key for the [{selectedUsers}] selected users.",
+						"DELETE_SINGLE_MFA_SECRET_KEY_MODAL_DESC": "Deletes the Multi-factor Authentication(MFA) secret key for the selected user.",
+						"MFA_TYPE_NO_ACTIVE_METHOD": "No active method",
+						"MFA_TYPE_SELECT_FIELD_TITLE": "Multi-factor Authentication Method",
+						"MFA_TYPE_SELECT_FIELD_TOOLTIP_TEXT": ".",
+						"REQUIRED_FIELD_TOOLTIP_TEXT": "Choose whether to require Multi-Factor Authentication (MFA) for the selected users.",
+						"REQUIRED_SETTING_FIELD_TITLE": "Multi-factor Authentication Required Settings",
+						"SET_MFA_MODAL_CONFIRM_BUTTON_TEXT": "Save Changes",
+						"SET_MFA_MODAL_TITLE": "Set Multi-factor Authentication Policy",
+						"SET_MFA_SUCCESS_MESSAGE": "MFA settings applied to the selected users.",
+						"SET_MFA_WARNING_DESC": "This setting only affects selected Local Users, as it is not applicable to External Users.",
+						"SET_MFA_WARNING_TITLE": "External Users Excluded",
+						"SINGLE_USER_MFA_TYPE_INFO_TEXT": "MFA type currently in use by this account"
+					},
 					"NON_REMOVABLE": "Non-Removable",
 					"REMOVABLE": "Removable",
 					"REMOVE_MIXED_TYPE_DESC": "To exclude the non-removable users from the list and click the button below to proceed. ",
@@ -3312,6 +3337,7 @@
 				"ROLE": "Role",
 				"ROLE_NAME": "Role Name",
 				"ROLE_TYPE": "Role Type",
+				"SET_MFA": "Set MFA",
 				"STATE": "State",
 				"TAB_SELECTED_DATA": "Selected Data",
 				"TAG": "Tag",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index e7e38faaa6..931d92c7ed 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -424,10 +424,15 @@
 			"AUTHENTICATION_CODE_LOWER": "認証コード",
 			"CONFIRM": "確認",
 			"EMAIL_INFO": "アカウントログインのためのマルチファクタ認証(MFA)をサポートします。認証コードがメールアドレスに送信されました:",
+			"ENFORCE_INFO_TEXT": "",
 			"ENTER_CODE": "コードを入力",
 			"GO_BACK": "ログインする",
+			"MFA_CONFIGURED": "",
+			"MFA_CONFIGURED_DESC": "",
 			"OTP_INFO": "アカウントログインに多要素認証（MFA）を許可します。アプリに表示されているコードを入力してください。",
 			"PROBLEM_TITLE": "まだ問題がありますか？",
+			"REQUIRED_BY_ADMIN": "",
+			"SETUP_VERIFY": "認証",
 			"SUB_TITLE": "アカウント確認のためにメール認証が必要です。",
 			"TITLE": "マルチファクタ\n認証"
 		},
@@ -3221,6 +3226,7 @@
 				"NO_WORKSPACE": "ワークスペースなし",
 				"OWNER": "オーナー",
 				"PASSWORD": "パスワード",
+				"PASSWORD_VALIDATION_INVALID": "パスワードは8文字以上で、小文字、大文字、数字を含む必要があります。",
 				"PASSWORD_SEND_LINK": "ローカルユーザーにパスワードリセットメールを送信",
 				"REQUIRED_FIELD": "該当する情報を入力してください。",
 				"ROLE_PLACEHOLDER": "ワークスペースアクセスロールを選択",
@@ -3291,6 +3297,25 @@
 					"GO_TO_WORKSPACE_GROUP": "ワークスペースグループの設定に進む",
 					"INVITE_TITLE": "ユーザーを'{workspace_name}'に招待",
 					"KEEP_ONLY_REMOVABLE_URERS": "以下のリストには削除可能なユーザーのみを残してください。",
+					"MFA": {
+						"DELETE_MFA_SECRET_KEY_BUTTON_TEXT": "",
+						"DELETE_MFA_SECRET_KEY_FAILED_MESSAGE": "",
+						"DELETE_MFA_SECRET_KEY_MODAL_TITLE": "",
+						"DELETE_MFA_SECRET_KEY_SUCCESS_MESSAGE": "",
+						"DELETE_MULTI_MFA_SECRET_KEY_MODAL_DESC": "",
+						"DELETE_SINGLE_MFA_SECRET_KEY_MODAL_DESC": "",
+						"MFA_TYPE_NO_ACTIVE_METHOD": "",
+						"MFA_TYPE_SELECT_FIELD_TITLE": "",
+						"MFA_TYPE_SELECT_FIELD_TOOLTIP_TEXT": "",
+						"REQUIRED_FIELD_TOOLTIP_TEXT": "",
+						"REQUIRED_SETTING_FIELD_TITLE": "",
+						"SET_MFA_MODAL_CONFIRM_BUTTON_TEXT": "",
+						"SET_MFA_MODAL_TITLE": "",
+						"SET_MFA_SUCCESS_MESSAGE": "",
+						"SET_MFA_WARNING_DESC": "",
+						"SET_MFA_WARNING_TITLE": "",
+						"SINGLE_USER_MFA_TYPE_INFO_TEXT": ""
+					},
 					"NON_REMOVABLE": "削除不可能",
 					"REMOVABLE": "削除可能",
 					"REMOVE_MIXED_TYPE_DESC": "削除できないユーザーをリストから除外し、下のボタンをクリックして続行してください。",
@@ -3312,6 +3337,7 @@
 				"ROLE": "ロール",
 				"ROLE_NAME": "ロール名",
 				"ROLE_TYPE": "ロールタイプ",
+				"SET_MFA": "",
 				"STATE": "状態",
 				"TAB_SELECTED_DATA": "選択したデータ",
 				"TAG": "タグ",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 8cc299364e..e83c2aba0c 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -424,10 +424,15 @@
 			"AUTHENTICATION_CODE_LOWER": "인증 코드",
 			"CONFIRM": "확인",
 			"EMAIL_INFO": "계정 로그인을 위한 멀티 팩터 인증(MFA)을 지원합니다. 인증 코드가 이메일 주소로 전송되었습니다:",
+			"ENFORCE_INFO_TEXT": "",
 			"ENTER_CODE": "코드 입력",
 			"GO_BACK": "로그인 하러 가기",
+			"MFA_CONFIGURED": "",
+			"MFA_CONFIGURED_DESC": "",
 			"OTP_INFO": "계정 로그인을 위한 멀티 팩터 인증(MFA)이 활성화되어 있습니다. 앱에서 보이는 코드를 입력해 주세요.",
 			"PROBLEM_TITLE": "아직 문제가 있나요?",
+			"REQUIRED_BY_ADMIN": "",
+			"SETUP_VERIFY": "인증",
 			"SUB_TITLE": "계정 확인을 위한 이메일 인증이 필요합니다.",
 			"TITLE": "멀티 팩터\n인증"
 		},
@@ -3221,6 +3226,7 @@
 				"NO_WORKSPACE": "워크스페이스 없음",
 				"OWNER": "소유자",
 				"PASSWORD": "비밀번호",
+				"PASSWORD_VALIDATION_INVALID": "비밀번호는 8자 이상, 소문자, 대문자, 숫자를 포함해야 합니다.",
 				"PASSWORD_SEND_LINK": "로컬 사용자에게 비밀번호 재설정 이메일 발송",
 				"REQUIRED_FIELD": "해당 정보를 입력해주세요.",
 				"ROLE_PLACEHOLDER": "워크스페이스 접근 역할(Role) 선택",
@@ -3291,6 +3297,25 @@
 					"GO_TO_WORKSPACE_GROUP": "워크스페이스 그룹 설정하러 가기",
 					"INVITE_TITLE": "'{workspace_name}'에 사용자 추가",
 					"KEEP_ONLY_REMOVABLE_URERS": "아래 목록 중 제거 가능한 사용자만 보기",
+					"MFA": {
+						"DELETE_MFA_SECRET_KEY_BUTTON_TEXT": "",
+						"DELETE_MFA_SECRET_KEY_FAILED_MESSAGE": "",
+						"DELETE_MFA_SECRET_KEY_MODAL_TITLE": "",
+						"DELETE_MFA_SECRET_KEY_SUCCESS_MESSAGE": "",
+						"DELETE_MULTI_MFA_SECRET_KEY_MODAL_DESC": "",
+						"DELETE_SINGLE_MFA_SECRET_KEY_MODAL_DESC": "",
+						"MFA_TYPE_NO_ACTIVE_METHOD": "",
+						"MFA_TYPE_SELECT_FIELD_TITLE": "",
+						"MFA_TYPE_SELECT_FIELD_TOOLTIP_TEXT": "",
+						"REQUIRED_FIELD_TOOLTIP_TEXT": "",
+						"REQUIRED_SETTING_FIELD_TITLE": "",
+						"SET_MFA_MODAL_CONFIRM_BUTTON_TEXT": "",
+						"SET_MFA_MODAL_TITLE": "",
+						"SET_MFA_SUCCESS_MESSAGE": "",
+						"SET_MFA_WARNING_DESC": "",
+						"SET_MFA_WARNING_TITLE": "",
+						"SINGLE_USER_MFA_TYPE_INFO_TEXT": "이 계정이 현재 사용 중인 수단"
+					},
 					"NON_REMOVABLE": "삭제 불가능",
 					"REMOVABLE": "삭제 가능",
 					"REMOVE_MIXED_TYPE_DESC": "아래 버튼을 클릭하면 제거 불가한 사용자들을 항목에서 제외할 수 있습니다.",
@@ -3312,6 +3337,7 @@
 				"ROLE": "역할(Role)",
 				"ROLE_NAME": "역할(Role)명",
 				"ROLE_TYPE": "역할(Role) 타입",
+				"SET_MFA": "",
 				"STATE": "상태",
 				"TAB_SELECTED_DATA": "선택한 데이터 ",
 				"TAG": "태그",
diff --git a/packages/mirinae/src/controls/select-card/PSelectCard.vue b/packages/mirinae/src/controls/select-card/PSelectCard.vue
index 3471daf3ce..5d65cb5a97 100644
--- a/packages/mirinae/src/controls/select-card/PSelectCard.vue
+++ b/packages/mirinae/src/controls/select-card/PSelectCard.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-select-card"
-         :class="{selected: isSelected, block, disabled}"
+         :class="{selected: isSelected, block, disabled, readonly}"
          :tabindex="tabIndex"
          @click="handleClick"
          v-on="$listeners"
@@ -12,7 +12,7 @@
              width="1.25rem"
              height="1.25rem"
         />
-        <div class="select-card-contents">
+        <div class="select-card-contents contents">
             <slot v-bind="{isSelected}">
                 <p-lazy-img v-if="imageUrl || icon"
                             :src="imageUrl"
@@ -71,6 +71,10 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
         predicate: {
             type: Function as PropType<SelectionPredicate>,
             default: undefined,
@@ -217,6 +221,9 @@ export default defineComponent({
             opacity: 20%;
         }
     }
+    &.readonly {
+        cursor: not-allowed;
+    }
     .marker {
         @apply absolute;
         left: 0.75rem;
@@ -248,7 +255,7 @@ export default defineComponent({
     }
 
     @media (hover: hover) {
-        &:hover:not(.disabled) {
+        &:hover:not(.disabled):not(.readonly) {
             @apply bg-secondary2;
         }
     }

From 5af3762c0ff9779731bcda4d1c9eb39cac59dc38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Wed, 13 Aug 2025 22:39:47 +0900
Subject: [PATCH 2/4] refactor: fix MFA related codes as vue query updated
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../authenticator/local/template/ID_PW.vue    | 55 ++++++++++---------
 .../auth/pages/MultiFactorAuthSetUpPage.vue   | 22 ++++----
 apps/web/src/services/auth/routes/routes.ts   |  1 +
 .../iam/components/UserManagementHeader.vue   |  2 +-
 .../mfa/UserBulkMFASettingModal.vue           | 11 +++-
 .../mfa/UserMFASecretKeyDeleteModal.vue       |  8 ++-
 .../composables/use-admin-user-get-query.ts   | 27 +++++++++
 .../src/services/iam/pages/UserMainPage.vue   |  8 +++
 8 files changed, 91 insertions(+), 43 deletions(-)
 create mode 100644 apps/web/src/services/iam/composables/use-admin-user-get-query.ts

diff --git a/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue b/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
index c830c3b63e..307ed385b2 100644
--- a/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
+++ b/apps/web/src/services/auth/authenticator/local/template/ID_PW.vue
@@ -17,7 +17,6 @@ import { useUserStore } from '@/store/user/user-store';
 
 import config from '@/lib/config';
 import { isMobile } from '@/lib/helper/cross-browsing-helper';
-import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -85,21 +84,6 @@ const signIn = async () => {
         await loadAuth().signIn(credentials, 'LOCAL');
         displayStore.setIsSignInFailed(false);
 
-        // console.log('userStore.state.requiredActions', userStore.state.requiredActions, userStore.state.mfa);
-        if (userStore.state.requiredActions?.includes(REQUIRED_ACTIONS.ENFORCE_MFA)) {
-            const MFA_TYPE = userStore.state.mfa?.mfa_type;
-            const isMFAEnforced = !!userStore.state.mfa?.options?.enforce && !!MFA_TYPE;
-            const needToEnableMFA = isMFAEnforced && userStore.state.mfa?.state !== 'ENABLED';
-            if (needToEnableMFA) { // Enforced MFA by admin. Always has both `options.enforce` and `mfa_type`.
-                if (import.meta.env.DEV) console.debug(`[ID_PW.vue] MFA_TYPE: ${MFA_TYPE}`);
-                await router.push({ name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH_SETUP._NAME, params: { mfaType: MFA_TYPE } });
-            } else {
-                showErrorMessage('Something went wrong! Contact support.', 'MFA_NOT_SETUP');
-                await router.push({ name: AUTH_ROUTE.SIGN_OUT._NAME });
-            }
-            return;
-        }
-
         if (userStore.state.requiredActions?.includes(REQUIRED_ACTIONS.UPDATE_PASSWORD)) {
             await router.push({ name: AUTH_ROUTE.PASSWORD.STATUS.RESET._NAME });
         } else {
@@ -109,15 +93,36 @@ const signIn = async () => {
         if (e.message.includes('MFA')) {
             const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
             const mfaTypeRegex = /mfa_type\s*=\s*(\w+)/;
-            await router.push({
-                name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH._NAME,
-                params: {
-                    password: credentials.password,
-                    mfaEmail: e.message.match(emailRegex)[0],
-                    mfaType: e.message.match(mfaTypeRegex)[1],
-                    userId: state.userId?.trim() as string,
-                },
-            });
+            const message = e.message || '';
+
+            const mfaType = message.match(mfaTypeRegex)?.[1];
+            const mfaEmail = message.match(emailRegex)?.[0];
+
+            const isStateEnabled = message.includes('ENABLED');
+            const isStateDisabled = message.includes('DISABLED');
+
+            if (message.includes('MFA is not activated.') && isStateDisabled && mfaType) {
+                const token = message.match(/access_token\s*=\s*([\w.-]+)/)?.[1];
+
+                await router.push({
+                    name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH_SETUP._NAME,
+                    params: { mfaType },
+                    query: { sso_access_token: token },
+                });
+            } else if (message.includes('required') || (message.includes('MFA is not activated.') && isStateEnabled)) {
+                await router.push({
+                    name: AUTH_ROUTE.SIGN_IN.MULTI_FACTOR_AUTH._NAME,
+                    params: {
+                        password: credentials.password, mfaEmail, mfaType, userId: state.userId?.trim() as string,
+                    },
+                });
+            } else if (message.includes('Authenticate failure')) {
+                ErrorHandler.handleError(e);
+                displayStore.setIsSignInFailed(true);
+            } else {
+                ErrorHandler.handleRequestError(e, e.message);
+                await router.push({ name: AUTH_ROUTE.SIGN_OUT._NAME });
+            }
         } else {
             displayStore.setSignInFailedMessage(e.message);
             ErrorHandler.handleError(e);
diff --git a/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue b/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
index 34d1f4488f..2260ad8c92 100644
--- a/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
+++ b/apps/web/src/services/auth/pages/MultiFactorAuthSetUpPage.vue
@@ -14,8 +14,6 @@ import { MULTI_FACTOR_AUTH_TYPE } from '@/api-clients/identity/user-profile/sche
 import type { MultiFactorAuthType } from '@/api-clients/identity/user-profile/schema/type';
 import { i18n as _i18n } from '@/translations';
 
-import { ROOT_ROUTE } from '@/router/constant';
-
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -47,7 +45,7 @@ const {
 } = route.params as { mfaType: MultiFactorAuthType | undefined };
 
 const state = reactive({
-    isLocalLogin: computed<boolean>(() => userStore.state.authType === 'LOCAL'),
+    // isLocalLogin: computed<boolean>(() => userStore.state.authType === 'LOCAL'),
     myMFAType: computed<MultiFactorAuthType|undefined>(() => userStore.state.mfa?.mfa_type),
     isInvalidMfaType: computed<boolean>(() => state.myMFAType !== mfaTypeRouteParam || !state.myMFAType || !mfaTypeRouteParam),
     needToEnableMFA: computed<boolean>(() => {
@@ -112,16 +110,16 @@ const handleClickConfirmButton = async () => {
     });
 };
 
+const getSSOTokenFromUrl = (): string|undefined => {
+    const query = router.currentRoute.query;
+    return query.sso_access_token as string;
+};
+
 onMounted(() => {
-    // Remove refresh token to prevent forced access to other pages
-    SpaceConnector.removeRefreshToken();
-
-    if (!SpaceConnector.getAccessToken() || !state.needToEnableMFA || state.isInvalidMfaType) {
-        router.push({ name: AUTH_ROUTE.SIGN_OUT._NAME });
-        return;
-    } if (!state.isLocalLogin) {
-        router.push({ name: ROOT_ROUTE._NAME });
-    }
+    const ssoAccessToken = getSSOTokenFromUrl();
+
+    if (!ssoAccessToken) return;
+    SpaceConnector.setToken(ssoAccessToken, '');
 });
 
 onBeforeUnmount(() => {
diff --git a/apps/web/src/services/auth/routes/routes.ts b/apps/web/src/services/auth/routes/routes.ts
index d924abe24e..73d36a9a3a 100644
--- a/apps/web/src/services/auth/routes/routes.ts
+++ b/apps/web/src/services/auth/routes/routes.ts
@@ -74,6 +74,7 @@ export default [
                     isCentered: true,
                 },
                 props: (route) => ({
+                    ssoAccessToken: route.query.sso_access_token,
                     previousPath: route.query.previousPath,
                     redirectPath: route.query.redirectPath,
                 }),
diff --git a/apps/web/src/services/iam/components/UserManagementHeader.vue b/apps/web/src/services/iam/components/UserManagementHeader.vue
index 36b719f26b..931756e73c 100644
--- a/apps/web/src/services/iam/components/UserManagementHeader.vue
+++ b/apps/web/src/services/iam/components/UserManagementHeader.vue
@@ -14,10 +14,10 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
 import { useQueryTags } from '@/common/composables/query-tags';
 
 import { useUserListPaginationQuery } from '@/services/iam/composables/use-user-list-pagination-query';
+import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
 import { USER_MODAL_TYPE, USER_SEARCH_HANDLERS } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 
-import { useUserListQuery } from '../composables/use-user-list-query';
 
 
 interface Props {
diff --git a/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue b/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
index 9b46527e0b..5443f6ee50 100644
--- a/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
+++ b/apps/web/src/services/iam/components/mfa/UserBulkMFASettingModal.vue
@@ -18,6 +18,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import UserMFASettingFormLayout from '@/services/iam/components/mfa/UserMFASettingFormLayout.vue';
 import { useUserUpdateMutation } from '@/services/iam/composables/mutations/use-user-update-mutation';
+import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
 import { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
 import { MULTI_FACTOR_AUTH_ITEMS } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
@@ -33,19 +34,23 @@ const emit = defineEmits<UserBulkMFASettingModalEmits>();
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const userPageModalState = userPageStore.modalState;
-const userPageGetters = userPageStore.getters;
 const userStore = useUserStore();
 
 /* State */
 const selectedMfaType = ref<MultiFactorAuthType>(MULTI_FACTOR_AUTH_ITEMS[0].type);
 const isRequiredMfa = ref(false);
 
+const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
+
+const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
+
+
 /* Computed */
 // Only Local Auth Type Users can be updated
-const selectedMFAControllableUsers = computed<UserListItemType[]>(() => userPageGetters.selectedUsers.filter((user) => user.auth_type === 'LOCAL'));
+const selectedMFAControllableUsers = computed<UserListItemType[]>(() => selectedUsers.value?.filter((user) => user.auth_type === 'LOCAL') || []);
 
 // UI Conditions
-const isIncludedExternalAuthTypeUser = computed<boolean>(() => userPageGetters.selectedUsers.some((user) => user.auth_type !== 'LOCAL'));
+const isIncludedExternalAuthTypeUser = computed<boolean>(() => selectedUsers.value?.some((user) => user.auth_type !== 'LOCAL') || false);
 
 /* API */
 // Store failed user IDs
diff --git a/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue b/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
index 83142a312d..8d50d5add2 100644
--- a/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
+++ b/apps/web/src/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue
@@ -11,6 +11,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 
 import { useUserMfaDisableMutation } from '@/services/iam/composables/mutations/use-user-mfa-disable-mutation';
+import { useUserListQuery } from '@/services/iam/composables/use-user-list-query';
 import { USER_MODAL_MAP } from '@/services/iam/constants/modal.constant';
 import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
@@ -24,12 +25,15 @@ const emit = defineEmits<UserMFASecretKeyDeleteModalEmits>();
 
 /* Store */
 const userPageStore = useUserPageStore();
+const userPageState = userPageStore.state;
 const userPageModalState = userPageStore.modalState;
-const userPageGetters = userPageStore.getters;
 
 /* Computed */
 // Only Local Auth Type Users can be disabled (disable = delete secret key)
-const selectedMFAEnabledUsers = computed<UserListItemType[]>(() => userPageGetters.selectedUsers.filter((user) => user.auth_type === 'LOCAL' && user.mfa?.state === 'ENABLED') || []);
+const selectedUserIds = computed<string[]>(() => userPageState.selectedUserIds);
+
+const { userListData: selectedUsers } = useUserListQuery(selectedUserIds);
+const selectedMFAEnabledUsers = computed<UserListItemType[]>(() => selectedUsers.value?.filter((user) => user.auth_type === 'LOCAL' && user.mfa?.state === 'ENABLED') || []);
 
 /* API */
 // Store failed user IDs
diff --git a/apps/web/src/services/iam/composables/use-admin-user-get-query.ts b/apps/web/src/services/iam/composables/use-admin-user-get-query.ts
new file mode 100644
index 0000000000..cfa90b0d47
--- /dev/null
+++ b/apps/web/src/services/iam/composables/use-admin-user-get-query.ts
@@ -0,0 +1,27 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { useUserApi } from '@/api-clients/identity/user/composables/use-user-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+interface UseUserGetQueryOptions {
+    userId: ComputedRef<string>;
+}
+
+export const useUserGetQuery = ({ userId }: UseUserGetQueryOptions) => {
+    const { userAPI } = useUserApi();
+    const { key, params } = useServiceQueryKey('identity', 'user', 'get', {
+        params: computed(() => ({
+            user_id: userId.value,
+        })),
+    });
+
+    return useScopedQuery({
+        queryKey: key,
+        queryFn: () => userAPI.get(params.value),
+        enabled: computed(() => !!userId.value),
+        // staleTime: 1000 * 60 * 5,
+        // gcTime: 1000 * 60 * 10,
+    }, ['DOMAIN']);
+};
diff --git a/apps/web/src/services/iam/pages/UserMainPage.vue b/apps/web/src/services/iam/pages/UserMainPage.vue
index d2302522fd..e40e529443 100644
--- a/apps/web/src/services/iam/pages/UserMainPage.vue
+++ b/apps/web/src/services/iam/pages/UserMainPage.vue
@@ -10,6 +10,8 @@ import { useAuthorizationStore } from '@/store/authorization/authorization-store
 
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
+import UserBulkMFASettingModal from '@/services/iam/components/mfa/UserBulkMFASettingModal.vue';
+import UserMFASecretKeyDeleteModal from '@/services/iam/components/mfa/UserMFASecretKeyDeleteModal.vue';
 import UserAssignToGroupModal from '@/services/iam/components/UserAssignToGroupModal.vue';
 import UserManagementAddModal from '@/services/iam/components/UserManagementAddModal.vue';
 import UserManagementFormModal from '@/services/iam/components/UserManagementFormModal.vue';
@@ -23,6 +25,7 @@ import UserManagementTab from '@/services/iam/components/UserManagementTab.vue';
 import UserManagementTable from '@/services/iam/components/UserManagementTable.vue';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 
+
 const appContextStore = useAppContextStore();
 const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
@@ -46,6 +49,8 @@ watch(() => storeState.globalGrantLoading, (globalGrantLoading) => {
 onUnmounted(() => {
     userPageStore.reset();
 });
+
+
 </script>
 
 <template>
@@ -65,6 +70,9 @@ onUnmounted(() => {
         <user-management-status-modal v-if="hasReadWriteAccess" />
         <user-management-form-modal v-if="hasReadWriteAccess" />
         <user-assign-to-group-modal v-if="hasReadWriteAccess" />
+
+        <user-bulk-m-f-a-setting-modal v-if="hasReadWriteAccess" />
+        <user-m-f-a-secret-key-delete-modal v-if="hasReadWriteAccess" />
     </section>
 </template>
 

From 9061d83c9919214cbd5b105e9dceab1946654a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Thu, 14 Aug 2025 09:39:34 +0900
Subject: [PATCH 3/4] fix: bug of reactivity about user update form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../components/UserManagementFormInfoForm.vue |  6 +-
 .../components/UserManagementFormModal.vue    | 74 +++++++++++--------
 ...serManagementFormNotificationEmailForm.vue |  9 +--
 .../UserManagementFormPasswordForm.vue        |  6 +-
 .../composables/use-admin-user-get-query.ts   |  1 +
 5 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue b/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
index 6500b32d9f..6ef4471bf9 100644
--- a/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormInfoForm.vue
@@ -41,7 +41,7 @@ const handleChangeName = (value: string) => {
     state.proxyName = value;
 };
 const setForm = () => {
-    state.proxyName = state.data?.name || '';
+    state.proxyName = userData.value?.name || '';
 };
 
 /* Init */
@@ -55,7 +55,7 @@ onMounted(() => {
         <p-field-group :label="$t('IAM.USER.FORM.USER_ID')"
                        required
         >
-            <p-text-input :value="state.data?.user_id"
+            <p-text-input :value="userData?.user_id"
                           disabled
                           block
             />
@@ -63,7 +63,7 @@ onMounted(() => {
         <p-field-group :label="$t('IAM.USER.FORM.NAME')"
                        class="input-form"
         >
-            <p-text-input :value="state.proxyName"
+            <p-text-input :value="userData?.name"
                           :loading="isUserLoading"
                           class="text-input"
                           block
diff --git a/apps/web/src/services/iam/components/UserManagementFormModal.vue b/apps/web/src/services/iam/components/UserManagementFormModal.vue
index 469eec5486..7c99c2eee8 100644
--- a/apps/web/src/services/iam/components/UserManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormModal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import {
+    computed, reactive, ref, watch,
+} from 'vue';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEmpty } from 'lodash';
@@ -64,7 +66,6 @@ const emit = defineEmits<{(e: 'confirm'): void; }>();
 
 const state = reactive({
     mfaLoading: false,
-    data: computed<UserModel|undefined>(() => userData.value as UserModel),
     smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
     mfa: computed<UserMfa|undefined>(() => userStore.state.mfa),
     loginUserId: computed<string|undefined>(() => userStore.state.userId),
@@ -92,6 +93,8 @@ const formState = reactive({
     tags: {} as Tags,
 });
 
+const tagModifiedByUser = ref<boolean>(false);
+
 /* Components */
 const closeModal = () => {
     userPageStore.$patch((_state) => {
@@ -104,9 +107,9 @@ const handleClose = () => {
     userPageStore.setSelectedUserForForm(undefined);
 };
 const setForm = () => {
-    formState.name = state.data?.name || '';
-    formState.email = state.data?.email || '';
-    formState.tags = state.data?.tags || {};
+    formState.name = userData.value?.name || '';
+    formState.email = userData.value?.email || '';
+    formState.tags = userData.value?.tags || {};
 };
 const handleChangeInputs = (value) => {
     if (value.email) formState.email = value.email;
@@ -116,24 +119,25 @@ const handleChangeInputs = (value) => {
     if (value.role) formState.role = value.role;
 };
 const buildUserInfoParams = (): UserUpdateParameters => ({
-    user_id: state.data?.user_id || '',
+    user_id: userData.value?.user_id || '',
     name: formState.name,
-    email: formState.isValidEmail ? formState.email : state.data?.email || '',
-    tags: formState.tags || {},
+    email: formState.isValidEmail ? formState.email : userData.value?.email || '',
+    tags: formState.tags ? { ...formState.tags } : {},
     password: formState.password || '',
-    reset_password: state.data?.auth_type === 'LOCAL' && formState.passwordType === PASSWORD_TYPE.RESET,
+    reset_password: userData.value?.auth_type === 'LOCAL' && formState.passwordType === PASSWORD_TYPE.RESET,
 });
 
 const { userAPI } = useUserApi();
 const { key: userListQueryKey } = useServiceQueryKey('identity', 'user', 'list');
-const { withSuffix: userGetQueryKey } = useServiceQueryKey('identity', 'user', 'get');
+const { key: userGetQueryKey } = useServiceQueryKey('identity', 'user', 'get', {
+    contextKey: computed(() => userData.value?.user_id || ''),
+});
 const queryClient = useQueryClient();
 
 const handleOpenDisableMfaModal = () => {
     closeModal();
     userPageStore.setMfaSecretKeyDeleteModalVisible(true);
     userPageStore.setPreviousModalType(USER_MODAL_MAP.UPDATE);
-    console.log('handleOpenDisableMfaModal22');
 };
 
 
@@ -143,13 +147,13 @@ const { mutateAsync: updateUser } = useMutation({
         if (formState.isValidEmail) {
             await updateUserEmail();
             await verifyUserEmail();
-            if (state.loginUserId === state.data?.user_id) {
+            if (state.loginUserId === userData.value?.user_id) {
                 await userStore.updateUser({
-                    email: state.data?.email,
+                    email: userData.value?.email,
                 });
                 userStore.setEmailVerified(true);
             }
-            userPageStore.setUserEmail(state.data?.user_id, state.data?.email);
+            userPageStore.setUserEmail(userData.value?.user_id, userData.value?.email);
         }
 
         if (state.roleBindingList.length > 0 && !state.isChangedRoleToggle) {
@@ -159,7 +163,7 @@ const { mutateAsync: updateUser } = useMutation({
         }
 
         await queryClient.invalidateQueries({ queryKey: userListQueryKey.value });
-        await queryClient.invalidateQueries({ queryKey: userGetQueryKey(state.data?.user_id ?? '') });
+        await queryClient.invalidateQueries({ queryKey: userGetQueryKey.value });
 
         showSuccessMessage(i18n.t('IAM.USER.MAIN.MODAL.ALT_S_UPDATE_USER'), '');
         closeModal();
@@ -176,8 +180,8 @@ const { mutateAsync: updateUser } = useMutation({
 /* API */
 const handleConfirm = async () => {
     const userInfoParams = buildUserInfoParams();
-    if (state.data?.auth_type === 'LOCAL') { // Only Local Auth Type Users can be updated
-        const existingMfa = state.data?.mfa;
+    if (userData.value?.auth_type === 'LOCAL') { // Only Local Auth Type Users can be updated
+        const existingMfa = userData.value?.mfa;
         if (!!existingMfa?.options?.enforce !== mfaSettingFormState.isRequiredMfa) { // switch required mfa state Case
             userInfoParams.enforce_mfa_state = mfaSettingFormState.isRequiredMfa ? MFA_STATE.ENABLED : MFA_STATE.DISABLED;
             if (userInfoParams.enforce_mfa_state === MFA_STATE.ENABLED) {
@@ -192,7 +196,7 @@ const handleConfirm = async () => {
 };
 
 const fetchRoleBinding = async (item?: AddModalMenuItem) => {
-    if (state.data?.user_id === userStore.state.userId) return;
+    if (userData.value?.user_id === userStore.state.userId) return;
     if (isEmpty(formState.role)) return;
 
     const roleParams = {
@@ -206,7 +210,7 @@ const fetchRoleBinding = async (item?: AddModalMenuItem) => {
             await SpaceConnector.clientV2.identity.roleBinding.create<RoleCreateParameters, RoleBindingModel>({
                 ...roleParams,
                 workspace_id: item?.name || '',
-                user_id: state.data?.user_id || '',
+                user_id: userData.value?.user_id || '',
                 resource_group: RESOURCE_GROUP.DOMAIN,
             });
         } else {
@@ -233,7 +237,7 @@ const fetchDeleteRoleBinding = async () => {
 
 const fetchListRoleBindingInfo = async () => {
     const response = await SpaceConnector.clientV2.identity.roleBinding.list<RoleBindingListParameters, ListResponse<RoleBindingModel>>({
-        user_id: state.data?.user_id || '',
+        user_id: userData.value?.user_id || '',
         query: {
             filter: [{ k: 'role_type', v: ROLE_TYPE.DOMAIN_ADMIN, o: 'eq' }],
         },
@@ -252,14 +256,14 @@ const fetchListRoleBindingInfo = async () => {
 };
 const updateUserEmail = async () => {
     await SpaceConnector.clientV2.identity.user.update<UserUpdateParameters, UserModel>({
-        user_id: state.data?.user_id || '',
-        email: state.data?.email || '',
+        user_id: userData.value?.user_id || '',
+        email: userData.value?.email || '',
     });
 };
 const verifyUserEmail = async () => {
     await postUserValidationEmail({
-        user_id: state.data?.user_id || '',
-        email: state.data?.email || '',
+        user_id: userData.value?.user_id || '',
+        email: userData.value?.email || '',
     });
 };
 
@@ -277,12 +281,24 @@ watch(() => userPageState.modal.visible, async (visible) => {
     }
 });
 
-watch(() => state.data?.mfa, (mfa) => {
+watch(() => userData.value?.mfa, (mfa) => {
     if (mfa) {
         mfaSettingFormState.isRequiredMfa = !!mfa.options?.enforce;
         mfaSettingFormState.selectedMfaType = mfa.mfa_type || MULTI_FACTOR_AUTH_ITEMS[0].type;
     }
 }, { immediate: true });
+
+watch(() => userData.value?.tags, (tags) => {
+    if (tags !== undefined && userPageState.modal.visible === 'form' && !tagModifiedByUser.value) {
+        formState.tags = { ...tags };
+    }
+}, { immediate: true });
+
+watch(() => userPageState.modal.visible, (visible) => {
+    if (visible !== 'form') {
+        tagModifiedByUser.value = false;
+    }
+});
 </script>
 
 <template>
@@ -306,11 +322,11 @@ watch(() => state.data?.mfa, (mfa) => {
                     @change-input="handleChangeInputs"
                 />
                 <user-management-form-password-form
-                    v-if="state.data?.auth_type === 'LOCAL'"
+                    v-if="userData?.auth_type === 'LOCAL'"
                     @change-input="handleChangeInputs"
                 />
-                <user-m-f-a-setting-form-layout v-if="state.data?.auth_type === 'LOCAL'"
-                                                :selected-mfa-controllable-target="state.data"
+                <user-m-f-a-setting-form-layout v-if="userData?.auth_type === 'LOCAL'"
+                                                :selected-mfa-controllable-target="userData"
                                                 :is-required-mfa.sync="mfaSettingFormState.isRequiredMfa"
                                                 :selected-mfa-type.sync="mfaSettingFormState.selectedMfaType"
                                                 @click-disable-mfa="handleOpenDisableMfaModal"
@@ -319,7 +335,7 @@ watch(() => state.data?.mfa, (mfa) => {
                                                  :role.sync="formState.role"
                                                  :is-changed-toggle.sync="state.isChangedRoleToggle"
                 />
-                <user-management-add-tag v-if="userPageState.isAdminMode"
+                <user-management-add-tag v-if="userPageState.isAdminMode && userData"
                                          :tags.sync="formState.tags"
                                          is-form-visible
                 />
diff --git a/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue b/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
index d507101523..2c49b30142 100644
--- a/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormNotificationEmailForm.vue
@@ -7,7 +7,6 @@ import {
     PFieldGroup, PTextInput, PTooltip, PI, PButton, PBadge,
 } from '@cloudforet/mirinae';
 
-import type { UserModel } from '@/api-clients/identity/user/schema/model';
 import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
@@ -35,7 +34,7 @@ const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
 });
 
 const state = reactive({
-    data: computed<UserModel|undefined>(() => userData.value),
+    // data: computed<UserModel|undefined>(() => userData.value),
     loading: false,
     isEdit: false,
     isCollapsed: true,
@@ -49,7 +48,7 @@ const {
     invalidState,
     invalidTexts,
 } = useFormValidator({
-    email: state.data?.email || '',
+    email: '',
 }, {
     email(value: string) { return !emailValidator(value) ? '' : i18n.t('IAM.USER.FORM.EMAIL_INVALID'); },
 });
@@ -87,7 +86,7 @@ const handleClickSend = async () => {
 };
 
 /* Watcher */
-watch(() => state.data?.email_verified, (value) => {
+watch(() => userData.value?.email_verified, (value) => {
     state.isValidEmail = value || false;
     if (email.value) {
         state.isEdit = !value;
@@ -108,7 +107,7 @@ watch(() => state.data?.email_verified, (value) => {
             <template #default="{invalid}">
                 <div class="input-form">
                     <!-- HACK: need to apply placeholder changes based on the distinction between open source and SaaS. -->
-                    <p-text-input :value="email"
+                    <p-text-input :value="userData?.email"
                                   :loading="isUserLoading"
                                   :invalid="invalid"
                                   placeholder="user@spaceone.io"
diff --git a/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue b/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
index 01b1637843..aa591756b4 100644
--- a/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormPasswordForm.vue
@@ -5,7 +5,6 @@ import {
     PTextInput, PFieldGroup, PRadio, PDivider, PRadioGroup, PI,
 } from '@cloudforet/mirinae';
 
-import type { UserModel } from '@/api-clients/identity/user/schema/model';
 import { i18n } from '@/translations';
 
 import config from '@/lib/config';
@@ -31,7 +30,6 @@ const { data: userData, isLoading: isUserLoading } = useUserGetQuery({
 });
 
 const state = reactive({
-    data: computed<UserModel|undefined>(() => userData.value),
     smtpEnabled: computed(() => config.get('SMTP_ENABLED')),
     passwordStatus: 0,
     passwordTypeArr: computed(() => {
@@ -40,7 +38,7 @@ const state = reactive({
             additionalItems.push({
                 name: PASSWORD_TYPE.RESET,
                 label: i18n.t('COMMON.PROFILE.SEND_LINK'),
-                disabled: !state.data?.email_verified,
+                disabled: !userData.value?.email_verified,
             });
         }
         return [
@@ -180,7 +178,7 @@ onMounted(() => {
                 </p-field-group>
             </form>
         </div>
-        <div v-if="!state.data?.email_verified && !isUserLoading"
+        <div v-if="!userData?.email_verified && !isUserLoading"
              class="help-text-wrapper"
              :loading="isUserLoading"
         >
diff --git a/apps/web/src/services/iam/composables/use-admin-user-get-query.ts b/apps/web/src/services/iam/composables/use-admin-user-get-query.ts
index cfa90b0d47..9553db0563 100644
--- a/apps/web/src/services/iam/composables/use-admin-user-get-query.ts
+++ b/apps/web/src/services/iam/composables/use-admin-user-get-query.ts
@@ -12,6 +12,7 @@ interface UseUserGetQueryOptions {
 export const useUserGetQuery = ({ userId }: UseUserGetQueryOptions) => {
     const { userAPI } = useUserApi();
     const { key, params } = useServiceQueryKey('identity', 'user', 'get', {
+        contextKey: userId,
         params: computed(() => ({
             user_id: userId.value,
         })),

From f0a070b3e116ed61e6ae90c4d92d33371bb91482 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=89=E1=85=B3=E1=86=BC=E1=84=8B?=
 =?UTF-8?q?=E1=85=A7=E1=86=AB?= <sylee1274@mz.co.kr>
Date: Thu, 14 Aug 2025 10:07:48 +0900
Subject: [PATCH 4/4] fix: table selection sync issues after user update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../iam/components/UserManagementTable.vue       | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/iam/components/UserManagementTable.vue b/apps/web/src/services/iam/components/UserManagementTable.vue
index 171d207ddb..b7b4b9085c 100644
--- a/apps/web/src/services/iam/components/UserManagementTable.vue
+++ b/apps/web/src/services/iam/components/UserManagementTable.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    computed, onMounted, reactive, ref,
+    computed, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQueryClient } from '@tanstack/vue-query';
@@ -352,6 +352,20 @@ const handleRemoveButton = async () => {
 };
 
 const isWorkspaceGroupUser = (item: ExtendUserListItemType) => !!item?.role_binding_info?.workspace_group_id;
+
+/* Watcher */
+// note: initialize selected indices when user list is updated
+watch(() => state.refinedUserItems, (newItems) => {
+    if (newItems && userPageState.selectedUserIds.length > 0) {
+        const newIndices = userPageState.selectedUserIds
+            .map((userId) => newItems.findIndex((item) => item.user_id === userId))
+            .filter((index) => index !== -1);
+
+        if (newIndices.length > 0) {
+            userPageStore.setSelectedIndices(newIndices);
+        }
+    }
+}, { deep: true });
 </script>
 
 <template>