diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png
index 2f01d4b21a4..8b6fb7dfc07 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png
index 2619303ee1f..e821884d439 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png
index e91f7df9a86..986929ddd5d 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/accounts/Header.tsx b/packages/desktop-client/src/components/accounts/Header.tsx
index c45ae73eb1c..4a66ebc45de 100644
--- a/packages/desktop-client/src/components/accounts/Header.tsx
+++ b/packages/desktop-client/src/components/accounts/Header.tsx
@@ -369,7 +369,7 @@ export function AccountHeader({
               onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
             />
           )}
-          <View>
+          <View style={{ flex: '0 0 auto' }}>
             {account && (
               <>
                 <Button
@@ -427,7 +427,7 @@ export function AccountHeader({
             </View>
           </Button>
           {account ? (
-            <View>
+            <View style={{ flex: '0 0 auto' }}>
               <MenuButton
                 aria-label="Account menu"
                 ref={triggerRef}
@@ -456,7 +456,7 @@ export function AccountHeader({
               </Popover>
             </View>
           ) : (
-            <View>
+            <View style={{ flex: '0 0 auto' }}>
               <MenuButton
                 aria-label="Account menu"
                 ref={triggerRef}
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 4d3b53e7a04..bdd3f55a54d 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, type Ref, useRef, useState } from 'react';
+import React, { type CSSProperties, type Ref, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -7,7 +7,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -50,9 +50,9 @@ export function SidebarCategory({
   const { t } = useTranslation();
 
   const temporary = category.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -66,11 +66,7 @@ export function SidebarCategory({
         height: 20,
       }}
       ref={triggerRef}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <div
         data-testid="category-name"
@@ -88,7 +84,10 @@ export function SidebarCategory({
           variant="bare"
           className="hover-visible"
           style={{ color: 'currentColor', padding: 3 }}
-          onPress={() => setMenuOpen(true)}
+          onPress={() => {
+            resetPosition();
+            setMenuOpen(true);
+          }}
         >
           <SvgCheveronDown
             width={14}
@@ -102,8 +101,9 @@ export function SidebarCategory({
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          {...position}
         >
           <Menu
             onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index 20a81eba986..87e6eaad4d2 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -1,8 +1,9 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, useRef, useState } from 'react';
+import React, { type CSSProperties, useRef } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
@@ -58,9 +59,9 @@ export function SidebarGroup({
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
 
   const temporary = group.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -75,11 +76,7 @@ export function SidebarGroup({
       onClick={() => {
         onToggleCollapse(group.id);
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -111,7 +108,10 @@ export function SidebarGroup({
             <Button
               variant="bare"
               className="hover-visible"
-              onPress={() => setMenuOpen(true)}
+              onPress={() => {
+                resetPosition();
+                setMenuOpen(true);
+              }}
               style={{ padding: 3 }}
             >
               <SvgCheveronDown width={14} height={14} />
@@ -122,8 +122,9 @@ export function SidebarGroup({
               placement="bottom start"
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
-              style={{ width: 200 }}
+              style={{ width: 200, margin: 1 }}
               isNonModal
+              {...position}
             >
               <Menu
                 onMenuSelect={type => {
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 78a42e0fd8d..0bb0491a2d8 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -3,7 +3,6 @@ import React, {
   type CSSProperties,
   memo,
   useRef,
-  useState,
 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -14,7 +13,7 @@ import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
-import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../../hooks/useContextMenu';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
@@ -207,8 +206,20 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
   const budgetMenuTriggerRef = useRef(null);
   const balanceMenuTriggerRef = useRef(null);
-  const [budgetMenuOpen, setBudgetMenuOpen] = useState(false);
-  const [balanceMenuOpen, setBalanceMenuOpen] = useState(false);
+  const {
+    setMenuOpen: setBudgetMenuOpen,
+    menuOpen: budgetMenuOpen,
+    handleContextMenu: handleBudgetContextMenu,
+    resetPosition: resetBudgetPosition,
+    position: budgetPosition,
+  } = useContextMenu();
+  const {
+    setMenuOpen: setBalanceMenuOpen,
+    menuOpen: balanceMenuOpen,
+    handleContextMenu: handleBalanceContextMenu,
+    resetPosition: resetBalancePosition,
+    position: balancePosition,
+  } = useContextMenu();
 
   const onMenuAction = (...args: Parameters<typeof onBudgetAction>) => {
     onBudgetAction(...args);
@@ -216,7 +227,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   };
 
   const { showUndoNotification } = useUndo();
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <View
@@ -236,15 +246,14 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       }}
     >
       <View
+        ref={budgetMenuTriggerRef}
         style={{
           flex: 1,
           flexDirection: 'row',
         }}
         onContextMenu={e => {
-          if (!contextMenusEnabled) return;
           if (editing) return;
-          e.preventDefault();
-          setBudgetMenuOpen(true);
+          handleBudgetContextMenu(e);
         }}
       >
         {!editing && (
@@ -261,9 +270,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             }}
           >
             <Button
-              ref={budgetMenuTriggerRef}
               variant="bare"
-              onPress={() => setBudgetMenuOpen(true)}
+              onPress={() => {
+                resetBudgetPosition(2, -4);
+                setBudgetMenuOpen(true);
+              }}
               style={{
                 padding: 3,
               }}
@@ -278,11 +289,12 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
             <Popover
               triggerRef={budgetMenuTriggerRef}
-              placement="bottom start"
+              placement="bottom left"
               isOpen={budgetMenuOpen}
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
               isNonModal
+              {...budgetPosition}
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -392,18 +404,25 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         </span>
       </Field>
       <Field
+        ref={balanceMenuTriggerRef}
         name="balance"
         width="flex"
         style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
       >
         <span
-          ref={balanceMenuTriggerRef}
-          onClick={() => setBalanceMenuOpen(true)}
-          onContextMenu={e => {
-            if (!contextMenusEnabled) return;
-            e.preventDefault();
+          onClick={() => {
+            resetBalancePosition(-6, -4);
             setBalanceMenuOpen(true);
           }}
+          onContextMenu={e => {
+            handleBalanceContextMenu(e);
+            // We need to calculate differently from the hook ue to being aligned to the right
+            const rect = e.currentTarget.getBoundingClientRect();
+            resetBalancePosition(
+              e.clientX - rect.right + 200 - 8,
+              e.clientY - rect.bottom - 8,
+            );
+          }}
         >
           <BalanceWithCarryover
             carryover={envelopeBudget.catCarryover(category.id)}
@@ -419,8 +438,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           placement="bottom end"
           isOpen={balanceMenuOpen}
           onOpenChange={() => setBalanceMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          {...balancePosition}
         >
           <BalanceMovementMenu
             categoryId={category.id}
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
index 09316daae98..343de06d6ba 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,13 +1,13 @@
 import React, {
-  useRef,
-  useState,
   type CSSProperties,
   useCallback,
+  useRef,
+  useState,
 } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../../../hooks/useContextMenu';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { CoverMenu } from '../CoverMenu';
@@ -34,79 +34,88 @@ export function ToBudget({
   amountStyle,
   isCollapsed = false,
 }: ToBudgetProps) {
-  const [menuOpen, _setMenuOpen] = useState<string | null>(null);
+  const [menuStep, _setMenuStep] = useState<string>('actions');
   const triggerRef = useRef(null);
 
   const ref = useRef<HTMLSpanElement>(null);
-  const setMenuOpen = useCallback(
-    (menu: string | null) => {
+  const setMenuStep = useCallback(
+    (menu: string) => {
       if (menu) ref.current?.focus();
-      _setMenuOpen(menu);
+      _setMenuStep(menu);
     },
-    [ref],
+    [ref, _setMenuStep],
   );
-  const sheetValue = useEnvelopeSheetValue({
+  const availableValue = useEnvelopeSheetValue({
     name: envelopeBudget.toBudget,
     value: 0,
   });
-  const availableValue = sheetValue;
   if (typeof availableValue !== 'number' && availableValue !== null) {
     throw new Error(
       'Expected availableValue to be a number but got ' + availableValue,
     );
   }
-  const isMenuOpen = Boolean(menuOpen);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
+
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <>
       <View ref={triggerRef}>
         <ToBudgetAmount
-          onClick={() => setMenuOpen('actions')}
+          onClick={() => {
+            resetPosition();
+            setMenuOpen(true);
+          }}
           prevMonthName={prevMonthName}
           style={style}
           amountStyle={amountStyle}
-          isTotalsListTooltipDisabled={!isCollapsed || isMenuOpen}
-          onContextMenu={e => {
-            if (!contextMenusEnabled) return;
-            e.preventDefault();
-            setMenuOpen('actions');
-          }}
+          isTotalsListTooltipDisabled={!isCollapsed || asContextMenu}
+          onContextMenu={handleContextMenu}
         />
       </View>
 
       <Popover
         triggerRef={triggerRef}
-        placement="bottom"
-        isOpen={isMenuOpen}
-        onOpenChange={() => setMenuOpen(null)}
-        style={{ width: 200 }}
+        placement={asContextMenu ? 'bottom start' : 'bottom'}
+        isOpen={menuOpen}
+        onOpenChange={() => {
+          setMenuStep('actions');
+          setMenuOpen(false);
+        }}
+        style={{ width: 200, margin: 1 }}
         isNonModal
+        {...position}
       >
         <span tabIndex={-1} ref={ref}>
-          {menuOpen === 'actions' && (
+          {menuStep === 'actions' && (
             <ToBudgetMenu
-              onTransfer={() => setMenuOpen('transfer')}
-              onCover={() => setMenuOpen('cover')}
-              onHoldBuffer={() => setMenuOpen('buffer')}
+              onTransfer={() => setMenuStep('transfer')}
+              onCover={() => setMenuStep('cover')}
+              onHoldBuffer={() => setMenuStep('buffer')}
               onResetHoldBuffer={() => {
                 onBudgetAction(month, 'reset-hold');
-                setMenuOpen(null);
+                setMenuOpen(false);
               }}
             />
           )}
-          {menuOpen === 'buffer' && (
+          {menuStep === 'buffer' && (
             <HoldMenu
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={amount => {
                 onBudgetAction(month, 'hold', { amount });
               }}
             />
           )}
-          {menuOpen === 'transfer' && (
+          {menuStep === 'transfer' && (
             <TransferMenu
               initialAmount={availableValue ?? undefined}
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={(amount, categoryId) => {
                 onBudgetAction(month, 'transfer-available', {
                   amount,
@@ -115,10 +124,10 @@ export function ToBudget({
               }}
             />
           )}
-          {menuOpen === 'cover' && (
+          {menuStep === 'cover' && (
             <CoverMenu
               showToBeBudgeted={false}
-              onClose={() => setMenuOpen(null)}
+              onClose={() => setMenuOpen(false)}
               onSubmit={categoryId => {
                 onBudgetAction(month, 'cover-overbudgeted', {
                   category: categoryId,
diff --git a/packages/desktop-client/src/components/common/Popover.tsx b/packages/desktop-client/src/components/common/Popover.tsx
index 79fe2e3f8f0..c844c5b9c9b 100644
--- a/packages/desktop-client/src/components/common/Popover.tsx
+++ b/packages/desktop-client/src/components/common/Popover.tsx
@@ -41,6 +41,7 @@ export const Popover = ({
         ...styles.tooltip,
         ...styles.lightScrollbar,
         padding: 0,
+        userSelect: 'none',
         ...style,
       })}
       shouldCloseOnInteractOutside={element => {
diff --git a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
index dce345a3da8..5392c1a435e 100644
--- a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
@@ -1,10 +1,10 @@
 // @ts-strict-ignore
-import { memo, useRef, useState, type CSSProperties } from 'react';
+import { memo, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { type PayeeEntity } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgArrowThinRight, SvgBookmark } from '../../icons/v1';
 import { theme } from '../../style';
@@ -111,10 +111,8 @@ export const PayeeTableRow = memo(
     const { t } = useTranslation();
 
     const triggerRef = useRef(null);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [crossOffset, setCrossOffset] = useState(0);
-    const [offset, setOffset] = useState(0);
-    const contextMenusEnabled = useFeatureFlag('contextMenus');
+    const { setMenuOpen, menuOpen, handleContextMenu, position } =
+      useContextMenu();
 
     return (
       <Row
@@ -137,22 +135,14 @@ export const PayeeTableRow = memo(
         }}
         data-focus-key={payee.id}
         onMouseEnter={() => onHover && onHover(payee.id)}
-        onContextMenu={e => {
-          if (!contextMenusEnabled) return;
-          e.preventDefault();
-          setMenuOpen(true);
-          const rect = e.currentTarget.getBoundingClientRect();
-          setCrossOffset(e.clientX - rect.left);
-          setOffset(e.clientY - rect.bottom);
-        }}
+        onContextMenu={handleContextMenu}
       >
         <Popover
           triggerRef={triggerRef}
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          crossOffset={crossOffset}
-          offset={offset}
+          {...position}
           style={{ width: 200, margin: 1 }}
           isNonModal
         >
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index e477e6e3491..a743ac84462 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -137,7 +137,6 @@ export function ChooseGraph({
     return (
       <DonutGraph
         style={graphStyle}
-        compact={compact}
         data={data}
         filters={filters}
         groupBy={groupBy}
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index 42d3dcb22bf..4dae3d6d88b 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -38,16 +38,38 @@ const ActiveShapeMobile = props => {
   } = props;
   const yAxis = payload.name ?? payload.date;
 
+  const sin = Math.sin(-RADIAN * 240);
+  const my = cy + outerRadius * sin;
+  const ey = my - 5;
+
   return (
     <g>
-      <text x={cx} y={cy + 70} dy={-8} textAnchor="middle" fill={fill}>
+      <text
+        x={cx}
+        y={cy + outerRadius * Math.sin(-RADIAN * 270) + 15}
+        dy={0}
+        textAnchor="middle"
+        fill={fill}
+      >
         {`${yAxis}`}
       </text>
       <PrivacyFilter>
-        <text x={cx - 40} y={cy + 40} dy={0} textAnchor="end" fill={fill}>
+        <text
+          x={cx + outerRadius * Math.cos(-RADIAN * 240) - 30}
+          y={ey}
+          dy={0}
+          textAnchor="end"
+          fill={fill}
+        >
           {`${amountToCurrency(value)}`}
         </text>
-        <text x={cx + 45} y={cy + 40} dy={0} textAnchor="start" fill="#999">
+        <text
+          x={cx + outerRadius * Math.cos(-RADIAN * 330) + 10}
+          y={ey}
+          dy={0}
+          textAnchor="start"
+          fill="#999"
+        >
           {`${(percent * 100).toFixed(2)}%`}
         </text>
       </PrivacyFilter>
@@ -184,7 +206,6 @@ type DonutGraphProps = {
   filters: RuleConditionEntity[];
   groupBy: string;
   balanceTypeOp: balanceTypeOpType;
-  compact?: boolean;
   viewLabels: boolean;
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
@@ -197,7 +218,6 @@ export function DonutGraph({
   filters,
   groupBy,
   balanceTypeOp,
-  compact,
   viewLabels,
   showHiddenCategories,
   showOffBudget,
@@ -211,7 +231,7 @@ export function DonutGraph({
   const accounts = useAccounts();
   const [pointer, setPointer] = useState('');
 
-  const getVal = obj => {
+  const getVal = (obj: DataEntity) => {
     if (['totalDebts', 'netDebts'].includes(balanceTypeOp)) {
       return -1 * obj[balanceTypeOp];
     } else {
@@ -221,71 +241,82 @@ export function DonutGraph({
 
   const [activeIndex, setActiveIndex] = useState(0);
 
+  // Sort the data in the pie chart
+  const unsortedData = data[splitData];
+  const sortedData = unsortedData.slice().sort((a, b) => getVal(b) - getVal(a));
+
   return (
-    <Container
-      style={{
-        ...style,
-        ...(compact && { height: 'auto' }),
-      }}
-    >
-      {(width, height) =>
-        data[splitData] && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <PieChart
-                width={width}
-                height={height}
-                style={{ cursor: pointer }}
-              >
-                <Pie
-                  activeIndex={activeIndex}
-                  activeShape={compact ? ActiveShapeMobile : ActiveShape}
-                  dataKey={val => getVal(val)}
-                  nameKey={yAxis}
-                  isAnimationActive={false}
-                  data={data[splitData]}
-                  innerRadius={Math.min(width, height) * 0.2}
-                  fill="#8884d8"
-                  labelLine={false}
-                  label={e =>
-                    viewLabels && !compact ? customLabel(e) : <div />
-                  }
-                  onMouseLeave={() => setPointer('')}
-                  onMouseEnter={(_, index) => {
-                    setActiveIndex(index);
-                    if (!['Group', 'Interval'].includes(groupBy)) {
-                      setPointer('pointer');
-                    }
-                  }}
-                  onClick={item =>
-                    ((compact && showTooltip) || !compact) &&
-                    !['Group', 'Interval'].includes(groupBy) &&
-                    showActivity({
-                      navigate,
-                      categories,
-                      accounts,
-                      balanceTypeOp,
-                      filters,
-                      showHiddenCategories,
-                      showOffBudget,
-                      type: 'totals',
-                      startDate: data.startDate,
-                      endDate: data.endDate,
-                      field: groupBy.toLowerCase(),
-                      id: item.id,
-                    })
-                  }
+    <Container style={style}>
+      {(width, height) => {
+        const compact = height <= 300 || width <= 300;
+
+        return (
+          sortedData && (
+            <ResponsiveContainer>
+              <div>
+                {!compact && <div style={{ marginTop: '15px' }} />}
+                <PieChart
+                  width={width}
+                  height={height}
+                  style={{ cursor: pointer }}
                 >
-                  {data.legend.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-              </PieChart>
-            </div>
-          </ResponsiveContainer>
-        )
-      }
+                  <Pie
+                    activeIndex={activeIndex}
+                    activeShape={
+                      width < 220 || height < 130
+                        ? undefined
+                        : compact
+                          ? ActiveShapeMobile
+                          : ActiveShape
+                    }
+                    dataKey={val => getVal(val)}
+                    nameKey={yAxis}
+                    isAnimationActive={false}
+                    data={sortedData}
+                    innerRadius={Math.min(width, height) * 0.2}
+                    fill="#8884d8"
+                    labelLine={false}
+                    label={e =>
+                      viewLabels && !compact ? customLabel(e) : <div />
+                    }
+                    startAngle={90}
+                    endAngle={-270}
+                    onMouseLeave={() => setPointer('')}
+                    onMouseEnter={(_, index) => {
+                      setActiveIndex(index);
+                      if (!['Group', 'Interval'].includes(groupBy)) {
+                        setPointer('pointer');
+                      }
+                    }}
+                    onClick={item =>
+                      ((compact && showTooltip) || !compact) &&
+                      !['Group', 'Interval'].includes(groupBy) &&
+                      showActivity({
+                        navigate,
+                        categories,
+                        accounts,
+                        balanceTypeOp,
+                        filters,
+                        showHiddenCategories,
+                        showOffBudget,
+                        type: 'totals',
+                        startDate: data.startDate,
+                        endDate: data.endDate,
+                        field: groupBy.toLowerCase(),
+                        id: item.id,
+                      })
+                    }
+                  >
+                    {data.legend.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </div>
+            </ResponsiveContainer>
+          )
+        );
+      }}
     </Container>
   );
 }
diff --git a/packages/desktop-client/src/components/rules/RuleRow.tsx b/packages/desktop-client/src/components/rules/RuleRow.tsx
index 2c59dcac267..10b67f30320 100644
--- a/packages/desktop-client/src/components/rules/RuleRow.tsx
+++ b/packages/desktop-client/src/components/rules/RuleRow.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { v4 as uuid } from 'uuid';
@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 import { friendlyOp } from 'loot-core/src/shared/rules';
 import { type RuleEntity } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgRightArrow2 } from '../../icons/v0';
 import { styles, theme } from '../../style';
@@ -60,10 +60,8 @@ export const RuleRow = memo(
     const { t } = useTranslation();
 
     const triggerRef = useRef(null);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [crossOffset, setCrossOffset] = useState(0);
-    const [offset, setOffset] = useState(0);
-    const contextMenusEnabled = useFeatureFlag('contextMenus');
+    const { setMenuOpen, menuOpen, handleContextMenu, position } =
+      useContextMenu();
 
     return (
       <Row
@@ -82,22 +80,14 @@ export const RuleRow = memo(
         collapsed={true}
         onMouseEnter={() => onHover && onHover(rule.id)}
         onMouseLeave={() => onHover && onHover(null)}
-        onContextMenu={e => {
-          if (!contextMenusEnabled) return;
-          e.preventDefault();
-          setMenuOpen(true);
-          const rect = triggerRef.current.getBoundingClientRect();
-          setCrossOffset(e.clientX - rect.left);
-          setOffset(e.clientY - rect.bottom);
-        }}
+        onContextMenu={handleContextMenu}
       >
         <Popover
           triggerRef={triggerRef}
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          crossOffset={crossOffset}
-          offset={offset}
+          {...position}
           style={{ width: 200, margin: 1 }}
           isNonModal
         >
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
index 2d65f595667..e3a1782db6d 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -13,8 +13,8 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 import { type ScheduleEntity } from 'loot-core/src/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useDateFormat } from '../../hooks/useDateFormat';
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { usePayees } from '../../hooks/usePayees';
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { SvgCheck } from '../../icons/v2';
@@ -186,10 +186,14 @@ function ScheduleRow({
 
   const rowRef = useRef(null);
   const buttonRef = useRef(null);
-  const [open, setOpen] = useState<false | 'contextMenu' | 'button'>(false);
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
+  const {
+    setMenuOpen,
+    menuOpen,
+    handleContextMenu,
+    resetPosition,
+    position,
+    asContextMenu,
+  } = useContextMenu();
 
   return (
     <Row
@@ -203,25 +207,16 @@ function ScheduleRow({
         color: theme.tableText,
         ':hover': { backgroundColor: theme.tableRowBackgroundHover },
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        if (minimal) return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setOpen('contextMenu');
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!minimal && (
         <Popover
-          triggerRef={open === 'contextMenu' ? rowRef : buttonRef}
-          isOpen={!!open}
-          onOpenChange={() => setOpen(false)}
+          triggerRef={asContextMenu ? rowRef : buttonRef}
+          isOpen={menuOpen}
+          onOpenChange={() => setMenuOpen(false)}
           isNonModal
           placement="bottom start"
-          crossOffset={open === 'contextMenu' ? crossOffset : 0}
-          offset={open === 'contextMenu' ? offset : 0}
+          {...position}
           style={{ margin: 1 }}
         >
           <OverflowMenu
@@ -229,7 +224,8 @@ function ScheduleRow({
             status={statuses.get(schedule.id)}
             onAction={(action, id) => {
               onAction(action, id);
-              setOpen(false);
+              resetPosition();
+              setMenuOpen(false);
             }}
           />
         </Popover>
@@ -276,7 +272,8 @@ function ScheduleRow({
               variant="bare"
               aria-label={t('Menu')}
               onPress={() => {
-                setOpen('button');
+                resetPosition();
+                setMenuOpen(true);
               }}
             >
               <SvgDotsHorizontalTriple
diff --git a/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx b/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
index ea249b80273..8edf78716c2 100644
--- a/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
+++ b/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
@@ -46,7 +46,7 @@ export function BudgetTypeSettings() {
         relying on current available funds.{' '}
         <Link
           variant="external"
-          to="https://actualbudget.org/docs/experimental/tracking-budget"
+          to="https://actualbudget.org/docs/getting-started/tracking-budget"
           linkColor="purple"
         >
           {t('Learn more…')}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index c26fe412d02..34c684b4721 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -47,7 +47,7 @@ import {
   titleFirst,
 } from 'loot-core/src/shared/util';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useProperFocus } from '../../hooks/useProperFocus';
@@ -1048,10 +1048,8 @@ const Transaction = memo(function Transaction({
     }, 1);
   }, [splitError, allTransactions]);
 
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [crossOffset, setCrossOffset] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
+  const { setMenuOpen, menuOpen, handleContextMenu, position } =
+    useContextMenu();
 
   return (
     <Row
@@ -1081,23 +1079,14 @@ const Transaction = memo(function Transaction({
         }),
         ...(_unmatched && { opacity: 0.5 }),
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        if (transaction.id === 'temp') return;
-        e.preventDefault();
-        const rect = e.currentTarget.getBoundingClientRect();
-        setCrossOffset(e.clientX - rect.left);
-        setOffset(e.clientY - rect.bottom);
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <Popover
         triggerRef={triggerRef}
         placement="bottom start"
         isOpen={menuOpen}
         onOpenChange={() => setMenuOpen(false)}
-        crossOffset={crossOffset}
-        offset={offset}
+        {...position}
         style={{ width: 200, margin: 1 }}
         isNonModal
       >
diff --git a/packages/desktop-client/src/hooks/useContextMenu.ts b/packages/desktop-client/src/hooks/useContextMenu.ts
new file mode 100644
index 00000000000..69bbd0bd8ce
--- /dev/null
+++ b/packages/desktop-client/src/hooks/useContextMenu.ts
@@ -0,0 +1,40 @@
+import { type MouseEventHandler, useState } from 'react';
+
+import { useFeatureFlag } from './useFeatureFlag';
+
+export function useContextMenu() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [asContextMenu, setAsContextMenu] = useState(false);
+  const [position, setPosition] = useState({ crossOffset: 0, offset: 0 });
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
+
+  const handleContextMenu: MouseEventHandler<HTMLElement> = e => {
+    if (!contextMenusEnabled) return;
+
+    e.preventDefault();
+    setAsContextMenu(true);
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    setPosition({
+      crossOffset: e.clientX - rect.left,
+      offset: e.clientY - rect.bottom,
+    });
+    setMenuOpen(true);
+  };
+
+  const resetPosition = (crossOffset = 0, offset = 0) => {
+    setPosition({ crossOffset, offset });
+  };
+
+  return {
+    menuOpen,
+    setMenuOpen: (open: boolean) => {
+      setMenuOpen(open);
+      setAsContextMenu(false);
+    },
+    position,
+    handleContextMenu,
+    resetPosition,
+    asContextMenu,
+  };
+}
diff --git a/upcoming-release-notes/3775.md b/upcoming-release-notes/3775.md
new file mode 100644
index 00000000000..dc711646600
--- /dev/null
+++ b/upcoming-release-notes/3775.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Position context menus on the to budget page to the cursor, and make popovers non selectable.
diff --git a/upcoming-release-notes/3855.md b/upcoming-release-notes/3855.md
new file mode 100644
index 00000000000..028980feeff
--- /dev/null
+++ b/upcoming-release-notes/3855.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Dashboards: sort pie-chart according to balances; add more spacing for labels.
diff --git a/upcoming-release-notes/3880.md b/upcoming-release-notes/3880.md
new file mode 100644
index 00000000000..dd3d83f6601
--- /dev/null
+++ b/upcoming-release-notes/3880.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [ericji1326]
+---
+
+Fix bug where menu option icon disappearing completely on certain screen sizes.
diff --git a/upcoming-release-notes/3944.md b/upcoming-release-notes/3944.md
new file mode 100644
index 00000000000..5d73da1eeec
--- /dev/null
+++ b/upcoming-release-notes/3944.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [adamhl8]
+---
+
+Fix tracking budget docs link in settings.