diff --git a/packages/ui/src/assets/icons/switch-icon.svg b/packages/ui/src/assets/icons/switch-icon.svg
new file mode 100644
index 000000000..bda10c435
--- /dev/null
+++ b/packages/ui/src/assets/icons/switch-icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2825 6.71315L13.2825 3.71315C13.2126 3.64322 13.1295 3.58775 13.0382 3.54991C12.9468 3.51206 12.8489 3.49258 12.75 3.49258C12.5503 3.49258 12.3587 3.57192 12.2175 3.71315C12.0763 3.85438 11.9969 4.04592 11.9969 4.24565C11.9969 4.44538 12.0763 4.63692 12.2175 4.77815L13.9425 6.49565H5.24998C5.05107 6.49565 4.86031 6.57467 4.71965 6.71532C4.579 6.85597 4.49998 7.04674 4.49998 7.24565C4.49998 7.44456 4.579 7.63533 4.71965 7.77598C4.86031 7.91663 5.05107 7.99565 5.24998 7.99565H15.75C15.8981 7.99491 16.0426 7.95036 16.1654 7.86761C16.2882 7.78486 16.3837 7.66762 16.44 7.53065C16.4974 7.39407 16.5131 7.24353 16.4851 7.09804C16.457 6.95255 16.3866 6.81862 16.2825 6.71315ZM12.75 10.4957H2.24998C2.10191 10.4964 1.95738 10.5409 1.83459 10.6237C1.7118 10.7064 1.61625 10.8237 1.55998 10.9607C1.50255 11.0972 1.48686 11.2478 1.51489 11.3933C1.54292 11.5388 1.61341 11.6727 1.71748 11.7782L4.71748 14.7782C4.78721 14.8484 4.87016 14.9042 4.96155 14.9423C5.05294 14.9804 5.15097 15 5.24998 15C5.34899 15 5.44702 14.9804 5.53842 14.9423C5.62981 14.9042 5.71276 14.8484 5.78248 14.7782C5.85278 14.7084 5.90858 14.6255 5.94665 14.5341C5.98473 14.4427 6.00433 14.3447 6.00433 14.2457C6.00433 14.1466 5.98473 14.0486 5.94665 13.9572C5.90858 13.8658 5.85278 13.7829 5.78248 13.7132L4.05748 11.9957H12.75C12.9489 11.9957 13.1397 11.9166 13.2803 11.776C13.421 11.6353 13.5 11.4446 13.5 11.2457C13.5 11.0467 13.421 10.856 13.2803 10.7153C13.1397 10.5747 12.9489 10.4957 12.75 10.4957Z" fill="currentcolor"/>
+</svg>
diff --git a/packages/ui/src/components/TextLink/index.module.scss b/packages/ui/src/components/TextLink/index.module.scss
index 1d87c12ad..988a20df7 100644
--- a/packages/ui/src/components/TextLink/index.module.scss
+++ b/packages/ui/src/components/TextLink/index.module.scss
@@ -3,7 +3,12 @@
 .link {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  justify-content: center;
 
+  > svg {
+    margin-right: _.unit(2);
+  }
 
   &.primary {
     color: var(--color-brand-default);
diff --git a/packages/ui/src/components/TextLink/index.tsx b/packages/ui/src/components/TextLink/index.tsx
index 3ecf38e2a..caaf55e21 100644
--- a/packages/ui/src/components/TextLink/index.tsx
+++ b/packages/ui/src/components/TextLink/index.tsx
@@ -11,15 +11,17 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   className?: string;
   children?: ReactNode;
   text?: TFuncKey;
+  icon?: ReactNode;
   type?: 'primary' | 'secondary';
 } & Partial<LinkProps>;
 
-const TextLink = ({ className, children, text, type = 'primary', to, ...rest }: Props) => {
+const TextLink = ({ className, children, text, icon, type = 'primary', to, ...rest }: Props) => {
   const { t } = useTranslation();
 
   if (to) {
     return (
       <Link className={classNames(styles.link, styles[type], className)} to={to} {...rest}>
+        {icon}
         {children ?? (text ? t(text) : '')}
       </Link>
     );
@@ -27,6 +29,7 @@ const TextLink = ({ className, children, text, type = 'primary', to, ...rest }:
 
   return (
     <a className={classNames(styles.link, styles[type], className)} {...rest} rel="noreferrer">
+      {icon}
       {children ?? (text ? t(text) : '')}
     </a>
   );
diff --git a/packages/ui/src/containers/PasswordSignInForm/PasswordlessSignInLink.tsx b/packages/ui/src/containers/PasswordSignInForm/PasswordlessSignInLink.tsx
index d826ef01f..b27a13b06 100644
--- a/packages/ui/src/containers/PasswordSignInForm/PasswordlessSignInLink.tsx
+++ b/packages/ui/src/containers/PasswordSignInForm/PasswordlessSignInLink.tsx
@@ -1,6 +1,7 @@
 import { SignInIdentifier } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 import { PageContext } from '@/hooks/use-page-context';
 import useSendVerificationCode from '@/hooks/use-send-verification-code';
@@ -31,6 +32,7 @@ const PasswordlessSignInLink = ({ className, method, value }: Props) => {
     <TextLink
       className={className}
       text="action.sign_in_via_passcode"
+      icon={<SwitchIcon />}
       onClick={() => {
         clearErrorMessage();
         void onSubmit(method === SignInIdentifier.Email ? { email: value } : { phone: value });
diff --git a/packages/ui/src/containers/PasswordSignInForm/index.module.scss b/packages/ui/src/containers/PasswordSignInForm/index.module.scss
index b0eef7aef..e4b862cfb 100644
--- a/packages/ui/src/containers/PasswordSignInForm/index.module.scss
+++ b/packages/ui/src/containers/PasswordSignInForm/index.module.scss
@@ -9,11 +9,14 @@
 
   .inputField,
   .link,
-  .switch,
   .formErrors {
     margin-bottom: _.unit(4);
   }
 
+  .switch {
+    margin-top: _.unit(4);
+  }
+
   .link,
   .switch {
     align-self: start;
diff --git a/packages/ui/src/containers/PasswordSignInForm/index.tsx b/packages/ui/src/containers/PasswordSignInForm/index.tsx
index 594fa53f3..b39db3da0 100644
--- a/packages/ui/src/containers/PasswordSignInForm/index.tsx
+++ b/packages/ui/src/containers/PasswordSignInForm/index.tsx
@@ -91,12 +91,12 @@ const PasswordSignInForm = ({
         />
       )}
 
+      <Button title="action.continue" onClick={async () => onSubmitHandler()} />
+
       {hasPasswordlessButton && (
         <PasswordlessSignInLink className={styles.switch} method={method} value={value} />
       )}
 
-      <Button title="action.continue" onClick={async () => onSubmitHandler()} />
-
       <input hidden type="submit" />
     </form>
   );
diff --git a/packages/ui/src/containers/PasswordlessSwitch/index.tsx b/packages/ui/src/containers/PasswordlessSwitch/index.tsx
index fa4c14eb9..b5b35a852 100644
--- a/packages/ui/src/containers/PasswordlessSwitch/index.tsx
+++ b/packages/ui/src/containers/PasswordlessSwitch/index.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 
 type Props = {
@@ -15,7 +16,12 @@ const PasswordlessSwitch = ({ target, className }: Props) => {
   const targetPathname = pathname.split('/').slice(0, -1).join('/') + `/${target}`;
 
   return (
-    <TextLink replace className={className} to={{ pathname: targetPathname, search }}>
+    <TextLink
+      replace
+      className={className}
+      icon={<SwitchIcon />}
+      to={{ pathname: targetPathname, search }}
+    >
       {t('action.switch_to', {
         method: t(`description.${target === 'email' ? 'email' : 'phone_number'}`),
       })}
diff --git a/packages/ui/src/containers/VerificationCode/PasswordSignInLink.tsx b/packages/ui/src/containers/VerificationCode/PasswordSignInLink.tsx
index 6bea037f9..e8abb5de4 100644
--- a/packages/ui/src/containers/VerificationCode/PasswordSignInLink.tsx
+++ b/packages/ui/src/containers/VerificationCode/PasswordSignInLink.tsx
@@ -1,5 +1,6 @@
 import type { SignInIdentifier } from '@logto/schemas';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 import { UserFlow } from '@/types';
 
@@ -14,6 +15,7 @@ const PasswordSignInLink = ({ className, method, target }: Props) => {
     <TextLink
       replace
       className={className}
+      icon={<SwitchIcon />}
       text="action.sign_in_via_password"
       to={`/${UserFlow.signIn}/${method}/password`}
       state={{ [method]: target }}