diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 999fe3fbd72..040b8da5528 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -119,6 +119,23 @@ function AllTransactions({ account = {}, transactions, filtered, children }) {
   return children(allTransactions);
 }
 
+function getField(field) {
+  switch (field) {
+    case 'account':
+      return 'account.name';
+    case 'payee':
+      return 'payee.name';
+    case 'category':
+      return 'category.name';
+    case 'payment':
+      return 'amount';
+    case 'deposit':
+      return 'amount';
+    default:
+      return field;
+  }
+}
+
 class AccountInternal extends PureComponent {
   constructor(props) {
     super(props);
@@ -142,6 +159,7 @@ class AccountInternal extends PureComponent {
       latestDate: null,
       filterId: [],
       conditionsOp: 'and',
+      sort: [],
     };
   }
 
@@ -232,6 +250,11 @@ class AccountInternal extends PureComponent {
         this.refetchTransactions();
       }, 100);
     }
+
+    //Resest sort/filter/search on account change
+    if (this.props.accountId !== prevProps.accountId) {
+      this.setState({ sort: [], search: '', filters: [] });
+    }
   }
 
   componentWillUnmount() {
@@ -450,7 +473,12 @@ class AccountInternal extends PureComponent {
     let accountId = this.props.accountId;
     let account = this.props.accounts.find(account => account.id === accountId);
     return (
-      account && this.state.search === '' && this.state.filters.length === 0
+      account &&
+      this.state.search === '' &&
+      this.state.filters.length === 0 &&
+      (this.state.sort.length === 0 ||
+        (this.state.sort.field === 'date' &&
+          this.state.sort.ascDesc === 'desc'))
     );
   };
 
@@ -523,11 +551,32 @@ class AccountInternal extends PureComponent {
           this.props.savePrefs({ ['show-balances-' + accountId]: false });
           this.setState({ showBalances: false, balances: [] });
         } else {
+          this.setState({
+            transactions: [],
+            transactionCount: 0,
+            filters: [],
+            search: '',
+            sort: [],
+            showBalances: true,
+          });
+          this.fetchTransactions();
           this.props.savePrefs({ ['show-balances-' + accountId]: true });
-          this.setState({ showBalances: true });
           this.calculateBalances();
         }
         break;
+      case 'remove-sorting': {
+        let filters = this.state.filters;
+        this.setState({ sort: [] });
+        if (filters.length > 0) {
+          this.applyFilters([...filters]);
+        } else {
+          this.fetchTransactions();
+        }
+        if (this.state.search !== '') {
+          this.onSearch(this.state.search);
+        }
+        break;
+      }
       case 'toggle-cleared':
         if (this.state.showCleared) {
           this.props.savePrefs({ ['hide-cleared-' + accountId]: true });
@@ -815,6 +864,9 @@ class AccountInternal extends PureComponent {
     this.setState({ conditionsOp: value });
     this.setState({ filterId: { ...this.state.filterId, status: 'changed' } });
     this.applyFilters([...filters]);
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
+    }
   };
 
   onReloadSavedFilter = (savedFilter, item) => {
@@ -837,6 +889,9 @@ class AccountInternal extends PureComponent {
     this.setState({ conditionsOp: 'and' });
     this.setState({ filterId: [] });
     this.applyFilters([]);
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
+    }
   };
 
   onUpdateFilter = (oldFilter, updatedFilter) => {
@@ -849,6 +904,9 @@ class AccountInternal extends PureComponent {
         status: this.state.filterId && 'changed',
       },
     });
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
+    }
   };
 
   onDeleteFilter = filter => {
@@ -864,6 +922,9 @@ class AccountInternal extends PureComponent {
         },
       });
     }
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
+    }
   };
 
   onApplyFilter = async cond => {
@@ -884,6 +945,9 @@ class AccountInternal extends PureComponent {
       });
       this.applyFilters([...filters, cond]);
     }
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
+    }
   };
 
   onScheduleAction = async (name, ids) => {
@@ -918,11 +982,91 @@ class AccountInternal extends PureComponent {
         [conditionsOpKey]: [...filters, ...customFilters],
       });
       this.updateQuery(this.currentQuery, true);
