diff --git a/src/renderer/features/shared/components/table-config.module.css b/src/renderer/features/shared/components/table-config.module.css
index fdae7c68c..6feb0ed8f 100644
--- a/src/renderer/features/shared/components/table-config.module.css
+++ b/src/renderer/features/shared/components/table-config.module.css
@@ -9,6 +9,7 @@
 }
 
 .item {
+    position: relative;
     display: flex;
     flex-wrap: nowrap;
     gap: var(--theme-spacing-md);
@@ -24,3 +25,29 @@
     outline: 2px solid var(--theme-colors-primary);
     outline-offset: 2px;
 }
+
+.item.dragging {
+    opacity: 0.5;
+}
+
+.item.dragged-over-top::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: 2px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
+
+.item.dragged-over-bottom::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    height: 2px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
diff --git a/src/renderer/features/shared/components/table-config.tsx b/src/renderer/features/shared/components/table-config.tsx
index 9dc8bab17..612493446 100644
--- a/src/renderer/features/shared/components/table-config.tsx
+++ b/src/renderer/features/shared/components/table-config.tsx
@@ -1,8 +1,18 @@
+import {
+    attachClosestEdge,
+    type Edge,
+    extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import {
+    draggable,
+    dropTargetForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
 import Fuse from 'fuse.js';
-import { motion } from 'motion/react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './table-config.module.css';
@@ -25,6 +35,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 
 interface TableConfigProps {
@@ -432,6 +443,23 @@ const TableColumnConfig = ({
         }));
     }, [value, searchColumns, fuse]);
 
