diff --git a/src/components/en/mfa/AltAddMethod.mdx b/src/components/en/mfa/AltAddMethod.mdx
index 49d5def9eb..4a65efd432 100644
--- a/src/components/en/mfa/AltAddMethod.mdx
+++ b/src/components/en/mfa/AltAddMethod.mdx
@@ -4,10 +4,14 @@
   */}
 
 <li>
-  Click "Add method" in the  [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com).
+  Open [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com).
+</li>
+<li>
+  Click "Add method".
   ![](./alt_add_method.png)
 </li>
 <li>
   For "Which method would you like to add?", select {props.selection} and click "Add".
+  {props.methodSupplement}
   ![](./alt_add_method_pull_down.png)
 </li>
diff --git a/src/components/en/mfa/FirstAccess.mdx b/src/components/en/mfa/FirstAccess.mdx
new file mode 100644
index 0000000000..aba58f8c30
--- /dev/null
+++ b/src/components/en/mfa/FirstAccess.mdx
@@ -0,0 +1,3 @@
+<li>Open [security info page](https://account.activedirectory.windowsazure.com/proofup.aspx?proofup=1&whr=utac.u-tokyo.ac.jp).</li>
+<li>Input 10-digit Common ID of UTokyo Account and the password on sign-in form if shown.</li>
+<li>Click "Next" on "More information required" screen. ![](./first_more_information.png)</li>
diff --git a/src/components/en/mfa/FirstEmail.mdx b/src/components/en/mfa/FirstEmail.mdx
new file mode 100644
index 0000000000..20315b8e3b
--- /dev/null
+++ b/src/components/en/mfa/FirstEmail.mdx
@@ -0,0 +1,2 @@
+<li>If you haven't already registered, you are required to enter your email address. The email provider does not matter as long as you can receive, but you should use another than ECCS Cloud Email or staff email. Then follow the instruction to input the 6-digit code sent to the address. ![](./first_email.png)</li>
+<li>This step has been completed when you are told "Succeeded". ![](./first_success.png)</li>
diff --git a/src/components/en/mfa/TabSelectorButton.astro b/src/components/en/mfa/TabSelectorButton.astro
new file mode 100644
index 0000000000..2bfada901e
--- /dev/null
+++ b/src/components/en/mfa/TabSelectorButton.astro
@@ -0,0 +1,32 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabSelectorButton from "@components/pages/mfa/BaseTabSelectorButton.astro";
+import MicrosoftAuthenticator from "./select/MicrosoftAuthenticator.mdx";
+import AuthenticatorApplication from "./select/AuthenticatorApplication.mdx";
+import Phone from "./select/Phone.mdx";
+import Fido from "./select/Fido.mdx";
+import type { Step } from "@components/pages/mfa/tabs";
+
+interface Props {
+  step: Step;
+}
+
+const { step } = Astro.props;
+---
+
+<BaseTabSelectorButton
+  step={step}
+  labels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: step === "alt" ? "FIDO Security Key" : undefined,
+  }}
+  guide="Select an verification method you will register."
+>
+  <MicrosoftAuthenticator group={step} slot="ms_auth" />
+  <AuthenticatorApplication group={step} slot="auth_app" />
+  <Phone group={step} slot="phone" />
+  <Fido group={step} slot="fido" />
+</BaseTabSelectorButton>
diff --git a/src/components/en/mfa/TabSelectorGrid.astro b/src/components/en/mfa/TabSelectorGrid.astro
new file mode 100644
index 0000000000..42410b5fa8
--- /dev/null
+++ b/src/components/en/mfa/TabSelectorGrid.astro
@@ -0,0 +1,27 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabSelectorGrid from "@components/pages/mfa/BaseTabSelectorGrid.astro";
+import MicrosoftAuthenticator from "./select/MicrosoftAuthenticator.mdx";
+import AuthenticatorApplication from "./select/AuthenticatorApplication.mdx";
+import Phone from "./select/Phone.mdx";
+import Fido from "./select/Fido.mdx";
+---
+
+<BaseTabSelectorGrid
+  rowLabels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: "FIDO Security Key",
+  }}
+  columnLabels={{
+    first: "Step 1",
+    alt: "Step 2",
+  }}
+>
+  <MicrosoftAuthenticator group="initial" slot="ms_auth" />
+  <AuthenticatorApplication group="initial" slot="auth_app" />
+  <Phone group="initial" slot="phone" />
+  <Fido group="initial" slot="fido" />
+</BaseTabSelectorGrid>
diff --git a/src/components/en/mfa/Tabs.astro b/src/components/en/mfa/Tabs.astro
new file mode 100644
index 0000000000..e5eaecc38c
--- /dev/null
+++ b/src/components/en/mfa/Tabs.astro
@@ -0,0 +1,33 @@
+---
+// なぜか`.mdx`にすると <script> の中身がbundleされないため`.astro`
+
+import BaseTabs from "@components/pages/mfa/BaseTabs.astro";
+import type { Step } from "@components/pages/mfa/tabs";
+import MicrosoftAuthenticator from "./ms_auth/index.mdx";
+import AuthenticatorApplication from "./auth_app/index.mdx";
+import Phone from "./phone/index.mdx";
+import Fido from "./fido/index.mdx";
+import TabSelectorButton from "./TabSelectorButton.astro";
+
+interface Props {
+  step: Step;
+}
+
+const { step } = Astro.props;
+---
+
+<BaseTabs
+  step={step}
+  labels={{
+    ms_auth: "Microsoft Authenticator",
+    auth_app: "Other Authenticator Apps",
+    phone: "Phone Number",
+    fido: step === "alt" ? "FIDO Security Key" : undefined,
+  }}
+>
+  <TabSelectorButton step={step} slot="selector" />
+  <MicrosoftAuthenticator step={step} slot="ms_auth" />
+  <AuthenticatorApplication step={step} slot="auth_app" />
+  <Phone step={step} slot="phone" />
+  <Fido step={step} slot="fido" />
+</BaseTabs>
diff --git a/src/components/en/mfa/auth_app/index.mdx b/src/components/en/mfa/auth_app/index.mdx
index 13f0347a11..fe45ece669 100644
--- a/src/components/en/mfa/auth_app/index.mdx
+++ b/src/components/en/mfa/auth_app/index.mdx
@@ -1,5 +1,7 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import firstQr from "./first_qr.png";
@@ -20,6 +22,7 @@ import altQr from "./alt_qr.png";
       </li>
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <li>
         Click "I want to use a different authenticator app" in the middle of the setup page.
         ![](./first.png)
