diff --git a/packages/console/src/components/Transfer/DragDropProvider.tsx b/packages/console/src/components/DragDrop/DragDropProvider.tsx
similarity index 100%
rename from packages/console/src/components/Transfer/DragDropProvider.tsx
rename to packages/console/src/components/DragDrop/DragDropProvider.tsx
diff --git a/packages/console/src/components/Transfer/DraggableItem.tsx b/packages/console/src/components/DragDrop/DraggableItem.tsx
similarity index 95%
rename from packages/console/src/components/Transfer/DraggableItem.tsx
rename to packages/console/src/components/DragDrop/DraggableItem.tsx
index 98682f662..7795e91dc 100644
--- a/packages/console/src/components/Transfer/DraggableItem.tsx
+++ b/packages/console/src/components/DragDrop/DraggableItem.tsx
@@ -11,6 +11,7 @@ type Props = {
   sortIndex: number;
   moveItem: (dragIndex: number, hoverIndex: number) => void;
   children: ReactNode;
+  dragType?: string;
   className?: string;
 };
 
@@ -20,9 +21,14 @@ type DragItemProps = {
   type: string;
 };
 
-const dragType = 'TransferItem';
-
-const DraggableItem = ({ id, children, sortIndex, moveItem, className }: Props) => {
+const DraggableItem = ({
+  id,
+  children,
+  sortIndex,
+  moveItem,
+  dragType = 'DraggableItem',
+  className,
+}: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const { setIsDragging } = useContext(DragDropContext);
   const [{ handlerId }, drop] = useDrop<DragItemProps, void, { handlerId: Nullable<Identifier> }>({
diff --git a/packages/console/src/components/DragDrop/index.module.scss b/packages/console/src/components/DragDrop/index.module.scss
new file mode 100644
index 000000000..d378a6a9a
--- /dev/null
+++ b/packages/console/src/components/DragDrop/index.module.scss
@@ -0,0 +1,5 @@
+.dragging {
+  .item:hover {
+    background: initial;
+  }
+}
diff --git a/packages/console/src/components/DragDrop/index.tsx b/packages/console/src/components/DragDrop/index.tsx
new file mode 100644
index 000000000..4a6695191
--- /dev/null
+++ b/packages/console/src/components/DragDrop/index.tsx
@@ -0,0 +1,2 @@
+export { default as DragDropProvider } from './DragDropProvider';
+export { default as DraggableItem } from './DraggableItem';
diff --git a/packages/console/src/components/Transfer/index.module.scss b/packages/console/src/components/Transfer/index.module.scss
deleted file mode 100644
index 2067a689b..000000000
--- a/packages/console/src/components/Transfer/index.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.transfer {
-  .main {
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    display: flex;
-
-    .box {
-      width: 50%;
-
-      &:not(:last-child) {
-        border-right: 1px solid var(--color-border);
-      }
-
-      .title {
-        font: var(--font-subhead-2);
-        padding: _.unit(3) _.unit(4);
-        border-bottom: 1px solid var(--color-border);
-      }
-
-      .items {
-        height: 200px;
-        overflow-y: auto;
-
-        .item {
-          padding: _.unit(2) _.unit(4);
-          display: flex;
-          align-items: center;
-          font: var(--font-body-medium);
-
-          &.draggable {
-            cursor: move;
-
-            .draggableIcon {
-              color: var(--color-text-secondary);
-            }
-          }
-
-          > svg {
-            margin-right: _.unit(2);
-            margin-left: -5px; // use to align svg content with text
-          }
-
-          &:hover {
-            background: var(--color-hover);
-          }
-
-          .itemTitle {
-            flex: 1;
-          }
-        }
-
-        .dragging {
-          .item {
-            &:hover {
-              background: initial;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .footer {
-    font: var(--font-body-medium);
-    color: var(--color-text-secondary);
-    margin-top: _.unit(2);
-
-    a {
-      color: var(--color-text-link);
-      text-decoration: none;
-    }
-  }
-}
diff --git a/packages/console/src/components/Transfer/index.tsx b/packages/console/src/components/Transfer/index.tsx
deleted file mode 100644
index fb1c01445..000000000
--- a/packages/console/src/components/Transfer/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import classNames from 'classnames';
-import type { ReactNode } from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import CircleMinus from '@/assets/images/circle-minus.svg';
-import CirclePlus from '@/assets/images/circle-plus.svg';
-import Draggable from '@/assets/images/draggable.svg';
-
-import IconButton from '../IconButton';
-import DragDropProvider from './DragDropProvider';
-import DraggableItem from './DraggableItem';
-import * as styles from './index.module.scss';
-
-type TransferItem = {
-  title: ReactNode;
-  value: string;
-};
-
-type Props = {
-  title: string;
-  datasource: TransferItem[];
-  value?: string[];
-  footer?: ReactNode;
-  onChange?: (value: string[]) => void;
-};
-
-const Transfer = ({ title, datasource, value = [], footer, onChange }: Props) => {
-  const { t } = useTranslation(undefined, {
-    keyPrefix: 'admin_console',
-  });
-
-  const selectedItems = useMemo(() => {
-    return (
-      value
-        .map((target) => datasource.find((item) => item.value === target))
-        // eslint-disable-next-line unicorn/prefer-native-coercion-functions
-        .filter((item): item is TransferItem => Boolean(item))
-    );
-  }, [datasource, value]);
-
-  const unselectedItems = useMemo(() => {
-    return datasource.filter((item) => !value.includes(item.value));
-  }, [datasource, value]);
-
-  const onAddItem = (key: string) => {
-    onChange?.([...value, key]);
-  };
-
-  const onRemoveItem = (key: string) => {
-    onChange?.(value.filter((value_) => value_ !== key));
-  };
-
-  const onMoveItem = (dragIndex: number, hoverIndex: number) => {
-    const dragItem = value[dragIndex];
-    const hoverItem = value[hoverIndex];
-
-    if (!dragItem || !hoverItem) {
-      return;
-    }
-
-    onChange?.(
-      value.map((value_, index) => {
-        if (index === dragIndex) {
-          return hoverItem;
-        }
-
-        if (index === hoverIndex) {
-          return dragItem;
-        }
-
-        return value_;
-      })
-    );
-  };
-
-  return (
-    <div className={styles.transfer}>
-      <div className={styles.main}>
-        <div className={styles.box}>
-          <div className={styles.title}>{title}</div>
-          <div className={styles.items}>
-            {unselectedItems.map(({ value, title }) => (
-              <div key={value} className={styles.item}>
-                <div className={styles.itemTitle}>{title}</div>
-                <IconButton
-                  size="small"
-                  onClick={() => {
-                    onAddItem(value);
-                  }}
-                >
-                  <CirclePlus />
-                </IconButton>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className={styles.box}>
-          <div className={styles.title}>
-            {selectedItems.length} {t('general.added')}
-          </div>
-          <div className={styles.items}>
-            <DragDropProvider>
-              {selectedItems.map(({ value, title }, index) => (
-                <DraggableItem key={value} sortIndex={index} id={value} moveItem={onMoveItem}>
-                  <div className={classNames(styles.item, styles.draggable)}>
-                    <Draggable className={styles.draggableIcon} />
-                    <div className={styles.itemTitle}>{title}</div>
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        onRemoveItem(value);
-                      }}
-                    >
-                      <CircleMinus />
-                    </IconButton>
-                  </div>
-                </DraggableItem>
-              ))}
-            </DragDropProvider>
-          </div>
-        </div>
-      </div>
-      {footer && <div className={styles.footer}>{footer}</div>}
-    </div>
-  );
-};
-
-export default Transfer;
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
index 927ba2ba5..0fffcb248 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SignInMethodEditBox/index.tsx
@@ -3,8 +3,7 @@ import { conditional } from '@silverhand/essentials';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import DragDropProvider from '@/components/Transfer/DragDropProvider';
-import DraggableItem from '@/components/Transfer/DraggableItem';
+import { DragDropProvider, DraggableItem } from '@/components/DragDrop';
 import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';
 import {
   identifierRequiredConnectorMapping,
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
index b9cdc2fe5..e5749dbd9 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/index.tsx
@@ -1,9 +1,8 @@
 import { ConnectorType } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
+import { DragDropProvider, DraggableItem } from '@/components/DragDrop';
 import TextLink from '@/components/TextLink';
-import DragDropProvider from '@/components/Transfer/DragDropProvider';
-import DraggableItem from '@/components/Transfer/DraggableItem';
 import useConnectorGroups from '@/hooks/use-connector-groups';
 import type { ConnectorGroup } from '@/types/connector';