+    const handleReorder = useCallback(
+        (idFrom: string, idTo: string, edge: Edge | null) => {
+            const idList = value.map((item) => item.id);
+            const newIdOrder = dndUtils.reorderById({
+                edge,
+                idFrom,
+                idTo,
+                list: idList,
+            });
+
+            // Map the new ID order back to full items
+            const newOrder = newIdOrder.map((id) => value.find((item) => item.id === id)!);
+            onChange(newOrder);
+        },
+        [onChange, value],
+    );
+
     return (
         <Stack gap="xs">
             <Group justify="space-between" mb="md">
@@ -444,149 +472,300 @@ const TableColumnConfig = ({
                     size="xs"
                 />
             </Group>
-            {filteredColumns.map(({ item, matches }) => (
-                <motion.div
-                    className={clsx(styles.item, {
-                        [styles.matched]: matches && matches.length > 0,
-                    })}
-                    key={item.id}
-                    layout
-                >
-                    <Group wrap="nowrap">
-                        <Checkbox
-                            checked={item.isEnabled}
-                            id={item.id}
-                            label={labelMap[item.id]}
-                            onChange={(e) => handleChangeEnabled(item, e.currentTarget.checked)}
-                            size="sm"
-                        />
-                    </Group>
-                    <Group wrap="nowrap">
-                        <ActionIconGroup className={styles.group}>
-                            <ActionIcon
-                                icon="arrowUp"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handleMoveUp(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.moveUp', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant="subtle"
-                            />
-                            <ActionIcon
-                                icon="arrowDown"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handleMoveDown(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.moveDown', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant="subtle"
-                            />
-                        </ActionIconGroup>
-                        <ActionIconGroup className={styles.group}>
-                            <ActionIcon
-                                icon="arrowLeftToLine"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handlePinToLeft(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.pinToLeft', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant={item.pinned === 'left' ? 'filled' : 'subtle'}
-                            />
-                            <ActionIcon
-                                icon="arrowRightToLine"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handlePinToRight(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.pinToRight', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant={item.pinned === 'right' ? 'filled' : 'subtle'}
-                            />
-                        </ActionIconGroup>
-                        <ActionIconGroup className={styles.group}>
-                            <ActionIcon
-                                icon="alignLeft"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handleAlignLeft(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.alignLeft', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant={item.align === 'start' ? 'filled' : 'subtle'}
-                            />
-                            <ActionIcon
-                                icon="alignCenter"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handleAlignCenter(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.alignCenter', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant={item.align === 'center' ? 'filled' : 'subtle'}
-                            />
-                            <ActionIcon
-                                icon="alignRight"
-                                iconProps={{ size: 'md' }}
-                                onClick={() => handleAlignRight(item)}
-                                size="xs"
-                                tooltip={{
-                                    label: t('table.config.general.alignRight', {
-                                        postProcess: 'sentenceCase',
-                                    }),
-                                }}
-                                variant={item.align === 'end' ? 'filled' : 'subtle'}
-                            />
-                        </ActionIconGroup>
-                        <NumberInput
-                            className={clsx(styles.group, styles.numberInput)}
-                            hideControls={false}
-                            leftSection={
-                                <>
-                                    {item.pinned === null && (
-                                        <Tooltip
-                                            label={t('table.config.general.autosize', {
-                                                postProcess: 'sentenceCase',
-                                            })}
-                                        >
-                                            <Checkbox
-                                                checked={item.autoSize}
-                                                disabled={item.pinned !== null}
-                                                id={item.id}
-                                                onChange={(e) =>
-                                                    handleAutoSize(item, e.currentTarget.checked)
-                                                }
-                                                size="xs"
-                                            />
-                                        </Tooltip>
-                                    )}
-                                </>
-                            }
-                            max={2000}
-                            min={0}
-                            onChange={(value) => handleRowWidth(item, value)}
-                            size="xs"
-                            step={10}
-                            value={item.width}
-                            variant="subtle"
-                        />
-                    </Group>
-                </motion.div>
-            ))}
+            <div style={{ userSelect: 'none' }}>
+                {filteredColumns.map(({ item, matches }) => (
+                    <TableColumnItem
+                        handleAlignCenter={handleAlignCenter}
+                        handleAlignLeft={handleAlignLeft}
+                        handleAlignRight={handleAlignRight}
+                        handleAutoSize={handleAutoSize}
+                        handleChangeEnabled={handleChangeEnabled}
+                        handleMoveDown={handleMoveDown}
+                        handleMoveUp={handleMoveUp}
+                        handlePinToLeft={handlePinToLeft}
+                        handlePinToRight={handlePinToRight}
+                        handleReorder={handleReorder}
+                        handleRowWidth={handleRowWidth}
+                        item={item}
+                        key={item.id}
+                        label={labelMap[item.id]}
+                        matches={matches}
+                    />
+                ))}
+            </div>
         </Stack>
     );
 };
+
+const DragHandle = ({ dragHandleRef }: { dragHandleRef: React.RefObject<HTMLButtonElement> }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ActionIcon
+            icon="dragVertical"
+            iconProps={{
+                size: 'md',
+            }}
+            ref={dragHandleRef}
+            size="xs"
+            style={{ cursor: 'grab' }}
+            tooltip={{
+                label: t('table.config.general.dragToReorder', {
+                    postProcess: 'sentenceCase',
+                }),
+            }}
+            variant="transparent"
+        />
+    );
+};
+
+const TableColumnItem = ({
+    handleAlignCenter,
+    handleAlignLeft,
+    handleAlignRight,
+    handleAutoSize,
+    handleChangeEnabled,
+    handleMoveDown,
+    handleMoveUp,
+    handlePinToLeft,
+    handlePinToRight,
+    handleReorder,
+    handleRowWidth,
+    item,
+    label,
+    matches,
+}: {
+    handleAlignCenter: (item: ItemTableListColumnConfig) => void;
+    handleAlignLeft: (item: ItemTableListColumnConfig) => void;
+    handleAlignRight: (item: ItemTableListColumnConfig) => void;
+    handleAutoSize: (item: ItemTableListColumnConfig, checked: boolean) => void;
+    handleChangeEnabled: (item: ItemTableListColumnConfig, checked: boolean) => void;
+    handleMoveDown: (item: ItemTableListColumnConfig) => void;
+    handleMoveUp: (item: ItemTableListColumnConfig) => void;
+    handlePinToLeft: (item: ItemTableListColumnConfig) => void;
+    handlePinToRight: (item: ItemTableListColumnConfig) => void;
+    handleReorder: (idFrom: string, idTo: string, edge: Edge | null) => void;
+    handleRowWidth: (item: ItemTableListColumnConfig, number: number | string) => void;
+    item: ItemTableListColumnConfig;
+    label: string;
+    matches: null | readonly Fuse.FuseResultMatch[];
+}) => {
+    const { t } = useTranslation();
+    const ref = useRef<HTMLDivElement>(null);
+    const dragHandleRef = useRef<HTMLButtonElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null);
+
+    useEffect(() => {
+        if (!ref.current || !dragHandleRef.current) {
+            return;
+        }
+
+        return combine(
+            draggable({
+                element: dragHandleRef.current,
+                getInitialData: () => {
+                    const data = dndUtils.generateDragData({
+                        id: [item.id],
+                        operation: [DragOperation.REORDER],
+                        type: DragTarget.TABLE_COLUMN,
+                    });
+                    return data;
+                },
+                onDragStart: () => {
+                    setIsDragging(true);
+                },
+                onDrop: () => {
+                    setIsDragging(false);
+                },
+                onGenerateDragPreview: (data) => {
+                    disableNativeDragPreview({ nativeSetDragImage: data.nativeSetDragImage });
+                },
+            }),
+            dropTargetForElements({
+                canDrop: (args) => {
+                    const data = args.source.data as unknown as DragData;
+                    const isSelf = (args.source.data.id as string[])[0] === item.id;
+                    return dndUtils.isDropTarget(data.type, [DragTarget.TABLE_COLUMN]) && !isSelf;
+                },
+                element: ref.current,
+                getData: ({ element, input }) => {
+                    const data = dndUtils.generateDragData({
+                        id: [item.id],
+                        operation: [DragOperation.REORDER],
+                        type: DragTarget.TABLE_COLUMN,
+                    });
+
+                    return attachClosestEdge(data, {
+                        allowedEdges: ['top', 'bottom'],
+                        element,
+                        input,
+                    });
+                },
+                onDrag: (args) => {
+                    const closestEdgeOfTarget: Edge | null = extractClosestEdge(args.self.data);
+                    setIsDraggedOver(closestEdgeOfTarget);
+                },
+                onDragLeave: () => {
+                    setIsDraggedOver(null);
+                },
+                onDrop: (args) => {
+                    const closestEdgeOfTarget: Edge | null = extractClosestEdge(args.self.data);
+
+                    const from = args.source.data.id as string[];
+                    const to = args.self.data.id as string[];
+
+                    handleReorder(from[0], to[0], closestEdgeOfTarget);
+                    setIsDraggedOver(null);
+                },
+            }),
+        );
+    }, [item.id, handleReorder]);
+
+    return (
+        <div
+            className={clsx(styles.item, {
+                [styles.draggedOverBottom]: isDraggedOver === 'bottom',
+                [styles.draggedOverTop]: isDraggedOver === 'top',
+                [styles.dragging]: isDragging,
+                [styles.matched]: matches && matches.length > 0,
+            })}
+            ref={ref}
+        >
+            <Group wrap="nowrap">
+                <DragHandle dragHandleRef={dragHandleRef} />
+                <Checkbox
+                    checked={item.isEnabled}
+                    id={item.id}
+                    label={label}
+                    onChange={(e) => handleChangeEnabled(item, e.currentTarget.checked)}
+                    size="sm"
+                />
+            </Group>
+            <Group wrap="nowrap">
+                <ActionIconGroup className={styles.group}>
+                    <ActionIcon
+                        icon="arrowUp"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handleMoveUp(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.moveUp', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant="subtle"
+                    />
+                    <ActionIcon
+                        icon="arrowDown"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handleMoveDown(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.moveDown', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant="subtle"
+                    />
+                </ActionIconGroup>
+                <ActionIconGroup className={styles.group}>
+                    <ActionIcon
+                        icon="arrowLeftToLine"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handlePinToLeft(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.pinToLeft', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant={item.pinned === 'left' ? 'filled' : 'subtle'}
+                    />
+                    <ActionIcon
+                        icon="arrowRightToLine"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handlePinToRight(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.pinToRight', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant={item.pinned === 'right' ? 'filled' : 'subtle'}
+                    />
+                </ActionIconGroup>
+                <ActionIconGroup className={styles.group}>
+                    <ActionIcon
+                        icon="alignLeft"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handleAlignLeft(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.alignLeft', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant={item.align === 'start' ? 'filled' : 'subtle'}
+                    />
+                    <ActionIcon
+                        icon="alignCenter"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handleAlignCenter(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.alignCenter', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant={item.align === 'center' ? 'filled' : 'subtle'}
+                    />
+                    <ActionIcon
+                        icon="alignRight"
+                        iconProps={{ size: 'md' }}
+                        onClick={() => handleAlignRight(item)}
+                        size="xs"
+                        tooltip={{
+                            label: t('table.config.general.alignRight', {
+                                postProcess: 'sentenceCase',
+                            }),
+                        }}
+                        variant={item.align === 'end' ? 'filled' : 'subtle'}
+                    />
+                </ActionIconGroup>
+                <NumberInput
+                    className={clsx(styles.group, styles.numberInput)}
+                    hideControls={false}
+                    leftSection={
+                        <>
+                            {item.pinned === null && (
+                                <Tooltip
+                                    label={t('table.config.general.autosize', {
+                                        postProcess: 'sentenceCase',
+                                    })}
+                                >
+                                    <Checkbox
+                                        checked={item.autoSize}
+                                        disabled={item.pinned !== null}
+                                        id={item.id}
+                                        onChange={(e) =>
+                                            handleAutoSize(item, e.currentTarget.checked)
+                                        }
+                                        size="xs"
+                                    />
+                                </Tooltip>
+                            )}
+                        </>
+                    }
+                    max={2000}
+                    min={0}
+                    onChange={(value) => handleRowWidth(item, value)}
+                    size="xs"
+                    step={10}
+                    value={item.width}
+                    variant="subtle"
+                />
+            </Group>
+        </div>
+    );
+};