diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
index 13c9609ee3..8811c92114 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
@@ -7,6 +7,7 @@ import { FieldInfo } from '$app/stores/effects/database/field/field_controller';
 import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 import { ViewLayoutTypePB } from '@/services/backend';
 import { DatabaseGroupController } from '$app/stores/effects/database/group/group_controller';
+import { OnDragEndResponder } from 'react-beautiful-dnd';
 
 export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
   const dispatch = useAppDispatch();
@@ -48,7 +49,6 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     void (async () => {
       controller.subscribe({
         onRowsChanged: (rowInfos) => {
-          console.log('rows changed: ', rowInfos);
           setRows(rowInfos);
         },
         onFieldsChanged: (fieldInfos) => {
@@ -81,5 +81,15 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     setGroups([...controller.groups.value]);
   };
 
-  return { loadFields, controller, rows, groups, onNewRowClick };
+  const onDragEnd: OnDragEndResponder = async (result) => {
+    const { source, destination } = result;
+    // move inside the block (group)
+    if (source.droppableId === destination?.droppableId) {
+      const group = groups.find((g) => g.groupId === source.droppableId);
+      if (!group || !controller) return;
+      await controller.exchangeRow(group.rows[source.index].id, group.rows[destination.index].id);
+    }
+  };
+
+  return { loadFields, controller, rows, groups, onNewRowClick, onDragEnd };
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
index 7847169ba5..9e26ab0f9a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
@@ -7,7 +7,7 @@ import { ViewLayoutTypePB } from '@/services/backend';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 export const Board = ({ viewId }: { viewId: string }) => {
-  const { controller, rows, groups, onNewRowClick } = useDatabase(viewId, ViewLayoutTypePB.Board);
+  const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
 
   return (
     <>
@@ -23,7 +23,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
           <SearchInput />
         </div>
       </div>
-      <DragDropContext onDragEnd={(res) => console.log(res)}>
+      <DragDropContext onDragEnd={onDragEnd}>
         <div className={'relative w-full flex-1 overflow-auto'}>
           <div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
             {controller &&
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
index 9308ccc456..18194bff2c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
@@ -6,9 +6,11 @@ import {
   DatabaseEventGetGroups,
   DatabaseEventMoveGroup,
   DatabaseEventMoveGroupRow,
+  DatabaseEventMoveRow,
   DatabaseGroupIdPB,
   MoveGroupPayloadPB,
   MoveGroupRowPayloadPB,
+  MoveRowPayloadPB,
 } from '@/services/backend/events/flowy-database';
 import {
   GetFieldPayloadPB,
@@ -68,6 +70,15 @@ export class DatabaseBackendService {
     return DatabaseEventMoveGroupRow(payload);
   };
 
+  exchangeRow = (fromRowId: string, toRowId: string) => {
+    const payload = MoveRowPayloadPB.fromObject({
+      view_id: this.viewId,
+      from_row_id: fromRowId,
+      to_row_id: toRowId,
+    });
+    return DatabaseEventMoveRow(payload);
+  };
+
   moveGroup = (fromGroupId: string, toGroupId: string) => {
     const payload = MoveGroupPayloadPB.fromObject({
       view_id: this.viewId,
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
index a9bfc66d75..226e0b58f6 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
@@ -79,6 +79,11 @@ export class DatabaseController {
     return this.backendService.moveRow(rowId, groupId);
   };
 
+  exchangeRow = async (fromRowId: string, toRowId: string) => {
+    await this.backendService.exchangeRow(fromRowId, toRowId);
+    await this.loadGroup();
+  };
+
   moveGroup = (fromGroupId: string, toGroupId: string) => {
     return this.backendService.moveGroup(fromGroupId, toGroupId);
   };