@@ -29,6 +32,11 @@ import altQr from "./alt_qr.png";
 
   <li>
     Follow the instructions until you reach the QR code page. Scan the QR code with your authenticator app and complete the setup procedure.
+    If you want to use YubiKey and Yubico Authenticator app, see "[Instructions on how to use the Yubico Authenticator for the Multi-Factor Authentication of UTokyo Accounts](../yubikey-totp/)" page for details.
     <Image src={{ firstQr, altQr }[`${props.step}Qr`]} alt="" />
   </li>
-</ol>
\ No newline at end of file
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
+</ol>
diff --git a/src/components/en/mfa/fido/index.mdx b/src/components/en/mfa/fido/index.mdx
new file mode 100644
index 0000000000..065780ba72
--- /dev/null
+++ b/src/components/en/mfa/fido/index.mdx
@@ -0,0 +1 @@
+For details on the FIDO security key registration procedure, please refer to [How to use FIDO security key for Multi-Factor Authentication for UTokyo Account (in Japanese)](/utokyo_account/mfa/fido-security_key/).
diff --git a/src/components/en/mfa/first_email.png b/src/components/en/mfa/first_email.png
new file mode 100644
index 0000000000..df4e6266ee
Binary files /dev/null and b/src/components/en/mfa/first_email.png differ
diff --git a/src/components/en/mfa/first_more_information.png b/src/components/en/mfa/first_more_information.png
new file mode 100644
index 0000000000..be300371e3
Binary files /dev/null and b/src/components/en/mfa/first_more_information.png differ
diff --git a/src/components/en/mfa/first_success.png b/src/components/en/mfa/first_success.png
new file mode 100644
index 0000000000..ec376fb734
Binary files /dev/null and b/src/components/en/mfa/first_success.png differ
diff --git a/src/components/en/mfa/ms_auth/alt_approved.png b/src/components/en/mfa/ms_auth/alt_approved.png
new file mode 100644
index 0000000000..9b7c411bbb
Binary files /dev/null and b/src/components/en/mfa/ms_auth/alt_approved.png differ
diff --git a/src/components/en/mfa/ms_auth/alt_link.png b/src/components/en/mfa/ms_auth/alt_link.png
index 9d9f4a98dc..7d69825033 100644
Binary files a/src/components/en/mfa/ms_auth/alt_link.png and b/src/components/en/mfa/ms_auth/alt_link.png differ
diff --git a/src/components/en/mfa/ms_auth/alt_next_next.png b/src/components/en/mfa/ms_auth/alt_next_next.png
new file mode 100644
index 0000000000..2e3ec89644
Binary files /dev/null and b/src/components/en/mfa/ms_auth/alt_next_next.png differ
diff --git a/src/components/en/mfa/ms_auth/alt_try.png b/src/components/en/mfa/ms_auth/alt_try.png
new file mode 100644
index 0000000000..f335bd8179
Binary files /dev/null and b/src/components/en/mfa/ms_auth/alt_try.png differ
diff --git a/src/components/en/mfa/ms_auth/digital_life.png b/src/components/en/mfa/ms_auth/digital_life.png
new file mode 100644
index 0000000000..11a9930a8a
Binary files /dev/null and b/src/components/en/mfa/ms_auth/digital_life.png differ
diff --git a/src/components/en/mfa/ms_auth/empty.png b/src/components/en/mfa/ms_auth/empty.png
new file mode 100644
index 0000000000..5e1e865e7d
Binary files /dev/null and b/src/components/en/mfa/ms_auth/empty.png differ
diff --git a/src/components/en/mfa/ms_auth/first_approved.png b/src/components/en/mfa/ms_auth/first_approved.png
new file mode 100644
index 0000000000..1993490565
Binary files /dev/null and b/src/components/en/mfa/ms_auth/first_approved.png differ
diff --git a/src/components/en/mfa/ms_auth/first_link.png b/src/components/en/mfa/ms_auth/first_link.png
index 8c49905882..6b67053f0c 100644
Binary files a/src/components/en/mfa/ms_auth/first_link.png and b/src/components/en/mfa/ms_auth/first_link.png differ
diff --git a/src/components/en/mfa/ms_auth/first_next_next.png b/src/components/en/mfa/ms_auth/first_next_next.png
new file mode 100644
index 0000000000..2e3ec89644
Binary files /dev/null and b/src/components/en/mfa/ms_auth/first_next_next.png differ
diff --git a/src/components/en/mfa/ms_auth/first_try.png b/src/components/en/mfa/ms_auth/first_try.png
new file mode 100644
index 0000000000..bf5e42ddcd
Binary files /dev/null and b/src/components/en/mfa/ms_auth/first_try.png differ
diff --git a/src/components/en/mfa/ms_auth/improve.png b/src/components/en/mfa/ms_auth/improve.png
new file mode 100644
index 0000000000..7b88482f67
Binary files /dev/null and b/src/components/en/mfa/ms_auth/improve.png differ
diff --git a/src/components/en/mfa/ms_auth/index.mdx b/src/components/en/mfa/ms_auth/index.mdx
index 27c355c08b..ec7b2dfb11 100644
--- a/src/components/en/mfa/ms_auth/index.mdx
+++ b/src/components/en/mfa/ms_auth/index.mdx
@@ -1,11 +1,19 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import firstLink from "./first_link.png";
 import firstQr from "./first_qr.png";
 import altLink from "./alt_link.png";
 import altQr from "./alt_qr.png";
