diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png
index c71cd6e9ae9..bf4a7ada07d 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png
index b208341ad67..f78d7062d7c 100644
Binary files a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png
index a7a17f6d1c4..4ac36791ac1 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png
index ccfa191c10e..999ecf4a0da 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index bb4ec510d81..803866aea07 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png
index 9c8cd497cf4..9d4020aca1f 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png
index 114f554ada2..4aa4ae4c06d 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index fb2770d8400..366f7c2ea99 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = theme.pageBackgroundModalActive,
+  defaultColor = theme.buttonNormalText,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index cf0559b3347..622b9869b67 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -66,6 +66,7 @@ function SidebarCategory({
       <View style={{ flexShrink: 0, marginLeft: 5 }}>
         <Button
           type="bare"
+          className="hover-visible"
           onClick={e => {
             e.stopPropagation();
             setMenuOpen(true);
@@ -112,6 +113,7 @@ function SidebarCategory({
       <NotesButton
         id={category.id}
         style={dragging && { color: 'currentColor' }}
+        defaultColor={theme.pageTextLight}
       />
     </View>
   );
@@ -121,10 +123,15 @@ function SidebarCategory({
       innerRef={innerRef}
       style={{
         width: 200,
-        '& button': { display: 'none' },
+        overflow: 'hidden',
+        '& .hover-visible': {
+          display: 'none',
+        },
         ...(!dragging &&
           !dragPreview && {
-            '&:hover button': { display: 'flex', color: theme.tableTextHover },
+            '&:hover .hover-visible': {
+              display: 'flex',
+            },
           }),
         ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
         // The zIndex here forces the the view on top of a row below
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index ec839b62a15..a7a9a8ed120 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -95,6 +95,7 @@ function SidebarGroup({
           <View style={{ marginLeft: 5, flexShrink: 0 }}>
             <Button
               type="bare"
+              className="hover-visible"
               onClick={e => {
                 e.stopPropagation();
                 setMenuOpen(true);
@@ -137,7 +138,11 @@ function SidebarGroup({
             )}
           </View>
           <View style={{ flex: 1 }} />
-          <NotesButton id={group.id} />
+          <NotesButton
+            id={group.id}
+            style={dragPreview && { color: 'currentColor' }}
+            defaultColor={theme.pageTextLight}
+          />
         </>
       )}
     </View>
@@ -150,8 +155,15 @@ function SidebarGroup({
         ...style,
         width: 200,
         backgroundColor: theme.tableRowHeaderBackground,
-        '& button': { display: 'none' },
-        '&:hover button': { display: 'flex', color: theme.tableTextHover },
+        overflow: 'hidden',
+        '& .hover-visible': {
+          display: 'none',
+        },
+        ...(!dragPreview && {
+          '&:hover .hover-visible': {
+            display: 'flex',
+          },
+        }),
         ...(dragPreview && {
           paddingLeft: 10,
           zIndex: 10000,
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
index 58e18d32a0a..078a78913a3 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -126,7 +126,7 @@ export default function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={theme.pageTextSubdued} // notes page color
+                defaultColor={theme.pageTextLight}
               />
             </View>
             <View style={{ userSelect: 'none' }}>
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
index 16034382cca..59803286944 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.js
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -429,8 +429,8 @@ export function FilterButton({ onApply, compact, hover }) {
               style={{
                 lineHeight: 1.5,
                 padding: '6px 10px',
-                backgroundColor: theme.menuAutoCompleteBackground,
-                color: theme.menuAutoCompleteText,
+                backgroundColor: theme.menuBackground,
+                color: theme.menuItemText,
               }}
             >
               <Text>Filters</Text>
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 4dca723153a..ad71b87a1eb 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 
 import View from '../common/View';
 
+import { type DataEntity, type Month } from './entities';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -14,17 +15,28 @@ import ReportTableHeader from './ReportTableHeader';
 import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
+type ChooseGraphProps = {
+  data: DataEntity;
+  mode: string;
+  graphType: string;
+  balanceType: string;
+  groupBy: string;
+  showEmpty: boolean;
+  scrollWidth: number;
+  setScrollWidth: (value: number) => void;
+  months: Month[];
+};
 export function ChooseGraph({
   data,
   mode,
   graphType,
   balanceType,
   groupBy,
-  empty,
+  showEmpty,
   scrollWidth,
   setScrollWidth,
   months,
-}) {
+}: ChooseGraphProps) {
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -53,13 +65,12 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'DonutGraph') {
     return (
@@ -67,13 +78,12 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'LineGraph') {
-    return <LineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'StackedBarGraph') {
     return <StackedBarGraph style={{ flexGrow: 1 }} data={data} />;
@@ -94,7 +104,7 @@ export function ChooseGraph({
         >
           <ReportTableList
             data={data}
-            empty={empty}
+            empty={showEmpty}
             monthsCount={months.length}
             balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
             mode={mode}
diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
index d3857def566..50c50297dd6 100644
--- a/packages/desktop-client/src/components/reports/GraphButton.tsx
+++ b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -31,8 +31,8 @@ const GraphButton = ({
           style={{
             lineHeight: 1.5,
             padding: '6px 10px',
-            backgroundColor: theme.menuAutoCompleteBackground,
-            color: theme.menuAutoCompleteText,
+            backgroundColor: theme.menuBackground,
+            color: theme.menuItemText,
           }}
         >
           <Text>{title}</Text>
diff --git a/packages/desktop-client/src/components/reports/ReportOptions.tsx b/packages/desktop-client/src/components/reports/ReportOptions.tsx
index 69f0ef1626c..2642e634354 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.tsx
+++ b/packages/desktop-client/src/components/reports/ReportOptions.tsx
@@ -6,8 +6,8 @@ import {
 } from 'loot-core/src/types/models';
 
 const balanceTypeOptions = [
-  { description: 'Expense', format: 'totalDebts' },
-  { description: 'Income', format: 'totalAssets' },
+  { description: 'Payment', format: 'totalDebts' },
+  { description: 'Deposit', format: 'totalAssets' },
   { description: 'Net', format: 'totalTotals' },
 ];
 
@@ -21,10 +21,11 @@ const groupByOptions = [
 ];
 
 const dateRangeOptions = [
-  { description: '1 month', name: 1 },
-  { description: '3 months', name: 2 },
-  { description: '6 months', name: 5 },
-  { description: '1 year', name: 11 },
+  { description: 'This month', name: 0 },
+  { description: 'Last month', name: 1 },
+  { description: 'Last 3 months', name: 2 },
+  { description: 'Last 6 months', name: 5 },
+  { description: 'Last 12 months', name: 11 },
   { description: 'Year to date', name: 'yearToDate' },
   { description: 'Last year', name: 'lastYear' },
   { description: 'All time', name: 'allMonths' },
@@ -108,7 +109,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & {
   categories?: UncategorizedEntity[];
 };
 
-const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = {
+const uncategorizedGroup: UncategorizedGroupEntity = {
   name: 'Uncategorized & Off Budget',
   id: null,
   hidden: false,
@@ -122,7 +123,7 @@ export const categoryLists = (
 ) => {
   const categoryList = showUncategorized
     ? [
-        ...categories.list,
+        ...categories.list.filter(f => showOffBudgetHidden || !f.hidden),
         uncategorizedCategory,
         transferCategory,
         offBudgetCategory,
@@ -131,7 +132,7 @@ export const categoryLists = (
   const categoryGroup = showUncategorized
     ? [
         ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategouncatGrouprizedGroup,
+        uncategorizedGroup,
       ]
     : categories.grouped;
   return [categoryList, categoryGroup] as const;
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js
index 5f22d0a13c7..c95c79ad595 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.js
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.js
@@ -46,8 +46,8 @@ function ModeButton({ selected, children, style, onSelect }) {
 }
 
 export function ReportSidebar({
-  start,
-  end,
+  startDate,
+  endDate,
   onChangeDates,
   dateRange,
   setDateRange,
@@ -64,12 +64,12 @@ export function ReportSidebar({
   setBalanceType,
   mode,
   setMode,
-  empty,
-  setEmpty,
-  hidden,
-  setHidden,
-  uncat,
-  setUncat,
+  showEmpty,
+  setShowEmpty,
+  showOffBudgetHidden,
+  setShowOffBudgetHidden,
+  showUncategorized,
+  setShowUncategorized,
   categories,
   selectedCategories,
   setSelectedCategories,
@@ -114,7 +114,7 @@ export function ReportSidebar({
       } else {
         setTypeDisabled(['Net']);
         if (['Net'].includes(balanceType)) {
-          setBalanceType('Expense');
+          setBalanceType('Payment');
         }
       }
       if (graphType === 'BarGraph') {
@@ -144,7 +144,7 @@ export function ReportSidebar({
       }
     }
     if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
-      setBalanceType('Expense');
+      setBalanceType('Payment');
     }
   };
 
@@ -274,9 +274,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-empty-columns"
-            checked={empty}
-            value={empty}
-            onChange={() => setEmpty(!empty)}
+            checked={showEmpty}
+            value={showEmpty}
+            onChange={() => setShowEmpty(!showEmpty)}
           />
           <label
             htmlFor="show-empty-columns"
@@ -297,9 +297,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-hidden-columns"
-            checked={hidden}
-            value={hidden}
-            onChange={() => setHidden(!hidden)}
+            checked={showOffBudgetHidden}
+            value={showOffBudgetHidden}
+            onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
           />
           <label
             htmlFor="show-hidden-columns"
@@ -320,9 +320,9 @@ export function ReportSidebar({
 
           <Checkbox
             id="show-uncategorized"
-            checked={uncat}
-            value={uncat}
-            onChange={() => setUncat(!uncat)}
+            checked={showUncategorized}
+            value={showUncategorized}
+            onChange={() => setShowUncategorized(!showUncategorized)}
           />
           <label
             htmlFor="show-uncategorized"
@@ -387,10 +387,10 @@ export function ReportSidebar({
           </Text>
           <Select
             onChange={newValue =>
-              onChangeDates(...validateStart(allMonths, newValue, end))
+              onChangeDates(...validateStart(allMonths, newValue, endDate))
             }
-            value={start}
-            defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
+            value={startDate}
+            defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
             options={allMonths.map(({ name, pretty }) => [name, pretty])}
           />
         </View>
@@ -406,9 +406,9 @@ export function ReportSidebar({
           </Text>
           <Select
             onChange={newValue =>
-              onChangeDates(...validateEnd(allMonths, start, newValue))
+              onChangeDates(...validateEnd(allMonths, startDate, newValue))
             }
-            value={end}
+            value={endDate}
             options={allMonths.map(({ name, pretty }) => [name, pretty])}
           />
         </View>
diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js
index cfe2e5b7090..892bab6f792 100644
--- a/packages/desktop-client/src/components/reports/ReportSummary.js
+++ b/packages/desktop-client/src/components/reports/ReportSummary.js
@@ -13,13 +13,16 @@ import View from '../common/View';
 import PrivacyFilter from '../PrivacyFilter';
 
 export function ReportSummary({
-  start,
-  end,
+  startDate,
+  endDate,
   data,
   balanceTypeOp,
   monthsCount,
 }) {
-  const net = data.totalDebts > data.totalAssets ? 'EXPENSE' : 'INCOME';
+  const net =
+    Math.abs(data.totalDebts) > Math.abs(data.totalAssets)
+      ? 'PAYMENT'
+      : 'DEPOSIT';
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
     <View
@@ -46,8 +49,8 @@ export function ReportSummary({
             },
           ]}
         >
-          {monthUtils.format(start, 'MMM yyyy')} -{' '}
-          {monthUtils.format(end, 'MMM yyyy')}
+          {monthUtils.format(startDate, 'MMM yyyy')} -{' '}
+          {monthUtils.format(endDate, 'MMM yyyy')}
         </Text>
       </View>
       <View
@@ -72,7 +75,7 @@ export function ReportSummary({
           {balanceTypeOp === 'totalDebts'
             ? 'TOTAL SPENDING'
             : balanceTypeOp === 'totalAssets'
-            ? 'TOTAL INCOME'
+            ? 'TOTAL DEPOSITS'
             : 'NET ' + net}
         </Text>
         <Text
@@ -113,7 +116,7 @@ export function ReportSummary({
           {balanceTypeOp === 'totalDebts'
             ? 'AVERAGE SPENDING'
             : balanceTypeOp === 'totalAssets'
-            ? 'AVERAGE INCOME'
+            ? 'AVERAGE DEPOSIT'
             : 'AVERAGE NET'}
         </Text>
         <Text
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index a2aaee9f506..983495d7370 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -6,10 +6,12 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type Month } from './entities';
+
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: Array<string>;
+  interval?: Month[];
   balanceType: string;
   headerScrollRef?: Ref<HTMLDivElement>;
 };
@@ -50,14 +52,14 @@ export default function ReportTableHeader({
           width="flex"
         />
         {interval
-          ? interval.map(header => {
+          ? interval.map((header, index) => {
               return (
                 <Cell
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  key={header}
+                  key={index}
                   // eslint-disable-next-line rulesdir/typography
                   value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
                   width="flex"
@@ -71,7 +73,7 @@ export default function ReportTableHeader({
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  value={'Assets'}
+                  value={'Deposits'}
                   width="flex"
                 />
                 <Cell
@@ -79,7 +81,7 @@ export default function ReportTableHeader({
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  value={'Debts'}
+                  value={'Payments'}
                   width="flex"
                 />
               </>
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index f60a91b5ab5..daf758ac335 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { type UIEventHandler } from 'react';
+import { type RefProp } from 'react-spring';
 
 import {
   amountToCurrency,
@@ -10,6 +11,18 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type DataEntity } from './entities';
+
+type ReportTableTotalsProps = {
+  data: DataEntity;
+  scrollWidth?: number;
+  balanceTypeOp: string;
+  mode: string;
+  monthsCount: number;
+  totalScrollRef: RefProp<HTMLDivElement>;
+  handleScrollTotals: UIEventHandler<HTMLDivElement>;
+};
+
 export default function ReportTableTotals({
   data,
   scrollWidth,
@@ -18,7 +31,7 @@ export default function ReportTableTotals({
   monthsCount,
   totalScrollRef,
   handleScrollTotals,
-}) {
+}: ReportTableTotalsProps) {
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
     <View
diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.js b/packages/desktop-client/src/components/reports/ReportTopbar.js
index 61abf5de09b..c623a520327 100644
--- a/packages/desktop-client/src/components/reports/ReportTopbar.js
+++ b/packages/desktop-client/src/components/reports/ReportTopbar.js
@@ -59,13 +59,13 @@ export function ReportTopbar({
           if (mode === 'total') {
             setGraphType('BarGraph');
             if (['Net'].includes(balanceType)) {
-              setBalanceType('Expense');
+              setBalanceType('Payment');
             }
             setTypeDisabled(['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
           } else {
             setGraphType('StackedBarGraph');
             setTypeDisabled(['Net']);
-            setBalanceType('Expense');
+            setBalanceType('Payment');
           }
         }}
         style={{ marginRight: 15 }}
@@ -92,7 +92,7 @@ export function ReportTopbar({
         onSelect={() => {
           setGraphType('DonutGraph');
           setTypeDisabled(['Net']);
-          setBalanceType('Expense');
+          setBalanceType('Payment');
         }}
         style={{ marginRight: 15 }}
         disabled={mode === 'total' ? false : true}
diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
index 20f2af6b27e..1f1a481708f 100644
--- a/packages/desktop-client/src/components/reports/Tooltip.js
+++ b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -58,10 +58,8 @@ class Tooltip extends Component {
             borderRadius: 2,
             boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
             // TODO: Transparent background
-            backgroundColor: light
-              ? 'transparent'
-              : theme.menuAutoCompleteBackground,
-            color: light ? 'inherit' : theme.menuAutoCompleteText,
+            backgroundColor: light ? 'transparent' : theme.menuBackground,
+            color: light ? 'inherit' : theme.menuItemText,
             padding: 10,
           },
           !light &&
@@ -71,7 +69,7 @@ class Tooltip extends Component {
               borderTop: '7px solid transparent',
               borderBottom: '7px solid transparent',
               [position === 'right' ? 'borderRight' : 'borderLeft']:
-                '7px solid ' + theme.menuAutoCompleteBackground,
+                '7px solid ' + theme.menuBackground,
               [position === 'right' ? 'left' : 'right']: -6,
               top: 'calc(50% - 7px)',
               // eslint-disable-next-line rulesdir/typography
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
new file mode 100644
index 00000000000..cbd01affb52
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -0,0 +1,44 @@
+export type DataEntity = {
+  data: Array<ItemEntity>;
+  monthData: Array<MonthData>;
+  groupedData: Array<GroupedEntity>;
+  startDate: string;
+  endDate: string;
+  totalDebts: number;
+  totalAssets: number;
+  totalTotals: number;
+};
+
+type ItemEntity = {
+  id: string;
+  name: string;
+  monthData: MonthData[];
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+type MonthData = {
+  date: string;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+/* this will be used in a future PR
+
+export type GroupedEntity = {
+  id: string;
+  name: string;
+  date?: string;
+  monthData: Array<MonthData>;
+  categories?: Array<ItemEntity>;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+*/
+
+export type Month = {
+  month: string;
+};
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index 50022af9df1..3c349f9d47c 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -19,6 +19,7 @@ import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -49,8 +50,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
@@ -92,7 +93,7 @@ const CustomTooltip = ({
 
 type AreaGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   balanceTypeOp: string;
   compact?: boolean;
 };
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index dd8b5558e83..f46ecfda65a 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -23,6 +23,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -66,8 +67,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
@@ -129,10 +130,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type BarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp;
-  empty: boolean;
   compact?: boolean;
 };
 
@@ -140,7 +140,6 @@ function BarGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: BarGraphProps) {
@@ -178,9 +177,7 @@ function BarGraph({
                 width={width}
                 height={height}
                 stackOffset="sign"
-                data={data[splitData].filter(i =>
-                  !empty ? i[balanceTypeOp] !== 0 : true,
-                )}
+                data={data[splitData]}
                 margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
               >
                 {
@@ -218,33 +215,29 @@ function BarGraph({
                   <ReferenceLine y={0} stroke={theme.pageTextLight} />
                 )}
                 <Bar dataKey={val => getVal(val)} stackId="a">
-                  {data[splitData]
-                    .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                    .map((entry, index) => (
+                  {data[splitData].map((entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={
+                        yAxis === 'date'
+                          ? balanceTypeOp === 'totalDebts'
+                            ? theme.reportsRed
+                            : theme.reportsBlue
+                          : colorScale[index % colorScale.length]
+                      }
+                      name={entry[yAxis]}
+                    />
+                  ))}
+                </Bar>
+                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
+                  <Bar dataKey={'totalDebts'} stackId="a">
+                    {data[splitData].map((entry, index) => (
                       <Cell
                         key={`cell-${index}`}
-                        fill={
-                          yAxis === 'date'
-                            ? balanceTypeOp === 'totalDebts'
-                              ? theme.reportsRed
-                              : theme.reportsBlue
-                            : colorScale[index % colorScale.length]
-                        }
-                        name={entry[yAxis]}
+                        fill={theme.reportsRed}
+                        name={entry.name}
                       />
                     ))}
-                </Bar>
-                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
-                  <Bar dataKey={'totalDebts'} stackId="a">
-                    {data[splitData]
-                      .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                      .map((entry, index) => (
-                        <Cell
-                          key={`cell-${index}`}
-                          fill={theme.reportsRed}
-                          name={entry.name}
-                        />
-                      ))}
                   </Bar>
                 )}
               </BarChart>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 816ffc8d532..6378969ef99 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -44,8 +44,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index a8ad506a00e..87b42a9d520 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -18,6 +18,7 @@ import Text from '../../common/Text';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -49,8 +50,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
@@ -94,10 +95,9 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type DonutGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp: string;
-  empty: boolean;
   compact?: boolean;
 };
 
@@ -105,7 +105,6 @@ function DonutGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: DonutGraphProps) {
@@ -146,9 +145,7 @@ function DonutGraph({
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   isAnimationActive={false}
-                  data={data[splitData].filter(i =>
-                    !empty ? i[balanceTypeOp] !== 0 : true,
-                  )}
+                  data={data[splitData]}
                   innerRadius={Math.min(width, height) * 0.2}
                   fill="#8884d8"
                 >
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index 069082c2630..419e0a2e612 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -43,8 +43,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index eed4baff05c..d17e37ac1a2 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -79,8 +79,8 @@ function NetWorthGraph({
               pointerEvents: 'none',
               borderRadius: 2,
               boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-              backgroundColor: theme.menuAutoCompleteBackground,
-              color: theme.menuAutoCompleteText,
+              backgroundColor: theme.menuBackground,
+              color: theme.menuItemText,
               padding: 10,
             },
             style,
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 37e2b3ea41c..bb080e4485e 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -21,6 +21,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -50,8 +51,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >
@@ -115,7 +116,7 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type StackedBarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   compact?: boolean;
 };
 
@@ -164,7 +165,7 @@ function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) {
                 )}
                 {data.data.reverse().map((c, index) => (
                   <Bar
-                    key={c.date}
+                    key={c.name}
                     dataKey={c.name}
                     stackId="a"
                     fill={colorScale[index % colorScale.length]}
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlow.js b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
similarity index 96%
rename from packages/desktop-client/src/components/reports/reports/CashFlow.js
rename to packages/desktop-client/src/components/reports/reports/CashFlow.tsx
index 1b57e1424ca..7c782c0e8d0 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
@@ -20,7 +20,7 @@ import Header from '../Header';
 import { cashFlowByDate } from '../spreadsheets/cash-flow-spreadsheet';
 import useReport from '../useReport';
 
-function CashFlow() {
+export default function CashFlow(): JSX.Element {
   const {
     filters,
     conditionsOp,
@@ -108,8 +108,9 @@ function CashFlow() {
         onDeleteFilter={onDeleteFilter}
         conditionsOp={conditionsOp}
         onCondOpChange={onCondOpChange}
+        headerPrefixItems={undefined}
+        selectGraph={undefined}
       />
-
       <View
         style={{
           backgroundColor: theme.tableBackground,
@@ -167,12 +168,7 @@ function CashFlow() {
           </Text>
         </View>
 
-        <CashFlowGraph
-          start={start}
-          end={end}
-          graphData={graphData}
-          isConcise={isConcise}
-        />
+        <CashFlowGraph graphData={graphData} isConcise={isConcise} />
 
         <View style={{ marginTop: 30 }}>
           <Paragraph>
@@ -189,5 +185,3 @@ function CashFlow() {
     </View>
   );
 }
-
-export default CashFlow;
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index a8d1f3a42cf..55347a8e54c 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -44,18 +44,18 @@ export default function CustomReport() {
   const [selectedCategories, setSelectedCategories] = useState(null);
   const [allMonths, setAllMonths] = useState(null);
   const [typeDisabled, setTypeDisabled] = useState(['Net']);
-  const [start, setStart] = useState(
+  const [startDate, setStartDate] = useState(
     monthUtils.subMonths(monthUtils.currentMonth(), 5),
   );
-  const [end, setEnd] = useState(monthUtils.currentMonth());
+  const [endDate, setEndDate] = useState(monthUtils.currentMonth());
 
   const [mode, setMode] = useState('total');
   const [groupBy, setGroupBy] = useState('Category');
-  const [balanceType, setBalanceType] = useState('Expense');
-  const [empty, setEmpty] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [uncat, setUncat] = useState(false);
-  const [dateRange, setDateRange] = useState('6 months');
+  const [balanceType, setBalanceType] = useState('Payment');
+  const [showEmpty, setShowEmpty] = useState(false);
+  const [showOffBudgetHidden, setShowOffBudgetHidden] = useState(false);
+  const [showUncategorized, setShowUncategorized] = useState(false);
+  const [dateRange, setDateRange] = useState('Last 6 months');
   const [dataCheck, setDataCheck] = useState(false);
 
   const [graphType, setGraphType] = useState('BarGraph');
@@ -65,7 +65,7 @@ export default function CustomReport() {
   //const [legend, setLegend] = useState([]);
   const legend = [];
   const dateRangeLine = ReportOptions.dateRange.length - 3;
-  const months = monthUtils.rangeInclusive(start, end);
+  const months = monthUtils.rangeInclusive(startDate, endDate);
 
   useEffect(() => {
     if (selectedCategories === null && categories.list.length !== 0) {
@@ -107,37 +107,40 @@ export default function CustomReport() {
 
   const getGroupData = useMemo(() => {
     return groupedSpreadsheet({
-      start,
-      end,
+      startDate,
+      endDate,
       categories,
       selectedCategories,
       filters,
       conditionsOp,
-      hidden,
-      uncat,
+      showEmpty,
+      showOffBudgetHidden,
+      showUncategorized,
+      balanceTypeOp,
     });
   }, [
-    start,
-    end,
+    startDate,
+    endDate,
     categories,
     selectedCategories,
     filters,
     conditionsOp,
-    hidden,
-    uncat,
+    showOffBudgetHidden,
+    showUncategorized,
   ]);
 
   const getGraphData = useMemo(() => {
     setDataCheck(false);
     return defaultSpreadsheet({
-      start,
-      end,
+      startDate,
+      endDate,
       categories,
       selectedCategories,
       filters,
       conditionsOp,
-      hidden,
-      uncat,
+      showEmpty,
+      showOffBudgetHidden,
+      showUncategorized,
       groupBy,
       balanceTypeOp,
       payees,
@@ -145,8 +148,8 @@ export default function CustomReport() {
       setDataCheck,
     });
   }, [
-    start,
-    end,
+    startDate,
+    endDate,
     groupBy,
     balanceType,
     categories,
@@ -155,8 +158,9 @@ export default function CustomReport() {
     accounts,
     filters,
     conditionsOp,
-    hidden,
-    uncat,
+    showEmpty,
+    showOffBudgetHidden,
+    showUncategorized,
   ]);
   const graphData = useReport('default', getGraphData);
   const groupedData = useReport('grouped', getGroupData);
@@ -169,9 +173,9 @@ export default function CustomReport() {
     return null;
   }
 
-  const onChangeDates = (start, end) => {
-    setStart(start);
-    setEnd(end);
+  const onChangeDates = (startDate, endDate) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
   };
 
   return (
@@ -187,8 +191,8 @@ export default function CustomReport() {
         }}
       >
         <ReportSidebar
-          start={start}
-          end={end}
+          startDate={startDate}
+          endDate={endDate}
           onChangeDates={onChangeDates}
           dateRange={dateRange}
           setDateRange={setDateRange}
@@ -205,12 +209,12 @@ export default function CustomReport() {
           setBalanceType={setBalanceType}
           mode={mode}
           setMode={setMode}
-          empty={empty}
-          setEmpty={setEmpty}
-          hidden={hidden}
-          setHidden={setHidden}
-          uncat={uncat}
-          setUncat={setUncat}
+          showEmpty={showEmpty}
+          setShowEmpty={setShowEmpty}
+          showOffBudgetHidden={showOffBudgetHidden}
+          setShowOffBudgetHidden={setShowOffBudgetHidden}
+          showUncategorized={showUncategorized}
+          setShowUncategorized={setShowUncategorized}
           categories={categories}
           selectedCategories={selectedCategories}
           setSelectedCategories={setSelectedCategories}
@@ -304,14 +308,14 @@ export default function CustomReport() {
 
                 {dataCheck ? (
                   <ChooseGraph
-                    start={start}
-                    end={end}
+                    startDate={startDate}
+                    endDate={endDate}
                     data={data}
                     mode={mode}
                     graphType={graphType}
                     balanceType={balanceType}
                     groupBy={groupBy}
-                    empty={empty}
+                    showEmpty={showEmpty}
                     scrollWidth={scrollWidth}
                     setScrollWidth={setScrollWidth}
                     months={months}
@@ -333,8 +337,8 @@ export default function CustomReport() {
                 >
                   {viewSummary && (
                     <ReportSummary
-                      start={start}
-                      end={end}
+                      startDate={startDate}
+                      endDate={endDate}
                       balanceTypeOp={balanceTypeOp}
                       data={data}
                       monthsCount={months.length}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportCard.js b/packages/desktop-client/src/components/reports/reports/CustomReportCard.js
index b4b3d53114f..77f5eccdafc 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportCard.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportCard.js
@@ -16,19 +16,19 @@ import useReport from '../useReport';
 function CustomReportCard() {
   const categories = useCategories();
 
-  const end = monthUtils.currentMonth();
-  const start = monthUtils.subMonths(end, 3);
+  const endDate = monthUtils.currentMonth();
+  const startDate = monthUtils.subMonths(endDate, 3);
   const groupBy = 'Category';
 
   const getGraphData = useMemo(() => {
     return defaultSpreadsheet({
-      start,
-      end,
+      startDate,
+      endDate,
       groupBy,
       balanceTypeOp: 'totalDebts',
       categories,
     });
-  }, [start, end, categories]);
+  }, [startDate, endDate, categories]);
   const data = useReport('default', getGraphData);
 
   return (
@@ -42,19 +42,16 @@ function CustomReportCard() {
             >
               Custom Report
             </Block>
-            <DateRange start={start} end={end} />
+            <DateRange start={startDate} end={endDate} />
           </View>
         </View>
       </View>
 
       {data ? (
         <BarGraph
-          start={start}
-          end={end}
           data={data}
           compact={true}
           groupBy={groupBy}
-          empty={true}
           balanceTypeOp={'totalDebts'}
           style={{ height: 'auto', flex: 1 }}
         />
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
index 47c1cf8cdb1..4d17270d4c5 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -19,14 +19,15 @@ import makeQuery from './makeQuery';
 import recalculate from './recalculate';
 
 export type createSpreadsheetProps = {
-  start: string;
-  end: string;
+  startDate: string;
+  endDate: string;
   categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] };
   selectedCategories: CategoryEntity[];
   conditions: RuleConditionEntity[];
   conditionsOp: string;
-  hidden: boolean;
-  uncat: boolean;
+  showEmpty: boolean;
+  showOffBudgetHidden: boolean;
+  showUncategorized: boolean;
   groupBy?: string;
   balanceTypeOp?: string;
   payees?: PayeeEntity[];
@@ -35,23 +36,28 @@ export type createSpreadsheetProps = {
 };
 
 export default function createSpreadsheet({
-  start,
-  end,
+  startDate,
+  endDate,
   categories,
   selectedCategories,
   conditions = [],
   conditionsOp,
-  hidden,
-  uncat,
+  showEmpty,
+  showOffBudgetHidden,
+  showUncategorized,
   groupBy,
   balanceTypeOp,
   payees,
   accounts,
   setDataCheck,
-}) {
-  const [catList, catGroup] = categoryLists(hidden, uncat, categories);
+}: createSpreadsheetProps) {
+  const [categoryList, categoryGroup] = categoryLists(
+    showOffBudgetHidden,
+    showUncategorized,
+    categories,
+  );
 
-  const categoryFilter = (catList || []).filter(
+  const categoryFilter = (categoryList || []).filter(
     category =>
       !category.hidden &&
       selectedCategories &&
@@ -62,8 +68,8 @@ export default function createSpreadsheet({
 
   const [groupByList, groupByLabel] = groupBySelections(
     groupBy,
-    catList,
-    catGroup,
+    categoryList,
+    categoryGroup,
     payees,
     accounts,
   );
@@ -82,9 +88,9 @@ export default function createSpreadsheet({
       runQuery(
         makeQuery(
           'assets',
-          start,
-          end,
-          hidden,
+          startDate,
+          endDate,
+          showOffBudgetHidden,
           selectedCategories,
           categoryFilter,
           conditionsOpKey,
@@ -94,9 +100,9 @@ export default function createSpreadsheet({
       runQuery(
         makeQuery(
           'debts',
-          start,
-          end,
-          hidden,
+          startDate,
+          endDate,
+          showOffBudgetHidden,
           selectedCategories,
           categoryFilter,
           conditionsOpKey,
@@ -105,7 +111,7 @@ export default function createSpreadsheet({
       ).then(({ data }) => data),
     ]);
 
-    const months = monthUtils.rangeInclusive(start, end);
+    const months = monthUtils.rangeInclusive(startDate, endDate);
 
     let totalAssets = 0;
     let totalDebts = 0;
@@ -163,10 +169,12 @@ export default function createSpreadsheet({
     });
 
     setData({
-      data: calcData,
-      monthData,
-      start,
-      end,
+      data: calcData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)),
+      monthData: monthData.filter(i =>
+        !showEmpty ? i[balanceTypeOp] !== 0 : true,
+      ),
+      startDate,
+      endDate,
       totalDebts: integerToAmount(totalDebts),
       totalAssets: integerToAmount(totalAssets),
       totalTotals: integerToAmount(totalAssets + totalDebts),
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
index 90d679c046e..c0199b5a79c 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -11,18 +11,24 @@ import makeQuery from './makeQuery';
 import recalculate from './recalculate';
 
 function createGroupedSpreadsheet({
-  start,
-  end,
+  startDate,
+  endDate,
   categories,
   selectedCategories,
   conditions = [],
   conditionsOp,
-  hidden,
-  uncat,
+  showEmpty,
+  showOffBudgetHidden,
+  showUncategorized,
+  balanceTypeOp,
 }: createSpreadsheetProps) {
-  const [catList, catGroup] = categoryLists(hidden, uncat, categories);
+  const [categoryList, categoryGroup] = categoryLists(
+    showOffBudgetHidden,
+    showUncategorized,
+    categories,
+  );
 
-  const categoryFilter = (catList || []).filter(
+  const categoryFilter = (categoryList || []).filter(
     category =>
       !category.hidden &&
       selectedCategories &&
@@ -32,7 +38,7 @@ function createGroupedSpreadsheet({
   );
 
   return async (spreadsheet, setData) => {
-    if (catList.length === 0) {
+    if (categoryList.length === 0) {
       return null;
     }
 
@@ -45,9 +51,9 @@ function createGroupedSpreadsheet({
       runQuery(
         makeQuery(
           'assets',
-          start,
-          end,
-          hidden,
+          startDate,
+          endDate,
+          showOffBudgetHidden,
           selectedCategories,
           categoryFilter,
           conditionsOpKey,
@@ -57,9 +63,9 @@ function createGroupedSpreadsheet({
       runQuery(
         makeQuery(
           'debts',
-          start,
-          end,
-          hidden,
+          startDate,
+          endDate,
+          showOffBudgetHidden,
           selectedCategories,
           categoryFilter,
           conditionsOpKey,
@@ -68,9 +74,9 @@ function createGroupedSpreadsheet({
       ).then(({ data }) => data),
     ]);
 
-    const months = monthUtils.rangeInclusive(start, end);
+    const months = monthUtils.rangeInclusive(startDate, endDate);
 
-    const groupedData = catGroup.map(
+    const groupedData = categoryGroup.map(
       group => {
         let totalAssets = 0;
         let totalDebts = 0;
@@ -131,10 +137,11 @@ function createGroupedSpreadsheet({
           categories: stackedCategories,
         };
       },
-      [start, end],
+      [startDate, endDate],
+    );
+    setData(
+      groupedData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)),
     );
-
-    setData(groupedData);
   };
 }
 
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
index 19d56b811d3..2e61c3eb922 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
@@ -3,9 +3,9 @@ import { type CategoryEntity } from 'loot-core/src/types/models';
 
 function makeQuery(
   name: string,
-  start: string,
-  end: string,
-  hidden: boolean,
+  startDate: string,
+  endDate: string,
+  showOffBudgetHidden: boolean,
   selectedCategories: CategoryEntity[],
   categoryFilter: CategoryEntity[],
   conditionsOpKey: string,
@@ -14,7 +14,7 @@ function makeQuery(
   const query = q('transactions')
     .filter(
       //Show Offbudget and hidden categories
-      !hidden && {
+      !showOffBudgetHidden && {
         $and: [
           {
             'account.offbudget': false,
@@ -54,8 +54,8 @@ function makeQuery(
     //Apply month range filters
     .filter({
       $and: [
-        { date: { $transform: '$month', $gte: start } },
-        { date: { $transform: '$month', $lte: end } },
+        { date: { $transform: '$month', $gte: startDate } },
+        { date: { $transform: '$month', $lte: endDate } },
       ],
     })
     //Show assets or debts
diff --git a/packages/desktop-client/src/components/rules/ActionExpression.tsx b/packages/desktop-client/src/components/rules/ActionExpression.tsx
index 607276cdcad..07851c10d57 100644
--- a/packages/desktop-client/src/components/rules/ActionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ActionExpression.tsx
@@ -15,7 +15,7 @@ import ScheduleValue from './ScheduleValue';
 import Value from './Value';
 
 const valueStyle = {
-  color: theme.pageTextPositive,
+  color: theme.pillTextHighlighted,
 };
 
 type ActionExpressionProps = RuleActionEntity & {
@@ -61,7 +61,7 @@ function SetActionExpression({
       <Text>{friendlyOp(op)}</Text>{' '}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
       <Text>to </Text>
-      <Value value={value} field={field} />
+      <Value style={valueStyle} value={value} field={field} />
     </>
   );
 }
diff --git a/packages/desktop-client/src/components/rules/ConditionExpression.tsx b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
index 48f957d06bc..d842947f979 100644
--- a/packages/desktop-client/src/components/rules/ConditionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
@@ -9,7 +9,7 @@ import View from '../common/View';
 import Value from './Value';
 
 const valueStyle = {
-  color: theme.pageTextPositive,
+  color: theme.pillTextHighlighted,
 };
 
 type ConditionExpressionProps = {
@@ -49,7 +49,7 @@ export default function ConditionExpression({
       {prefix && <Text>{prefix} </Text>}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
       <Text>{friendlyOp(op)}</Text>{' '}
-      <Value value={value} field={field} inline={inline} />
+      <Value style={valueStyle} value={value} field={field} inline={inline} />
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/rules/Value.tsx b/packages/desktop-client/src/components/rules/Value.tsx
index eb802b288d3..f0348bee469 100644
--- a/packages/desktop-client/src/components/rules/Value.tsx
+++ b/packages/desktop-client/src/components/rules/Value.tsx
@@ -8,14 +8,10 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import useCategories from '../../hooks/useCategories';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import LinkButton from '../common/LinkButton';
 import Text from '../common/Text';
 
-const valueStyle = {
-  color: theme.pageTextPositive,
-};
-
 type ValueProps<T> = {
   value: T;
   field: unknown;
@@ -23,6 +19,7 @@ type ValueProps<T> = {
   inline?: boolean;
   data?: unknown;
   describe?: (item: T) => string;
+  style?: CSSProperties;
 };
 
 export default function Value<T>({
@@ -33,6 +30,7 @@ export default function Value<T>({
   data: dataProp,
   // @ts-expect-error fix this later
   describe = x => x.name,
+  style,
 }: ValueProps<T>) {
   const dateFormat = useSelector(
     state => state.prefs.local.dateFormat || 'MM/dd/yyyy',
@@ -40,6 +38,10 @@ export default function Value<T>({
   const payees = useSelector(state => state.queries.payees);
   const { list: categories } = useCategories();
   const accounts = useSelector(state => state.queries.accounts);
+  const valueStyle = {
+    color: theme.pageTextPositive,
+    ...style,
+  };
 
   const data =
     dataProp ||
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 26b9f2361dc..a1009c1aaca 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -1091,7 +1091,7 @@ const Transaction = memo(function Transaction(props) {
                     ? theme.warningText
                     : selected
                     ? theme.formLabelText
-                    : theme.tableTextLight,
+                    : theme.upcomingText,
                 backgroundColor:
                   notes === 'missed'
                     ? theme.errorBackground
@@ -1099,7 +1099,7 @@ const Transaction = memo(function Transaction(props) {
                     ? theme.warningBackground
                     : selected
                     ? theme.formLabelBackground
-                    : theme.pageBackground,
+                    : theme.upcomingBackground,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 071f0a28d28..8c1aa1737de 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -23,7 +23,7 @@ export const tableBackground = colorPalette.navy800;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;
 export const tableTextLight = tableText;
-export const tableTextSubdued = colorPalette.navy150;
+export const tableTextSubdued = colorPalette.navy500;
 export const tableTextSelected = colorPalette.navy150;
 export const tableTextHover = colorPalette.navy400;
 export const tableTextInactive = colorPalette.navy500;
@@ -56,10 +56,10 @@ export const menuItemTextHeader = colorPalette.purple500;
 export const menuBorder = colorPalette.navy800;
 export const menuBorderHover = colorPalette.purple400;
 export const menuKeybindingText = colorPalette.navy500;
-export const menuAutoCompleteBackground = colorPalette.navy400;
-export const menuAutoCompleteBackgroundHover = colorPalette.navy300;
-export const menuAutoCompleteText = colorPalette.navy900;
-export const menuAutoCompleteTextHeader = menuItemTextHeader;
+export const menuAutoCompleteBackground = colorPalette.navy900;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
+export const menuAutoCompleteText = colorPalette.navy200;
+export const menuAutoCompleteTextHeader = colorPalette.purple200;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -85,7 +85,7 @@ export const markdownDark = colorPalette.purple500;
 export const markdownLight = colorPalette.purple800;
 
 // Button
-export const buttonMenuText = colorPalette.navy900;
+export const buttonMenuText = colorPalette.navy200;
 export const buttonMenuTextHover = buttonMenuText;
 export const buttonMenuBackground = 'transparent';
 export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
@@ -138,7 +138,7 @@ export const noticeBackgroundDark = colorPalette.green500;
 export const noticeText = colorPalette.green300;
 export const noticeTextLight = colorPalette.green500;
 export const noticeTextDark = colorPalette.green150;
-export const noticeTextMenu = colorPalette.green800;
+export const noticeTextMenu = colorPalette.green500;
 export const noticeBorder = colorPalette.green800;
 export const warningBackground = colorPalette.orange800;
 export const warningText = colorPalette.orange300;
@@ -146,7 +146,7 @@ export const warningTextLight = colorPalette.orange500;
 export const warningTextDark = colorPalette.orange100;
 export const warningBorder = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
-export const errorText = colorPalette.red300;
+export const errorText = colorPalette.red200;
 export const errorTextDark = colorPalette.red150;
 export const errorTextDarker = errorTextDark;
 export const errorTextMenu = colorPalette.red500;
@@ -176,9 +176,9 @@ export const checkboxBorderSelected = colorPalette.purple300;
 export const checkboxShadowSelected = colorPalette.purple500;
 
 export const pillBackground = colorPalette.navy800;
-export const pillBackgroundLight = colorPalette.navy600;
+export const pillBackgroundLight = colorPalette.navy900;
 export const pillText = colorPalette.navy200;
-export const pillTextHighlighted = colorPalette.purple300;
+export const pillTextHighlighted = colorPalette.purple200;
 export const pillBorder = colorPalette.navy700;
 export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
diff --git a/packages/loot-core/src/types/server-handlers.d.ts b/packages/loot-core/src/types/server-handlers.d.ts
index 8479e70bcbb..3235c74b989 100644
--- a/packages/loot-core/src/types/server-handlers.d.ts
+++ b/packages/loot-core/src/types/server-handlers.d.ts
@@ -54,7 +54,7 @@ export interface ServerHandlers {
     list: Array<CategoryEntity>;
   }>;
 
-  'get-earliest-transaction': () => Promise<unknown>;
+  'get-earliest-transaction': () => Promise<{ date: string }>;
 
   'get-budget-bounds': () => Promise<{ start: string; end: string }>;
 
diff --git a/upcoming-release-notes/2005.md b/upcoming-release-notes/2005.md
new file mode 100644
index 00000000000..e3c96ee60e9
--- /dev/null
+++ b/upcoming-release-notes/2005.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [lucasboebel]
+---
+
+Maintenance: Update CashFlow.js to use typescript
diff --git a/upcoming-release-notes/2048.md b/upcoming-release-notes/2048.md
new file mode 100644
index 00000000000..fa8554f6096
--- /dev/null
+++ b/upcoming-release-notes/2048.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Fixes and updates to dark theme colors.
diff --git a/upcoming-release-notes/2067.md b/upcoming-release-notes/2067.md
new file mode 100644
index 00000000000..72b9a7d05f0
--- /dev/null
+++ b/upcoming-release-notes/2067.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding types for future typescript changes.
diff --git a/upcoming-release-notes/2069.md b/upcoming-release-notes/2069.md
new file mode 100644
index 00000000000..e8b1f4db822
--- /dev/null
+++ b/upcoming-release-notes/2069.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Updating variable naming for custom reports page.
\ No newline at end of file