diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png
index 6669b2bbd0..42c2d82590 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png
index 8f652deabd..70dc1b3989 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png
index d9091286c7..cc8f379a21 100644
Binary files a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png and b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.tsx b/packages/desktop-client/src/components/budget/BudgetCategories.tsx
index 69b360bc8f..32c7a6cce6 100644
--- a/packages/desktop-client/src/components/budget/BudgetCategories.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetCategories.tsx
@@ -241,7 +241,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
       <View
         style={{
           marginBottom: 10,
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.budgetCurrentMonth, // match budget colors, not generic table colors.
           overflow: 'hidden',
           boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
@@ -254,7 +254,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
             case 'new-group':
               content = (
                 <Row
-                  style={{ backgroundColor: theme.tableRowHeaderBackground }}
+                  style={{ backgroundColor: theme.budgetHeaderCurrentMonth }}
                 >
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
@@ -331,7 +331,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
                 <View
                   style={{
                     height: styles.incomeHeaderHeight,
-                    backgroundColor: theme.tableBackground,
+                    backgroundColor: theme.budgetCurrentMonth,
                   }}
                 >
                   <IncomeHeader onShowNewGroup={onShowNewGroup} />
@@ -392,7 +392,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
                   dragState
                     ? {}
                     : {
-                        ':hover': { backgroundColor: theme.tableBackground },
+                        ':hover': { backgroundColor: theme.budgetCurrentMonth },
                       }
                 }
               >
diff --git a/packages/desktop-client/src/components/budget/BudgetTable.tsx b/packages/desktop-client/src/components/budget/BudgetTable.tsx
index 2ed16956fe..f32d99fbd8 100644
--- a/packages/desktop-client/src/components/budget/BudgetTable.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTable.tsx
@@ -229,7 +229,8 @@ export function BudgetTable(props: BudgetTableProps) {
             backgroundColor: 'transparent',
           },
           '& ::-webkit-scrollbar-thumb:vertical': {
-            backgroundColor: theme.tableHeaderBackground,
+            backgroundColor: theme.pageTextSubdued,
+            // changed from tableHeaderBackground. pageTextSubdued is always visible on pageBackground
           },
         }),
       }}
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
index 67d02502d0..647e11a8f1 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -63,7 +63,7 @@ export const BudgetTotals = memo(function BudgetTotals({
     <View
       data-testid="budget-totals"
       style={{
-        backgroundColor: theme.tableBackground,
+        backgroundColor: theme.budgetCurrentMonth, //use budget colors, not generic table colors
         flexDirection: 'row',
         flexShrink: 0,
         boxShadow: styles.cardShadow,
@@ -83,7 +83,7 @@ export const BudgetTotals = memo(function BudgetTotals({
       <View
         style={{
           width: 200 + 100 * categoryExpandedState,
-          color: theme.pageTextLight,
+          color: theme.tableHeaderText,
           justifyContent: 'center',
           paddingLeft: 5,
           paddingRight: 5,
@@ -141,7 +141,7 @@ export const BudgetTotals = memo(function BudgetTotals({
           <SvgDotsHorizontalTriple
             width={15}
             height={15}
-            style={{ color: theme.pageTextLight }}
+            style={{ color: theme.tableHeaderText }}
           />
         </Button>
 
diff --git a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
index 0594d7e048..21fbbab0c4 100644
--- a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
+++ b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
@@ -81,7 +81,7 @@ export function ExpenseCategory({
       innerRef={dropRef}
       collapsed
       style={{
-        backgroundColor: theme.tableBackground,
+        backgroundColor: theme.budgetCurrentMonth,
         opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined,
       }}
     >
diff --git a/packages/desktop-client/src/components/budget/ExpenseGroup.tsx b/packages/desktop-client/src/components/budget/ExpenseGroup.tsx
index 3b2243b618..1c5ca09cf2 100644
--- a/packages/desktop-client/src/components/budget/ExpenseGroup.tsx
+++ b/packages/desktop-client/src/components/budget/ExpenseGroup.tsx
@@ -95,7 +95,7 @@ export function ExpenseGroup({
       style={{
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth, //use budget colors
       }}
     >
       {dragState && !dragState.preview && dragState.type === 'group' && (
diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.tsx b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
index fb4fa3cf4a..0b56d50c07 100644
--- a/packages/desktop-client/src/components/budget/IncomeGroup.tsx
+++ b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
@@ -37,7 +37,7 @@ export function IncomeGroup({
       collapsed
       style={{
         fontWeight: 600,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth, //use budget color
       }}
     >
       <SidebarGroup
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.tsx b/packages/desktop-client/src/components/budget/MonthPicker.tsx
index 391c4cde1e..9bfd8458cf 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.tsx
+++ b/packages/desktop-client/src/components/budget/MonthPicker.tsx
@@ -166,7 +166,7 @@ export const MonthPicker = ({
                 }),
                 ...styles.smallText,
                 ...(selected && {
-                  backgroundColor: theme.tableBorderHover,
+                  backgroundColor: theme.buttonPrimaryBackground,
                   color: theme.buttonPrimaryText,
                 }),
                 ...((hovered || selected) && {
@@ -195,7 +195,7 @@ export const MonthPicker = ({
                   }),
                 ...(hovered &&
                   selected && {
-                    backgroundColor: theme.tableBorderHover,
+                    backgroundColor: theme.buttonPrimaryBackground,
                   }),
                 ...((idx === firstSelectedIndex ||
                   (idx === hoverId && !selected)) && {
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index 29cd421f98..93b6b97dcf 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -155,11 +155,11 @@ export function SidebarCategory({
               display: 'flex',
             },
           }),
-        ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
+        ...(dragging && { color: theme.pageTextSubdued }), //always visible color
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
         ...(dragPreview && {
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.budgetCurrentMonth,
           zIndex: 10000,
           borderRadius: 6,
           overflow: 'hidden',
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index 77f5d96e9b..b0bfc9dbec 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -207,7 +207,7 @@ export function SidebarGroup({
       style={{
         ...style,
         width: 200 + 100 * categoryExpandedState,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth,
         overflow: 'hidden',
         '& .hover-visible': {
           display: 'none',
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 7c904e4113..5c0b40a1f3 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -95,6 +95,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         marginRight: styles.monthRightPadding,
         paddingTop: 10,
         paddingBottom: 10,
+        backgroundColor: theme.budgetCurrentMonth,
       }}
     >
       <View style={headerLabelStyle}>
@@ -140,6 +141,7 @@ export function IncomeHeaderMonth() {
         color: theme.tableHeaderText,
         alignItems: 'center',
         paddingRight: 10,
+        backgroundColor: theme.budgetCurrentMonth,
       }}
     >
       <View style={{ flex: 1, textAlign: 'right' }}>
@@ -307,6 +309,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
                 setBudgetMenuOpen(true);
               }}
               style={{
+                color: theme.budgetNumberNeutral, //make sure button is visible when hovered
                 padding: 3,
               }}
             >
@@ -380,8 +383,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
-              backgroundColor: theme.tableBackground,
+              boxShadow: 'inset 0 0 0 1px ' + theme.pageTextSubdued, //remove mobile color variable
+              backgroundColor: theme.budgetCurrentMonth,
             },
           }}
           valueProps={{
@@ -396,7 +399,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
               onEdit(null);
             },
             style: {
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
             },
           }}
           onSave={(parsedIntegerAmount: number | null) => {
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
index fc48ce50c2..7e63a0153b 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
@@ -116,7 +116,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.tableTextLight, margin: 1 }}
+                style={{ color: theme.pageTextLight, margin: 1 }}
               />
             </Button>
           </View>
@@ -151,7 +151,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
                 width={15}
                 height={15}
                 tooltipPosition="bottom right"
-                defaultColor={theme.tableTextLight}
+                defaultColor={theme.pageTextLight}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>
@@ -254,7 +254,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
               borderTop: '1px solid ' + theme.tableBorder,
             }}
           >
@@ -272,7 +272,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
               style={{
                 padding: '5px 0',
                 marginTop: 17,
-                backgroundColor: theme.tableRowHeaderBackground,
+                backgroundColor: theme.budgetHeaderCurrentMonth,
                 borderTopWidth: 1,
                 borderBottomWidth: 1,
                 borderColor: theme.tableBorder,
diff --git a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
index 98dc0a30be..d93a4feeb4 100644
--- a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -74,7 +74,7 @@ const headerLabelStyle: CSSProperties = {
 };
 
 const cellStyle: CSSProperties = {
-  color: theme.pageTextLight,
+  color: theme.tableHeaderText,
   fontWeight: 600,
 };
 
@@ -90,7 +90,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
           <Trans>Budgeted</Trans>
         </Text>
         <TrackingCellValue
@@ -101,7 +101,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         </TrackingCellValue>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
           <Trans>Spent</Trans>
         </Text>
         <TrackingCellValue binding={trackingBudget.totalSpent} type="financial">
@@ -109,7 +109,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
         </TrackingCellValue>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
           <Trans>Balance</Trans>
         </Text>
         <TrackingCellValue
@@ -133,12 +133,12 @@ export function IncomeHeaderMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
           <Trans>Budgeted</Trans>
         </Text>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
           <Trans>Received</Trans>
         </Text>
       </View>
@@ -287,6 +287,7 @@ export const CategoryMonth = memo(function CategoryMonth({
               variant="bare"
               onPress={() => setMenuOpen(true)}
               style={{
+                color: theme.budgetNumberNeutral, //make sure button is visible when hovered
                 padding: 3,
               }}
             >
@@ -354,8 +355,8 @@ export const CategoryMonth = memo(function CategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
-              backgroundColor: theme.tableBackground,
+              boxShadow: 'inset 0 0 0 1px ' + theme.pageTextSubdued,
+              backgroundColor: theme.budgetCurrentMonth,
             },
           }}
           valueProps={{
@@ -370,7 +371,7 @@ export const CategoryMonth = memo(function CategoryMonth({
               onEdit(null);
             },
             style: {
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
             },
           }}
           onSave={(parsedIntegerAmount: number | null) => {
@@ -401,9 +402,9 @@ export const CategoryMonth = memo(function CategoryMonth({
                 style={{
                   color:
                     scheduleStatus === 'missed'
-                      ? theme.errorText
+                      ? theme.budgetNumberNegative
                       : scheduleStatus === 'due'
-                        ? theme.warningText
+                        ? theme.templateNumberUnderFunded
                         : theme.upcomingText,
                 }}
                 onPress={() =>
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
index 3ec63f543a..84ff6ae31d 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
@@ -112,7 +112,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.pageTextSubdued, margin: 1 }}
+                style={{ color: theme.pageTextLight, margin: 1 }}
               />
             </Button>
           </View>
@@ -238,7 +238,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
             style={{
               alignSelf: 'center',
               alignItems: 'flex-start',
-              backgroundColor: theme.tableRowHeaderBackground,
+              backgroundColor: theme.budgetHeaderCurrentMonth,
               borderRadius: 4,
               padding: '10px 15px',
               marginTop: 13,
@@ -255,7 +255,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: theme.tableRowHeaderBackground,
+              backgroundColor: theme.budgetHeaderCurrentMonth,
               borderTop: '1px solid ' + theme.tableBorder,
             }}
           >
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx
index bffb520630..6a7612610d 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx
@@ -58,7 +58,7 @@ export function BudgetTotal<
               allocatedAmount: <CellValue binding={current} type="financial" />,
               italic: (
                 <Text
-                  style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}
+                  style={{ color: theme.pageTextLight, fontStyle: 'italic' }}
                 />
               ),
               totalAmount: <CellValue binding={target} type="financial" />,
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx
index 9176003556..4f1e8efa98 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx
@@ -34,8 +34,8 @@ export function ExpenseProgress({ current, target }: ExpenseProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? theme.errorText : theme.noticeTextLight}
-      backgroundColor={over ? theme.errorBackground : theme.tableBackground}
+      color={over ? theme.numberNegative : theme.numberPositive}
+      backgroundColor={over ? theme.errorBackground : theme.budgetCurrentMonth}
       style={{ width: 20, height: 20 }}
     />
   );
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx
index 608afea503..d11d37f4ec 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx
@@ -28,8 +28,8 @@ export function IncomeProgress({ current, target }: IncomeProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? theme.errorText : theme.noticeTextLight}
-      backgroundColor={over ? theme.errorBackground : theme.tableBackground}
+      color={over ? theme.numberNegative : theme.numberPositive}
+      backgroundColor={over ? theme.errorBackground : theme.budgetCurrentMonth}
       style={{ width: 20, height: 20 }}
     />
   );
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
index f8f8a887e2..27c32316da 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
@@ -73,10 +73,10 @@ export function Saved({ projected, style }: SavedProps) {
           className={css({
             fontSize: 25,
             color: projected
-              ? theme.warningText
+              ? theme.templateNumberUnderFunded
               : isNegative
-                ? theme.errorTextDark
-                : theme.upcomingText,
+                ? theme.budgetNumberNegative
+                : theme.templateNumberFunded,
           })}
         >
           <PrivacyFilter>
diff --git a/upcoming-release-notes/6820.md b/upcoming-release-notes/6820.md
new file mode 100644
index 0000000000..1bc82a7635
--- /dev/null
+++ b/upcoming-release-notes/6820.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Juulz]
+---
+
+Use consistent color variables for desktop budget pages, both envelope and tracking.