+import firstNextNext from "./first_next_next.png";
+import altNextNext from "./alt_next_next.png";
+import firstTry from "./first_try.png";
+import altTry from "./alt_try.png";
+import firstApproved from "./first_approved.png";
+import altApproved from "./alt_approved.png";
 
 {/**
   * @typedef {object} Props
@@ -13,7 +21,11 @@ import altQr from "./alt_qr.png";
   */}
 
 <ol>
-  <li>Install the “Microsoft Authenticator” app on your smartphone<If cond={props.step === "alt"}> (if you haven't already done so)</If>. The Android version can be downloaded from <a href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Google Play</a> and the iPhone version from <a href="https://apps.apple.com/app/microsoft-authenticator/id983156458">App Store</a>.</li>
+  <li>
+    Install the “Microsoft Authenticator” app on your smartphone<If cond={props.step === "alt"}> if you haven't already done</If>. The Android version is available in [Google Play](https://play.google.com/store/apps/details?id=com.azure.authenticator), and the iPhone version is available in [App Store](https://apps.apple.com/app/microsoft-authenticator/id983156458).
+
+    ![](https://play-lh.googleusercontent.com/_1CV99jklLbXuun-6E7eCPR-sKKeZc602rhw_QHZz-qm7xrPdgWsJVc7NtFkkliI8No=w480-h960){:.extra-small}
+  </li>
 
   <If cond={props.step === "alt"}>
     <Fragment>
@@ -24,25 +36,44 @@ import altQr from "./alt_qr.png";
       </li>
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <li>
-        After installing the app, go back to the setup page. Click "Next" to continue setup for the Microsoft Authenticator app.
+        You are required to set up a verification method. By default, Microsoft Authenticator app is selected, so just click "Next".
         ![](./first_next.png)
       </li>
     </Fragment>
   </If>
 
   <li>
-    The next procedure differs depending on the device that you are using.
+    The next procedure differs depending on the device that you are using: your smartphone (Microsoft Authenticator app has been installed) or else (PC etc.)
 
-    - **Smartphone (the same device where you installed the Microsoft Authenticator app)**: Click "Pair your account to the app by clicking this link".Check that your UTokyo Account appears in the Microsoft Authenticator app.
+    - **Smartphone (the same device where you installed the Microsoft Authenticator app)**: Click "Pair your account to the app by clicking this link". Check that your UTokyo Account appears in the Microsoft Authenticator app. Go back to the browser and click "Next".
       <Image src={{ firstLink, altLink }[`${props.step}Link`]} alt="" />
     - **Other Devices (PC etc.)**
-      1. Read the instructions and click "Next" to go to the QR code page.
+      1. Click "Next" on "Set up your account" screen, and then QR code is shown.
+          <Image src={{ firstNextNext, altNextNext }[`${props.step}NextNext`]} alt="" />
           <Image src={{ firstQr, altQr }[`${props.step}Qr`]} alt="" />
-      2. Open the Microsoft Authenticator app on your smartphone, select "+" from the icon in the upper-right, then "Work or school account", and "Scan QR code".
-          ![](./screen.png)
-      3. Scan the QR code with your device's camera.
-      4. Check that your UTokyo Account appears on the app.
+      1. Open the Microsoft Authenticator app on your smartphone. If you open the app for the first time after installation, you will be asked to accept privacy policy and to select whether to share your app usage data, so follow the instructions.
+          <figure class="gallery">![](./privacy.png){:.small .border}![](./improve.png){:.small .border}</figure>
+      1. If "Secure your digital life" screen like the first image below is shown, tap "Scan a QR code". Instead, screens like the second or third images is shown, tap the "+" icon in the upper right, and select "Work or school account" and "Scan a QR code" in turn. In all cases, you may be asked to allow the app to access the camera, so then do.
+          <figure class="gallery">![](./digital_life.png){:.small .border}![](./empty.png){:.small .border}![](./list_add.png){:.small .border}</figure>
+      1. Scan the QR code with your device's camera. If you are asked to allow the app to notify, then do.
+      1. After succeeding scan, check that your UTokyo Account appears on the app. Go back to the screen with the QR code and click "Next".
           ![](./list.png)
+      {:style="list-style: lower-roman;"}
+  </li>
+
+  <li>
+    Two-digit number is shown on "Let's try it out" screen, and at the same time a prompt opens on Microsoft Authenticator app on your smartphone. Input the number to the prompt and tap "Yes".
+    <figure class="gallery"><Image src={{ firstTry, altTry }[`${props.step}Try`]} alt="" />![](./prompt.png){:.small .border}</figure>
   </li>
+
+  <li>
+    When "Notification approved" is appeared, click "Next".
+    <Image src={{ firstApproved, altApproved }[`${props.step}Approved`]} alt="" />
+  </li>
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
 </ol>
diff --git a/src/components/en/mfa/ms_auth/list_add.png b/src/components/en/mfa/ms_auth/list_add.png
new file mode 100644
index 0000000000..efce83a10f
Binary files /dev/null and b/src/components/en/mfa/ms_auth/list_add.png differ
diff --git a/src/components/en/mfa/ms_auth/privacy.png b/src/components/en/mfa/ms_auth/privacy.png
new file mode 100644
index 0000000000..25f50a4ae8
Binary files /dev/null and b/src/components/en/mfa/ms_auth/privacy.png differ
diff --git a/src/components/en/mfa/ms_auth/prompt.png b/src/components/en/mfa/ms_auth/prompt.png
new file mode 100644
index 0000000000..748cbb666d
Binary files /dev/null and b/src/components/en/mfa/ms_auth/prompt.png differ
diff --git a/src/components/en/mfa/phone/index.mdx b/src/components/en/mfa/phone/index.mdx
index 96ae1ec51f..59f56446c7 100644
--- a/src/components/en/mfa/phone/index.mdx
+++ b/src/components/en/mfa/phone/index.mdx
@@ -1,6 +1,8 @@
 import { Image } from "astro:assets";
 import If from "@components/utils/If.astro";
+import FirstAccess from "../FirstAccess.mdx";
 import FirstAnotherMethod from "../FirstAnotherMethod.mdx";
+import FirstEmail from "../FirstEmail.mdx";
 import AltAddMethod from "../AltAddMethod.mdx";
 
 import first from "./first.png";
@@ -14,9 +16,22 @@ import alt from "./alt.png";
 <ol>
   <If cond={props.step === "alt"}>
     <Fragment>
-      <AltAddMethod selection="the type of phone you want to add" />
+      <AltAddMethod
+        selection="the type of phone you want to add"
+        methodSupplement={
+          <Fragment>
+            You can register one number for each type of phone: "Phone", "Alternate Phone" and "Office Phone".
+            <ul>
+              <li><strong>Phone</strong>: The phone you usually use. You can select text or phone call for the method to verify. If you have selected phone number in the initial setup, the number has been registered as "Phone".</li>
+              <li><strong>Alternate Phone</strong>: A substitute phone such as your home phone. Only phone call verification is available and you cannot select text.</li>
+              <li><strong>Office Phone</strong>: A substitute phone of your company. Only phone call verification is available and you cannot select text. Unlike the others, you can register an extension number.</li>
+            </ul>
+          </Fragment>
+        }
+      />
     </Fragment>
     <Fragment slot="else">
+      <FirstAccess />
       <FirstAnotherMethod selection={`"Phone"`} />
     </Fragment>
   </If>
@@ -31,4 +46,8 @@ import alt from "./alt.png";
   <li>
     You will receive a text or call on your phone to verify your identity. If you selected "Text me a code", you will receive an SMS message with a 6-digit verification code. Input the code in the setup page. If you selected "Call me", you will receive a phone call asking you press the pound key (#) on your phone to verify your identity. Press the key and end the call. (To display the pound key on your smartphone during the call, press the "keypad" button.)
   </li>
-</ol>
\ No newline at end of file
+
+  <If cond={props.step !== "alt"}>
+    <FirstEmail />
+  </If>
+</ol>
diff --git a/src/components/en/mfa/select/AuthenticatorApplication.mdx b/src/components/en/mfa/select/AuthenticatorApplication.mdx
new file mode 100644
index 0000000000..64717e735f
--- /dev/null
+++ b/src/components/en/mfa/select/AuthenticatorApplication.mdx
@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+If you already use other authenticator apps, such as “Google Authenticator”, you may also use them for your UTokyo Account authentication. If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.
diff --git a/src/components/en/mfa/select/Fido.mdx b/src/components/en/mfa/select/Fido.mdx
new file mode 100644
index 0000000000..78f1cb35e3
--- /dev/null
+++ b/src/components/en/mfa/select/Fido.mdx
@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+You can use a dedicated device called FIDO security key to authenticate. There are some systems where you cannot use it, so you have to register another method as primary and use them as alternative. For more details, see [How to use FIDO security key for Multi-Factor Authentication for UTokyo Account (in Japanese)](/utokyo_account/mfa/fido-security_key/).
diff --git a/src/components/en/mfa/select/MicrosoftAuthenticator.mdx b/src/components/en/mfa/select/MicrosoftAuthenticator.mdx
new file mode 100644
index 0000000000..4f0eb2ad44
--- /dev/null
+++ b/src/components/en/mfa/select/MicrosoftAuthenticator.mdx
@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+“Microsoft Authenticator” is an MFA authentication application provided by Microsoft. Using this app is convenient since UTokyo Account’s MFA adopts Microsoft’s system. <If cond={props.group !== "first"}>If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.</If>
diff --git a/src/components/en/mfa/select/Phone.mdx b/src/components/en/mfa/select/Phone.mdx
new file mode 100644
index 0000000000..5f8a549f74
--- /dev/null
+++ b/src/components/en/mfa/select/Phone.mdx
@@ -0,0 +1,8 @@
+import If from "@components/utils/If.astro";
+
+{/**
+  * @typedef {object} Props
+  * @property {import("@components/pages/mfa/tabs").Group} group
+  */}
+
+You can add your phone number and receive an SMS message or a call (voice guidance) to verify your identity. <If cond={props.group !== "first"}> You can register a different phone number for each "Phone", "Alternate Phone" and "Office Phone".</If>
diff --git a/src/components/ja/mfa/TabSelectorGrid.astro b/src/components/ja/mfa/TabSelectorGrid.astro
index 19db0e1f1c..183fa1782e 100644
--- a/src/components/ja/mfa/TabSelectorGrid.astro
+++ b/src/components/ja/mfa/TabSelectorGrid.astro
@@ -9,12 +9,16 @@ import Fido from "./select/Fido.mdx";
 ---
 
 <BaseTabSelectorGrid
-  labels={{
+  rowLabels={{
     ms_auth: "Microsoft Authenticator",
     auth_app: "その他の認証アプリ",
     phone: "電話番号",
     fido: "FIDO セキュリティキー",
   }}
+  columnLabels={{
+    first: "手順1",
+    alt: "手順2",
+  }}
 >
   <MicrosoftAuthenticator group="initial" slot="ms_auth" />
   <AuthenticatorApplication group="initial" slot="auth_app" />
diff --git a/src/components/pages/mfa/BaseTabSelectorButton.astro b/src/components/pages/mfa/BaseTabSelectorButton.astro
index 97e126e6ca..5170bd1d34 100644
--- a/src/components/pages/mfa/BaseTabSelectorButton.astro
+++ b/src/components/pages/mfa/BaseTabSelectorButton.astro
@@ -1,9 +1,9 @@
 ---
-import type { Labels, Selection, Step } from "./tabs";
+import type { RowLabels, Selection, Step } from "./tabs";
 
 interface Props {
   step: Step;
-  labels: Labels;
+  labels: RowLabels;
   guide: string;
 }
 
diff --git a/src/components/pages/mfa/BaseTabSelectorGrid.astro b/src/components/pages/mfa/BaseTabSelectorGrid.astro
index 362b15d5b1..4724ff0aa2 100644
--- a/src/components/pages/mfa/BaseTabSelectorGrid.astro
+++ b/src/components/pages/mfa/BaseTabSelectorGrid.astro
@@ -1,14 +1,15 @@
 ---
-import type { Labels, Selection, Step } from "./tabs";
+import type { ColumnLabels, RowLabels, Selection, Step } from "./tabs";
 import DemiRadioButton, {
   type Props as DemiRadioButtonProps,
 } from "./DemiRadioButton.astro";
 
 interface Props {
-  labels: Labels;
+  rowLabels: RowLabels;
+  columnLabels: ColumnLabels;
 }
 
-const { labels } = Astro.props;
+const { rowLabels, columnLabels } = Astro.props;
 
 function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
   return {
@@ -21,10 +22,10 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
 ---
 
 <div class="wrapper">
-  <p class="col-first">手順1</p>
-  <p class="col-alt">手順2</p>
+  <p class="col-first">{columnLabels.first}</p>
+  <p class="col-alt">{columnLabels.alt}</p>
 
-  <p class="col-label">{labels.ms_auth}</p>
+  <p class="col-label">{rowLabels.ms_auth}</p>
   <span class="col-first">
     <DemiRadioButton {...radioProps("first", "ms_auth")} />
   </span>
@@ -35,7 +36,7 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
     <slot name="ms_auth" />
   </div>
 
-  <p class="col-label">{labels.auth_app}</p>
+  <p class="col-label">{rowLabels.auth_app}</p>
   <span class="col-first">
     <DemiRadioButton {...radioProps("first", "auth_app")} />
   </span>
@@ -46,7 +47,7 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
     <slot name="auth_app" />
   </div>
 
-  <p class="col-label">{labels.phone}</p>
+  <p class="col-label">{rowLabels.phone}</p>
   <span class="col-first">
     <DemiRadioButton {...radioProps("first", "phone")} />
   </span>
@@ -58,9 +59,9 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
   </div>
 
   {
-    labels.fido && (
+    rowLabels.fido && (
       <>
-        <p class="col-label">{labels.fido}</p>
+        <p class="col-label">{rowLabels.fido}</p>
         <span class="col-first">
           <DemiRadioButton {...radioProps("first", "fido")} disabled />
         </span>
diff --git a/src/components/pages/mfa/BaseTabs.astro b/src/components/pages/mfa/BaseTabs.astro
index 6303ce4282..c989298c3c 100644
--- a/src/components/pages/mfa/BaseTabs.astro
+++ b/src/components/pages/mfa/BaseTabs.astro
@@ -1,10 +1,10 @@
 ---
 import If from "@components/utils/If.astro";
-import type { Step, Labels, Selection } from "./tabs";
+import type { Step, RowLabels, Selection } from "./tabs";
 
 interface Props {
   step: Step;
-  labels: Labels;
+  labels: RowLabels;
 }
 
 const { step, labels } = Astro.props;
diff --git a/src/components/pages/mfa/tabs.ts b/src/components/pages/mfa/tabs.ts
index 8270126101..ae24a938df 100644
--- a/src/components/pages/mfa/tabs.ts
+++ b/src/components/pages/mfa/tabs.ts
@@ -1,7 +1,8 @@
 export type Step = "first" | "alt";
 export type Group = "intent" | Step;
 export type Selection = "selector" | "ms_auth" | "auth_app" | "phone" | "fido";
-export type Labels = Partial<Record<Selection, string>>;
+export type RowLabels = Partial<Record<Selection, string>>;
+export type ColumnLabels = Record<Step, string>;
 
 type Listener = (step: string, selection: string) => void;
 const listeners: Listener[] = [];
diff --git a/src/pages/en/utokyo_account/mfa/initial/index.mdx b/src/pages/en/utokyo_account/mfa/initial/index.mdx
index bf22924b2c..1662dcd1d6 100644
--- a/src/pages/en/utokyo_account/mfa/initial/index.mdx
+++ b/src/pages/en/utokyo_account/mfa/initial/index.mdx
@@ -4,9 +4,8 @@ breadcrumb:
   title: Initial Setup Procedures
 ---
 
-import MicrosoftAuthenticator from "@components/en/mfa/ms_auth/index.mdx";
-import AuthenticatorApplication from "@components/en/mfa/auth_app/index.mdx";
-import Phone from "@components/en/mfa/phone/index.mdx";
+import Tabs from "@components/en/mfa/Tabs.astro";
+import TabSelector from "@components/en/mfa/TabSelectorGrid.astro";
 
 ## Introduction
 {:#introduction}
@@ -15,15 +14,19 @@ Multi-factor authentication (MFA) is a security process in which users are asked
 
 This page provides information about the initial procedures to enable MFA. The outline is as follows.
 
-- In Step 1 and Step 2, you will register the “verification method” you will use for your UTokyo Account. There are several verification methods as shown below, so please register two or more methods so that you have an alternative in case one of the verification methods becomes unavailable (the type of the alternative verification method can be the same as the primary method).
-    - **“Microsoft Authenticator” App**: “Microsoft Authenticator” is an MFA authentication application provided by Microsoft. Using this app is convenient since UTokyo Account’s MFA adopts Microsoft’s system. If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.
-    - **Other Authenticator Apps**: If you already use other authenticator apps, such as “Google Authenticator”, you may also use them for your UTokyo Account authentication. If you have more than one phone, you can register the same authenticator apps on these phones, making them two or more verification methods.
-    - **Phone Number**: You can add your phone number and receive an SMS message or a call (voice guidance) to verify your identity.
-    - **Hardware Token** (for faculty members): If you are a faculty member and none of the verification methods above are available, we offer a device called “Hardware Token” for verification. The initialization process is different from other methods, so please follow [the guidance in UTokyo Portal (faculty members only)](https://univtokyo.sharepoint.com/sites/utokyoportal/wiki/d/UTokyo_Account_Token.aspx) to get started.
--  In Step 3, you test the verification method you have registered and see if you can actually sign in to your UTokyo Account.
--  In Step 4, the last Step, you submit an application to enable the MFA.
+- Step 1: [Set Up the First Verification Method](#first)
+- Step 2: [Add Alternative Verification Methods](#alternative)
+- Step 3: [Try Signing In](#try)
+- Step 4: [Apply for MFA Use](#apply)
 
-**Complete all the tasks from Step1 to Step 4.** After you complete the whole procedure, **you will be asked to verify your identity with the registered SMS, apps, etc., whenever you sign in to your UTokyo Account. **Be well aware that your UTokyo Account will be inaccessible if you lose access to every verification method (smartphone apps, phone number, etc.).
+Procedures on step 1 and 2 differ depending on the verification method you will register. Firstly, select verification methods to register for step 1 and 2, and then tasks to register them are shown below.
+
+Because the primary verification method registered on step 1 is used by default, you should register the method you use frequently for it.
+You may also register the same method for step 1 and 2; for example, you may register the same authenticator apps installed on your two or more smartphones, or register both your cell phone and landline.
+
+<TabSelector group="intent" />
+
+**Complete all the tasks from Step 1 to Step 4.** After you complete the whole procedure, **you will be asked to verify your identity with the registered SMS, apps, etc., whenever you sign in to your UTokyo Account. **Be well aware that your UTokyo Account will be inaccessible if you lose access to every verification method (smartphone apps, phone number, etc.).
 
 ### Video of the Initial Setup
 
@@ -35,34 +38,11 @@ The following video explains the initial setup procedure in this page.
 ## Step 1: Set Up the First Verification Method
 {:#first.mfa-initial-step-heading}
 
-First, set up the verification method for MFA. Here, you will add the first verification method only (the second and subsequent methods will be added in Step 2). The first verification method will become the default (automatically selected) method, so it is best to register the method you will use most often.
-
-1. Access the [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com).
-2. The sign in page will appear (if you are not already signed in). Enter your UTokyo Account username (10-digit Common ID) and password and click “Sign in”.
-3. Click “Next” in the “More information required” page.
-    ![](../first.png)
-4. Add the first verification method in the setup page. The setup procedure varies depending on the verification method you add.
-    ![](../first_ms_auth.png)
-    - **“Microsoft Authenticator” App**: “Microsoft Authenticator” is an MFA authentication application provided by Microsoft. Using this app is convenient since UTokyo Account’s MFA adopts Microsoft’s system.
-      <details>
-          <summary>Setup Procedure:</summary>
-          <MicrosoftAuthenticator step="first" />
-      </details>
-    - **Other Authenticator Apps**: If you already use other authenticator apps, such as “Google Authenticator”, you may also use it for your UTokyo Account authentication.
-      <details>
-          <summary>Setup Procedure:</summary>
-          <AuthenticatorApplication step="first" />
-      </details>
-    - **Phone Number**: You can add your phone number and receive an SMS or a call (voice guidance) to verify your identity.
-      <details>
-          <summary>Setup Procedure:</summary>
-          <Phone step="first" />
-      </details>
-5. You will be prompted to enter your email address (if you haven’t already done so). Please enter an email address OTHER THAN your ECCS Cloud Email if possible, and click “Next”. Enter the 6-digit code sent to your email address, and click “Next”.
-    ![](../first_email.png)
-6. If you see “Success” on your screen, everything is OK.
-    ![](../first_success.png)
-{:.mfa-initial-procedure}
+First, set up the verification method for MFA. Here, you will add the first verification method only (the second and subsequent methods will be added in Step 2).
+
+The procedure of step 1 differs depending on the verification method you selected. Click the following panels to show the procedure to set up the verification method.
+
+<Tabs step="first" />
 
 <div class="box">The setup process is not over. Continue to Step 2.</div>
 
@@ -71,27 +51,11 @@ First, set up the verification method for MFA. Here, you will add the first veri
 
 Next, add alternative verification methods (second and subsequent methods) from the **[Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com)**．
 
-**Be sure to add more than one verification method**. MFA does work with just one verification method, but having only one verification method puts you at risk of getting completely locked out of your UTokyo Account when your verification method does not work (due to malfunction, phone number change, etc.). Adding multiple verification methods reduces this risk.
-
-- **"Microsoft Authenticator" App**: "Microsoft Authenticator" is an MFA authentication application provided by Microsoft. Using this app is convenient since UTokyo Account’s MFA adopts Microsoft’s system. If you possess more than one smartphone, you may add those phones as alternative verification methods. 
-  <details>
-      <summary>Setup Procedure:</summary>
-      <MicrosoftAuthenticator step="alt" />
-  </details>
-- **Other Authenticator Apps**: If you already use other authenticator apps, such as “Google Authenticator”, you may also use it for your UTokyo Account authentication. If you possess more than one smartphone, you may add those phones as alternative verification methods.
-  <details>
-      <summary>Setup Procedure:</summary>
-      <AuthenticatorApplication step="alt" />
-  </details>
-- **Phone Number**: You can add your phone number and receive an SMS or a call (voice guidance) to verify your identity. There are three types of phones that can be added- “Phone”, “Alternate phone”, and “Office phone”. You may add one phone number for each type (i.e. a total of three phone numbers can be added as your verification method). The description of each phone type is as follows:
-  - **"Phone"**: This is your main phone, such as your mobile phone. You can verify your identity either by receiving an SMS message or phone call. If you added your phone number as your first verification method, it should automatically become “Phone”.
-  - **"Alternate phone"**: This is a backup phone you can add, such as your landline. You can only receive phone calls (SMS unavailable) to verify your identity using this phone.
-  - **"Office Phone"**: This is another backup phone you can add, such as your company (university) phone. You can only receive phone calls (SMS unavailable) to verify your identity using this phone. You can add your extension number (a short number that you input after calling main office number to reach a specific person, team, etc. within the office).
-  <details>
-    <summary>Setup Procedure:</summary>
-    <Phone step="alt" />
-  </details>
-{:.mfa-initial-procedure}
+**Be sure to add more than one verification method**. MFA does work with just one verification method, but having only one verification method puts you at risk of getting completely locked out of your UTokyo Account when your verification method does not work (due to malfunction, model change, etc.). Adding multiple verification methods reduces this risk.
+
+The procedure of step 2 differs depending on the verification method you selected. Click the following panels to show the procedure to set up the verification method.
+
+<Tabs step="alt" />
 
 In the screen that appears after clicking “Add method”, “App password” and “Email” will also show up as choices for “Which method would you like to add?”. However, please be aware that these cannot be used for identity verification upon sign-in (they are for other purposes).
 
@@ -107,10 +71,10 @@ The next step is to check that you can sign in to your UTokyo Account using MFA.
 1. Access the [Security info page](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com)．
 1. Enter your UTokyo Account username (10-digit Common ID) and password in the sign-in page.
 1. Verify your identity using MFA. The procedure differs by the verification method you use. Please follow the instructions on your screen.
-    - **“Microsoft Authenticator” App**: A notification will be sent to your phone asking you to enter the two-digit numbers displayed on the sign-in screen.
+    - **Microsoft Authenticator**: A notification will be sent to your phone asking you to enter the two-digit numbers displayed on the sign-in screen.
         <details>
             <summary>*About the “I can’t use my Microsoft Authenticator app right now” message</summary>
-            ![「サインイン要求」の画面に「Microsoft Autheticator アプリを現在使用できません」が表示されている](./signin_screen_msauth.png)
+            ![A message “I can’t use my Microsoft Authenticator app right now” is displayed on “Approve sign in request” form.](./signin_screen_msauth.png)
             The “I can’t use my Microsoft Authenticator app right now” message does not mean that the MFA system using the app is unavailable. Press the message when you do NOT have access to the app.
         </details>
     - **Other Authenticator Apps**: You will see a 6-digit code for your account in the authenticator app. Enter the code in the sign-in page.
@@ -123,10 +87,9 @@ The next step is to check that you can sign in to your UTokyo Account using MFA.
         The default sign-in method can also be changed by following the procedure described in the “[Changing the Default Sign-in Method](../change/#default)” page．
     </details>
 1. If you are then taken to the “Security info” page, you have successfully signed in.
-{:.mfa-initial-procedure}
 
 <div class="box">
-The setup process is not over. Continue to Step 4.  
+The setup process is not over. Continue to Step 4.
 
 *If you could not complete this Step 3 properly, do not proceed to Step 4. Contact the <a href="/en/support/">Technical Support Desk</a>.
 </div>
@@ -141,8 +104,7 @@ If the remote-access environment (Citrix Workspace) of office work devices for a
 1. Access the [UTokyo Account User Menu](https://utacm.adm.u-tokyo.ac.jp/webmtn/LoginServlet).
 2. Sign in with your UTokyo Account username (10-digit Common ID) and password if prompted.
 3. Click “multi-factor authentication setting” in the left menu. ![](./user_menu_1.png)
-4. Read the MFA instructions carefully, and find “Use MFA” at the bottom of the page. Answer “Yes” and click “SAVE”. ![](./user_menu_2.png)
-{:.mfa-initial-procedure}
+4. Read the MFA instructions carefully, and find “Use MFA” at the bottom of the page. Answer “Yes” and click “SAVE”. ![](user_menu_2.png)
 
 <div class="box">
 You have completed the initial setup procedures for MFA. <strong>It will take about 40 minutes for the MFA settings to be reflected in the system after these procedures</strong>, so if you want to use UTokyo VPN and other services in which MFA is required, please be patient and wait for a while.