diff --git a/packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.module.scss b/packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.module.scss
new file mode 100644
index 000000000..2933e29d1
--- /dev/null
+++ b/packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.module.scss
@@ -0,0 +1,13 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2.5) _.unit(4);
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
diff --git a/packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.tsx b/packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.tsx
similarity index 55%
rename from packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.tsx
rename to packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.tsx
index 162f7683f..c943633cc 100644
--- a/packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.tsx
+++ b/packages/console/src/components/RolesTransfer/SourceRolesBox/SourceRoleItem/index.tsx
@@ -1,9 +1,10 @@
-import { type RoleResponse, RoleType } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
+import { type RoleResponse } from '@logto/schemas';
 
 import Checkbox from '@/ds-components/Checkbox';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import RoleInformation from '../../components/RoleInformation';
+
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -13,9 +14,6 @@ type Props = {
 };
 
 function SourceRoleItem({ role, isSelected, onSelect }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { name, type, usersCount, applicationsCount } = role;
-
   return (
     <div
       className={styles.item}
@@ -34,14 +32,7 @@ function SourceRoleItem({ role, isSelected, onSelect }: Props) {
           onSelect();
         }}
       />
-      <div className={styles.name}>{name}</div>
-      <div className={styles.count}>
-        (
-        {type === RoleType.User
-          ? t('user_details.roles.assigned_user_count', { value: usersCount })
-          : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
-        )
-      </div>
+      <RoleInformation role={role} />
     </div>
   );
 }
diff --git a/packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.module.scss b/packages/console/src/components/RolesTransfer/SourceRolesBox/index.module.scss
similarity index 100%
rename from packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.module.scss
rename to packages/console/src/components/RolesTransfer/SourceRolesBox/index.module.scss
diff --git a/packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.tsx b/packages/console/src/components/RolesTransfer/SourceRolesBox/index.tsx
similarity index 98%
rename from packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.tsx
rename to packages/console/src/components/RolesTransfer/SourceRolesBox/index.tsx
index 9fd8634d3..332399db2 100644
--- a/packages/console/src/components/RolesTransfer/components/SourceRolesBox/index.tsx
+++ b/packages/console/src/components/RolesTransfer/SourceRolesBox/index.tsx
@@ -17,8 +17,7 @@ import useDebounce from '@/hooks/use-debounce';
 import * as transferLayout from '@/scss/transfer.module.scss';
 import { buildUrl } from '@/utils/url';
 
-import SourceRoleItem from '../SourceRoleItem';
-
+import SourceRoleItem from './SourceRoleItem';
 import * as styles from './index.module.scss';
 
 type Props = {
diff --git a/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss
new file mode 100644
index 000000000..3936a0fdc
--- /dev/null
+++ b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss
@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
+  user-select: none;
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+
+  .closeIcon {
+    margin-left: _.unit(1);
+  }
+}
diff --git a/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.tsx b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.tsx
new file mode 100644
index 000000000..af35c72ca
--- /dev/null
+++ b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.tsx
@@ -0,0 +1,26 @@
+import { type RoleResponse } from '@logto/schemas';
+
+import Close from '@/assets/icons/close.svg';
+import IconButton from '@/ds-components/IconButton';
+
+import RoleInformation from '../../components/RoleInformation';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly role: RoleResponse;
+  readonly onDelete: () => void;
+};
+
+function TargetRoleItem({ role, onDelete }: Props) {
+  return (
+    <div className={styles.item}>
+      <RoleInformation role={role} />
+      <IconButton size="small" className={styles.closeIcon} onClick={onDelete}>
+        <Close />
+      </IconButton>
+    </div>
+  );
+}
+
+export default TargetRoleItem;
diff --git a/packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.module.scss b/packages/console/src/components/RolesTransfer/TargetRolesBox/index.module.scss
similarity index 100%
rename from packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.module.scss
rename to packages/console/src/components/RolesTransfer/TargetRolesBox/index.module.scss
diff --git a/packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.tsx b/packages/console/src/components/RolesTransfer/TargetRolesBox/index.tsx
similarity index 95%
rename from packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.tsx
rename to packages/console/src/components/RolesTransfer/TargetRolesBox/index.tsx
index 47f83b283..ea9bcc2e4 100644
--- a/packages/console/src/components/RolesTransfer/components/TargetRolesBox/index.tsx
+++ b/packages/console/src/components/RolesTransfer/TargetRolesBox/index.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import * as transferLayout from '@/scss/transfer.module.scss';
 
