diff --git a/src/customViewApi.ts b/src/customViewApi.ts
index a41416cd..5cb62865 100644
--- a/src/customViewApi.ts
+++ b/src/customViewApi.ts
@@ -4,6 +4,8 @@ import type { ProjectDefinition, ViewId } from "./settings/settings";
 
 export interface DataQueryResult {
   data: DataFrame;
+  hasSort: boolean;
+  hasFilter: boolean;
 }
 
 /**
@@ -18,6 +20,8 @@ export interface ProjectViewProps<T = Record<string, any>> {
   viewApi: ViewApi;
   readonly: boolean;
   getRecordColor: (record: DataRecord) => string | null;
+  sortRecords: (records: ReadonlyArray<DataRecord>) => DataRecord[];
+  getRecord: (id: string) => DataRecord | undefined;
 }
 
 /**
diff --git a/src/lib/datasources/helpers.ts b/src/lib/datasources/helpers.ts
index 166e5350..aa97b3b8 100644
--- a/src/lib/datasources/helpers.ts
+++ b/src/lib/datasources/helpers.ts
@@ -56,6 +56,20 @@ export function parseRecords(
   return records;
 }
 
+/**
+ * Merges a new version of `values` into a copy of data record.
+ *
+ * @param {Readonly<DataRecord>} record - the original data record
+ * @param {Readonly<DataRecord["values"]>} values - the values to merge into the original record
+ * @return {DataRecord} a new data record with the merged values
+ */
+export function updateRecordValues(
+  record: Readonly<DataRecord>,
+  values: Readonly<DataRecord["values"]>
+): DataRecord {
+  return { ...record, values: { ...record.values, ...values } };
+}
+
 export function detectFields(records: DataRecord[]): DataField[] {
   const valuesByField: Record<string, Optional<DataValue>[]> = {};
 
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
index 8ca11362..e13233bb 100644
--- a/src/lib/helpers.ts
+++ b/src/lib/helpers.ts
@@ -3,6 +3,7 @@ import { get } from "svelte/store";
 
 import { app } from "src/lib/stores/obsidian";
 import type { ProjectDefinition, ViewDefinition } from "src/settings/settings";
+import { getContext, setContext } from "svelte";
 import type { DataField } from "./dataframe/dataframe";
 
 /**
@@ -88,3 +89,15 @@ export function getNameFromPath(path: string) {
   const end: number = path.lastIndexOf(".");
   return path.substring(start, end);
 }
+
+export type Context<T> = Readonly<{
+  get: () => T;
+  set: (value: T) => void;
+}>;
+export function makeContext<T>(): Context<T> {
+  const key = Symbol();
+  return {
+    get: () => getContext(key),
+    set: (value: T) => setContext(key, value),
+  };
+}
diff --git a/src/lib/stores/translations/en.json b/src/lib/stores/translations/en.json
index d15345c0..b2f7561c 100644
--- a/src/lib/stores/translations/en.json
+++ b/src/lib/stores/translations/en.json
@@ -292,6 +292,10 @@
                     "column-width": {
                         "name": "Column width",
                         "description": "Width of each column in pixels."
+                    },
+                    "order-sync-field": {
+                        "name": "Sync card order with field",
+                        "description": "Field to store the position of cards in the board."
                     }
                 },
                 "note": {
diff --git a/src/lib/stores/translations/zh-CN.json b/src/lib/stores/translations/zh-CN.json
index ab184feb..4fe9482c 100644
--- a/src/lib/stores/translations/zh-CN.json
+++ b/src/lib/stores/translations/zh-CN.json
@@ -292,6 +292,10 @@
                     "column-width": {
                         "name": "列宽度",
                         "description": "调整每列的像素宽度。"
+                    },
+                    "order-sync-field": {
+                        "name": "卡片顺序同步字段",
+                        "description": "该字段将用于存储卡片在看板列中的位置顺序信息。"
                     }
                 },
                 "note": {
@@ -447,4 +451,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/ui/app/View.svelte b/src/ui/app/View.svelte
index 92834456..91f74196 100644
--- a/src/ui/app/View.svelte
+++ b/src/ui/app/View.svelte
@@ -5,13 +5,14 @@
   import type {
     ProjectDefinition,
     ProjectId,
+    SortDefinition,
     ViewDefinition,
     ViewId,
   } from "src/settings/settings";
   import { applyFilter, matchesCondition } from "./filterFunctions";
 
   import { useView } from "./useView";
-  import { applySort } from "./viewSort";
+  import { applySort, sortRecords } from "./viewSort";
 
   /**
    * Specify the project.
@@ -74,9 +75,21 @@
   $: viewFilter = view.filter ?? { conditions: [] };
   $: filteredFrame = applyFilter(frame, viewFilter);
 
-  $: viewSort = view.sort ?? { criteria: [] };
+  $: viewSort =
+    view.sort.criteria.length > 0
+      ? view.sort
+      : ({
+          criteria: [{ field: "path", order: "asc", enabled: true }],
+        } satisfies SortDefinition);
+
   $: sortedFrame = applySort(filteredFrame, viewSort);
 
+  let recordCache: Record<string, DataRecord | undefined>;
+  $: {
+    frame;
+    recordCache = {};
+  }
+
   function getRecordColor(record: DataRecord): string | null {
     const colorFilter = view.colors ?? { conditions: [] };
     for (const cond of colorFilter.conditions) {
@@ -88,6 +101,19 @@
     }
     return null;
   }
+
+  const applyViewSortToRecords = (
+    records: ReadonlyArray<DataRecord>
+  ): Array<DataRecord> => {
+    return sortRecords([...records], viewSort);
+  };
+
+  const getRecord = (id: string) => {
+    return (
+      recordCache[id] ??
+      (recordCache[id] = frame.records.find((record) => record.id === id))
+    );
+  };
 </script>
 
 <!--
@@ -100,6 +126,8 @@
     view,
     dataProps: {
       data: sortedFrame,
+      hasSort: view.sort.criteria.filter((c) => c.enabled).length > 0,
+      hasFilter: view.filter.conditions.filter((c) => c.enabled).length > 0,
     },
     viewApi: api,
     project,
@@ -107,6 +135,8 @@
     config: view.config,
     onConfigChange: handleConfigChange,
     getRecordColor: getRecordColor,
+    sortRecords: applyViewSortToRecords,
+    getRecord,
   }}
 />
 
diff --git a/src/ui/app/onboarding/demoProject.ts b/src/ui/app/onboarding/demoProject.ts
index bd8c161e..3856b296 100644
--- a/src/ui/app/onboarding/demoProject.ts
+++ b/src/ui/app/onboarding/demoProject.ts
@@ -84,7 +84,7 @@ export async function createDemoProject(vault: Vault) {
 
   const boardConfig: BoardConfig = {
     groupByField: "status",
-    priorityField: "weight",
+    orderSyncField: "weight",
   };
 
   const calendarConfig: CalendarConfig = {
diff --git a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
index f43c6e6b..843d0308 100644
--- a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
+++ b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
@@ -120,7 +120,7 @@
         outline: "none",
         borderRadius: "5px",
         background: "hsla(var(--interactive-accent-hsl), 0.3)",
-        transition: "all 150ms easy-in-out",
+        transition: "all 150ms ease-in-out",
       },
     }}
     on:consider={handleDndConsider}
diff --git a/src/ui/app/useView.ts b/src/ui/app/useView.ts
index ac2e3f54..c7bc3ec5 100644
--- a/src/ui/app/useView.ts
+++ b/src/ui/app/useView.ts
@@ -1,9 +1,13 @@
 import { get } from "svelte/store";
 
-import type { DataQueryResult } from "src/customViewApi";
+import type {
+  DataQueryResult,
+  ProjectView,
+  ProjectViewProps,
+} from "src/customViewApi";
+import type { DataRecord } from "src/lib/dataframe/dataframe";
 import { customViews } from "src/lib/stores/customViews";
 import type { ViewApi } from "src/lib/viewApi";
-import type { DataRecord } from "src/lib/dataframe/dataframe";
 import type { ProjectDefinition, ViewDefinition } from "src/settings/settings";
 
 export interface ViewProps {
@@ -15,65 +19,56 @@ export interface ViewProps {
   readonly: boolean;
   project: ProjectDefinition;
   getRecordColor: (record: DataRecord) => string | null;
+  sortRecords: ProjectViewProps["sortRecords"];
+  getRecord: ProjectViewProps["getRecord"];
 }
 
 export function useView(node: HTMLElement, props: ViewProps) {
   // Keep track of previous view id to determine if view should be invalidated.
-  let viewId = props.view.id;
-
+  let viewId: string;
   const projectId = props.project.id;
+  let projectView: ProjectView<Record<string, any>> | undefined;
 
-  let projectView = get(customViews)[props.view.type];
+  const update = (newprops: ViewProps) => {
+    // User switched to a different view.
+    const dirty =
+      newprops.view.id !== viewId || newprops.project.id !== projectId;
 
-  if (projectView) {
-    // Component just mounted, so treat all properties as dirty.
-    projectView.onOpen({
-      viewId: props.view.id,
-      project: props.project,
-      contentEl: node,
-      config: props.config,
-      saveConfig: props.onConfigChange,
-      viewApi: props.viewApi,
-      readonly: props.readonly,
-      getRecordColor: props.getRecordColor,
-    });
-    projectView.onData(props.dataProps);
-  }
+    if (dirty) {
+      // Clean up previous view.
+      projectView?.onClose();
 
-  return {
-    update(newprops: ViewProps) {
-      // User switched to a different view.
-      const dirty =
-        newprops.view.id !== viewId || newprops.project.id !== projectId;
+      node.empty();
 
-      if (dirty) {
-        // Clean up previous view.
-        projectView?.onClose();
+      // Look up the next view.
+      projectView = get(customViews)[newprops.view.type];
 
-        node.empty();
+      if (projectView) {
+        projectView.onOpen({
+          contentEl: node,
+          viewId: newprops.view.id,
+          project: newprops.project,
+          viewApi: newprops.viewApi,
+          readonly: newprops.readonly,
+          config: newprops.config,
+          saveConfig: newprops.onConfigChange,
+          getRecordColor: newprops.getRecordColor,
+          sortRecords: newprops.sortRecords,
+          getRecord: newprops.getRecord,
+        });
+        projectView.onData(newprops.dataProps);
+      }
 
-        // Look up the next view.
-        projectView = get(customViews)[newprops.view.type];
+      viewId = newprops.view.id;
+    } else {
+      projectView?.onData(newprops.dataProps);
+    }
+  };
 
-        if (projectView) {
-          projectView.onOpen({
-            contentEl: node,
-            viewId: newprops.view.id,
-            project: newprops.project,
-            viewApi: newprops.viewApi,
-            readonly: newprops.readonly,
-            config: newprops.config,
-            saveConfig: newprops.onConfigChange,
-            getRecordColor: newprops.getRecordColor,
-          });
-          projectView.onData(newprops.dataProps);
-        }
+  update(props);
 
-        viewId = newprops.view.id;
-      } else {
-        projectView?.onData(newprops.dataProps);
-      }
-    },
+  return {
+    update,
     destroy() {
       projectView?.onClose();
     },
diff --git a/src/ui/app/viewSort.ts b/src/ui/app/viewSort.ts
index 02fedba7..9c3261c8 100644
--- a/src/ui/app/viewSort.ts
+++ b/src/ui/app/viewSort.ts
@@ -10,24 +10,31 @@ import type { DataRecord } from "../../lib/dataframe/dataframe";
 
 export function applySort(frame: DataFrame, sort: SortDefinition): DataFrame {
   return produce(frame, (draft) => {
-    draft.records = draft.records.sort((a, b): number => {
-      let res = 0;
-
-      const enabledCriteria = sort.criteria.filter((c) => c.enabled);
-
-      for (let i = 0; i < enabledCriteria.length; i++) {
-        const criteria = enabledCriteria[i];
-
-        // @ts-ignore
-        res = sortCriteria(a, b, criteria);
+    //@ts-ignore
+    sortRecords(draft.records, sort);
+  });
+}
 
-        if (res !== 0) {
-          break;
-        }
+/**
+ * Sorts records in place. This method mutates the array
+ * and returns a reference to the same array.
+ *
+ * @param {DataRecord[]} records - the records to be sorted
+ * @param {SortDefinition} sort - the definition for sorting the records
+ */
+export function sortRecords(records: DataRecord[], sort: SortDefinition) {
+  return records.sort((a, b): number => {
+    let res = 0;
+
+    const enabledCriteria = sort.criteria.filter((c) => c.enabled);
+    for (const criteria of enabledCriteria) {
+      res = sortCriteria(a, b, criteria);
+      if (res !== 0) {
+        break;
       }
+    }
 
-      return res;
-    });
+    return res;
   });
 }
 