-      this.setState({ filters: conditions, search: '' });
+      this.setState({ filters: conditions });
     } else {
       this.setState({ transactions: [], transactionCount: 0 });
       this.fetchTransactions();
-      this.setState({ filters: conditions, search: '' });
+      this.setState({ filters: conditions });
+    }
+
+    if (this.state.sort.length !== 0) {
+      this.applySort();
+    }
+  };
+
+  applySort = (field, ascDesc, prevField, prevAscDesc) => {
+    let filters = this.state.filters;
+    let sortField = getField(!field ? this.state.sort.field : field);
+    let sortAscDesc = !ascDesc ? this.state.sort.ascDesc : ascDesc;
+    let sortPrevField = getField(
+      !prevField ? this.state.sort.prevField : prevField,
+    );
+    let sortPrevAscDesc = !prevField
+      ? this.state.sort.prevAscDesc
+      : prevAscDesc;
+
+    if (!field) {
+      //no sort was made (called by applyFilters)
+      this.currentQuery = this.currentQuery.orderBy({
+        [sortField]: sortAscDesc,
+      });
+    } else {
+      //sort called directly
+      if (filters.length > 0) {
+        //if filters already exist then apply them
+        this.applyFilters([...filters]);
+        this.currentQuery = this.currentQuery.orderBy({
+          [sortField]: sortAscDesc,
+        });
+      } else {
+        //no filters exist make new rootquery
+        this.currentQuery = this.rootQuery.orderBy({
+          [sortField]: sortAscDesc,
+        });
+      }
+    }
+    if (sortPrevField) {
+      //apply previos sort if it exists
+      this.currentQuery = this.currentQuery.orderBy({
+        [sortPrevField]: sortPrevAscDesc,
+      });
+    }
+
+    this.updateQuery(this.currentQuery, this.state.filters.length > 0);
+  };
+
+  onSort = (headerClicked, ascDesc) => {
+    let prevField;
+    let prevAscDesc;
+    //if staying on same column but switching asc/desc
+    //then keep prev the same
+    if (headerClicked === this.state.sort.field) {
+      prevField = this.state.sort.prevField;
+      prevAscDesc = this.state.sort.prevAscDesc;
+      this.setState({
+        sort: {
+          ...this.state.sort,
+          ascDesc: ascDesc,
+        },
+      });
+    } else {
+      //if switching to new column then capture state
+      //of current sort column as prev
+      prevField = this.state.sort.field;
+      prevAscDesc = this.state.sort.ascDesc;
+      this.setState({
+        sort: {
+          field: headerClicked,
+          ascDesc: ascDesc,
+          prevField: this.state.sort.field,
+          prevAscDesc: this.state.sort.ascDesc,
+        },
+      });
+    }
+
+    this.applySort(headerClicked, ascDesc, prevField, prevAscDesc);
+    if (this.state.search !== '') {
+      this.onSearch(this.state.search);
     }
   };
 
@@ -1010,6 +1154,7 @@ class AccountInternal extends PureComponent {
                   showEmptyMessage={showEmptyMessage}
                   balanceQuery={balanceQuery}
                   canCalculateBalance={this.canCalculateBalance}
+                  isSorted={this.state.sort.length !== 0}
                   reconcileAmount={reconcileAmount}
                   search={this.state.search}
                   filters={this.state.filters}
@@ -1095,6 +1240,9 @@ class AccountInternal extends PureComponent {
                         </View>
                       ) : null
                     }