-import TargetRoleItem from '../TargetRoleItem';
-
+import TargetRoleItem from './TargetRoleItem';
 import * as styles from './index.module.scss';
 
 type Props = {
diff --git a/packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.module.scss b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
similarity index 64%
rename from packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.module.scss
rename to packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
index 436dfa81c..302476dab 100644
--- a/packages/console/src/components/RolesTransfer/components/SourceRoleItem/index.module.scss
+++ b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
@@ -1,16 +1,10 @@
 @use '@/scss/underscore' as _;
 
-.item {
+.container {
   display: flex;
   align-items: center;
   font: var(--font-body-2);
-  padding: _.unit(2.5) _.unit(4);
-  user-select: none;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-hover);
-  }
+  overflow: hidden;
 
   .name {
     @include _.text-ellipsis;
diff --git a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx
new file mode 100644
index 000000000..d06327421
--- /dev/null
+++ b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx
@@ -0,0 +1,29 @@
+import { RoleType, type RoleResponse } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly role: RoleResponse;
+};
+
+function RoleInformation({ role }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { name, type, usersCount, applicationsCount } = role;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.name}>{name}</div>
+      <div className={styles.count}>
+        (
+        {type === RoleType.User
+          ? t('user_details.roles.assigned_user_count', { value: usersCount })
+          : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
+        )
+      </div>
+    </div>
+  );
+}
+
+export default RoleInformation;
diff --git a/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.module.scss b/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.module.scss
deleted file mode 100644
index 96806d271..000000000
--- a/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: _.unit(2) _.unit(3) _.unit(2) _.unit(4);
-  font: var(--font-body-2);
-  user-select: none;
-
-  &:hover {
-    background-color: var(--color-hover);
-  }
-
-  .info {
-    flex: 1 1 0;
-    display: flex;
-    align-items: center;
-    margin-right: _.unit(2);
-    overflow: hidden;
-
-    .name {
-      @include _.text-ellipsis;
-    }
-
-    .count {
-      flex-shrink: 0;
-      margin-left: _.unit(2);
-      color: var(--color-text-secondary);
-    }
-  }
-}
diff --git a/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.tsx b/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.tsx
deleted file mode 100644
index 9b31dc747..000000000
--- a/packages/console/src/components/RolesTransfer/components/TargetRoleItem/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { type RoleResponse, RoleType } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
-
-import Close from '@/assets/icons/close.svg';
-import IconButton from '@/ds-components/IconButton';
-
-import * as styles from './index.module.scss';
-
-type Props = {
-  readonly role: RoleResponse;
-  readonly onDelete: () => void;
-};
-
-function TargetRoleItem({ role, onDelete }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { name, type, usersCount, applicationsCount } = role;
-
-  return (
-    <div className={styles.item}>
-      <div className={styles.info}>
-        <div className={styles.name}>{name}</div>
-        <div className={styles.count}>
-          (
-          {type === RoleType.User
-            ? t('user_details.roles.assigned_user_count', { value: usersCount })
-            : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
-          )
-        </div>
-      </div>
-      <IconButton size="small" onClick={onDelete}>
-        <Close />
-      </IconButton>
-    </div>
-  );
-}
-
-export default TargetRoleItem;
diff --git a/packages/console/src/components/RolesTransfer/index.tsx b/packages/console/src/components/RolesTransfer/index.tsx
index b11f7f985..0710af9ea 100644
--- a/packages/console/src/components/RolesTransfer/index.tsx
+++ b/packages/console/src/components/RolesTransfer/index.tsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 
 import * as transferLayout from '@/scss/transfer.module.scss';
 
-import SourceRolesBox from './components/SourceRolesBox';
-import TargetRolesBox from './components/TargetRolesBox';
+import SourceRolesBox from './SourceRolesBox';
+import TargetRolesBox from './TargetRolesBox';
 import * as styles from './index.module.scss';
 
 type Props = {