diff --git a/src/ui/views/Board/BoardOptionsProvider.svelte b/src/ui/views/Board/BoardOptionsProvider.svelte
index abd43f0d..ecafa9fc 100644
--- a/src/ui/views/Board/BoardOptionsProvider.svelte
+++ b/src/ui/views/Board/BoardOptionsProvider.svelte
@@ -48,7 +48,7 @@
         includedFields={config.includeFields ?? []}
         onIncludedFieldsChange={handleIncludedFieldsChange}
         onSettings={() => {
-          new BoardSettingsModal($app, config, (value) => {
+          new BoardSettingsModal($app, config, fields, (value) => {
             onConfigChange(value);
           }).open();
         }}
diff --git a/src/ui/views/Board/BoardView.svelte b/src/ui/views/Board/BoardView.svelte
index 171fcd52..b8b423fc 100644
--- a/src/ui/views/Board/BoardView.svelte
+++ b/src/ui/views/Board/BoardView.svelte
@@ -1,60 +1,192 @@
 <script lang="ts">
+  import type { ProjectViewProps } from "src/customViewApi";
   import { createDataRecord } from "src/lib/dataApi";
   import type {
     DataField,
     DataFrame,
     DataRecord,
   } from "src/lib/dataframe/dataframe";
+  import { updateRecordValues } from "src/lib/datasources/helpers";
+  import { notUndefined } from "src/lib/helpers";
   import { i18n } from "src/lib/stores/i18n";
   import { app } from "src/lib/stores/obsidian";
   import type { ViewApi } from "src/lib/viewApi";
   import type { ProjectDefinition } from "src/settings/settings";
   import { CreateNoteModal } from "src/ui/modals/createNoteModal";
   import { EditNoteModal } from "src/ui/modals/editNoteModal";
-  import { setRecordColorContext } from "src/ui/views/helpers";
-
+  import {
+    getRecordColorContext,
+    sortRecordsContext,
+  } from "src/ui/views/helpers";
   import BoardOptionsProvider from "./BoardOptionsProvider.svelte";
-  import { getColumns } from "./board";
+  import { getColumns, getFieldByName } from "./board";
   import { Board } from "./components";
+  import type {
+    OnRecordAdd,
+    OnRecordClick,
+    OnRecordUpdate,
+    OnSortColumns,
+  } from "./components/Board/types";
   import type { BoardConfig } from "./types";
 
   export let project: ProjectDefinition;
   export let frame: DataFrame;
   export let readonly: boolean;
   export let api: ViewApi;
-  export let getRecordColor: (record: DataRecord) => string | null;
+  export let getRecordColor: ProjectViewProps["getRecordColor"];
+  export let sortRecords: ProjectViewProps["sortRecords"];
+  export let getRecord: ProjectViewProps["getRecord"];
 
   export let config: BoardConfig | undefined;
   export let onConfigChange: (cfg: BoardConfig) => void;
 
+  export let hasSort: boolean;
+  export let hasFilter: boolean;
+
   $: ({ fields, records } = frame);
+  $: orderSyncField =
+    (config?.orderSyncField && getFieldByName(fields, config.orderSyncField)) ||
+    undefined;
 
-  setRecordColorContext(getRecordColor);
+  getRecordColorContext.set(getRecordColor);
+  sortRecordsContext.set((records) =>
+    hasSort ? sortRecords(records) : [...records]
+  );
 
-  function handleRecordClick(record: DataRecord) {
+  const handleRecordClick: OnRecordClick = (record) => {
     new EditNoteModal(
       $app,
       fields,
       (record) => api.updateRecord(record, fields),
       record
     ).open();
-  }
+  };
 
   const handleRecordUpdate =
-    (field: DataField | undefined) => (column: string, record: DataRecord) => {
-      if (field) {
-        api.updateRecord(
-          {
-            ...record,
-            values: { ...record.values, [field.name]: column },
+    (groupByField: DataField | undefined): OnRecordUpdate =>
+    (record, { id: column, records }, trigger) => {
+      // Update record groupByField
+      if (trigger === "addToColumn" && groupByField?.name) {
+        record = updateRecordValues(record, {
+          [groupByField.name]: column,
+        });
+      }
+
+      // If sort or filter is active, get records from settings hand
+      // and insert record in correct position or remove it
+      let isConfigRecordsLoaded = false;
+      if (hasSort || hasFilter) {
+        const configRecords = config?.columns?.[column]?.records
+          ?.map((r) => getRecord(r))
+          .filter(notUndefined);
+
+        if (configRecords) {
+          const configRecordIndex = configRecords.findIndex(
+            (r) => r.id === record.id
+          );
+          const isRecordInConfig = configRecordIndex !== -1;
+
+          if (
+            isRecordInConfig &&
+            (trigger === "removeFromColumn" || !hasSort)
+          ) {
+            configRecords.splice(configRecordIndex, 1);
+          }
+
+          if (trigger === "addToColumn") {
+            if (hasSort) {
+              // Sort is active, insert record at end of column if it's
+              // not already in the config, else keep position
+              if (!isRecordInConfig) {
+                configRecords.push(record);
+              }
+            } else if (hasFilter) {
+              // If filter is active insert record in correct position
+              // relative to records before or after it
+              const index = records.findIndex((r) => r.id === record.id);
+              const before = records[index - 1];
+              const after = records[index + 1];
+              let position: number = -1;
+
+              if (before) {
+                const beforeIndex = configRecords.findIndex(
+                  (r) => r.id === before.id
+                );
+                if (beforeIndex !== -1) position = beforeIndex + 1;
+              }
+              if (after && position === -1) {
+                position = configRecords.findIndex((r) => r.id === after.id);
+              }
+              if (position === -1) {
+                position = configRecords.length;
+              }
+
+              configRecords.splice(position, 0, record);
+            }
+          }
+
+          records = [
+            ...configRecords,
+            // In case the config is out of sync, insert any
+            // remaining records at the end
+            ...records.filter(
+              (r1) =>
+                r1.id !== record.id &&
+                !configRecords.find((r2) => r2.id === r1.id)
+            ),
+          ];
+          isConfigRecordsLoaded = true;
+        }
+      }
+
+      saveConfig({
+        ...config,
+        columns: {
+          ...config?.columns,
+          [column]: {
+            ...config?.columns?.[column],
+            records: records.map((r) => r.id),
           },
-          fields
-        );
+        },
+      });
+
+      // If record was removed from column, there is no need to update
+      // the groupBy or orderSync fields, since order is preserved on removal
+      // and the groupBy field is set on adding the record to the other column
+      if (trigger !== "removeFromColumn") {
+        const recordsToUpdate: DataRecord[] = [];
+
+        // If a sync field is defined, update it according to the order. Only
+        // update if no sort is active or records are loaded from the config,
+        // since they are sorted correctly according to custom order
+        const orderSyncFieldName = orderSyncField?.name;
+        if (orderSyncFieldName && (isConfigRecordsLoaded || !hasSort)) {
+          records.forEach((r, i) => {
+            const recordToUpdate =
+              r.id === record.id
+                ? record
+                : r.values[orderSyncFieldName] !== i && r;
+            if (recordToUpdate) {
+              recordsToUpdate.push(
+                updateRecordValues(recordToUpdate, {
+                  [orderSyncFieldName]: i,
+                })
+              );
+            }
+          });
+        } else {
+          recordsToUpdate.push(record);
+        }
+
+        recordsToUpdate.forEach((r, i) => {
+          api.updateRecord(r, fields);
+        });
       }
     };
 
   const handleRecordAdd =
-    (field: DataField | undefined) => (column: string) => {
+    (field: DataField | undefined): OnRecordAdd =>
+    (column: string) => {
       new CreateNoteModal($app, project, (name, templatePath) => {
         api.addRecord(
           createDataRecord(
@@ -74,16 +206,17 @@
       }).open();
     };
 
-  function handleSortColumns(names: string[]) {
+  const handleSortColumns: OnSortColumns = (names) => {
     saveConfig({
       ...config,
       columns: Object.fromEntries(
-        names.map((name, i) => {
-          return [name, { weight: i }];
-        })
+        names.map((name, i) => [
+          name,
+          { ...config?.columns?.[name], weight: i },
+        ])
       ),
     });
-  }
+  };
 
   function saveConfig(cfg: BoardConfig) {
     config = cfg;
@@ -105,7 +238,13 @@
   let:includeFields
 >
   <Board
-    columns={getColumns(records, config?.columns ?? {}, groupByField)}
+    columns={getColumns(
+      records,
+      config?.columns ?? {},
+      groupByField,
+      orderSyncField,
+      !hasSort
+    )}
     {columnWidth}
     includeFields={fields.filter((field) => includeFields.includes(field.name))}
     onRecordClick={handleRecordClick}
diff --git a/src/ui/views/Board/board.ts b/src/ui/views/Board/board.ts
index 388f9b79..a99bacbf 100644
--- a/src/ui/views/Board/board.ts
+++ b/src/ui/views/Board/board.ts
@@ -1,11 +1,11 @@
 import { get } from "svelte/store";
 
 import {
+  DataFieldType,
   isNumber,
   isString,
-  type DataRecord,
   type DataField,
-  DataFieldType,
+  type DataRecord,
 } from "src/lib/dataframe/dataframe";
 import { notEmpty } from "src/lib/helpers";
 import { i18n } from "src/lib/stores/i18n";
@@ -42,37 +42,32 @@ export function unique(records: DataRecord[], fieldName: string): string[] {
 export function getColumns(
   records: DataRecord[],
   columnSettings: ColumnSettings,
-  field?: DataField
+  grouByField?: DataField,
+  orderSyncField?: DataField,
+  sortByCustomOrder?: boolean
 ) {
-  const groupedRecords = groupRecordsByField(records, field?.name);
+  const groupedRecords = groupRecordsByField(records, grouByField?.name);
 
-  const columns = new Set<string>(
-    Object.entries(groupedRecords).map((entry) => entry[0])
-  );
+  const columns = new Set(Object.keys(groupedRecords));
 
-  if (field?.type === DataFieldType.String) {
-    for (const option of field?.typeConfig?.options ?? []) {
+  if (grouByField?.type === DataFieldType.String) {
+    grouByField?.typeConfig?.options?.forEach((option) => {
       columns.add(option);
-    }
+    });
   }
 
   return [...columns]
-    .sort((a, b) => {
-      const aweight = columnSettings[a]?.weight ?? 0;
-      const bweight = columnSettings[b]?.weight ?? 0;
-
-      if (aweight < bweight) {
-        return -1;
-      } else if (aweight > bweight) {
-        return 1;
-      } else {
-        return 0;
+    .sort(
+      (a, b) =>
+        (columnSettings[a]?.weight ?? 0) - (columnSettings[b]?.weight ?? 0)
+    )
+    .map((column) => {
+      const records = groupedRecords[column] ?? [];
+      if (sortByCustomOrder && records.length > 0) {
+        applyCustomRecordOrder(records, columnSettings[column], orderSyncField);
       }
-    })
-    .map((column) => ({
-      id: column,
-      records: groupedRecords[column] ?? [],
-    }));
+      return { id: column, records };
+    });
 }
 
 function groupRecordsByField(
@@ -82,7 +77,7 @@ function groupRecordsByField(
   const noStatus = get(i18n).t("views.board.no-status");
 
   if (!fieldName) {
-    return { [noStatus]: records };
+    return { [noStatus]: [...records] };
   }
 
   const keys = unique(records, fieldName);
@@ -112,3 +107,38 @@ function groupRecordsByField(
 
   return res;
 }
+
+/**
+ * Sorts records in place according to either order sync field if set, or to
+ * order of records in the column settings. This method mutates the array and
+ * returns a reference to the same array.
+ *
+ * @param {DataRecord[]} records - The records to be sorted.
+ * @param {ColumnSettings[string]} [columnSettings] - The column settings for sorting the records.
+ * @param {DataField} [orderSyncField] - The priority field for sorting the records.
+ * @return {DataRecord[]} The sorted records.
+ */
+function applyCustomRecordOrder(
+  records: DataRecord[],
+  columnSettings?: ColumnSettings[string],
+  orderSyncField?: DataField
+): DataRecord[] {
+  let getWeight: (record: DataRecord) => number;
+
+  if (orderSyncField?.name && orderSyncField.type === DataFieldType.Number) {
+    getWeight = (record) => {
+      const weight = record.values[orderSyncField.name];
+      return isNumber(weight) ? weight : Number.POSITIVE_INFINITY;
+    };
+  } else if (columnSettings) {
+    const weights = Object.fromEntries(
+      (columnSettings?.records ?? []).map((r, i) => [r, i])
+    );
+    getWeight = (record: DataRecord) =>
+      weights[record.id] ?? Number.POSITIVE_INFINITY;
+  } else {
+    return records;
+  }
+
+  return records.sort((a, b) => getWeight(a) - getWeight(b));
+}
diff --git a/src/ui/views/Board/boardView.ts b/src/ui/views/Board/boardView.ts
index 9160e93f..d339ac16 100644
--- a/src/ui/views/Board/boardView.ts
+++ b/src/ui/views/Board/boardView.ts
@@ -21,8 +21,8 @@ export class BoardView extends ProjectView<BoardConfig> {
     return "columns";
   }
 
-  async onData({ data }: DataQueryResult) {
-    this.view?.$set({ frame: data });
+  async onData({ data, hasSort, hasFilter }: DataQueryResult) {
+    this.view?.$set({ frame: data, hasSort, hasFilter });
   }
 
   async onOpen(props: ProjectViewProps<BoardConfig>) {
@@ -36,6 +36,10 @@ export class BoardView extends ProjectView<BoardConfig> {
         config: props.config,
         onConfigChange: props.saveConfig,
         getRecordColor: props.getRecordColor,
+        sortRecords: props.sortRecords,
+        getRecord: props.getRecord,
+        hasSort: false,
+        hasFilter: false,
       },
     });
   }
diff --git a/src/ui/views/Board/components/Board/Board.svelte b/src/ui/views/Board/components/Board/Board.svelte
index 5dadccc4..b1ea6276 100644
--- a/src/ui/views/Board/components/Board/Board.svelte
+++ b/src/ui/views/Board/components/Board/Board.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-  import type { DataRecord, DataField } from "src/lib/dataframe/dataframe";
+  import type { DataField } from "src/lib/dataframe/dataframe";
   import { dndzone } from "svelte-dnd-action";
 
   import BoardColumn from "./BoardColumn.svelte";
-
-  type Column = {
-    id: string;
-    records: DataRecord[];
-  };
+  import type {
+    Column,
+    OnRecordAdd,
+    OnRecordClick,
+    OnRecordUpdate,
+    OnSortColumns,
+  } from "./types";
 
   export let columns: Column[];
 
   export let readonly: boolean;
   export let richText: boolean;
-  export let onRecordClick: (record: DataRecord) => void;
-  export let onRecordUpdate: (column: string, record: DataRecord) => void;
-  export let onRecordAdd: (column: string) => void;
+  export let onRecordClick: OnRecordClick;
+  export let onRecordUpdate: OnRecordUpdate;
+  export let onRecordAdd: OnRecordAdd;
   export let columnWidth: number;
-  export let onSortColumns: (names: string[]) => void;
+  export let onSortColumns: OnSortColumns;
   export let includeFields: DataField[];
 
   const flipDurationMs = 200;
@@ -54,10 +56,15 @@
       records={column.records}
       {onRecordClick}
       onRecordAdd={() => onRecordAdd(column.id)}
-      onDrop={(records) => {
-        records.forEach((record) => {
-          onRecordUpdate(column.id, record);
-        });
+      onDrop={(record, records, trigger) => {
+        switch (trigger) {
+          case "droppedIntoZone":
+            onRecordUpdate(record, { ...column, records }, "addToColumn");
+            break;
+          case "droppedIntoAnother":
+            onRecordUpdate(record, { ...column, records }, "removeFromColumn");
+            break;
+        }
       }}
       {includeFields}
     />
diff --git a/src/ui/views/Board/components/Board/BoardColumn.svelte b/src/ui/views/Board/components/Board/BoardColumn.svelte
index c61bf4e8..3fd3e484 100644
--- a/src/ui/views/Board/components/Board/BoardColumn.svelte
+++ b/src/ui/views/Board/components/Board/BoardColumn.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
   import { Button, Icon } from "obsidian-svelte";
+  import type { DataField, DataRecord } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
-  import ColumnHeader from "./ColumnHeader.svelte";
-
-  import type { DataRecord, DataField } from "src/lib/dataframe/dataframe";
   import CardGroup from "./CardList.svelte";
+  import ColumnHeader from "./ColumnHeader.svelte";
+  import type { OnRecordClick, OnRecordDrop } from "./types";
 
   export let name: string;
   export let records: DataRecord[];
   export let readonly: boolean;
   export let richText: boolean;
-  export let onDrop: (records: DataRecord[]) => void;
   export let includeFields: DataField[];
-
-  export let onRecordClick: (record: DataRecord) => void;
+  
+  export let onDrop: OnRecordDrop;
+  export let onRecordClick: OnRecordClick;
   export let onRecordAdd: () => void;
 </script>
 
diff --git a/src/ui/views/Board/components/Board/CardList.svelte b/src/ui/views/Board/components/Board/CardList.svelte
index 56a426e0..a9d13950 100644
--- a/src/ui/views/Board/components/Board/CardList.svelte
+++ b/src/ui/views/Board/components/Board/CardList.svelte
@@ -1,34 +1,58 @@
 <script lang="ts">
   import { InternalLink } from "obsidian-svelte";
-  import type { DataField, DataRecord } from "src/lib/dataframe/dataframe";
-  import { dndzone } from "svelte-dnd-action";
-  import { getDisplayName } from "./boardHelpers";
+  import {
+    isString,
+    type DataField,
+    type DataRecord,
+  } from "src/lib/dataframe/dataframe";
   import { app } from "src/lib/stores/obsidian";
-  import { flip } from "svelte/animate";
-  import { getRecordColorContext } from "src/ui/views/helpers";
+  import { settings } from "src/lib/stores/settings";
   import CardMetadata from "src/ui/components/CardMetadata/CardMetadata.svelte";
   import ColorItem from "src/ui/components/ColorItem/ColorItem.svelte";
-  import { settings } from "src/lib/stores/settings";
+  import {
+    getRecordColorContext,
+    sortRecordsContext,
+  } from "src/ui/views/helpers";
+  import {
+    SHADOW_ITEM_MARKER_PROPERTY_NAME,
+    TRIGGERS,
+    dndzone,
+  } from "svelte-dnd-action";
+  import { flip } from "svelte/animate";
+  import { getDisplayName } from "./boardHelpers";
+  import type { DropTrigger, OnRecordClick, OnRecordDrop } from "./types";
 
   export let items: DataRecord[];
-  export let onRecordClick: (record: DataRecord) => void;
-  export let onDrop: (records: DataRecord[]) => void = () => {};
+  export let onRecordClick: OnRecordClick;
+  export let onDrop: OnRecordDrop;
   export let includeFields: DataField[];
 
+  const getRecordColor = getRecordColorContext.get();
+  const sortRecords = sortRecordsContext.get();
+
   const flipDurationMs = 200;
 
-  function handleDndConsider(e: CustomEvent<DndEvent<DataRecord>>) {
-    items = e.detail.items;
+  let dragItem: DataRecord | undefined;
+  function handleDndConsider({ detail }: CustomEvent<DndEvent<DataRecord>>) {
+    if (detail.info.trigger === TRIGGERS.DRAG_STARTED) {
+      dragItem = items.find((item) => item.id === detail.info.id);
+    }
+    items = sortRecords(detail.items);
   }
 
-  function handleDndFinalize(e: CustomEvent<DndEvent<DataRecord>>) {
-    items = e.detail.items;
-    if (onDrop) {
-      onDrop(e.detail.items);
+  function handleDndFinalize({ detail }: CustomEvent<DndEvent<DataRecord>>) {
+    items = sortRecords(detail.items);
+    if (detail.info.trigger === TRIGGERS.DROPPED_INTO_ZONE) {
+      dragItem = items.find((item) => item.id === detail.info.id);
+    }
+    if (dragItem) {
+      onDrop(dragItem, items, detail.info.trigger as DropTrigger);
+      dragItem = undefined;
     }
   }
 
-  const getRecordColor = getRecordColorContext();
+  const isPlaceholder = (item: DataRecord) =>
+    !!(item as any)[SHADOW_ITEM_MARKER_PROPERTY_NAME];
 </script>
 
 <div
@@ -42,8 +66,8 @@
     dropTargetStyle: {
       outline: "none",
       borderRadius: "5px",
-      background: "hsla(var(--interactive-accent-hsl), 0.3)",
-      transition: "all 150ms easy-in-out",
+      background: "var(--board-column-drag-accent)",
+      transition: "all 150ms ease-in-out",
     },
   }}
 >
@@ -52,6 +76,7 @@
 
     <article
       class="projects--board--card"
+      class:projects--board--card-placeholder={isPlaceholder(item)}
       on:keypress
       on:click={() => onRecordClick(item)}
       animate:flip={{ duration: flipDurationMs }}
@@ -77,7 +102,8 @@
             }
           }}
         >
-          {getDisplayName(item.id)}
+          {@const path = item.values["path"]}
+          {getDisplayName(isString(path) ? path : item.id)}
         </InternalLink>
         <CardMetadata fields={includeFields} record={item} />
       </ColorItem>
diff --git a/src/ui/views/Board/components/Board/types.ts b/src/ui/views/Board/components/Board/types.ts
new file mode 100644
index 00000000..a86d2766
--- /dev/null
+++ b/src/ui/views/Board/components/Board/types.ts
@@ -0,0 +1,32 @@
+import type { DataRecord } from "src/lib/dataframe/dataframe";
+import type { TRIGGERS } from "svelte-dnd-action";
+
+export type Column = {
+  id: string;
+  records: DataRecord[];
+};
+
+export type OnRecordClick = (record: DataRecord) => void;
+export type OnRecordAdd = (column: string) => void;
+export type OnRecordDrop = (
+  record: DataRecord,
+  records: DataRecord[],
+  trigger: DropTrigger
+) => void;
+export type DropTrigger =
+  | TRIGGERS.DROPPED_INTO_ANOTHER
+  | TRIGGERS.DROPPED_INTO_ZONE
+  | TRIGGERS.DROPPED_OUTSIDE_OF_ANY;
+
+export type OnRecordUpdate = (
+  record: DataRecord,
+  column: Column,
+  trigger: RecordUpdateTrigger
+) => void;
+
+export type RecordUpdateTrigger = "addToColumn" | "removeFromColumn";
+
+export type OnSortColumns = (names: string[]) => void;
+export type OnSortRecords = (
+  records: ReadonlyArray<DataRecord>
+) => DataRecord[];
diff --git a/src/ui/views/Board/settings/BoardSettings.svelte b/src/ui/views/Board/settings/BoardSettings.svelte
index b9c525ea..24111f3a 100644
--- a/src/ui/views/Board/settings/BoardSettings.svelte
+++ b/src/ui/views/Board/settings/BoardSettings.svelte
@@ -1,18 +1,40 @@
 <script lang="ts">
   import produce from "immer";
   import {
-    SettingItem,
-    NumberInput,
-    ModalLayout,
     ModalContent,
+    ModalLayout,
+    NumberInput,
+    Select,
+    SettingItem,
   } from "obsidian-svelte";
-  import type { BoardConfig } from "../types";
+  import { DataFieldType, type DataField } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
+  import { fieldToSelectableValue } from "../../helpers";
+  import { getFieldByName, getFieldsByType } from "../board";
+  import type { BoardConfig } from "../types";
 
   export let config: BoardConfig;
+  export let fields: DataField[];
   export let onSave: (config: BoardConfig) => void;
 
   let columnWidthValue = config.columnWidth ?? null;
+
+  $: orderSyncField = config.orderSyncField ?? "";
+  $: orderSyncDataField = orderSyncField
+    ? getFieldByName(fields, orderSyncField)
+    : undefined;
+  $: validOrderSyncFields = getFieldsByType(fields, DataFieldType.Number);
+
+  const updateConfig = <T extends keyof BoardConfig>(
+    key: T,
+    value: BoardConfig[T] | null
+  ) =>
+    onSave(
+      produce(config, (draft) => {
+        const { [key]: _, ...rest } = draft;
+        return value ? { ...rest, [key]: value } : rest;
+      })
+    );
 </script>
 
 <ModalLayout title={$i18n.t("views.board.settings.name")}>
@@ -24,16 +46,22 @@
       <NumberInput
         placeholder="270"
         bind:value={columnWidthValue}
-        on:blur={() =>
-          onSave(
-            produce(config, (draft) => {
-              const { columnWidth, ...rest } = draft;
-              if (!columnWidthValue) {
-                return rest;
-              }
-              return { ...rest, columnWidth: columnWidthValue };
-            })
-          )}
+        on:blur={() => updateConfig("columnWidth", columnWidthValue)}
+      />
+    </SettingItem>
+    <SettingItem
+      name={$i18n.t("views.board.settings.order-sync-field.name")}
+      description={$i18n.t("views.board.settings.order-sync-field.description")}
+    >
+      <Select
+        value={orderSyncDataField?.name ?? ""}
+        options={validOrderSyncFields.map(fieldToSelectableValue)}
+        placeholder={$i18n.t("views.board.fields.none") ?? ""}
+        allowEmpty
+        on:change={(event) => {
+          orderSyncField = event.detail;
+          updateConfig("orderSyncField", orderSyncField);
+        }}
       />
     </SettingItem>
   </ModalContent>
diff --git a/src/ui/views/Board/settings/settingsModal.ts b/src/ui/views/Board/settings/settingsModal.ts
index 3a913532..5e9bc0e7 100644
--- a/src/ui/views/Board/settings/settingsModal.ts
+++ b/src/ui/views/Board/settings/settingsModal.ts
@@ -1,4 +1,5 @@
 import { App, Modal } from "obsidian";
+import type { DataField } from "src/lib/dataframe/dataframe";
 import type { BoardConfig } from "../types";
 import BoardSettings from "./BoardSettings.svelte";
 
@@ -8,6 +9,7 @@ export class BoardSettingsModal extends Modal {
   constructor(
     app: App,
     readonly config: BoardConfig,
+    readonly fields: DataField[],
     readonly onSave: (config: BoardConfig) => void
   ) {
     super(app);
@@ -20,6 +22,7 @@ export class BoardSettingsModal extends Modal {
       target: contentEl,
       props: {
         config: this.config,
+        fields: this.fields,
         onSave: (config: BoardConfig) => {
           this.onSave(config);
         },
diff --git a/src/ui/views/Board/types.ts b/src/ui/views/Board/types.ts
index 46f4c82d..bc5ed263 100644
--- a/src/ui/views/Board/types.ts
+++ b/src/ui/views/Board/types.ts
@@ -1,6 +1,6 @@
 export interface BoardConfig {
   readonly groupByField?: string;
-  readonly priorityField?: string;
+  readonly orderSyncField?: string;
   readonly columnWidth?: number;
   readonly columns?: ColumnSettings;
   readonly includeFields?: string[];
@@ -9,5 +9,6 @@ export interface BoardConfig {
 export interface ColumnSettings {
   [name: string]: {
     readonly weight?: number;
+    readonly records?: string[];
   };
 }
diff --git a/src/ui/views/Calendar/CalendarView.svelte b/src/ui/views/Calendar/CalendarView.svelte
index 71a64f2d..f0f116e2 100644
--- a/src/ui/views/Calendar/CalendarView.svelte
+++ b/src/ui/views/Calendar/CalendarView.svelte
@@ -22,7 +22,7 @@
   import type { ProjectDefinition } from "src/settings/settings";
   import {
     fieldToSelectableValue,
-    setRecordColorContext,
+    getRecordColorContext,
   } from "src/ui/views/helpers";
   import { get } from "svelte/store";
   import {
@@ -43,6 +43,7 @@
   import Navigation from "./components/Navigation/Navigation.svelte";
   import type { CalendarConfig } from "./types";
   import { Notice } from "obsidian";
+  import { updateRecordValues } from "src/lib/datasources/helpers";
 
   export let project: ProjectDefinition;
   export let frame: DataFrame;
@@ -102,13 +103,9 @@
   function handleRecordChange(date: dayjs.Dayjs, record: DataRecord) {
     if (dateField) {
       api.updateRecord(
-        {
-          ...record,
-          values: {
-            ...record.values,
-            [dateField.name]: date.format("YYYY-MM-DD"),
-          },
-        },
+        updateRecordValues(record, {
+          [dateField.name]: date.format("YYYY-MM-DD"),
+        }),
         fields
       );
     }
@@ -150,7 +147,7 @@
     }).open();
   }
 
-  setRecordColorContext(getRecordColor);
+  getRecordColorContext.set(getRecordColor);
 </script>
 
 <ViewLayout>
diff --git a/src/ui/views/Calendar/components/Calendar/EventList.svelte b/src/ui/views/Calendar/components/Calendar/EventList.svelte
index bd8f193b..4b4d3096 100644
--- a/src/ui/views/Calendar/components/Calendar/EventList.svelte
+++ b/src/ui/views/Calendar/components/Calendar/EventList.svelte
@@ -9,6 +9,7 @@
     DataValue,
     Optional,
   } from "src/lib/dataframe/dataframe";
+  import { updateRecordValues } from "src/lib/datasources/helpers";
   import { getRecordColorContext } from "src/ui/views/helpers";
   import { settings } from "src/lib/stores/settings";
 
@@ -36,7 +37,7 @@
     records.forEach(onRecordChange);
   }
 
-  const getRecordColor = getRecordColorContext();
+  const getRecordColor = getRecordColorContext.get();
 </script>
 
 <div
@@ -62,13 +63,11 @@
           : undefined}
         on:check={({ detail: checked }) => {
           if (checkField) {
-            onRecordChange({
-              ...record,
-              values: {
-                ...record.values,
+            onRecordChange(
+              updateRecordValues(record, {
                 [checkField]: checked,
-              },
-            });
+              })
+            );
           }
         }}
         on:click={() => {
diff --git a/src/ui/views/Table/components/SwitchSelect/SwitchSelect.svelte b/src/ui/views/Table/components/SwitchSelect/SwitchSelect.svelte
index e4879cc6..c03b6e6c 100644
--- a/src/ui/views/Table/components/SwitchSelect/SwitchSelect.svelte
+++ b/src/ui/views/Table/components/SwitchSelect/SwitchSelect.svelte
@@ -19,7 +19,7 @@
   bind:this={ref}
   class="dropdown"
   on:keypress
-  on:click={() => (isOpen = true)}
+  on:click={() => (isOpen = !isOpen)}
 >
   {label}
 </div>
diff --git a/src/ui/views/helpers.ts b/src/ui/views/helpers.ts
index 0003f3f4..f233c113 100644
--- a/src/ui/views/helpers.ts
+++ b/src/ui/views/helpers.ts
@@ -1,9 +1,6 @@
-import { getContext, setContext } from "svelte";
-import {
-  DataFieldType,
-  type DataField,
-  type DataRecord,
-} from "../../lib/dataframe/dataframe";
+import { makeContext } from "src/lib/helpers";
+import { DataFieldType, type DataField } from "../../lib/dataframe/dataframe";
+import type { ViewProps } from "../app/useView";
 
 export function fieldIcon(field: DataFieldType): string {
   switch (field) {
@@ -29,14 +26,5 @@ export function fieldToSelectableValue(field: DataField): {
   };
 }
 
-const getRecordColorKey = Symbol();
-
-export function getRecordColorContext(): (record: DataRecord) => string | null {
-  return getContext(getRecordColorKey);
-}
-
-export function setRecordColorContext(
-  fn: (record: DataRecord) => string | null
-) {
-  setContext(getRecordColorKey, fn);
-}
+export const getRecordColorContext = makeContext<ViewProps["getRecordColor"]>();
+export const sortRecordsContext = makeContext<ViewProps["sortRecords"]>();
diff --git a/styles.css b/styles.css
index 926acfa7..8392217f 100644
--- a/styles.css
+++ b/styles.css
@@ -13,6 +13,13 @@
   gap: var(--size-4-2);
   flex-direction: column;
   padding: var(--size-4-2);
+
+  --board-column-drag-accent: hsla(var(--interactive-accent-hsl), 0.3);
+  --board-column-drop-accent: hsla(var(--interactive-accent-hsl), 0.5);
+  &:has(.projects--board--card-placeholder) {
+    box-shadow: 0px 0px 8px 0px var(--board-column-drop-accent);
+    transition: box-shadow 150ms ease-in-out;
+  }
 }
 
 .projects--board--card {
@@ -31,6 +38,10 @@
   gap: var(--size-4-2);
   min-height: 35px;
   transition: all 150ms ease-in-out;
+
+  &:has(.projects--board--card-placeholder) {
+    background: var(--board-column-drop-accent) !important;
+  }
 }
 
 .projects--gallery--grid {