+                    onSort={this.onSort}
+                    sortField={this.state.sort.field}
+                    ascDesc={this.state.sort.ascDesc}
                     onChange={this.onTransactionsChange}
                     onRefetch={this.refetchTransactions}
                     onRefetchUpToRow={row =>
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index 1a9033832c1..e3bd351f1a0 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -51,6 +51,7 @@ export function AccountHeader({
   balanceQuery,
   reconcileAmount,
   canCalculateBalance,
+  isSorted,
   search,
   filters,
   conditionsOp,
@@ -350,6 +351,7 @@ export function AccountHeader({
                   account={account}
                   canSync={canSync}
                   canShowBalances={canCalculateBalance()}
+                  isSorted={isSorted}
                   showBalances={showBalances}
                   showCleared={showCleared}
                   onMenuSelect={item => {
@@ -372,6 +374,7 @@ export function AccountHeader({
                     onMenuSelect(item);
                   }}
                   onClose={() => setMenuOpen(false)}
+                  isSorted={isSorted}
                 />
               )}
             </View>
@@ -411,6 +414,7 @@ function AccountMenu({
   canShowBalances,
   showCleared,
   onClose,
+  isSorted,
   onReconcile,
   onMenuSelect,
 }) {
@@ -434,6 +438,10 @@ function AccountMenu({
           }
         }}
         items={[
+          isSorted && {
+            name: 'remove-sorting',
+            text: 'Remove all Sorting',
+          },
           canShowBalances && {
             name: 'toggle-balance',
             text: (showBalances ? 'Hide' : 'Show') + ' Running Balance',
@@ -464,14 +472,20 @@ function AccountMenu({
   );
 }
 
-function CategoryMenu({ onClose, onMenuSelect }) {
+function CategoryMenu({ onClose, onMenuSelect, isSorted }) {
   return (
     <MenuTooltip width={200} onClose={onClose}>
       <Menu
         onMenuSelect={item => {
           onMenuSelect(item);
         }}
-        items={[{ name: 'export', text: 'Export' }]}
+        items={[
+          isSorted && {
+            name: 'remove-sorting',
+            text: 'Remove all Sorting',
+          },
+          { name: 'export', text: 'Export' },
+        ]}
       />
     </MenuTooltip>
   );
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index de369995883..5c1a4aff44f 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -184,6 +184,7 @@ type CellProps = Omit<ComponentProps<typeof View>, 'children' | 'value'> & {
   formatter?: (value: string, type?: unknown) => string;
   focused?: boolean;
   textAlign?: string;
+  alignItems?: string;
   borderColor?: string;
   plain?: boolean;
   exposed?: boolean;
@@ -201,6 +202,7 @@ export function Cell({
   value,
   formatter,
   textAlign,
+  alignItems,
   onExpose,
   borderColor: oldBorderColor,
   children,
@@ -232,6 +234,7 @@ export function Cell({
     borderBottomWidth: borderColor ? 1 : 0,
     borderColor,
     backgroundColor,
+    alignItems: alignItems,
   };
 
   return (
@@ -905,7 +908,9 @@ type TableProps = {
   animated?: boolean;
   allowPopupsEscape?: boolean;
   isSelected?: (id: TableItem['id']) => boolean;
+  saveScrollWidth: (parent, child) => void;
 };
+
 export const Table = forwardRef<TableHandleRef, TableProps>(
   (
     {
@@ -928,6 +933,7 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
       animated,
       allowPopupsEscape,
       isSelected,
+      saveScrollWidth,
       ...props
     },
     ref,
@@ -1016,6 +1022,15 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
       let editing = editingId === item.id;
       let selected = isSelected && isSelected(item.id);
 
+      if (scrollContainer.current && saveScrollWidth) {
+        saveScrollWidth(
+          scrollContainer.current.offsetParent
+            ? scrollContainer.current.offsetParent.clientWidth
+            : 0,
+          scrollContainer.current ? scrollContainer.current.clientWidth : 0,
+        );
+      }
+
       let row = renderItem({
         item,
         editing,
diff --git a/packages/desktop-client/src/components/transactions/TransactionList.js b/packages/desktop-client/src/components/transactions/TransactionList.js
index 0ad01b0fb96..2e9b20b4968 100644
--- a/packages/desktop-client/src/components/transactions/TransactionList.js
+++ b/packages/desktop-client/src/components/transactions/TransactionList.js
@@ -77,6 +77,9 @@ export default function TransactionList({
   hideFraction,
   addNotification,
   renderEmpty,
+  onSort,
+  sortField,
+  ascDesc,
   onChange,
   onRefetch,
   onCloseAddTransaction,
@@ -196,6 +199,9 @@ export default function TransactionList({
       style={{ backgroundColor: 'white' }}
       onNavigateToTransferAccount={onNavigateToTransferAccount}
       onNavigateToSchedule={onNavigateToSchedule}
+      onSort={onSort}
+      sortField={sortField}
+      ascDesc={ascDesc}
     />
   );
 }
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 16c2dd18cf1..6b3b17b3e32 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -47,6 +47,8 @@ import usePrevious from '../../hooks/usePrevious';
 import { useSelectedDispatch, useSelectedItems } from '../../hooks/useSelected';
 import LeftArrow2 from '../../icons/v0/LeftArrow2';
 import RightArrow2 from '../../icons/v0/RightArrow2';
+import ArrowDown from '../../icons/v1/ArrowDown';
+import ArrowUp from '../../icons/v1/ArrowUp';
 import CheveronDown from '../../icons/v1/CheveronDown';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CalendarIcon from '../../icons/v2/Calendar';
@@ -237,8 +239,26 @@ export function SplitsExpandedProvider({ children, initialMode = 'expand' }) {
   );
 }
 
+function selectAscDesc(field, ascDesc, clicked, defaultAscDesc = 'asc') {
+  return field === clicked
+    ? ascDesc === 'asc'
+      ? 'desc'
+      : 'asc'
+    : defaultAscDesc;
+}
+
 const TransactionHeader = memo(
-  ({ hasSelected, showAccount, showCategory, showBalance, showCleared }) => {
+  ({
+    hasSelected,
+    showAccount,
+    showCategory,
+    showBalance,
+    showCleared,
+    scrollWidth,
+    onSort,
+    ascDesc,
+    field,
+  }) => {
     let dispatchSelected = useSelectedDispatch();
 
     return (
@@ -258,16 +278,93 @@ const TransactionHeader = memo(
           width={20}
           onSelect={e => dispatchSelected({ type: 'select-all', event: e })}
         />
-        <Cell value="Date" width={110} />
-        {showAccount && <Cell value="Account" width="flex" />}
-        <Cell value="Payee" width="flex" />
-        <Cell value="Notes" width="flex" />
-        {showCategory && <Cell value="Category" width="flex" />}
-        <Cell value="Payment" width={80} textAlign="right" />
-        <Cell value="Deposit" width={80} textAlign="right" />
+        <HeaderCell
+          value="Date"
+          width={110}
+          alignItems="flex"
+          marginLeft={-5}
+          id="date"
+          icon={field === 'date' ? ascDesc : 'clickable'}
+          onClick={() =>
+            onSort('date', selectAscDesc(field, ascDesc, 'date', 'desc'))
+          }
+        />
+        {showAccount && (
+          <HeaderCell
+            value="Account"
+            width="flex"
+            alignItems="flex"
+            marginLeft={-5}
+            id="account"
+            icon={field === 'account' ? ascDesc : 'clickable'}
+            onClick={() =>
+              onSort('account', selectAscDesc(field, ascDesc, 'account', 'asc'))
+            }
+          />
+        )}
+        <HeaderCell
+          value="Payee"
+          width="flex"
+          alignItems="flex"
+          marginLeft={-5}
+          id="payee"
+          icon={field === 'payee' ? ascDesc : 'clickable'}
+          onClick={() =>
+            onSort('payee', selectAscDesc(field, ascDesc, 'payee', 'asc'))
+          }
+        />
+        <HeaderCell
+          value="Notes"
+          width="flex"
+          alignItems="flex"
+          marginLeft={-5}
+          id="notes"
+          icon={field === 'notes' ? ascDesc : 'clickable'}
+          onClick={() =>
+            onSort('notes', selectAscDesc(field, ascDesc, 'notes', 'asc'))
+          }
+        />
+        {showCategory && (
+          <HeaderCell
+            value="Category"
+            width="flex"
+            alignItems="flex"
+            marginLeft={-5}
+            id="category"
+            icon={field === 'category' ? ascDesc : 'clickable'}
+            onClick={() =>
+              onSort(
+                'category',
+                selectAscDesc(field, ascDesc, 'category', 'asc'),
+              )
+            }
+          />
+        )}
+        <HeaderCell
+          value="Payment"
+          width={90}
+          alignItems="flex-end"
+          marginRight={-5}
+          id="payment"
+          icon={field === 'payment' ? ascDesc : 'clickable'}
+          onClick={() =>
+            onSort('payment', selectAscDesc(field, ascDesc, 'payment', 'asc'))
+          }
+        />
+        <HeaderCell
+          value="Deposit"
+          width={85}
+          alignItems="flex-end"
+          marginRight={-5}
+          id="deposit"
+          icon={field === 'deposit' ? ascDesc : 'clickable'}
+          onClick={() =>
+            onSort('deposit', selectAscDesc(field, ascDesc, 'deposit', 'desc'))
+          }
+        />
         {showBalance && <Cell value="Balance" width={88} textAlign="right" />}
-        {showCleared && <Field width={21} truncate={false} />}
-        <Cell value="" width={15 + styles.scrollbarWidth} />
+        {showCleared && <Field width={30} truncate={false} />}
+        <Cell value="" width={5 + scrollWidth ?? 0} />
       </Row>
     );
   },
@@ -340,7 +437,7 @@ function StatusCell({
   return (
     <Cell
       name="cleared"
-      width="auto"
+      width={30}
       focused={focused}
       style={{ padding: 1 }}
       plain
@@ -376,6 +473,56 @@ function StatusCell({
   );
 }
 
+function HeaderCell({
+  value,
+  id,
+  width,
+  alignItems,
+  marginLeft,
+  marginRight,
+  icon,
+  onClick,
+}) {
+  return (
+    <CustomCell
+      width={width}
+      name={id}
+      alignItems={alignItems}
+      unexposedContent={
+        <Button
+          bare
+          onClick={onClick}
+          style={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            color: colors.n4,
+            fontWeight: 300,
+            marginLeft: marginLeft,
+            marginRight: marginRight,
+          }}
+        >
+          <UnexposedCellContent value={value} />
+          {icon === 'asc' && (
+            <ArrowDown
+              width={10}
+              height={10}
+              style={{ marginLeft: 5, color: colors.n4 }}
+            />
+          )}
+          {icon === 'desc' && (
+            <ArrowUp
+              width={10}
+              height={10}
+              style={{ marginLeft: 5, color: colors.n4 }}
+            />
+          )}
+        </Button>
+      }
+    />
+  );
+}
+
 function PayeeCell({
   id,
   payeeId,
@@ -406,6 +553,7 @@ function PayeeCell({
     <CustomCell
       width="flex"
       name="payee"
+      textAlign="flex"
       value={payeeId}
       valueStyle={[valueStyle, inherited && { color: colors.n8 }]}
       exposed={focused}
@@ -759,6 +907,7 @@ const Transaction = memo(function Transaction(props) {
         <CustomCell
           name="date"
           width={110}
+          textAlign="flex"
           exposed={focusedField === 'date'}
           value={date}
           valueStyle={valueStyle}
@@ -795,6 +944,7 @@ const Transaction = memo(function Transaction(props) {
         <CustomCell
           name="account"
           width="flex"
+          textAlign="flex"
           value={accountId}
           formatter={acctId => {
             let acct = acctId && getAccountsById(accounts)[acctId];
@@ -866,6 +1016,7 @@ const Transaction = memo(function Transaction(props) {
         <InputCell
           width="flex"
           name="notes"
+          textAlign="flex"
           exposed={focusedField === 'notes'}
           focused={focusedField === 'notes'}
           value={notes || ''}
@@ -975,7 +1126,11 @@ const Transaction = memo(function Transaction(props) {
               : ''
           }
           valueStyle={valueStyle}
-          style={{ fontStyle: 'italic', color: '#c0c0c0', fontWeight: 300 }}
+          style={{
+            fontStyle: 'italic',
+            color: '#c0c0c0',
+            fontWeight: 300,
+          }}
           inputProps={{
             readOnly: true,
             style: { fontStyle: 'italic' },
@@ -985,6 +1140,7 @@ const Transaction = memo(function Transaction(props) {
         <CustomCell
           name="category"
           width="flex"
+          textAlign="flex"
           value={categoryId}
           formatter={value =>
             value
@@ -1041,7 +1197,7 @@ const Transaction = memo(function Transaction(props) {
 
       <InputCell
         type="input"
-        width={80}
+        width={90}
         name="debit"
         exposed={focusedField === 'debit'}
         focused={focusedField === 'debit'}
@@ -1059,7 +1215,7 @@ const Transaction = memo(function Transaction(props) {
 
       <InputCell
         type="input"
-        width={80}
+        width={85}
         name="credit"
         exposed={focusedField === 'credit'}
         focused={focusedField === 'credit'}
@@ -1103,7 +1259,7 @@ const Transaction = memo(function Transaction(props) {
         />
       )}
 
-      <Cell width={15} />
+      <Cell width={5} />
     </Row>
   );
 });
@@ -1299,6 +1455,13 @@ function TransactionTableInner({
 }) {
   const containerRef = createRef();
   const isAddingPrev = usePrevious(props.isAdding);
+  let [scrollWidth, setScrollWidth] = useState(0);
+
+  function saveScrollWidth(parent, child) {
+    let width = parent > 0 && child > 0 && parent - child;
+
+    setScrollWidth(!width ? 0 : width);
+  }
 
   let onNavigateToTransferAccount = useCallback(
     accountId => {
@@ -1427,6 +1590,10 @@ function TransactionTableInner({
           showCategory={props.showCategory}
           showBalance={!!props.balances}
           showCleared={props.showCleared}
+          scrollWidth={scrollWidth}
+          onSort={props.onSort}
+          ascDesc={props.ascDesc}
+          field={props.sortField}
         />
 
         {props.isAdding && (
@@ -1483,6 +1650,7 @@ function TransactionTableInner({
           isSelected={id => props.selectedItems.has(id)}
           onKeyDown={e => props.onCheckEnter(e)}
           onScroll={onScroll}
+          saveScrollWidth={saveScrollWidth}
         />
 
         {props.isAdding && (
@@ -1574,7 +1742,6 @@ export let TransactionTable = forwardRef((props, ref) => {
   let savePending = useRef(false);
   let afterSaveFunc = useRef(false);
   let [_, forceRerender] = useState({});
-
   let selectedItems = useSelectedItems();
 
   useLayoutEffect(() => {
diff --git a/upcoming-release-notes/1232.md b/upcoming-release-notes/1232.md
new file mode 100644
index 00000000000..a9e0650261d
--- /dev/null
+++ b/upcoming-release-notes/1232.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Added transaction sorting on the Account page. Uses current action as well as previous action to sort. Also adjusted the functionality and interactions of filters and searches with the sorting.