diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png
index b0b41c6da83..cc58f7f29ec 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png
index 212fc2772e6..6e9e713d6ce 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png
index 5768c3caae2..e7c52403655 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png
index f44ea97dd8b..28fb5fc075a 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png
index 696614b2d6f..d9b6c60afff 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png
index 39de13be31c..faed13bee17 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
index 97d8e6d2abe..e322b3a0110 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
index f98cca9e7b9..c99575be0b1 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
index 8be33546778..13ad4f0f9e7 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png
index 123c6f21bf2..bf4acbee5ba 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-5-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-5-chromium-linux.png
index 02fd0f1e804..d0d14d084d3 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-5-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-6-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-6-chromium-linux.png
index da1b60f14e0..00ed14f1d70 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-6-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png
index d9492d91339..ff0f29ec92a 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png
index 6b3d9253f40..f98acb71ce2 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-3-chromium-linux.png
index 9e67e5fc2ae..b943624386b 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js b/packages/desktop-client/e2e/reports.test.js
index dc052e0698f..6d57c77a5e0 100644
--- a/packages/desktop-client/e2e/reports.test.js
+++ b/packages/desktop-client/e2e/reports.test.js
@@ -30,7 +30,7 @@ test.describe.parallel('Reports', () => {
   test('loads net worth and cash flow reports', async () => {
     const reports = await reportsPage.getAvailableReportList();
 
-    expect(reports).toEqual(['Net Worth', 'Cash Flow']);
+    expect(reports).toEqual(['Net Worth', 'Cash Flow', 'Monthly Spending']);
     await expect(page).toMatchThemeScreenshots();
   });
 
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index b1751290a13..693e47ae3f8 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index d5344e30dde..f8d7f531f39 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
index fdaf3478c8d..f86c357494f 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-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-4-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-4-chromium-linux.png
index 5638fba1c33..d4f7c7c11c0 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-4-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-4-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-5-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-5-chromium-linux.png
index fe5361c7955..b38d80cfc76 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-5-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-5-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-6-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-6-chromium-linux.png
index a28c79c04be..ea6d25609d6 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-6-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-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
index 42fbf223d8e..d2af63c1497 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-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-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index 5bd453e76f9..cb5ef2b7ec6 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-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-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
index b0487b1ecfe..c6fc88b0b75 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png
index e2490d2af61..a802ba536e4 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png
index 1e59e5a7175..d63beff8ce9 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png
index 1e5f24638bf..df2dc9c2c4c 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png
index b7bf3b6b60d..440f8c3b9f9 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png
index 96cb7ea9043..fa2f9434209 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png
index 2deeb765838..ba91cd0fa05 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png
index 57a4f561301..5bc5d5a483f 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
index 4586622901e..92dd17df133 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png
index 6bf89c54483..e1c80995e00 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
index c33d61e302d..eb14f152e87 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png
index 2aa68b260ca..6cee22f5a94 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png
index f745c497ba7..e2254859b7d 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png
index 517eb87bb77..926b7d69301 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png
index 685e9f3dbe6..d933484319a 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png
index 6c0d002edbf..9ec263beb42 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png
index 44260f45f5f..e0b5ad7ba73 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png
index f8e0eeeb075..1564f138dfe 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-3-chromium-linux.png
index a20f3b92d6f..e4bf23f4cea 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png
index 08c7225d052..f9dddffc720 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png
index 1b16c695de0..f7ebc27b65b 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-3-chromium-linux.png
index 1fafb0ea206..0c90ff92002 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png
index a81b0d15deb..32a731e7f71 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png
index 33c8f42c258..7847cdf91a7 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-3-chromium-linux.png
index a9a197fe654..f3f7c7287cb 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-1-chromium-linux.png
index ad3159f9e53..47e323e93ee 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-2-chromium-linux.png
index ebd78d171c1..d4da73c7c68 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-3-chromium-linux.png
index 983e52ea882..86e303f6570 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-4-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-4-chromium-linux.png
index 46ef7744b62..edda274f959 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-4-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-5-chromium-linux.png
index 409b280452c..0a866fb7c61 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-5-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-6-chromium-linux.png
index 53c8e73bbca..790d47d454e 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-6-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-transfer-test-transaction-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png
index cac167fdf59..d9cadc56156 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-8-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-8-chromium-linux.png
index ad882e84dfe..d1f12b017ab 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-8-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-9-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-9-chromium-linux.png
index 26cc2539fca..2106111fbb4 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-9-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-9-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-7-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-7-chromium-linux.png
index c8a2f4eb0af..a0627091062 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-7-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-8-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-8-chromium-linux.png
index 64b30b9f823..ff672703b3c 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-8-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-9-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-9-chromium-linux.png
index c11558f4fdc..f099ce4a711 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-9-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-9-chromium-linux.png differ
diff --git a/packages/desktop-client/globals.d.ts b/packages/desktop-client/globals.d.ts
index ce1ae7b7547..d05b3b39970 100644
--- a/packages/desktop-client/globals.d.ts
+++ b/packages/desktop-client/globals.d.ts
@@ -1,2 +1,9 @@
+import { type CSSObject } from '@emotion/css/dist/declarations/src/create-instance';
+
 // Allow images to be imported
 declare module '*.png';
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type
+  interface CSSProperties extends CSSObject {}
+}
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index 0c487c4c95c..bc81bc77bad 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -6,6 +6,7 @@
     "build"
   ],
   "devDependencies": {
+    "@emotion/css": "^11.13.4",
     "@fontsource/redacted-script": "^5.0.21",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
@@ -36,7 +37,6 @@
     "debounce": "^1.2.1",
     "downshift": "7.6.2",
     "focus-visible": "^4.1.5",
-    "glamor": "^2.20.40",
     "i18next": "^23.11.5",
     "i18next-parser": "^9.0.0",
     "i18next-resources-to-backend": "^1.2.1",
diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx
index e94e3a319b1..b9273bf9556 100644
--- a/packages/desktop-client/src/components/AnimatedRefresh.tsx
+++ b/packages/desktop-client/src/components/AnimatedRefresh.tsx
@@ -1,10 +1,9 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { keyframes } from 'glamor';
+import { keyframes } from '@emotion/css';
 
 import { SvgRefresh } from '../icons/v1';
-import { type CSSProperties } from '../style';
 
 import { View } from './common/View';
 
diff --git a/packages/desktop-client/src/components/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx
index 0a1bfc0ac3a..9d57bafdde8 100644
--- a/packages/desktop-client/src/components/AppBackground.tsx
+++ b/packages/desktop-client/src/components/AppBackground.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { theme } from '../style';
@@ -33,7 +33,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
         transitions((style, item) => (
           <animated.div key={item} style={style}>
             <View
-              className={`${css({
+              className={css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
@@ -42,7 +42,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
                 paddingTop: 200,
                 color: theme.pageText,
                 alignItems: 'center',
-              })}`}
+              })}
             >
               <Block style={{ marginBottom: 20, fontSize: 18 }}>
                 {loadingText}
diff --git a/packages/desktop-client/src/components/FixedSizeList.tsx b/packages/desktop-client/src/components/FixedSizeList.tsx
index b2257a0a099..0baf528d125 100644
--- a/packages/desktop-client/src/components/FixedSizeList.tsx
+++ b/packages/desktop-client/src/components/FixedSizeList.tsx
@@ -6,12 +6,11 @@ import {
   type Ref,
   type MutableRefObject,
   type UIEvent,
+  type CSSProperties,
 } from 'react';
 
 import memoizeOne from 'memoize-one';
 
-import { type CSSProperties } from '../style';
-
 import { View } from './common/View';
 
 const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
diff --git a/packages/desktop-client/src/components/HelpMenu.tsx b/packages/desktop-client/src/components/HelpMenu.tsx
index 73aed99ef4c..e0e790dc74b 100644
--- a/packages/desktop-client/src/components/HelpMenu.tsx
+++ b/packages/desktop-client/src/components/HelpMenu.tsx
@@ -6,17 +6,18 @@ import { useLocation } from 'react-router-dom';
 
 import { useToggle } from 'usehooks-ts';
 
+import { openDocsForCurrentPage } from 'loot-core/client/actions';
 import { pushModal } from 'loot-core/client/actions/modals';
 
+import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { SvgHelp } from '../icons/v2/Help';
-import { openUrl } from '../util/router-tools';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
 import { Popover } from './common/Popover';
 import { SpaceBetween } from './common/SpaceBetween';
 
-type HelpMenuItem = 'docs' | 'keyboard-shortcuts';
+type HelpMenuItem = 'docs' | 'keyboard-shortcuts' | 'goal-templates';
 
 type HelpButtonProps = {
   onPress?: () => void;
@@ -45,27 +46,8 @@ const HelpButton = forwardRef<HTMLButtonElement, HelpButtonProps>(
 
 HelpButton.displayName = 'HelpButton';
 
-const getPageDocs = (page: string) => {
-  switch (page) {
-    case '/budget':
-      return 'https://actualbudget.org/docs/getting-started/envelope-budgeting';
-    case '/reports':
-      return 'https://actualbudget.org/docs/reports/';
-    case '/schedules':
-      return 'https://actualbudget.org/docs/schedules';
-    case '/payees':
-      return 'https://actualbudget.org/docs/transactions/payees';
-    case '/rules':
-      return 'https://actualbudget.org/docs/budgeting/rules';
-    case '/settings':
-      return 'https://actualbudget.org/docs/settings';
-    default:
-      // All pages under /accounts, plus any missing pages
-      return 'https://actualbudget.org/docs';
-  }
-};
-
 export const HelpMenu = () => {
+  const showGoalTemplates = useFeatureFlag('goalTemplatesEnabled');
   const { t } = useTranslation();
   const [isMenuOpen, toggleMenuOpen, setMenuOpen] = useToggle();
   const menuButtonRef = useRef(null);
@@ -76,11 +58,14 @@ export const HelpMenu = () => {
   const handleItemSelect = (item: HelpMenuItem) => {
     switch (item) {
       case 'docs':
-        openUrl(getPageDocs(page));
+        dispatch(openDocsForCurrentPage());
         break;
       case 'keyboard-shortcuts':
         dispatch(pushModal('keyboard-shortcuts'));
         break;
+      case 'goal-templates':
+        dispatch(pushModal('goal-templates'));
+        break;
     }
   };
 
@@ -98,7 +83,7 @@ export const HelpMenu = () => {
         onOpenChange={() => setMenuOpen(false)}
       >
         <Menu
-          onMenuSelect={item => {
+          onMenuSelect={(item: HelpMenuItem) => {
             setMenuOpen(false);
             handleItemSelect(item);
           }}
@@ -108,6 +93,9 @@ export const HelpMenu = () => {
               text: t('Documentation'),
             },
             { name: 'keyboard-shortcuts', text: t('Keyboard shortcuts') },
+            ...(showGoalTemplates && page === '/budget'
+              ? [{ name: 'goal-templates', text: t('Goal templates') }]
+              : []),
           ]}
         />
       </Popover>
diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index 0bc04078e6d..ec7df311bbf 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
index e561fa700fe..f3eb583005a 100644
--- a/packages/desktop-client/src/components/ManageRules.tsx
+++ b/packages/desktop-client/src/components/ManageRules.tsx
@@ -117,17 +117,14 @@ export function ManageRules({
   const { list: categories } = useCategories();
   const payees = usePayees();
   const accounts = useAccounts();
-  const state = {
-    payees,
-    accounts,
-    schedules,
-  };
   const filterData = useMemo(
     () => ({
-      ...state,
+      payees,
+      accounts,
+      schedules,
       categories,
     }),
-    [state, categories],
+    [payees, accounts, schedules, categories],
   );
 
   const filteredRules = useMemo(
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index f5e3dec9408..ef458ef87b4 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/packages/desktop-client/src/components/Modals.tsx
@@ -35,6 +35,7 @@ import { EnvelopeBudgetMonthMenuModal } from './modals/EnvelopeBudgetMonthMenuMo
 import { EnvelopeBudgetSummaryModal } from './modals/EnvelopeBudgetSummaryModal';
 import { EnvelopeToBudgetMenuModal } from './modals/EnvelopeToBudgetMenuModal';
 import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
+import { GoalTemplateModal } from './modals/GoalTemplateModal';
 import { GoCardlessExternalMsgModal } from './modals/GoCardlessExternalMsgModal';
 import { GoCardlessInitialiseModal } from './modals/GoCardlessInitialiseModal';
 import { HoldBufferModal } from './modals/HoldBufferModal';
@@ -83,6 +84,9 @@ export function Modals() {
   const modals = modalStack
     .map(({ name, options }) => {
       switch (name) {
+        case 'goal-templates':
+          return budgetId ? <GoalTemplateModal key={name} /> : null;
+
         case 'keyboard-shortcuts':
           // don't show the hotkey help modal when a budget is not open
           return budgetId ? <KeyboardShortcutModal key={name} /> : null;
diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx
index 06dd4c5ff31..332b2c68064 100644
--- a/packages/desktop-client/src/components/Notes.tsx
+++ b/packages/desktop-client/src/components/Notes.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, type CSSProperties } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import { Text } from './common/Text';
@@ -110,7 +110,7 @@ export function Notes({
   return editable ? (
     <textarea
       ref={textAreaRef}
-      className={`${css({
+      className={css({
         border: '1px solid ' + theme.buttonNormalBorder,
         padding: 7,
         ...(!isNarrowWidth && { minWidth: 350, minHeight: 120 }),
@@ -118,14 +118,14 @@ export function Notes({
         backgroundColor: theme.tableBackground,
         color: theme.tableText,
         ...getStyle?.(editable),
-      })}`}
+      })}
       value={notes || ''}
       onChange={e => onChange?.(e.target.value)}
       onBlur={e => onBlur?.(e.target.value)}
       placeholder="Notes (markdown supported)"
     />
   ) : (
-    <Text {...markdownStyles} style={{ ...getStyle?.(editable) }}>
+    <Text className={css([markdownStyles, getStyle?.(editable)])}>
       <ReactMarkdown remarkPlugins={remarkPlugins} linkTarget="_blank">
         {notes}
       </ReactMarkdown>
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index de5c928d7ac..966fe0395f3 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useRef, useState, type ComponentProps } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useNotes } from '../hooks/useNotes';
 import { SvgCustomNotesPaper } from '../icons/v2';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Popover } from './common/Popover';
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 6e65af40eca..12d6e0afb23 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -4,10 +4,11 @@ import React, {
   useEffect,
   useMemo,
   type SetStateAction,
+  type CSSProperties,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -16,7 +17,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useResponsive } from '../ResponsiveProvider';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
 import { Link } from './common/Link';
@@ -202,29 +203,27 @@ function Notification({
                 onRemove();
                 setLoading(false);
               }}
-              className={String(
-                css({
-                  backgroundColor: 'transparent',
-                  border: `1px solid ${
-                    positive
-                      ? theme.noticeBorder
-                      : error
-                        ? theme.errorBorder
-                        : theme.warningBorder
-                  }`,
-                  color: 'currentColor',
-                  ...styles.mediumText,
-                  flexShrink: 0,
-                  '&[data-hovered], &[data-pressed]': {
-                    backgroundColor: positive
-                      ? theme.noticeBackground
-                      : error
-                        ? theme.errorBackground
-                        : theme.warningBackground,
-                  },
-                  ...narrowStyle,
-                }),
-              )}
+              className={css({
+                backgroundColor: 'transparent',
+                border: `1px solid ${
+                  positive
+                    ? theme.noticeBorder
+                    : error
+                      ? theme.errorBorder
+                      : theme.warningBorder
+                }`,
+                color: 'currentColor',
+                ...styles.mediumText,
+                flexShrink: 0,
+                '&[data-hovered], &[data-pressed]': {
+                  backgroundColor: positive
+                    ? theme.noticeBackground
+                    : error
+                      ? theme.errorBackground
+                      : theme.warningBackground,
+                },
+                ...narrowStyle,
+              })}
             >
               {button.title}
             </ButtonWithLoading>
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index d3c287ded0f..469221d065c 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
index f8d83249145..6cae00556fe 100644
--- a/packages/desktop-client/src/components/PrivacyFilter.tsx
+++ b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -5,7 +5,7 @@ import React, {
   type ReactNode,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 import { useResponsive } from '../ResponsiveProvider';
@@ -73,7 +73,7 @@ function PrivacyOverlay({ children, ...props }) {
 
   return (
     <View
-      className={`${css(
+      className={css(
         [
           {
             display: 'inline-flex',
@@ -96,23 +96,23 @@ function PrivacyOverlay({ children, ...props }) {
           },
         ],
         style,
-      )}`}
+      )}
       {...restProps}
     >
       <div
-        className={`${css([
+        className={css([
           {
             display: 'flex',
             flexGrow: 1,
           },
-        ])}`}
+        ])}
       >
         {children}
       </div>
 
       <div
         aria-hidden="true"
-        className={`${css({
+        className={css({
           flexDirection: 'column',
           fontFamily: 'Redacted Script',
           height: '100%',
@@ -121,7 +121,7 @@ function PrivacyOverlay({ children, ...props }) {
           pointerEvents: 'none',
           position: 'absolute',
           width: '100%',
-        })}`}
+        })}
       >
         {children}
       </div>
diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
index db8c6f2bbf3..91914230927 100644
--- a/packages/desktop-client/src/components/ThemeSelector.tsx
+++ b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -1,10 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import type { Theme } from 'loot-core/src/types/prefs';
 
 import { SvgMoonStars, SvgSun, SvgSystem } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, themeOptions, useTheme } from '../style';
+import { themeOptions, useTheme } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 4aff726f9df..d80f409c6d4 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -1,13 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
-import { isDevelopmentEnvironment } from 'loot-core/src/shared/environment';
+import {
+  isDevelopmentEnvironment,
+  isElectron,
+} from 'loot-core/src/shared/environment';
 
 import { useActions } from '../hooks/useActions';
 import { useGlobalPref } from '../hooks/useGlobalPref';
@@ -22,7 +25,7 @@ import {
   SvgViewShow,
 } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, type CSSProperties, styles } from '../style';
+import { theme, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';
@@ -204,23 +207,21 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
     <Button
       variant="bare"
       aria-label="Sync"
-      className={String(
-        css({
-          ...(isMobile
-            ? {
-                ...style,
-                WebkitAppRegion: 'none',
-                ...mobileIconStyle,
-              }
-            : {
-                ...style,
-                WebkitAppRegion: 'none',
-                color: desktopColor,
-              }),
-          '&[data-hovered]': hoveredStyle,
-          '&[data-pressed]': activeStyle,
-        }),
-      )}
+      className={css({
+        ...(isMobile
+          ? {
+              ...style,
+              WebkitAppRegion: 'none',
+              ...mobileIconStyle,
+            }
+          : {
+              ...style,
+              WebkitAppRegion: 'none',
+              color: desktopColor,
+            }),
+        '&[data-hovered]': hoveredStyle,
+        '&[data-pressed]': activeStyle,
+      })}
       onPress={sync}
     >
       {isMobile ? (
@@ -342,7 +343,7 @@ export function Titlebar({ style }: TitlebarProps) {
         <PrivacyButton />
         {serverURL ? <SyncButton /> : null}
         <LoggedInUser />
-        <HelpMenu />
+        {!isElectron() && <HelpMenu />}
       </SpaceBetween>
     </View>
   );
diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
index 0a623e3528a..1a8009db0b5 100644
--- a/packages/desktop-client/src/components/accounts/Account.tsx
+++ b/packages/desktop-client/src/components/accounts/Account.tsx
@@ -68,6 +68,7 @@ import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
+import { type SavedFilter } from '../filters/SavedFilterMenuButton';
 import { TransactionList } from '../transactions/TransactionList';
 import { validateAccountName } from '../util/accountValidation';
 
@@ -283,7 +284,7 @@ type AccountInternalProps = {
 type AccountInternalState = {
   search: string;
   filterConditions: ConditionEntity[];
-  filterId: Record<string, unknown>;
+  filterId?: SavedFilter;
   filterConditionsOp: 'and' | 'or';
   loading: boolean;
   workingHard: boolean;
@@ -309,6 +310,14 @@ type AccountInternalState = {
   filteredAmount: null | number;
 };
 
+export type TableRef = MutableRefObject<{
+  edit: (updatedId: string | null, op?: string, someBool?: boolean) => void;
+  setRowAnimation: (animation: boolean) => void;
+  scrollTo: (focusId: string) => void;
+  scrollToTop: () => void;
+  getScrolledItem: () => string;
+} | null>;
+
 class AccountInternal extends PureComponent<
   AccountInternalProps,
   AccountInternalState
@@ -316,12 +325,7 @@ class AccountInternal extends PureComponent<
   paged: ReturnType<typeof pagedQuery> | null;
   rootQuery: Query;
   currentQuery: Query;
-  table: MutableRefObject<{
-    edit: (updatedId: string | null, op?: string, someBool?: boolean) => void;
-    setRowAnimation: (animation: boolean) => void;
-    scrollTo: (focusId: string) => void;
-    scrollToTop: () => void;
-  } | null>;
+  table: TableRef;
   unlisten?: () => void;
   dispatchSelected?: (action: Actions) => void;
 
@@ -333,7 +337,7 @@ class AccountInternal extends PureComponent<
     this.state = {
       search: '',
       filterConditions: props.filterConditions || [],
-      filterId: {},
+      filterId: undefined,
       filterConditionsOp: 'and',
       loading: true,
       workingHard: false,
@@ -859,7 +863,7 @@ class AccountInternal extends PureComponent<
     return {
       name: `balance-query-${id}`,
       query: this.makeRootQuery().calculate({ $sum: '$amount' }),
-    };
+    } as const;
   }
 
   getFilteredAmount = async () => {
@@ -1307,13 +1311,10 @@ class AccountInternal extends PureComponent<
     }
   };
 
-  onReloadSavedFilter = (
-    savedFilter: TransactionFilterEntity & { status?: string },
-    item: string,
-  ) => {
+  onReloadSavedFilter = (savedFilter: SavedFilter, item: string) => {
     if (item === 'reload') {
       const [savedFilter] = this.props.savedFilters.filter(
-        f => f.id === this.state.filterId.id,
+        f => f.id === this.state.filterId?.id,
       );
       this.setState({ filterConditionsOp: savedFilter.conditionsOp ?? 'and' });
       this.applyFilters([...savedFilter.conditions]);
@@ -1330,7 +1331,7 @@ class AccountInternal extends PureComponent<
 
   onClearFilters = () => {
     this.setState({ filterConditionsOp: 'and' });
-    this.setState({ filterId: {} });
+    this.setState({ filterId: undefined });
     this.applyFilters([]);
     if (this.state.search !== '') {
       this.onSearch(this.state.search);
@@ -1360,7 +1361,7 @@ class AccountInternal extends PureComponent<
   onDeleteFilter = (condition: RuleConditionEntity) => {
     this.applyFilters(this.state.filterConditions.filter(c => c !== condition));
     if (this.state.filterConditions.length === 1) {
-      this.setState({ filterId: {} });
+      this.setState({ filterId: undefined });
       this.setState({ filterConditionsOp: 'and' });
     } else {
       this.setState({
@@ -1715,9 +1716,9 @@ class AccountInternal extends PureComponent<
                 isSorted={this.state.sort !== null}
                 reconcileAmount={reconcileAmount}
                 search={this.state.search}
+                // @ts-expect-error fix me
                 filterConditions={this.state.filterConditions}
                 filterConditionsOp={this.state.filterConditionsOp}
-                pushModal={this.props.pushModal}
                 onSearch={this.onSearch}
                 onShowTransactions={this.onShowTransactions}
                 onMenuSelect={this.onMenuSelect}
diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.tsx
similarity index 68%
rename from packages/desktop-client/src/components/accounts/Header.jsx
rename to packages/desktop-client/src/components/accounts/Header.tsx
index 319d8251f2d..c45ae73eb1c 100644
--- a/packages/desktop-client/src/components/accounts/Header.jsx
+++ b/packages/desktop-client/src/components/accounts/Header.tsx
@@ -1,7 +1,20 @@
-import React, { useState, useRef, Fragment } from 'react';
+import React, {
+  useState,
+  useRef,
+  Fragment,
+  type ReactNode,
+  type ComponentProps,
+} from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
 
+import {
+  type AccountEntity,
+  type RuleConditionEntity,
+  type TransactionEntity,
+  type TransactionFilterEntity,
+} from 'loot-core/types/models';
+
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { useSplitsExpanded } from '../../hooks/useSplitsExpanded';
 import { useSyncServerStatus } from '../../hooks/useSyncServerStatus';
@@ -11,6 +24,7 @@ import {
   SvgArrowsExpand3,
   SvgArrowsShrink3,
   SvgDownloadThickBottom,
+  SvgLockClosed,
   SvgPencil1,
 } from '../../icons/v2';
 import { theme, styles } from '../../style';
@@ -26,12 +40,89 @@ import { Stack } from '../common/Stack';
 import { View } from '../common/View';
 import { FilterButton } from '../filters/FiltersMenu';
 import { FiltersStack } from '../filters/FiltersStack';
+import { type SavedFilter } from '../filters/SavedFilterMenuButton';
 import { NotesButton } from '../NotesButton';
 import { SelectedTransactionsButton } from '../transactions/SelectedTransactionsButton';
 
+import { type TableRef } from './Account';
 import { Balances } from './Balance';
 import { ReconcilingMessage, ReconcileMenu } from './Reconcile';
 
+type AccountHeaderProps = {
+  tableRef: TableRef;
+  editingName: boolean;
+  isNameEditable: boolean;
+  workingHard: boolean;
+  accountName: string;
+  account: AccountEntity;
+  filterId?: SavedFilter;
+  savedFilters: TransactionFilterEntity[];
+  accountsSyncing: string[];
+  failedAccounts: AccountSyncSidebarProps['failedAccounts'];
+  accounts: AccountEntity[];
+  transactions: TransactionEntity[];
+  showBalances: boolean;
+  showExtraBalances: boolean;
+  showCleared: boolean;
+  showReconciled: boolean;
+  showEmptyMessage: boolean;
+  balanceQuery: ComponentProps<typeof ReconcilingMessage>['balanceQuery'];
+  reconcileAmount: number;
+  canCalculateBalance: () => boolean;
+  isFiltered: boolean;
+  filteredAmount: number;
+  isSorted: boolean;
+  search: string;
+  filterConditions: RuleConditionEntity[];
+  filterConditionsOp: 'and' | 'or';
+  onSearch: (newSearch: string) => void;
+  onAddTransaction: () => void;
+  onShowTransactions: ComponentProps<
+    typeof SelectedTransactionsButton
+  >['onShow'];
+  onDoneReconciling: ComponentProps<typeof ReconcilingMessage>['onDone'];
+  onCreateReconciliationTransaction: ComponentProps<
+    typeof ReconcilingMessage
+  >['onCreateTransaction'];
+  onToggleExtraBalances: ComponentProps<
+    typeof Balances
+  >['onToggleExtraBalances'];
+  onSaveName: AccountNameFieldProps['onSaveName'];
+  saveNameError: AccountNameFieldProps['saveNameError'];
+  onExposeName: (isExposed: boolean) => void;
+  onSync: () => void;
+  onImport: () => void;
+  onMenuSelect: AccountMenuProps['onMenuSelect'];
+  onReconcile: ComponentProps<typeof ReconcileMenu>['onReconcile'];
+  onBatchEdit: ComponentProps<typeof SelectedTransactionsButton>['onEdit'];
+  onBatchDelete: ComponentProps<typeof SelectedTransactionsButton>['onDelete'];
+  onBatchDuplicate: ComponentProps<
+    typeof SelectedTransactionsButton
+  >['onDuplicate'];
+  onBatchLinkSchedule: ComponentProps<
+    typeof SelectedTransactionsButton
+  >['onLinkSchedule'];
+  onBatchUnlinkSchedule: ComponentProps<
+    typeof SelectedTransactionsButton
+  >['onUnlinkSchedule'];
+  onApplyFilter: (filter: RuleConditionEntity) => void;
+} & Pick<
+  ComponentProps<typeof SelectedTransactionsButton>,
+  | 'onCreateRule'
+  | 'onScheduleAction'
+  | 'onSetTransfer'
+  | 'onMakeAsSplitTransaction'
+  | 'onMakeAsNonSplitTransactions'
+> &
+  Pick<
+    ComponentProps<typeof FiltersStack>,
+    | 'onUpdateFilter'
+    | 'onDeleteFilter'
+    | 'onConditionsOpChange'
+    | 'onClearFilters'
+    | 'onReloadSavedFilter'
+  >;
+
 export function AccountHeader({
   tableRef,
   editingName,
@@ -59,7 +150,6 @@ export function AccountHeader({
   search,
   filterConditions,
   filterConditionsOp,
-  pushModal,
   onSearch,
   onAddTransaction,
   onShowTransactions,
@@ -89,18 +179,20 @@ export function AccountHeader({
   onSetTransfer,
   onMakeAsSplitTransaction,
   onMakeAsNonSplitTransactions,
-}) {
+}: AccountHeaderProps) {
   const { t } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
-  const searchInput = useRef(null);
+  const [reconcileOpen, setReconcileOpen] = useState(false);
+  const searchInput = useRef<HTMLInputElement>(null);
   const triggerRef = useRef(null);
+  const reconcileRef = useRef(null);
   const splitsExpanded = useSplitsExpanded();
   const syncServerStatus = useSyncServerStatus();
   const isUsingServer = syncServerStatus !== 'no-server';
   const isServerOffline = syncServerStatus === 'offline';
   const [_, setExpandSplitsPref] = useLocalPref('expand-splits');
 
-  let canSync = account && account.account_id && isUsingServer;
+  let canSync = !!(account?.account_id && isUsingServer);
   if (!account) {
     // All accounts - check for any syncable account
     canSync = !!accounts.find(account => !!account.account_id) && isUsingServer;
@@ -223,7 +315,6 @@ export function AccountHeader({
                     ? accountsSyncing.includes(account.id)
                     : accountsSyncing.length > 0
                 }
-                style={{ marginRight: 4 }}
               />{' '}
               {isServerOffline ? t('Bank Sync Offline') : t('Bank Sync')}
             </Button>
@@ -247,7 +338,8 @@ export function AccountHeader({
             </Button>
           )}
           <View style={{ flexShrink: 0 }}>
-            <FilterButton onApply={onApplyFilter} type="accounts" />
+            {/* @ts-expect-error fix me */}
+            <FilterButton onApply={onApplyFilter} />
           </View>
           <View style={{ flex: 1 }} />
           <Search
@@ -262,7 +354,6 @@ export function AccountHeader({
             </View>
           ) : (
             <SelectedTransactionsButton
-              account={account}
               getTransaction={id => transactions.find(t => t.id === id)}
               onShow={onShowTransactions}
               onDuplicate={onBatchDuplicate}
@@ -273,12 +364,43 @@ export function AccountHeader({
               onCreateRule={onCreateRule}
               onSetTransfer={onSetTransfer}
               onScheduleAction={onScheduleAction}
-              pushModal={pushModal}
               showMakeTransfer={showMakeTransfer}
               onMakeAsSplitTransaction={onMakeAsSplitTransaction}
               onMakeAsNonSplitTransactions={onMakeAsNonSplitTransactions}
             />
           )}
+          <View>
+            {account && (
+              <>
+                <Button
+                  ref={reconcileRef}
+                  variant="bare"
+                  aria-label={t('Reconcile')}
+                  style={{ padding: 6, marginLeft: 10 }}
+                  onPress={() => {
+                    setReconcileOpen(true);
+                  }}
+                >
+                  <View title={t('Reconcile')}>
+                    <SvgLockClosed width={14} height={14} />
+                  </View>
+                </Button>
+                <Popover
+                  placement="bottom"
+                  triggerRef={reconcileRef}
+                  style={{ width: 275 }}
+                  isOpen={reconcileOpen}
+                  onOpenChange={() => setReconcileOpen(false)}
+                >
+                  <ReconcileMenu
+                    account={account}
+                    onClose={() => setReconcileOpen(false)}
+                    onReconcile={onReconcile}
+                  />
+                </Popover>
+              </>
+            )}
+          </View>
           <Button
             variant="bare"
             aria-label={
@@ -287,7 +409,7 @@ export function AccountHeader({
                 : t('Expand split transactions')
             }
             isDisabled={search !== '' || filterConditions.length > 0}
-            style={{ padding: 6, marginLeft: 10 }}
+            style={{ padding: 6 }}
             onPress={onToggleSplits}
           >
             <View
@@ -330,8 +452,6 @@ export function AccountHeader({
                     setMenuOpen(false);
                     onMenuSelect(item);
                   }}
-                  onReconcile={onReconcile}
-                  onClose={() => setMenuOpen(false)}
                 />
               </Popover>
             </View>
@@ -354,10 +474,14 @@ export function AccountHeader({
                     onMenuSelect(item);
                   }}
                   items={[
-                    isSorted && {
-                      name: 'remove-sorting',
-                      text: t('Remove all sorting'),
-                    },
+                    ...(isSorted
+                      ? [
+                          {
+                            name: 'remove-sorting',
+                            text: t('Remove all sorting'),
+                          } as const,
+                        ]
+                      : []),
                     { name: 'export', text: t('Export') },
                   ]}
                 />
@@ -392,7 +516,23 @@ export function AccountHeader({
   );
 }
 
-function AccountSyncSidebar({ account, failedAccounts, accountsSyncing }) {
+type AccountSyncSidebarProps = {
+  account: AccountEntity;
+  failedAccounts: Map<
+    string,
+    {
+      type: string;
+      code: string;
+    }
+  >;
+  accountsSyncing: string[];
+};
+
+function AccountSyncSidebar({
+  account,
+  failedAccounts,
+  accountsSyncing,
+}: AccountSyncSidebarProps) {
   return (
     <View
       style={{
@@ -410,6 +550,16 @@ function AccountSyncSidebar({ account, failedAccounts, accountsSyncing }) {
   );
 }
 
+type AccountNameFieldProps = {
+  account: AccountEntity;
+  accountName: string;
+  isNameEditable: boolean;
+  editingName: boolean;
+  saveNameError?: ReactNode;
+  onSaveName: (newName: string) => void;
+  onExposeName: (isExposed: boolean) => void;
+};
+
 function AccountNameField({
   account,
   accountName,
@@ -418,7 +568,7 @@ function AccountNameField({
   saveNameError,
   onSaveName,
   onExposeName,
-}) {
+}: AccountNameFieldProps) {
   const { t } = useTranslation();
 
   if (editingName) {
@@ -427,7 +577,7 @@ function AccountNameField({
         <InitialFocus>
           <Input
             defaultValue={accountName}
-            onEnter={e => onSaveName(e.target.value)}
+            onEnter={e => onSaveName(e.currentTarget.value)}
             onBlur={e => onSaveName(e.target.value)}
             onEscape={() => onExposeName(false)}
             style={{
@@ -515,6 +665,28 @@ function AccountNameField({
   }
 }
 
+type AccountMenuProps = {
+  account: AccountEntity;
+  canSync: boolean;
+  showBalances: boolean;
+  canShowBalances: boolean;
+  showCleared: boolean;
+  showReconciled: boolean;
+  isSorted: boolean;
+  onMenuSelect: (
+    item:
+      | 'link'
+      | 'unlink'
+      | 'close'
+      | 'reopen'
+      | 'export'
+      | 'toggle-balance'
+      | 'remove-sorting'
+      | 'toggle-cleared'
+      | 'toggle-reconciled',
+  ) => void;
+};
+
 function AccountMenu({
   account,
   canSync,
@@ -522,41 +694,36 @@ function AccountMenu({
   canShowBalances,
   showCleared,
   showReconciled,
-  onClose,
   isSorted,
-  onReconcile,
   onMenuSelect,
-}) {
+}: AccountMenuProps) {
   const { t } = useTranslation();
-  const [tooltip, setTooltip] = useState('default');
   const syncServerStatus = useSyncServerStatus();
 
-  return tooltip === 'reconcile' ? (
-    <ReconcileMenu
-      account={account}
-      onClose={onClose}
-      onReconcile={onReconcile}
-    />
-  ) : (
+  return (
     <Menu
       onMenuSelect={item => {
-        if (item === 'reconcile') {
-          setTooltip('reconcile');
-        } else {
-          onMenuSelect(item);
-        }
+        onMenuSelect(item);
       }}
       items={[
-        isSorted && {
-          name: 'remove-sorting',
-          text: t('Remove all sorting'),
-        },
-        canShowBalances && {
-          name: 'toggle-balance',
-          text: showBalances
-            ? t('Hide running balance')
-            : t('Show running balance'),
-        },
+        ...(isSorted
+          ? [
+              {
+                name: 'remove-sorting',
+                text: t('Remove all sorting'),
+              } as const,
+            ]
+          : []),
+        ...(canShowBalances
+          ? [
+              {
+                name: 'toggle-balance',
+                text: showBalances
+                  ? t('Hide running balance')
+                  : t('Show running balance'),
+              } as const,
+            ]
+          : []),
         {
           name: 'toggle-cleared',
           text: showCleared
@@ -570,22 +737,28 @@ function AccountMenu({
             : t('Show reconciled transactions'),
         },
         { name: 'export', text: t('Export') },
-        { name: 'reconcile', text: t('Reconcile') },
-        account &&
-          !account.closed &&
-          (canSync
-            ? {
-                name: 'unlink',
-                text: t('Unlink account'),
-              }
-            : syncServerStatus === 'online' && {
-                name: 'link',
-                text: t('Link account'),
-              }),
-        account.closed
-          ? { name: 'reopen', text: t('Reopen account') }
-          : { name: 'close', text: t('Close account') },
-      ].filter(x => x)}
+        ...(account && !account.closed
+          ? canSync
+            ? [
+                {
+                  name: 'unlink',
+                  text: t('Unlink account'),
+                } as const,
+              ]
+            : syncServerStatus === 'online'
+              ? [
+                  {
+                    name: 'link',
+                    text: t('Link account'),
+                  } as const,
+                ]
+              : []
+          : []),
+
+        ...(account.closed
+          ? [{ name: 'reopen', text: t('Reopen account') } as const]
+          : [{ name: 'close', text: t('Close account') } as const]),
+      ]}
     />
   );
 }
diff --git a/packages/desktop-client/src/components/alerts.tsx b/packages/desktop-client/src/components/alerts.tsx
index 7cb177b8f78..ee04560d1ff 100644
--- a/packages/desktop-client/src/components/alerts.tsx
+++ b/packages/desktop-client/src/components/alerts.tsx
@@ -1,8 +1,12 @@
 // @ts-strict-ignore
-import React, { type ComponentType, type ReactNode } from 'react';
+import React, {
+  type ComponentType,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
 import { SvgExclamationOutline, SvgInformationOutline } from '../icons/v1';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index 29fafa3f478..5d7b5a4e318 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -4,16 +4,17 @@ import React, {
   type ComponentProps,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { type AccountEntity } from 'loot-core/src/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
 
@@ -208,8 +209,9 @@ function AccountItem({
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -220,8 +222,8 @@ function AccountItem({
           paddingLeft: 20,
           borderRadius: embedded ? 4 : 0,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-account-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index ffc5ae5479c..a39751c19eb 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -11,8 +11,8 @@ import React, {
   type ChangeEvent,
 } from 'react';
 
+import { css, cx } from '@emotion/css';
 import Downshift, { type StateChangeTypes } from 'downshift';
-import { css } from 'glamor';
 
 import { getNormalisedString } from 'loot-core/src/shared/normalisation';
 
@@ -139,7 +139,8 @@ function fireUpdate<T extends Item>(
 }
 
 function defaultRenderInput(props: ComponentProps<typeof Input>) {
-  return <Input {...props} />;
+  // data-1p-ignore disables 1Password autofill behaviour
+  return <Input data-1p-ignore {...props} />;
 }
 
 function defaultRenderItems<T extends Item>(
@@ -177,14 +178,14 @@ function defaultRenderItems<T extends Item>(
             // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
             role="button"
             key={name}
-            className={`${css({
+            className={css({
               padding: 5,
               cursor: 'default',
               backgroundColor:
                 highlightedIndex === index
                   ? theme.menuAutoCompleteBackgroundHover
-                  : null,
-            })}`}
+                  : undefined,
+            })}
           >
             {name}
           </div>
@@ -442,7 +443,10 @@ function SingleAutocomplete<T extends Item>({
         // Super annoying but it works best to return a div so we
         // can't use a View here, but we can fake it be using the
         // className
-        <div className={`view ${css({ display: 'flex' })}`} {...containerProps}>
+        <div
+          className={cx('view', css({ display: 'flex' }))}
+          {...containerProps}
+        >
           <View ref={triggerRef} style={{ flexShrink: 0 }}>
             {renderInput(
               getInputProps({
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index ea5dc0d57b7..f223b6335ac 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -7,11 +7,12 @@ import React, {
   type ComponentType,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
   useCallback,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { trackingBudget, envelopeBudget } from 'loot-core/client/queries';
 import { integerToCurrency } from 'loot-core/shared/util';
@@ -25,7 +26,7 @@ import { useCategories } from '../../hooks/useCategories';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { SvgSplit } from '../../icons/v0';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents';
 import { makeAmountFullStyle } from '../budget/util';
 import { Text } from '../common/Text';
@@ -398,8 +399,9 @@ function CategoryItem({
       style={style}
       // See comment above.
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -410,8 +412,8 @@ function CategoryItem({
           paddingLeft: 20,
           borderRadius: embedded ? 4 : 0,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-category-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
index 2b0004faa5c..163772c100a 100644
--- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
+++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
-import { type CSSProperties } from '../../style/types';
 
 type ItemHeaderProps = {
   title: string;
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
index e567804f658..4490f083f9a 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -9,11 +9,12 @@ import React, {
   type SVGProps,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { createPayee } from 'loot-core/src/client/actions/queries';
 import { getActivePayees } from 'loot-core/src/client/reducers/queries';
@@ -27,7 +28,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useCommonPayees, usePayees } from '../../hooks/usePayees';
 import { SvgAdd, SvgBookmark } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
@@ -605,8 +606,9 @@ function PayeeItem({
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -617,8 +619,8 @@ function PayeeItem({
           padding: 4,
           paddingLeft: paddingLeftOverFromIcon,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-payee-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index b82be3ba842..9f04c1f1691 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -2,16 +2,17 @@
 import React, {
   type ComponentType,
   type ComponentPropsWithoutRef,
+  type CSSProperties,
   useCallback,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
 import { type Binding } from '../spreadsheet';
@@ -124,18 +125,16 @@ export function BalanceWithCarryover({
 
   const getDefaultClassName = useCallback(
     (balanceValue: number) =>
-      String(
-        css({
-          ...getBalanceAmountStyle(balanceValue),
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textAlign: 'right',
-          ...(!isDisabled && {
-            cursor: 'pointer',
-          }),
-          ':hover': { textDecoration: 'underline' },
+      css({
+        ...getBalanceAmountStyle(balanceValue),
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'right',
+        ...(!isDisabled && {
+          cursor: 'pointer',
         }),
-      ),
+        ':hover': { textDecoration: 'underline' },
+      }),
     [getBalanceAmountStyle, isDisabled],
   );
 
diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
index 3315ab33655..a6b2e46570f 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { useSpring, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { addMonths, subMonths } from 'loot-core/src/shared/months';
 
@@ -67,13 +67,13 @@ export function BudgetSummaries({ SummaryComponent }: BudgetSummariesProps) {
 
   return (
     <div
-      className={`${css([
+      className={css([
         { flex: 1, overflow: 'hidden' },
         months.length === 1 && {
           marginLeft: -4,
           marginRight: -4,
         },
-      ])}`}
+      ])}
       ref={containerRef}
     >
       <animated.div
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 86f005dc5ba..b51f4f51993 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -1,7 +1,13 @@
-import React, { type ComponentProps, memo, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type CSSProperties,
+  memo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -10,7 +16,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme, type CSSProperties } from '../../../style';
+import { styles, theme } from '../../../style';
 import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
@@ -366,13 +372,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': { textDecoration: 'underline' },
-                    ...makeAmountGrey(props.value),
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': { textDecoration: 'underline' },
+                  ...makeAmountGrey(props.value),
+                })}
               />
             )}
           </EnvelopeCellValue>
@@ -476,12 +480,10 @@ export function IncomeCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': { textDecoration: 'underline' },
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': { textDecoration: 'underline' },
+                })}
               />
             )}
           </EnvelopeCellValue>
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 71d118844b5..390542bcf41 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -103,7 +103,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
           </View>
 
           <div
-            className={`${css([
+            className={css([
               {
                 textAlign: 'center',
                 marginTop: 3,
@@ -112,7 +112,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 textDecorationSkip: 'ink',
               },
               currentMonth === month && { fontWeight: 'bold' },
-            ])}`}
+            ])}
           >
             {monthUtils.format(month, 'MMMM')}
           </div>
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 bc4fa2000ae..e9a6ad3be96 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,8 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { CoverMenu } from '../CoverMenu';
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
index 04dafd37e45..37929d8c444 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { theme, styles, type CSSProperties } from '../../../../style';
+import { theme, styles } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { Tooltip } from '../../../common/Tooltip';
 import { View } from '../../../common/View';
@@ -72,7 +72,7 @@ export function ToBudgetAmount({
             <Block
               onClick={onClick}
               data-cellname={sheetName}
-              className={`${css([
+              className={css([
                 styles.veryLargeText,
                 {
                   fontWeight: 400,
@@ -88,7 +88,7 @@ export function ToBudgetAmount({
                   },
                 },
                 amountStyle,
-              ])}`}
+              ])}
             >
               {format(num, 'financial')}
             </Block>
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
index a72c7f3b124..357ef3200b5 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { styles, type CSSProperties } from '../../../../style';
+import { styles } from '../../../../style';
 import { AlignedText } from '../../../common/AlignedText';
 import { Block } from '../../../common/Block';
 import { Tooltip } from '../../../common/Tooltip';
diff --git a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
index b9bb66eda33..d1381fcdc4d 100644
--- a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -1,8 +1,14 @@
 // @ts-strict-ignore
-import React, { type ComponentProps, memo, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type CSSProperties,
+  memo,
+  useRef,
+  useState,
+} from 'react';
 import { Trans } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -11,7 +17,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme, type CSSProperties } from '../../../style';
+import { styles, theme } from '../../../style';
 import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
@@ -367,15 +373,13 @@ export const CategoryMonth = memo(function CategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': {
-                      textDecoration: 'underline',
-                    },
-                    ...makeAmountGrey(props.value),
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': {
+                    textDecoration: 'underline',
+                  },
+                  ...makeAmountGrey(props.value),
+                })}
               />
             )}
           </TrackingCellValue>
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 54dea1fb215..64acf378f2c 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
@@ -2,7 +2,7 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -108,15 +108,13 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
           </View>
 
           <div
-            className={`${css([
-              {
-                textAlign: 'center',
-                marginTop: 3,
-                fontSize: 18,
-                fontWeight: 500,
-                textDecorationSkip: 'ink',
-              },
-            ])}`}
+            className={css({
+              textAlign: 'center',
+              marginTop: 3,
+              fontSize: 18,
+              fontWeight: 500,
+              textDecorationSkip: 'ink',
+            })}
           >
             {monthUtils.format(month, 'MMMM')}
           </div>
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
index 9961e94ddb6..b891b987650 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
-
 import { BudgetTotal } from './BudgetTotal';
 import { ExpenseProgress } from './ExpenseProgress';
 
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
index 8aabbff2dd1..1cb82ab8752 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
-
 import { BudgetTotal } from './BudgetTotal';
 import { IncomeProgress } from './IncomeProgress';
 
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 dfadfa9436a..3cb5ab658f6 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { theme, type CSSProperties, styles } from '../../../../style';
+import { theme, styles } from '../../../../style';
 import { AlignedText } from '../../../common/AlignedText';
 import { Text } from '../../../common/Text';
 import { Tooltip } from '../../../common/Tooltip';
@@ -74,16 +74,14 @@ export function Saved({ projected, style }: SavedProps) {
         }}
       >
         <View
-          className={`${css([
-            {
-              fontSize: 25,
-              color: projected
-                ? theme.warningText
-                : isNegative
-                  ? theme.errorTextDark
-                  : theme.upcomingText,
-            },
-          ])}`}
+          className={css({
+            fontSize: 25,
+            color: projected
+              ? theme.warningText
+              : isNegative
+                ? theme.errorTextDark
+                : theme.upcomingText,
+          })}
         >
           <PrivacyFilter>{format(saved, 'financial')}</PrivacyFilter>
         </View>
diff --git a/packages/desktop-client/src/components/budget/util.ts b/packages/desktop-client/src/components/budget/util.ts
index acea75fd39c..97a51a08ba2 100644
--- a/packages/desktop-client/src/components/budget/util.ts
+++ b/packages/desktop-client/src/components/budget/util.ts
@@ -1,4 +1,6 @@
 // @ts-strict-ignore
+import { type CSSProperties } from 'react';
+
 import { t } from 'i18next';
 
 import { type useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
@@ -11,7 +13,7 @@ import {
 } from 'loot-core/src/types/models';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { type DropPosition } from '../sort';
 
 import { getValidMonthBounds } from './MonthsContext';
diff --git a/packages/desktop-client/src/components/common/AlignedText.tsx b/packages/desktop-client/src/components/common/AlignedText.tsx
index 79b055265d8..81952064155 100644
--- a/packages/desktop-client/src/components/common/AlignedText.tsx
+++ b/packages/desktop-client/src/components/common/AlignedText.tsx
@@ -1,6 +1,4 @@
-import { type ComponentProps, type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import { type ComponentProps, type ReactNode, type CSSProperties } from 'react';
 
 import { Block } from './Block';
 import { View } from './View';
diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 7be0dd3590b..021f4cad201 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -1,8 +1,6 @@
-import { type HTMLProps, type Ref } from 'react';
+import { type HTMLProps, type Ref, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
@@ -12,10 +10,6 @@ type BlockProps = HTMLProps<HTMLDivElement> & {
 export function Block(props: BlockProps) {
   const { className = '', style, innerRef, ...restProps } = props;
   return (
-    <div
-      {...restProps}
-      ref={innerRef}
-      className={`${className} ${css(style)}`}
-    />
+    <div {...restProps} ref={innerRef} className={cx(className, css(style))} />
   );
 }
diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
index 0cb88a7a638..d0662efe6b4 100644
--- a/packages/desktop-client/src/components/common/Button.tsx
+++ b/packages/desktop-client/src/components/common/Button.tsx
@@ -1,9 +1,14 @@
-import React, { forwardRef, type ElementType, type HTMLProps } from 'react';
+import React, {
+  forwardRef,
+  type ElementType,
+  type HTMLProps,
+  type CSSProperties,
+} from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 import { View } from './View';
 
@@ -153,7 +158,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     };
 
     const Component = as;
-    const buttonStyle = {
+    const buttonStyle: CSSProperties = {
       alignItems: 'center',
       justifyContent: 'center',
       flexShrink: 0,
@@ -168,8 +173,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       transition: 'box-shadow .25s',
       WebkitAppRegion: 'no-drag',
       ...styles.smallText,
-      ':hover': !disabled && hoveredStyle,
-      ':active': !disabled && activeStyle,
+      ':hover': !disabled ? hoveredStyle : {},
+      ':active': !disabled ? activeStyle : {},
       ...(hover && hoveredStyle),
       ...(pressed && activeStyle),
       ...style,
@@ -179,8 +184,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <Component
         ref={ref}
         {...(typeof as === 'string'
-          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (css(buttonStyle) as any)
+          ? { className: css(buttonStyle) }
           : { style: buttonStyle })}
         disabled={disabled}
         type={isSubmit ? 'submit' : 'button'}
diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
index 694429d573c..7fda685aec2 100644
--- a/packages/desktop-client/src/components/common/Button2.tsx
+++ b/packages/desktop-client/src/components/common/Button2.tsx
@@ -3,16 +3,14 @@ import React, {
   useMemo,
   type ComponentPropsWithoutRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
-import {
-  type ButtonRenderProps as ReactAriaButtonRenderProps,
-  Button as ReactAriaButton,
-} from 'react-aria-components';
+import { Button as ReactAriaButton } from 'react-aria-components';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/FormError.tsx b/packages/desktop-client/src/components/common/FormError.tsx
index 5828b503959..4b953cf7c9c 100644
--- a/packages/desktop-client/src/components/common/FormError.tsx
+++ b/packages/desktop-client/src/components/common/FormError.tsx
@@ -1,6 +1,4 @@
-import { type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import { type ReactNode, type CSSProperties } from 'react';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/InfoBubble.tsx b/packages/desktop-client/src/components/common/InfoBubble.tsx
new file mode 100644
index 00000000000..d28879d80e0
--- /dev/null
+++ b/packages/desktop-client/src/components/common/InfoBubble.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { SvgInformationCircle } from '../../icons/v2';
+import { theme } from '../../style';
+
+import { Text } from './Text';
+import { View } from './View';
+
+type InfoBubbleProps = {
+  label: string;
+  textWidth?: number;
+};
+
+export function InfoBubble({ label, textWidth }: InfoBubbleProps) {
+  const location = useLocation();
+  const [visible, setVisible] = useState(location.hash === '#info');
+
+  const width = textWidth || getStringWidth(label);
+
+  return visible ? (
+    <View style={{ userSelect: 'none' }}>
+      <SvgInformationCircle
+        style={{ height: '15px', cursor: 'pointer' }}
+        onClick={() => setVisible(false)}
+        onMouseLeave={() => setVisible(false)}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: '20px',
+          top: '-7px',
+          color: theme.buttonNormalText,
+          backgroundColor: theme.buttonNormalBackground,
+          padding: 5,
+          borderRadius: 4,
+          border: '1px solid ' + theme.buttonNormalBorder,
+          zIndex: 300,
+          boxShadow: theme.buttonPrimaryShadow,
+        }}
+      >
+        <Text
+          style={{
+            width,
+          }}
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  ) : (
+    <View style={{ userSelect: 'none' }}>
+      <SvgInformationCircle
+        style={{ height: '15px', cursor: 'pointer' }}
+        onClick={() => setVisible(true)}
+        onMouseOver={() => setTimeout(() => setVisible(true), 500)}
+      />
+    </View>
+  );
+}
+
+function getStringWidth(text: string): number {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  context.font = getComputedStyle(document.body).font;
+
+  return Math.ceil(context.measureText(text).width);
+}
diff --git a/packages/desktop-client/src/components/common/InlineField.tsx b/packages/desktop-client/src/components/common/InlineField.tsx
index 9328f674fdf..b5a8b165fa2 100644
--- a/packages/desktop-client/src/components/common/InlineField.tsx
+++ b/packages/desktop-client/src/components/common/InlineField.tsx
@@ -1,8 +1,6 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css } from '@emotion/css';
 
 type InlineFieldProps = {
   label: ReactNode;
@@ -21,7 +19,7 @@ export function InlineField({
 }: InlineFieldProps) {
   return (
     <label
-      className={`${css(
+      className={css([
         {
           display: 'flex',
           flexDirection: 'row',
@@ -30,7 +28,7 @@ export function InlineField({
           width,
         },
         style,
-      )}`}
+      ])}
     >
       <div
         style={{
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index 161b91d1e8b..12a611513c5 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -2,14 +2,15 @@ import React, {
   type InputHTMLAttributes,
   type KeyboardEvent,
   type Ref,
+  type CSSProperties,
   useRef,
 } from 'react';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useProperFocus } from '../../hooks/useProperFocus';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 export const defaultInputStyle = {
   outline: 0,
@@ -50,21 +51,24 @@ export function Input({
   return (
     <input
       ref={mergedRef}
-      className={`${css(
-        defaultInputStyle,
-        {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          flexShrink: 0,
-          ':focus': {
-            border: '1px solid ' + theme.formInputBorderSelected,
-            boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+      className={cx(
+        css(
+          defaultInputStyle,
+          {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            flexShrink: 0,
+            ':focus': {
+              border: '1px solid ' + theme.formInputBorderSelected,
+              boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+            },
+            '::placeholder': { color: theme.formInputTextPlaceholder },
           },
-          '::placeholder': { color: theme.formInputTextPlaceholder },
-        },
-        styles.smallText,
-        style,
-      )} ${className}`}
+          styles.smallText,
+          style,
+        ),
+        className,
+      )}
       {...nativeProps}
       onKeyDown={e => {
         nativeProps.onKeyDown?.(e);
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index d7cb8b93a96..94b9bc87f3d 100644
--- a/packages/desktop-client/src/components/common/InputWithContent.tsx
+++ b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -1,6 +1,11 @@
-import { useState, type ComponentProps, type ReactNode } from 'react';
+import {
+  useState,
+  type ComponentProps,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { Input, defaultInputStyle } from './Input';
 import { View } from './View';
diff --git a/packages/desktop-client/src/components/common/Label.tsx b/packages/desktop-client/src/components/common/Label.tsx
index eed751274ef..aa39da93972 100644
--- a/packages/desktop-client/src/components/common/Label.tsx
+++ b/packages/desktop-client/src/components/common/Label.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, type ReactNode, type CSSProperties } from 'react';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 
 import { Text } from './Text';
 
diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx
index fe92ea84470..5ecd098cb75 100644
--- a/packages/desktop-client/src/components/common/Link.tsx
+++ b/packages/desktop-client/src/components/common/Link.tsx
@@ -2,15 +2,16 @@ import React, {
   type MouseEventHandler,
   type ComponentProps,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
 import { useNavigate } from '../../hooks/useNavigate';
-import { type CSSProperties, styles } from '../../style';
+import { styles } from '../../style';
 import { theme } from '../../style/theme';
 
 import { Button } from './Button2';
@@ -128,11 +129,7 @@ const InternalLink = ({
     <NavLink
       to={path}
       state={report ? { report } : {}}
-      className={`${css([
-        styles.smallText,
-        style,
-        match ? activeStyle : null,
-      ])}`}
+      className={css([styles.smallText, style, match ? activeStyle : null])}
     >
       {children}
     </NavLink>
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
index d6fe0d8315b..85d511191a4 100644
--- a/packages/desktop-client/src/components/common/Menu.tsx
+++ b/packages/desktop-client/src/components/common/Menu.tsx
@@ -5,9 +5,10 @@ import {
   useState,
   type ComponentType,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { Text } from './Text';
 import { Toggle } from './Toggle';
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 02f90e8e08c..5ca2b8c4c70 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -6,6 +6,7 @@ import React, {
   type ReactNode,
   type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
+  type CSSProperties,
 } from 'react';
 import {
   ModalOverlay as ReactAriaModalOverlay,
@@ -14,14 +15,14 @@ import {
 } from 'react-aria-components';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
+import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
-import { css } from 'glamor';
 
 import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { tokens } from '../../tokens';
 
 import { Button } from './Button2';
@@ -90,7 +91,7 @@ export const Modal = ({
         {modalProps => (
           <Dialog
             aria-label="Modal dialog"
-            className={`${css(styles.lightScrollbar)}`}
+            className={css(styles.lightScrollbar)}
             style={{
               outline: 'none', // remove focus outline
             }}
diff --git a/packages/desktop-client/src/components/common/Paragraph.tsx b/packages/desktop-client/src/components/common/Paragraph.tsx
index 256982e8041..ad736f8bd62 100644
--- a/packages/desktop-client/src/components/common/Paragraph.tsx
+++ b/packages/desktop-client/src/components/common/Paragraph.tsx
@@ -1,8 +1,6 @@
-import { type HTMLProps } from 'react';
+import { type HTMLProps, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css } from '@emotion/css';
 
 type ParagraphProps = HTMLProps<HTMLDivElement> & {
   style?: CSSProperties;
@@ -18,9 +16,13 @@ export function Paragraph({
   return (
     <div
       {...props}
-      className={`${css(!isLast && { marginBottom: 15 }, style, {
-        lineHeight: '1.5em',
-      })}`}
+      className={css([
+        !isLast && { marginBottom: 15 },
+        style,
+        {
+          lineHeight: '1.5em',
+        },
+      ])}
     >
       {children}
     </div>
diff --git a/packages/desktop-client/src/components/common/Popover.tsx b/packages/desktop-client/src/components/common/Popover.tsx
index 6ac4382ee1e..dd2c61522bb 100644
--- a/packages/desktop-client/src/components/common/Popover.tsx
+++ b/packages/desktop-client/src/components/common/Popover.tsx
@@ -1,7 +1,7 @@
 import { type ComponentProps } from 'react';
 import { Popover as ReactAriaPopover } from 'react-aria-components';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { styles } from '../../style';
 
@@ -16,12 +16,12 @@ export const Popover = ({
     <ReactAriaPopover
       placement="bottom end"
       offset={1}
-      className={`${css({
+      className={css({
         ...styles.tooltip,
         ...styles.lightScrollbar,
         padding: 0,
         ...style,
-      })}`}
+      })}
       shouldCloseOnInteractOutside={element => {
         if (shouldCloseOnInteractOutside) {
           return shouldCloseOnInteractOutside(element);
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index 38b99c20e31..dd154c80bd8 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -74,7 +74,7 @@ export function Search({
           transition: 'color .25s',
         },
         ':focus': isInModal
-          ? null
+          ? {}
           : {
               '::placeholder': {
                 color: theme.formInputTextPlaceholderSelected,
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index 0ecfde802e1..f30dd3b3199 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -1,9 +1,6 @@
-import { useRef, useState } from 'react';
-
-import { css } from 'glamor';
+import { useRef, useState, type CSSProperties } from 'react';
 
 import { SvgExpandArrow } from '../../icons/v0';
-import { type CSSProperties } from '../../style';
 
 import { Button } from './Button2';
 import { Menu } from './Menu';
@@ -29,6 +26,7 @@ type SelectProps<Value> = {
   disabledKeys?: Value[];
   style?: CSSProperties;
   popoverStyle?: CSSProperties;
+  className?: string;
 };
 
 /**
@@ -55,6 +53,7 @@ export function Select<const Value = string>({
   disabledKeys = [],
   style = {},
   popoverStyle = {},
+  className,
 }: SelectProps<Value>) {
   const targetOption = options
     .filter(isValueOption)
@@ -73,7 +72,8 @@ export function Select<const Value = string>({
         onPress={() => {
           setIsOpen(true);
         }}
-        className={String(css(style))}
+        style={style}
+        className={className}
       >
         <View
           style={{
diff --git a/packages/desktop-client/src/components/common/SpaceBetween.tsx b/packages/desktop-client/src/components/common/SpaceBetween.tsx
index 25e330082a1..582a4745d00 100644
--- a/packages/desktop-client/src/components/common/SpaceBetween.tsx
+++ b/packages/desktop-client/src/components/common/SpaceBetween.tsx
@@ -1,6 +1,4 @@
-import React, { type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import React, { type CSSProperties, type ReactNode } from 'react';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/Stack.tsx b/packages/desktop-client/src/components/common/Stack.tsx
index 17f348bc487..739216aaf04 100644
--- a/packages/desktop-client/src/components/common/Stack.tsx
+++ b/packages/desktop-client/src/components/common/Stack.tsx
@@ -6,10 +6,9 @@ import React, {
   cloneElement,
   forwardRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
-import { type CSSProperties } from '../../style';
-
 import { Text } from './Text';
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/Text.tsx b/packages/desktop-client/src/components/common/Text.tsx
index 71d5be4c00e..82f487a88b6 100644
--- a/packages/desktop-client/src/components/common/Text.tsx
+++ b/packages/desktop-client/src/components/common/Text.tsx
@@ -3,11 +3,10 @@ import React, {
   type Ref,
   type ReactNode,
   forwardRef,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;
@@ -22,7 +21,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
     <span
       {...restProps}
       ref={innerRef ?? ref}
-      className={`${className} ${css(style)}`}
+      className={cx(className, css(style))}
     />
   );
 });
diff --git a/packages/desktop-client/src/components/common/Toggle.tsx b/packages/desktop-client/src/components/common/Toggle.tsx
index 594c8d9086b..70a5dbdc56b 100644
--- a/packages/desktop-client/src/components/common/Toggle.tsx
+++ b/packages/desktop-client/src/components/common/Toggle.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { View } from './View';
 
@@ -30,11 +30,11 @@ export const Toggle = ({
         checked={isOn}
         disabled={isDisabled}
         onChange={e => onToggle?.(e.target.checked)}
-        className={`${css({
+        className={css({
           height: 0,
           width: 0,
           visibility: 'hidden',
-        })}`}
+        })}
         type="checkbox"
       />
       <label
@@ -61,27 +61,26 @@ export const Toggle = ({
         <span
           data-toggle
           data-on={isOn}
-          className={String(
-            css(
-              {
-                content: ' ',
-                position: 'absolute',
-                top: '2px',
-                left: '2px',
-                width: '12px',
-                height: '12px',
-                borderRadius: '100px',
-                transition: '0.2s',
-                boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
-                backgroundColor: isDisabled
-                  ? theme.checkboxToggleDisabled
-                  : '#fff',
-              },
-              isOn && {
-                left: 'calc(100% - 2px)',
-                transform: 'translateX(-100%)',
-              },
-            ),
+          className={css(
+            {
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
+              position: 'absolute',
+              top: '2px',
+              left: '2px',
+              width: '12px',
+              height: '12px',
+              borderRadius: '100px',
+              transition: '0.2s',
+              boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+              backgroundColor: isDisabled
+                ? theme.checkboxToggleDisabled
+                : '#fff',
+            },
+            isOn && {
+              left: 'calc(100% - 2px)',
+              transform: 'translateX(-100%)',
+            },
           )}
         />
       </label>
diff --git a/packages/desktop-client/src/components/common/View.tsx b/packages/desktop-client/src/components/common/View.tsx
index 9a35e53350a..b940ea26803 100644
--- a/packages/desktop-client/src/components/common/View.tsx
+++ b/packages/desktop-client/src/components/common/View.tsx
@@ -2,17 +2,15 @@ import React, {
   forwardRef,
   type HTMLProps,
   type Ref,
-  type StyleHTMLAttributes,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type ViewProps = HTMLProps<HTMLDivElement> & {
   className?: string;
   style?: CSSProperties;
-  nativeStyle?: StyleHTMLAttributes<HTMLDivElement>;
+  nativeStyle?: CSSProperties;
   innerRef?: Ref<HTMLDivElement>;
 };
 
@@ -28,7 +26,7 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((props, ref) => {
       {...restProps}
       ref={innerRef ?? ref}
       style={nativeStyle}
-      className={`view ${className} ${css(style)}`}
+      className={cx('view', className, css(style))}
     />
   );
 });
diff --git a/packages/desktop-client/src/components/filters/FilterExpression.tsx b/packages/desktop-client/src/components/filters/FilterExpression.tsx
index 4272d0679dc..19704668997 100644
--- a/packages/desktop-client/src/components/filters/FilterExpression.tsx
+++ b/packages/desktop-client/src/components/filters/FilterExpression.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
@@ -6,7 +6,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 import { type RuleConditionEntity } from 'loot-core/src/types/models';
 
 import { SvgDelete } from '../../icons/v0';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
diff --git a/packages/desktop-client/src/components/filters/FilterMenu.tsx b/packages/desktop-client/src/components/filters/FilterMenu.tsx
index c3adb2048e8..94d389998c7 100644
--- a/packages/desktop-client/src/components/filters/FilterMenu.tsx
+++ b/packages/desktop-client/src/components/filters/FilterMenu.tsx
@@ -9,7 +9,7 @@ export function FilterMenu({
   filterId,
   onFilterMenuSelect,
 }: {
-  filterId: SavedFilter;
+  filterId?: SavedFilter;
   onFilterMenuSelect: (item: string) => void;
 }) {
   const { t } = useTranslation();
@@ -20,12 +20,12 @@ export function FilterMenu({
         onFilterMenuSelect(item);
       }}
       items={
-        !filterId.id
+        !filterId?.id
           ? [
               { name: 'save-filter', text: t('Save new filter') },
               { name: 'clear-filter', text: t('Clear all conditions') },
             ]
-          : filterId.id !== null && filterId.status === 'saved'
+          : filterId?.id !== null && filterId?.status === 'saved'
             ? [
                 { name: 'rename-filter', text: t('Rename') },
                 { name: 'delete-filter', text: t('Delete') },
diff --git a/packages/desktop-client/src/components/filters/FiltersStack.tsx b/packages/desktop-client/src/components/filters/FiltersStack.tsx
index ec639437e0a..f145c786864 100644
--- a/packages/desktop-client/src/components/filters/FiltersStack.tsx
+++ b/packages/desktop-client/src/components/filters/FiltersStack.tsx
@@ -32,7 +32,7 @@ export function FiltersStack({
   onDeleteFilter: (filter: RuleConditionEntity) => void;
   onClearFilters: () => void;
   onReloadSavedFilter: (savedFilter: SavedFilter, value?: string) => void;
-  filterId: SavedFilter;
+  filterId?: SavedFilter;
   savedFilters: TransactionFilterEntity[];
   onConditionsOpChange: (value: 'and' | 'or') => void;
 }) {
diff --git a/packages/desktop-client/src/components/filters/OpButton.tsx b/packages/desktop-client/src/components/filters/OpButton.tsx
index 606149badc4..a1f3017e8ba 100644
--- a/packages/desktop-client/src/components/filters/OpButton.tsx
+++ b/packages/desktop-client/src/components/filters/OpButton.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { friendlyOp } from 'loot-core/src/shared/rules';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 
 type OpButtonProps = {
@@ -19,19 +19,17 @@ export function OpButton({ op, isSelected, style, onPress }: OpButtonProps) {
     <Button
       variant="bare"
       style={style}
-      className={String(
-        css({
-          backgroundColor: theme.pillBackground,
-          marginBottom: 5,
-          ...(isSelected && {
+      className={css({
+        backgroundColor: theme.pillBackground,
+        marginBottom: 5,
+        ...(isSelected && {
+          color: theme.buttonNormalSelectedText,
+          '&,:hover,:active': {
+            backgroundColor: theme.buttonNormalSelectedBackground,
             color: theme.buttonNormalSelectedText,
-            '&,:hover,:active': {
-              backgroundColor: theme.buttonNormalSelectedBackground,
-              color: theme.buttonNormalSelectedText,
-            },
-          }),
+          },
         }),
-      )}
+      })}
       onPress={onPress}
     >
       {friendlyOp(op)}
diff --git a/packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx b/packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx
index bd42f61ead6..d6fd2e10021 100644
--- a/packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx
+++ b/packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx
@@ -32,7 +32,7 @@ export function SavedFilterMenuButton({
 }: {
   conditions: RuleConditionEntity[];
   conditionsOp: 'and' | 'or';
-  filterId: SavedFilter;
+  filterId?: SavedFilter;
   onClearFilters: () => void;
   onReloadSavedFilter: (savedFilter: SavedFilter, value?: string) => void;
   savedFilters: TransactionFilterEntity[];
@@ -44,8 +44,8 @@ export function SavedFilterMenuButton({
   const triggerRef = useRef(null);
   const [err, setErr] = useState(null);
   const [menuItem, setMenuItem] = useState('');
-  const [name, setName] = useState(filterId.name);
-  const id = filterId.id;
+  const [name, setName] = useState(filterId?.name ?? '');
+  const id = filterId?.id;
   let savedFilter: SavedFilter;
 
   const onFilterMenuSelect = async (item: string) => {
@@ -69,8 +69,8 @@ export function SavedFilterMenuButton({
         savedFilter = {
           conditions,
           conditionsOp,
-          id: filterId.id,
-          name: filterId.name,
+          id: filterId?.id,
+          name: filterId?.name ?? '',
           status: 'saved',
         };
         const response = await sendCatch('filter-update', {
@@ -137,9 +137,9 @@ export function SavedFilterMenuButton({
     }
 
     const updatedFilter = {
-      conditions: filterId.conditions,
-      conditionsOp: filterId.conditionsOp,
-      id: filterId.id,
+      conditions: filterId?.conditions,
+      conditionsOp: filterId?.conditionsOp,
+      id: filterId?.id,
       name,
     };
 
@@ -178,9 +178,9 @@ export function SavedFilterMenuButton({
               flexShrink: 0,
             }}
           >
-            {!filterId.id ? t('Unsaved filter') : filterId.name}&nbsp;
+            {!filterId?.id ? t('Unsaved filter') : filterId?.name}&nbsp;
           </Text>
-          {filterId.id && filterId.status !== 'saved' && (
+          {filterId?.id && filterId?.status !== 'saved' && (
             <Text>
               <Trans>(modified)</Trans>&nbsp;
             </Text>
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index 96a11633b7a..cebbd89a4a9 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -1,8 +1,12 @@
-import React, { type ReactNode, type ComponentProps } from 'react';
+import React, {
+  type ReactNode,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
@@ -73,65 +77,65 @@ export const Checkbox = (props: CheckboxProps) => {
     <input
       type="checkbox"
       {...props}
-      className={`${css(
-        [
-          {
-            position: 'relative',
-            margin: 0,
-            flexShrink: 0,
-            marginRight: 6,
-            width: 15,
-            height: 15,
-            appearance: 'none',
-            outline: 0,
-            border: '1px solid ' + theme.formInputBorder,
-            borderRadius: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: theme.checkboxText,
-            backgroundColor: theme.tableBackground,
-            ':checked': {
-              border: '1px solid ' + theme.checkboxBorderSelected,
-              backgroundColor: theme.checkboxBackgroundSelected,
-              '::after': {
-                display: 'block',
-                background:
-                  theme.checkboxBackgroundSelected +
-                  // eslint-disable-next-line rulesdir/typography
-                  ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
-                width: 9,
-                height: 9,
-                content: ' ',
-              },
+      className={css([
+        {
+          position: 'relative',
+          margin: 0,
+          flexShrink: 0,
+          marginRight: 6,
+          width: 15,
+          height: 15,
+          appearance: 'none',
+          outline: 0,
+          border: '1px solid ' + theme.formInputBorder,
+          borderRadius: 4,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.checkboxText,
+          backgroundColor: theme.tableBackground,
+          ':checked': {
+            border: '1px solid ' + theme.checkboxBorderSelected,
+            backgroundColor: theme.checkboxBackgroundSelected,
+            '::after': {
+              display: 'block',
+              background:
+                theme.checkboxBackgroundSelected +
+                // eslint-disable-next-line rulesdir/typography
+                ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
+              width: 9,
+              height: 9,
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
             },
-            ':disabled': {
-              border: '1px solid ' + theme.buttonNormalDisabledBorder,
-              backgroundColor: theme.buttonNormalDisabledBorder,
-            },
-            ':checked:disabled': {
-              border: '1px solid ' + theme.buttonNormalDisabledBorder,
+          },
+          ':disabled': {
+            border: '1px solid ' + theme.buttonNormalDisabledBorder,
+            backgroundColor: theme.buttonNormalDisabledBorder,
+          },
+          ':checked:disabled': {
+            border: '1px solid ' + theme.buttonNormalDisabledBorder,
+            backgroundColor: theme.buttonNormalDisabledBorder,
+            '::after': {
               backgroundColor: theme.buttonNormalDisabledBorder,
-              '::after': {
-                backgroundColor: theme.buttonNormalDisabledBorder,
-              },
             },
-            '&.focus-visible:focus': {
-              '::before': {
-                position: 'absolute',
-                top: -5,
-                bottom: -5,
-                left: -5,
-                right: -5,
-                border: '2px solid ' + theme.checkboxBorderSelected,
-                borderRadius: 6,
-                content: ' ',
-              },
+          },
+          '&.focus-visible:focus': {
+            '::before': {
+              position: 'absolute',
+              top: -5,
+              bottom: -5,
+              left: -5,
+              right: -5,
+              border: '2px solid ' + theme.checkboxBorderSelected,
+              borderRadius: 6,
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
             },
           },
-        ],
+        },
         props.style,
-      )}`}
+      ])}
     />
   );
 };
diff --git a/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx b/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
index 0f2cf928bb2..dbee0a6cb85 100644
--- a/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
+++ b/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
@@ -1,6 +1,6 @@
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, type CSSProperties } from 'react';
 
-import { theme, type CSSProperties } from '../../style';
+import { theme } from '../../style';
 import { View } from '../common/View';
 
 type FloatingActionBarProps = PropsWithChildren & {
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.tsx b/packages/desktop-client/src/components/mobile/MobileForms.tsx
index 7307ebae558..6f3035a4c0a 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileForms.tsx
@@ -3,11 +3,12 @@ import React, {
   type ComponentPropsWithRef,
   forwardRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { theme, styles, type CSSProperties } from '../../style';
+import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
 import { Input } from '../common/Input';
 import { Text } from '../common/Text';
diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
index 98a91445a06..01829cc3445 100644
--- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -1,5 +1,9 @@
 // @ts-strict-ignore
-import React, { type ComponentType, useEffect } from 'react';
+import React, {
+  type ComponentType,
+  useEffect,
+  type CSSProperties,
+} from 'react';
 import { NavLink } from 'react-router-dom';
 import { useSpring, animated, config } from 'react-spring';
 
@@ -17,7 +21,7 @@ import {
 import { SvgReports } from '../../icons/v1/Reports';
 import { SvgCalendar } from '../../icons/v2';
 import { useResponsive } from '../../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../../style';
+import { theme, styles } from '../../style';
 import { View } from '../common/View';
 import { useScroll } from '../ScrollProvider';
 
diff --git a/packages/desktop-client/src/components/mobile/PullToRefresh.tsx b/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
index 7838d190c02..01ccd3d1ccc 100644
--- a/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
+++ b/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
@@ -1,7 +1,7 @@
 import React, { type ComponentProps } from 'react';
 import BasePullToRefresh from 'react-simple-pull-to-refresh';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
 
@@ -11,16 +11,14 @@ export function PullToRefresh(props: PullToRefreshProps) {
       <BasePullToRefresh
         pullDownThreshold={80}
         resistance={2}
-        className={String(
-          css({
-            '& .ptr__pull-down': {
-              textAlign: 'center',
-            },
-            '& .ptr__children': {
-              overflow: 'hidden auto',
-            },
-          }),
-        )}
+        className={css({
+          '& .ptr__pull-down': {
+            textAlign: 'center',
+          },
+          '& .ptr__children': {
+            overflow: 'hidden auto',
+          },
+        })}
         {...props}
         // Force async because the library errors out when a sync onRefresh method is provided.
         onRefresh={async () => {
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index d57ca280309..577e6d5c23e 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
-import { css } from 'glamor';
 import memoizeOne from 'memoize-one';
 
 import { collapseModals, pushModal } from 'loot-core/client/actions';
@@ -801,15 +801,13 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
       >
         <Button
           variant="bare"
-          className={String(
-            css({
-              flexShrink: 0,
-              color: theme.pageTextSubdued,
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            flexShrink: 0,
+            color: theme.pageTextSubdued,
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
@@ -996,15 +994,13 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
       >
         <Button
           variant="bare"
-          className={String(
-            css({
-              flexShrink: 0,
-              color: theme.pageTextSubdued,
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            flexShrink: 0,
+            color: theme.pageTextSubdued,
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
diff --git a/packages/desktop-client/src/components/mobile/budget/ListItem.tsx b/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
index 99c577dd2a2..f8c7c753335 100644
--- a/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
@@ -1,6 +1,10 @@
-import React, { type ComponentProps, type ReactNode } from 'react';
+import React, {
+  type ComponentProps,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { View } from '../../common/View';
 
 const ROW_HEIGHT = 50;
diff --git a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
index d00d43b097e..d7c2564b8f2 100644
--- a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
@@ -6,9 +6,10 @@ import React, {
   useEffect,
   useRef,
   useState,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import {
   amountToCurrency,
@@ -18,7 +19,7 @@ import {
 
 import { useMergedRefs } from '../../../hooks/useMergedRefs';
 import { useSyncedPref } from '../../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
@@ -252,15 +253,13 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
           // Defines how far touch can start away from the button
           // hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
           {...buttonProps}
-          className={String(
-            css({
-              ...(buttonProps && buttonProps.style),
-              ...(focused && { display: 'none' }),
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            ...(buttonProps && buttonProps.style),
+            ...(focused && { display: 'none' }),
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           variant="bare"
         >
           <View
diff --git a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx b/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
index 8822acbb935..adf1b617218 100644
--- a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useListBoxSection } from 'react-aria';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { styles, theme } from '../../../style';
 
@@ -22,20 +22,23 @@ export function ListBoxSection({ section, state }) {
       {section.rendered && (
         <div
           {...headingProps}
-          className={`${css(styles.smallText, {
-            backgroundColor: theme.pageBackground,
-            borderBottom: `1px solid ${theme.tableBorder}`,
-            borderTop: `1px solid ${theme.tableBorder}`,
-            color: theme.tableHeaderText,
-            display: 'flex',
-            justifyContent: 'center',
-            paddingBottom: 4,
-            paddingTop: 4,
-            position: 'sticky',
-            top: '0',
-            width: '100%',
-            zIndex: zIndices.SECTION_HEADING,
-          })}`}
+          className={css([
+            styles.smallText,
+            {
+              backgroundColor: theme.pageBackground,
+              borderBottom: `1px solid ${theme.tableBorder}`,
+              borderTop: `1px solid ${theme.tableBorder}`,
+              color: theme.tableHeaderText,
+              display: 'flex',
+              justifyContent: 'center',
+              paddingBottom: 4,
+              paddingTop: 4,
+              position: 'sticky',
+              top: '0',
+              width: '100%',
+              zIndex: zIndices.SECTION_HEADING,
+            },
+          ])}
         >
           {section.rendered}
         </div>
diff --git a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
index c65fea01f3b..b64d9637aee 100644
--- a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
@@ -1,4 +1,10 @@
-import { type ComponentProps, Fragment, useRef, useState } from 'react';
+import {
+  type ComponentProps,
+  type CSSProperties,
+  Fragment,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type AccountEntity } from 'loot-core/types/models';
@@ -8,7 +14,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgClose, SvgDotsHorizontalTriple, SvgLockOpen } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
index 7deb37c988d..ad01f64d19f 100644
--- a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
@@ -1,7 +1,10 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Menu } from '../common/Menu';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 
diff --git a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
index abdcba1fd94..2b64dbe1c7f 100644
--- a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
@@ -1,5 +1,10 @@
 // @ts-strict-ignore
-import React, { type ComponentProps, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  useRef,
+  useState,
+  type CSSProperties,
+} from 'react';
 
 import { type CategoryGroupEntity } from 'loot-core/src/types/models';
 
@@ -7,7 +12,7 @@ import { useCategories } from '../../hooks/useCategories';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgDotsHorizontalTriple, SvgAdd, SvgTrash } from '../../icons/v1';
 import { SvgNotesPaper, SvgViewHide, SvgViewShow } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
index 721759fcade..10955013da3 100644
--- a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import { type CategoryEntity } from 'loot-core/src/types/models';
 
@@ -8,7 +8,7 @@ import { useCategoryGroup } from '../../hooks/useCategoryGroup';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgDotsHorizontalTriple, SvgTrash } from '../../icons/v1';
 import { SvgNotesPaper, SvgViewHide, SvgViewShow } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
index 0a9966d59d7..49ed47a3344 100644
--- a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { type FormEvent, useState } from 'react';
+import React, { type FormEvent, useState, type CSSProperties } from 'react';
 import { Form } from 'react-aria-components';
 import { useDispatch } from 'react-redux';
 
@@ -14,7 +14,7 @@ import { type AccountEntity } from 'loot-core/src/types/models';
 import { useAccounts } from '../../hooks/useAccounts';
 import { useCategories } from '../../hooks/useCategories';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
 import { Button } from '../common/Button2';
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
index 3a353c51c92..67814dafc6d 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Form } from 'react-aria-components';
 import { useDispatch } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { loadAllFiles, loadGlobalPrefs, sync } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -98,10 +98,10 @@ export function CreateEncryptionKeyModal({
                 </Paragraph>
                 <Paragraph>
                   <ul
-                    className={`${css({
+                    className={css({
                       marginTop: 0,
                       '& li': { marginBottom: 8 },
-                    })}`}
+                    })}
                   >
                     <li>
                       <strong>Important:</strong> if you forget this password{' '}
diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
index ddcb0499e75..abd673d1304 100644
--- a/packages/desktop-client/src/components/modals/EditRuleModal.jsx
+++ b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { v4 as uuid } from 'uuid';
 
 import {
@@ -97,10 +98,10 @@ export function FieldSelect({ fields, style, value, onChange }) {
         options={fields}
         value={value}
         onChange={onChange}
-        style={{
+        className={css({
           color: theme.pageTextPositive,
           '&[data-hovered]': { color: theme.pageTextPositive },
-        }}
+        })}
       />
     </View>
   );
@@ -357,6 +358,7 @@ function ScheduleDescription({ id }) {
 const actionFields = [
   'category',
   'payee',
+  'payee_name',
   'notes',
   'cleared',
   'account',
@@ -382,7 +384,12 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
   const templated = options?.template !== undefined;
 
   // Even if the feature flag is disabled, we still want to be able to turn off templating
-  const isTemplatingEnabled = useFeatureFlag('actionTemplating') || templated;
+  const actionTemplating = useFeatureFlag('actionTemplating');
+  const isTemplatingEnabled = actionTemplating || templated;
+
+  const fields = (
+    options?.splitIndex ? splitActionFields : actionFields
+  ).filter(([s]) => actionTemplating || !s.includes('_name') || field === s);
 
   return (
     <Editor style={editorStyle} error={error}>
@@ -395,7 +402,7 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
           />
 
           <FieldSelect
-            fields={options?.splitIndex ? splitActionFields : actionFields}
+            fields={fields}
             value={field}
             onChange={value => onChange('field', value)}
           />
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
index b0ac9c706d8..f81005d0a08 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { envelopeBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import {
   BalanceWithCarryover,
   CarryoverIndicator,
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
index 0b7e73bf8f2..0a3775f3fbc 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
@@ -2,13 +2,14 @@ import React, {
   useState,
   type ComponentPropsWithoutRef,
   useEffect,
+  type CSSProperties,
 } from 'react';
 
 import { envelopeBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { BudgetMenu } from '../budget/envelope/BudgetMenu';
 import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents';
 import {
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
index 6f5774025a2..b68531b3862 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -9,7 +9,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/envelope/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
@@ -119,15 +119,15 @@ export function EnvelopeBudgetMonthMenuModal({
               <View>
                 <Button
                   variant="bare"
-                  className={String(
-                    css({
-                      ...buttonStyle,
+                  className={css([
+                    buttonStyle,
+                    {
                       '&[data-pressed], &[data-hovered]': {
                         backgroundColor: 'transparent',
                         color: buttonStyle.color,
                       },
-                    }),
-                  )}
+                    },
+                  ])}
                   onPress={onShowMore}
                 >
                   {!showMore ? (
diff --git a/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
index d56ab003a1b..3466db52d69 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
@@ -1,6 +1,9 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { ToBudgetMenu } from '../budget/envelope/budgetsummary/ToBudgetMenu';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 
diff --git a/packages/desktop-client/src/components/modals/GoalTemplateModal.tsx b/packages/desktop-client/src/components/modals/GoalTemplateModal.tsx
new file mode 100644
index 00000000000..4892d81ac66
--- /dev/null
+++ b/packages/desktop-client/src/components/modals/GoalTemplateModal.tsx
@@ -0,0 +1,179 @@
+import { Trans, useTranslation } from 'react-i18next';
+
+import { theme } from '../../style';
+import { Link } from '../common/Link';
+import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+import { TableHeader, Row, Field } from '../table';
+
+export function GoalTemplateModal() {
+  const { t } = useTranslation();
+  return (
+    <Modal name="goal-templates" containerProps={{ style: { width: 850 } }}>
+      {({ state: { close } }) => (
+        <>
+          <ModalHeader
+            title={t('Goal Templates')}
+            rightContent={<ModalCloseButton onPress={close} />}
+          />
+          <View>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Weekly Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $10 repeat every week starting 2025-01-03')}
+              </Field>
+              <Field width="flex">{t('$10 a week')}</Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t(
+                  '#template $10 repeat every week starting 2025-01-03 up to $80',
+                )}
+              </Field>
+              <Field width="flex">
+                {t('$10 a week, up to a maximum of $80')}
+              </Field>
+            </Row>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Monthly Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template $50')}</Field>
+              <Field width="flex">{t('$50 each month')}</Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template up to $150')}</Field>
+              <Field width="flex">
+                {t('Up to $150 each month, and remove extra funds over $150')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#template up to $150 hold')}</Field>
+              <Field width="flex">
+                {t('Up to $150 each month, but retain any funds over $150')}
+              </Field>
+            </Row>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Multi-month Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every 6 months')}
+              </Field>
+              <Field width="flex">
+                {t('Break down less-frequent expenses into monthly expenses')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every year')}
+              </Field>
+              <Field width="flex">
+                {t('Break down less-frequent expenses into monthly expenses')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template $500 by 2025-03 repeat every 2 years')}
+              </Field>
+              <Field width="flex">
+                {t('Break down less-frequent expenses into monthly expenses')}
+              </Field>
+            </Row>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Schedule Templates</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template schedule SCHEDULE_NAME')}
+              </Field>
+              <Field width="flex">
+                {t('Fund upcoming scheduled transactions over time')}
+              </Field>
+            </Row>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">
+                {t('#template schedule full SCHEDULE_NAME')}
+              </Field>
+              <Field width="flex">
+                {t('Fund upcoming scheduled transaction only on needed month')}
+              </Field>
+            </Row>
+            <span>
+              <br />
+            </span>
+            <TableHeader>
+              <Field width="flex">
+                <Trans>Goal Tempaltes</Trans>
+              </Field>
+              <Field width="flex">
+                <Trans>Description</Trans>
+              </Field>
+            </TableHeader>
+            <Row style={{ backgroundColor: theme.tableBackground }}>
+              <Field width="flex">{t('#goal 1000')}</Field>
+              <Field width="flex">
+                {t('Set a long-term goal instead of a monthly goal')}
+              </Field>
+            </Row>
+            <div
+              style={{
+                textAlign: 'right',
+                fontSize: '1em',
+                color: theme.pageTextLight,
+                marginTop: 3,
+              }}
+            >
+              <span>
+                <br />
+              </span>
+              <Text>
+                {t('See')}{' '}
+                <Link
+                  variant="external"
+                  linkColor="muted"
+                  to="https://actualbudget.org/docs/experimental/goal-templates"
+                >
+                  {t('Goal Templates')}
+                </Link>{' '}
+                {t('for more information.')}
+              </Text>
+            </div>
+          </View>
+        </>
+      )}
+    </Modal>
+  );
+}
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
index b7c74901a2f..5af399a4396 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
@@ -1,6 +1,10 @@
-import React, { type ComponentProps, type ReactNode } from 'react';
+import React, {
+  type CSSProperties,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { View } from '../../common/View';
 import { Checkbox } from '../../forms';
 
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
index 5e28d2a0871..6de27e5b767 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { type CSSProperties } from '../../../style';
 import { Select } from '../../common/Select';
 
 type SelectFieldProps = {
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
index 14e456fc1a3..6808cf18ed2 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
@@ -145,7 +145,8 @@ export function Transaction({
                               ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" className="path" d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z" /></svg>\') 9px 9px',
                             width: 9,
                             height: 9,
-                            content: ' ',
+                            // eslint-disable-next-line rulesdir/typography
+                            content: '" "',
                           },
                         },
                         ':checked': {
diff --git a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
index 4c51d495fdb..a7607bf93cc 100644
--- a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
+++ b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
@@ -1,8 +1,8 @@
+import { type CSSProperties } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
 
-import { type CSSProperties } from '../../style';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
index 59f9dbefc45..b815c846124 100644
--- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
@@ -1,10 +1,14 @@
-import React, { useCallback, type ComponentPropsWithoutRef } from 'react';
+import React, {
+  useCallback,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { useSchedules } from 'loot-core/client/data-hooks/schedules';
 import { format } from 'loot-core/shared/months';
 import { type Query } from 'loot-core/shared/query';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Menu } from '../common/Menu';
 import {
   Modal,
diff --git a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
index 3581c7900c9..7138384a2f3 100644
--- a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { trackingBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import {
   BalanceWithCarryover,
   CarryoverIndicator,
diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
index 7e51bf6fbe7..e7288e7597e 100644
--- a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
@@ -2,13 +2,14 @@ import React, {
   useState,
   type ComponentPropsWithoutRef,
   useEffect,
+  type CSSProperties,
 } from 'react';
 
 import { trackingBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { BudgetMenu } from '../budget/tracking/BudgetMenu';
 import { useTrackingSheetValue } from '../budget/tracking/TrackingBudgetComponents';
 import {
diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
index a3025428edc..d86d6af90ca 100644
--- a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -9,7 +9,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/tracking/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
@@ -119,15 +119,15 @@ export function TrackingBudgetMonthMenuModal({
               <View>
                 <Button
                   variant="bare"
-                  className={String(
-                    css({
-                      ...buttonStyle,
+                  className={css([
+                    buttonStyle,
+                    {
                       '&[data-pressed], &[data-hovered]': {
                         backgroundColor: 'transparent',
                         color: buttonStyle.color,
                       },
-                    }),
-                  )}
+                    },
+                  ])}
                   onPress={onShowMore}
                 >
                   {!showMore ? (
diff --git a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
index b716d04bc9d..4bdd60b1758 100644
--- a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import { memo } from 'react';
+import { memo, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { type PayeeEntity } from 'loot-core/src/types/models';
 
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgArrowThinRight, SvgBookmark } from '../../icons/v1';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import {
   Cell,
diff --git a/packages/desktop-client/src/components/reports/Change.tsx b/packages/desktop-client/src/components/reports/Change.tsx
index 8c4c429e7fd..90b6d3a7892 100644
--- a/packages/desktop-client/src/components/reports/Change.tsx
+++ b/packages/desktop-client/src/components/reports/Change.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { styles } from '../../style/styles';
 import { theme } from '../../style/theme';
-import { type CSSProperties } from '../../style/types';
 import { Block } from '../common/Block';
 
 export function Change({
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 527ed45acb4..e477e6e3491 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -1,9 +1,8 @@
-import React, { type UIEvent, useRef } from 'react';
+import React, { type UIEvent, useRef, type CSSProperties } from 'react';
 
 import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
-import { type CSSProperties } from '../../style';
 import { styles } from '../../style/styles';
 
 import { AreaGraph } from './graphs/AreaGraph';
diff --git a/packages/desktop-client/src/components/reports/Container.tsx b/packages/desktop-client/src/components/reports/Container.tsx
index e169cc28b22..3aa5fdfafc1 100644
--- a/packages/desktop-client/src/components/reports/Container.tsx
+++ b/packages/desktop-client/src/components/reports/Container.tsx
@@ -1,7 +1,6 @@
-import React, { useRef, type ReactNode } from 'react';
+import React, { useRef, type ReactNode, type CSSProperties } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 
 type ContainerProps = {
diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
index 5b0120f63b6..dcb95e4d736 100644
--- a/packages/desktop-client/src/components/reports/GraphButton.tsx
+++ b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -1,6 +1,6 @@
-import React, { type HTMLProps } from 'react';
+import React, { type HTMLProps, type CSSProperties } from 'react';
 
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Text } from '../common/Text';
 import { Tooltip } from '../common/Tooltip';
diff --git a/packages/desktop-client/src/components/reports/LegendItem.tsx b/packages/desktop-client/src/components/reports/LegendItem.tsx
index 8d17d9dfc64..534c1ae9bdf 100644
--- a/packages/desktop-client/src/components/reports/LegendItem.tsx
+++ b/packages/desktop-client/src/components/reports/LegendItem.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { type CSSProperties } from '../../style/types';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
index fc50a14a034..879ea780ee3 100644
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -1,8 +1,8 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 
 type ModeButtonProps = {
@@ -21,22 +21,20 @@ export function ModeButton({
   return (
     <Button
       variant="bare"
-      className={String(
-        css({
-          padding: '5px 10px',
-          backgroundColor: theme.menuBackground,
-          fontSize: 'inherit',
-          ...style,
-          ...(selected && {
-            backgroundColor: theme.buttonPrimaryBackground,
-            color: theme.buttonPrimaryText,
-            ':hover': {
-              backgroundColor: theme.buttonPrimaryBackgroundHover,
-              color: theme.buttonPrimaryTextHover,
-            },
-          }),
+      className={css({
+        padding: '5px 10px',
+        backgroundColor: theme.menuBackground,
+        fontSize: 'inherit',
+        ...style,
+        ...(selected && {
+          backgroundColor: theme.buttonPrimaryBackground,
+          color: theme.buttonPrimaryText,
+          ':hover': {
+            backgroundColor: theme.buttonPrimaryBackgroundHover,
+            color: theme.buttonPrimaryTextHover,
+          },
         }),
-      )}
+      })}
       onPress={onSelect}
     >
       {children}
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index 36692aea017..c21661e9567 100644
--- a/packages/desktop-client/src/components/reports/Overview.tsx
+++ b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -80,7 +80,6 @@ export function Overview() {
   sessionStorage.setItem('url', location.pathname);
 
   const isDashboardsFeatureEnabled = useFeatureFlag('dashboards');
-  const spendingReportFeatureFlag = useFeatureFlag('spendingReport');
 
   const baseLayout = widgets
     .map(widget => ({
@@ -103,25 +102,7 @@ export function Overview() {
       return true;
     });
 
-  const layout =
-    spendingReportFeatureFlag &&
-    !isDashboardsFeatureEnabled &&
-    !baseLayout.find(({ type }) => type === 'spending-card')
-      ? [
-          ...baseLayout,
-          {
-            i: 'spending',
-            type: 'spending-card' as const,
-            x: 0,
-            y: Math.max(...baseLayout.map(({ y }) => y), 0) + 2,
-            w: 4,
-            h: 2,
-            minW: 3,
-            minH: 2,
-            meta: null,
-          },
-        ]
-      : baseLayout;
+  const layout = baseLayout;
 
   const closeNotifications = () => {
     dispatch(removeNotification('import'));
@@ -407,14 +388,10 @@ export function Overview() {
                               name: 'net-worth-card' as const,
                               text: t('Net worth graph'),
                             },
-                            ...(spendingReportFeatureFlag
-                              ? [
-                                  {
-                                    name: 'spending-card' as const,
-                                    text: t('Spending analysis'),
-                                  },
-                                ]
-                              : []),
+                            {
+                              name: 'spending-card' as const,
+                              text: t('Spending analysis'),
+                            },
                             {
                               name: 'markdown-card' as const,
                               text: t('Text widget'),
diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx
index 44f32746460..9954c118327 100644
--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCard.tsx
@@ -3,6 +3,7 @@ import React, {
   useState,
   type ComponentProps,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
 import { type CustomReportEntity } from 'loot-core/src/types/models';
@@ -10,7 +11,7 @@ import { type CustomReportEntity } from 'loot-core/src/types/models';
 import { useIsInViewport } from '../../hooks/useIsInViewport';
 import { useNavigate } from '../../hooks/useNavigate';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Menu } from '../common/Menu';
 import { MenuButton } from '../common/MenuButton';
 import { Popover } from '../common/Popover';
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index b3f4bbcccdb..f97b9edaf30 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -23,7 +23,7 @@ import {
 } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 
@@ -57,7 +57,7 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -65,7 +65,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 03519f0d0c8..5513dc44cbd 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   BarChart,
   Bar,
@@ -30,7 +30,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -79,7 +79,7 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -87,7 +87,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 7317272ad43..9984c2d80c3 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   ComposedChart,
   Line,
@@ -16,7 +16,7 @@ import {
 
 import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
 
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { Container } from '../Container';
@@ -43,7 +43,7 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -51,7 +51,7 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
index 188e4b054bf..fb569a64d0d 100644
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { css } from '@emotion/css';
 import * as d from 'date-fns';
-import { css } from 'glamor';
 import {
   Bar,
   CartesianGrid,
@@ -22,7 +22,7 @@ import {
 } from 'loot-core/src/shared/util';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { chartTheme } from '../chart-theme';
 import { Container } from '../Container';
@@ -45,14 +45,14 @@ function CustomTooltip({ active, payload, isConcise }: CustomTooltipProps) {
 
   return (
     <div
-      className={`${css({
+      className={css({
         pointerEvents: 'none',
         borderRadius: 2,
         boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
         backgroundColor: theme.menuBackground,
         color: theme.menuItemText,
         padding: 10,
-      })}`}
+      })}
     >
       <div>
         <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index ebde9faf2b4..42d3dcb22bf 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
 import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
 
@@ -13,7 +13,7 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { Container } from '../Container';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index 6a180611a1a..90e90617101 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   LineChart,
   Line,
@@ -27,7 +27,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -63,7 +63,7 @@ const CustomTooltip = ({
     let sumTotals = 0;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -71,7 +71,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 109a5f2d65d..d5a2507eb15 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -16,7 +16,7 @@ import {
 import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { numberFormatterTooltip } from '../numberFormatter';
@@ -94,7 +94,7 @@ export function NetWorthGraph({
     if (active && payload && payload.length) {
       return (
         <div
-          className={`${css(
+          className={css([
             {
               zIndex: 1000,
               pointerEvents: 'none',
@@ -105,7 +105,7 @@ export function NetWorthGraph({
               padding: 10,
             },
             style,
-          )}`}
+          ])}
         >
           <div>
             <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index d648e7ee968..abe16c44488 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { type ComponentProps } from 'react';
+import React, { type ComponentProps, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -20,7 +20,7 @@ import {
 import { type SpendingEntity } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { numberFormatterTooltip } from '../numberFormatter';
@@ -65,7 +65,7 @@ const CustomTooltip = ({
       : payload[0].payload.months[selection]?.cumulative * -1;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -73,7 +73,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 172d9280bf7..b69f66e1279 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   BarChart,
   Bar,
@@ -28,7 +28,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -67,7 +67,7 @@ const CustomTooltip = ({
     let sumTotals = 0;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -75,7 +75,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
index 3b1b92c5c5f..94a5fd95a13 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
@@ -1,8 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { type GroupedEntity } from 'loot-core/src/types/models/reports';
 
-import { type CSSProperties } from '../../../../style';
 import { View } from '../../../common/View';
 
 import { type renderRowProps } from './ReportTable';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 6db7986aa30..18be7311f1e 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -4,6 +4,7 @@ import React, {
   useLayoutEffect,
   useRef,
   type UIEventHandler,
+  type CSSProperties,
 } from 'react';
 
 import {
@@ -13,7 +14,6 @@ import {
 } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
-import { type CSSProperties } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { View } from '../../../common/View';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
index dd20f9f1151..0b7eb0790f2 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -1,4 +1,8 @@
-import React, { type RefObject, type UIEventHandler } from 'react';
+import React, {
+  type RefObject,
+  type UIEventHandler,
+  type CSSProperties,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -7,7 +11,6 @@ import {
 } from 'loot-core/src/types/models/reports';
 
 import { theme } from '../../../../style';
-import { type CSSProperties } from '../../../../style/types';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
 import { ReportOptions } from '../../ReportOptions';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index e26b51367d5..8bf0974f591 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -1,11 +1,11 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import {
   type GroupedEntity,
   type DataEntity,
 } from 'loot-core/src/types/models/reports';
 
-import { type CSSProperties, theme } from '../../../../style';
+import { theme } from '../../../../style';
 import { View } from '../../../common/View';
 import { Row } from '../../../table';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index 11a8dea359e..d4dc36ebe39 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -1,4 +1,9 @@
-import React, { memo, type RefObject, type UIEventHandler } from 'react';
+import React, {
+  memo,
+  type RefObject,
+  type UIEventHandler,
+  type CSSProperties,
+} from 'react';
 
 import {
   amountToCurrency,
@@ -15,7 +20,7 @@ import { useAccounts } from '../../../../hooks/useAccounts';
 import { useCategories } from '../../../../hooks/useCategories';
 import { useNavigate } from '../../../../hooks/useNavigate';
 import { useResponsive } from '../../../../ResponsiveProvider';
-import { type CSSProperties, theme } from '../../../../style';
+import { theme } from '../../../../style';
 import { Text } from '../../../common/Text';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index 5db57ad5b87..0deb72b5933 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -3,6 +3,7 @@ import React, {
   useLayoutEffect,
   useState,
   type RefObject,
+  type CSSProperties,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +14,6 @@ import {
 
 import { theme } from '../../../../style';
 import { styles } from '../../../../style/styles';
-import { type CSSProperties } from '../../../../style/types';
 import { View } from '../../../common/View';
 
 import { type renderTotalsProps } from './ReportTable';
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
index a3a438b0909..8a31f038061 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import * as d from 'date-fns';
@@ -102,6 +103,7 @@ function useSelectedCategories(
 }
 
 export function CustomReport() {
+  const { t } = useTranslation();
   const categories = useCategories();
   const { isNarrowWidth } = useResponsive();
   const [_firstDayOfWeekIdx] = useSyncedPref('firstDayOfWeekIdx');
@@ -644,16 +646,20 @@ export function CustomReport() {
       header={
         isNarrowWidth ? (
           <MobilePageHeader
-            title={`Custom Report: ${report.name || 'Unsaved report'}`}
+            title={
+              report.name
+                ? t('Custom Report: {{name}}', { name: report.name })
+                : t('Custom Report: Unsaved report')
+            }
             leftContent={<MobileBackButton onPress={onBackClick} />}
           />
         ) : (
           <PageHeader
             title={
               <>
-                <Text>Custom Report:</Text>
+                <Text>{t('Custom Report:')}</Text>
                 <Text style={{ marginLeft: 5, color: theme.pageTextPositive }}>
-                  {report.name || 'Unsaved report'}
+                  {report.name || t('Unsaved report')}
                 </Text>
               </>
             }
@@ -766,8 +772,9 @@ export function CustomReport() {
 
               {hasWarning && (
                 <Warning style={{ paddingTop: 5, paddingBottom: 5 }}>
-                  This report is configured to use a non-existing filter value
-                  (i.e. category/account/payee).
+                  {t(
+                    'This report is configured to use a non-existing filter value (i.e. category/account/payee).',
+                  )}
                 </Warning>
               )}
             </View>
@@ -830,7 +837,7 @@ export function CustomReport() {
                     intervalsCount={intervals.length}
                   />
                 ) : (
-                  <LoadingIndicator message="Loading report..." />
+                  <LoadingIndicator message={t('Loading report...')} />
                 )}
               </View>
             </View>
diff --git a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
index 1ec90260e82..23bfbc73a94 100644
--- a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
@@ -3,7 +3,7 @@ import { TextArea } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { type MarkdownWidget } from 'loot-core/src/types/models';
 
@@ -131,7 +131,7 @@ export function MarkdownCard({
             }}
           />
         ) : (
-          <Text {...markdownStyles}>
+          <Text className={markdownStyles}>
             <ReactMarkdown linkTarget="_blank">{meta.content}</ReactMarkdown>
           </Text>
         )}
diff --git a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
index 306d92dca64..fb5407f237d 100644
--- a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 import { amountToCurrency } from 'loot-core/src/shared/util';
@@ -20,8 +20,6 @@ import { calculateSpendingReportTimeRange } from '../reportRanges';
 import { createSpendingSpreadsheet } from '../spreadsheets/spending-spreadsheet';
 import { useReport } from '../useReport';
 
-import { MissingReportCard } from './MissingReportCard';
-
 type SpendingCardProps = {
   widgetId: string;
   isEditing?: boolean;
@@ -70,17 +68,6 @@ export function SpendingCard({
     data.intervalData[todayDay][selection] -
       data.intervalData[todayDay].compare;
 
-  const spendingReportFeatureFlag = useFeatureFlag('spendingReport');
-
-  if (!spendingReportFeatureFlag) {
-    return (
-      <MissingReportCard isEditing={isEditing} onRemove={onRemove}>
-        <Trans>
-          The experimental spending report feature has not been enabled.
-        </Trans>
-      </MissingReportCard>
-    );
-  }
   return (
     <ReportCard
       isEditing={isEditing}
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
index 70619281fdd..851b4751efb 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/spending-spreadsheet.ts
@@ -223,7 +223,7 @@ export function createSpendingSpreadsheet({
           return arr;
         }, []);
         const maxCumulative = data.reduce((a, b) =>
-          a.cumulative < b.cumulative ? a : b,
+          b.cumulative === null ? a : b,
         ).cumulative;
 
         const totalDaily = data.reduce((a, v) => (a = a + v.totalTotals), 0);
diff --git a/packages/desktop-client/src/components/rules/ActionExpression.tsx b/packages/desktop-client/src/components/rules/ActionExpression.tsx
index 07e8c76ee9e..6a3cd111005 100644
--- a/packages/desktop-client/src/components/rules/ActionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ActionExpression.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import {
   mapField,
@@ -14,7 +14,7 @@ import {
   type PrependNoteRuleActionEntity,
 } from 'loot-core/src/types/models';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/rules/ConditionExpression.tsx b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
index 69b8eb22140..229868a338f 100644
--- a/packages/desktop-client/src/components/rules/ConditionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/rules/SimpleTable.tsx b/packages/desktop-client/src/components/rules/SimpleTable.tsx
index d0889955337..1642d37aa94 100644
--- a/packages/desktop-client/src/components/rules/SimpleTable.tsx
+++ b/packages/desktop-client/src/components/rules/SimpleTable.tsx
@@ -1,7 +1,11 @@
 // @ts-strict-ignore
-import React, { type ReactNode, type UIEvent, useRef } from 'react';
+import React, {
+  type ReactNode,
+  type UIEvent,
+  useRef,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 
 type SimpleTableProps = {
diff --git a/packages/desktop-client/src/components/rules/Value.tsx b/packages/desktop-client/src/components/rules/Value.tsx
index 3d26c5a0b44..b60a87c6e85 100644
--- a/packages/desktop-client/src/components/rules/Value.tsx
+++ b/packages/desktop-client/src/components/rules/Value.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
 import { format as formatDate, parseISO } from 'date-fns';
 
@@ -11,7 +11,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useCategories } from '../../hooks/useCategories';
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { usePayees } from '../../hooks/usePayees';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
 
@@ -86,6 +86,7 @@ export function Value<T>({
           return value ? formatDate(parseISO(value), 'yyyy') : null;
         case 'notes':
         case 'imported_payee':
+        case 'payee_name':
           return value;
         case 'payee':
         case 'category':
diff --git a/packages/desktop-client/src/components/select/DateSelect.tsx b/packages/desktop-client/src/components/select/DateSelect.tsx
index 8a144625a27..5b3bebc727e 100644
--- a/packages/desktop-client/src/components/select/DateSelect.tsx
+++ b/packages/desktop-client/src/components/select/DateSelect.tsx
@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, {
+  type CSSProperties,
   forwardRef,
   useEffect,
   useImperativeHandle,
@@ -12,6 +13,7 @@ import React, {
   type MutableRefObject,
 } from 'react';
 
+import { css } from '@emotion/css';
 import { parse, parseISO, format, subDays, addDays, isValid } from 'date-fns';
 import Pikaday from 'pikaday';
 
@@ -34,7 +36,7 @@ import { View } from '../common/View';
 import DateSelectLeft from './DateSelect.left.png';
 import DateSelectRight from './DateSelect.right.png';
 
-const pickerStyles = {
+const pickerStyles: CSSProperties = {
   '& .pika-single.actual-date-picker': {
     color: theme.calendarText,
     background: theme.calendarBackground,
@@ -160,7 +162,12 @@ const DatePicker = forwardRef<DatePickerForwardedRef, DatePickerProps>(
       }
     }, [value, dateFormat]);
 
-    return <View style={{ ...pickerStyles, flex: 1 }} innerRef={mountPoint} />;
+    return (
+      <View
+        className={css([pickerStyles, { flex: 1 }])}
+        innerRef={mountPoint}
+      />
+    );
   },
 );
 
diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
index d0888e1a935..6e57567032b 100644
--- a/packages/desktop-client/src/components/settings/Experimental.tsx
+++ b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -92,13 +92,6 @@ export function ExperimentalFeatures() {
       primaryAction={
         expanded ? (
           <View style={{ gap: '1em' }}>
-            <FeatureToggle
-              flag="spendingReport"
-              feedbackLink="https://github.com/actualbudget/actual/issues/2820"
-            >
-              <Trans>Monthly spending report</Trans>
-            </FeatureToggle>
-
             <TrackingBudgetFeature />
 
             <FeatureToggle flag="goalTemplatesEnabled">
@@ -116,6 +109,12 @@ export function ExperimentalFeatures() {
             >
               <Trans>Rule action templating</Trans>
             </FeatureToggle>
+            <FeatureToggle
+              flag="upcomingLengthAdjustment"
+              feedbackLink="https://github.com/actualbudget/actual/issues/3660"
+            >
+              <Trans>Scheduled transaction upcoming length adjustment</Trans>
+            </FeatureToggle>
           </View>
         ) : (
           <Link
diff --git a/packages/desktop-client/src/components/settings/Format.tsx b/packages/desktop-client/src/components/settings/Format.tsx
index dda0ca35092..0ebe7f4cb7d 100644
--- a/packages/desktop-client/src/components/settings/Format.tsx
+++ b/packages/desktop-client/src/components/settings/Format.tsx
@@ -1,12 +1,14 @@
 // @ts-strict-ignore
 import React, { type ReactNode } from 'react';
 
+import { css } from '@emotion/css';
+
 import { numberFormats } from 'loot-core/src/shared/util';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { tokens } from '../../tokens';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
@@ -64,11 +66,11 @@ export function FormatSettings() {
   const numberFormat = _numberFormat || 'comma-dot';
   const [hideFraction, setHideFractionPref] = useSyncedPref('hideFraction');
 
-  const selectButtonStyle: CSSProperties = {
-    ':hover': {
+  const selectButtonClassName = css({
+    '&[data-hovered]': {
       backgroundColor: theme.buttonNormalBackgroundHover,
     },
-  };
+  });
 
   return (
     <Setting
@@ -96,7 +98,7 @@ export function FormatSettings() {
                 f.value,
                 String(hideFraction) === 'true' ? f.labelNoFraction : f.label,
               ])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
 
             <Text style={{ display: 'flex' }}>
@@ -116,7 +118,7 @@ export function FormatSettings() {
               value={dateFormat}
               onChange={format => setDateFormatPref(format)}
               options={dateFormats.map(f => [f.value, f.label])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
           </Column>
 
@@ -125,7 +127,7 @@ export function FormatSettings() {
               value={firstDayOfWeekIdx}
               onChange={idx => setFirstDayOfWeekIdxPref(idx)}
               options={daysOfWeek.map(f => [f.value, f.label])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
           </Column>
         </View>
diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx
index 3eeebfb5380..84c80a67cae 100644
--- a/packages/desktop-client/src/components/settings/Themes.tsx
+++ b/packages/desktop-client/src/components/settings/Themes.tsx
@@ -1,5 +1,7 @@
 import React, { type ReactNode } from 'react';
 
+import { css } from '@emotion/css';
+
 import { type DarkTheme, type Theme } from 'loot-core/types/prefs';
 
 import {
@@ -62,11 +64,11 @@ export function ThemeSettings() {
               }}
               value={theme}
               options={themeOptions}
-              style={{
+              className={css({
                 '&[data-hovered]': {
                   backgroundColor: themeStyle.buttonNormalBackgroundHover,
                 },
-              }}
+              })}
             />
           </Column>
           {theme === 'auto' && (
@@ -77,11 +79,11 @@ export function ThemeSettings() {
                 }}
                 value={darkTheme}
                 options={darkThemeOptions}
-                style={{
+                className={css({
                   '&[data-hovered]': {
                     backgroundColor: themeStyle.buttonNormalBackgroundHover,
                   },
-                }}
+                })}
               />
             </Column>
           )}
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index ad835e43c43..95701598fb6 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -1,9 +1,9 @@
-import React, { useState, type ReactNode } from 'react';
+import React, { useState, type ReactNode, type CSSProperties } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { css, media } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { tokens } from '../../tokens';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
@@ -17,7 +17,7 @@ type SettingProps = {
 export const Setting = ({ primaryAction, style, children }: SettingProps) => {
   return (
     <View
-      className={`${css([
+      className={css([
         {
           backgroundColor: theme.pillBackground,
           alignSelf: 'flex-start',
@@ -28,7 +28,7 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => {
           width: '100%',
         },
         style,
-      ])}`}
+      ])}
     >
       <View
         style={{
@@ -61,9 +61,11 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
         marginBottom: 25,
         width: '100%',
       }}
-      className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
-        width: 'auto',
-      })}`}
+      className={css({
+        [`@media (min-width: ${tokens.breakpoint_small})`]: {
+          width: 'auto',
+        },
+      })}
       innerRef={el => {
         if (el && location.hash === '#advanced') {
           el.scrollIntoView(true);
diff --git a/packages/desktop-client/src/components/settings/Upcoming.tsx b/packages/desktop-client/src/components/settings/Upcoming.tsx
index 0f1409c75d3..9da78491351 100644
--- a/packages/desktop-client/src/components/settings/Upcoming.tsx
+++ b/packages/desktop-client/src/components/settings/Upcoming.tsx
@@ -2,13 +2,12 @@ import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
-import { Column } from 'glamor/jsxstyle';
-
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../style';
 import { Button } from '../common/Button2';
+import { InfoBubble } from '../common/InfoBubble';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
@@ -31,27 +30,27 @@ export function UpcomingLengthSettings() {
   );
   const upcomingLength = _upcomingLength || '7';
 
-  const selectButtonStyle: CSSProperties = {
-    ':hover': {
-      backgroundColor: theme.buttonNormalBackgroundHover,
-    },
-  };
+  const enabled = useFeatureFlag('upcomingLengthAdjustment');
 
   const location = useLocation();
   const [expanded, setExpanded] = useState(location.hash === '#upcomingLength');
 
+  if (!enabled) return null;
+
   return expanded ? (
     <Setting
       primaryAction={
         <View style={{ flexDirection: 'row', gap: '1em' }}>
-          <Column title="Upcoming Length">
-            <Select
-              options={options.map(x => [x.value || '7', x.label])}
-              value={upcomingLength}
-              onChange={newValue => setUpcomingLength(newValue)}
-              style={selectButtonStyle}
-            />
-          </Column>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}>
+            <View title="Upcoming Length">
+              <Select
+                options={options.map(x => [x.value || '7', x.label])}
+                value={upcomingLength}
+                onChange={newValue => setUpcomingLength(newValue)}
+              />
+            </View>
+            <InfoBubble label="Only the first instance of a recurring transaction will be shown." />
+          </View>
         </View>
       }
     >
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 30a3baf9a2f..a2853315421 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactNode, useEffect } from 'react';
 
-import { media } from 'glamor';
+import { css } from '@emotion/css';
 
 import { isElectron } from 'loot-core/shared/environment';
 import { listen } from 'loot-core/src/platform/client/fetch';
@@ -50,13 +50,15 @@ function About() {
           flexDirection: 'column',
           gap: 10,
         }}
-        className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
-          display: 'grid',
-          gridTemplateRows: '1fr 1fr',
-          gridTemplateColumns: '50% 50%',
-          columnGap: '2em',
-          gridAutoFlow: 'column',
-        })}`}
+        className={css({
+          [`@media (min-width: ${tokens.breakpoint_small})`]: {
+            display: 'grid',
+            gridTemplateRows: '1fr 1fr',
+            gridTemplateColumns: '50% 50%',
+            columnGap: '2em',
+            gridAutoFlow: 'column',
+          },
+        })}
         data-vrt-mask
       >
         <Text>Client version: v{window.Actual?.ACTUAL_VERSION}</Text>
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
index 96437fef47b..62985660a4f 100644
--- a/packages/desktop-client/src/components/sidebar/Account.tsx
+++ b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -1,13 +1,13 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import * as Platform from 'loot-core/client/platform';
 import { type AccountEntity } from 'loot-core/src/types/models';
 
 import { useNotes } from '../../hooks/useNotes';
-import { styles, theme, type CSSProperties } from '../../style';
+import { styles, theme } from '../../style';
 import { AlignedText } from '../common/AlignedText';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
@@ -131,20 +131,23 @@ export function Account<FieldName extends SheetFields<'account'>>({
               }}
             >
               <div
-                className={`dot ${css({
-                  marginRight: 3,
-                  width: 5,
-                  height: 5,
-                  borderRadius: 5,
-                  backgroundColor: pending
-                    ? theme.sidebarItemBackgroundPending
-                    : failed
-                      ? theme.sidebarItemBackgroundFailed
-                      : theme.sidebarItemBackgroundPositive,
-                  marginLeft: 2,
-                  transition: 'transform .3s',
-                  opacity: connected ? 1 : 0,
-                })}`}
+                className={cx(
+                  'dot',
+                  css({
+                    marginRight: 3,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 5,
+                    backgroundColor: pending
+                      ? theme.sidebarItemBackgroundPending
+                      : failed
+                        ? theme.sidebarItemBackgroundFailed
+                        : theme.sidebarItemBackgroundPositive,
+                    marginLeft: 2,
+                    transition: 'transform .3s',
+                    opacity: connected ? 1 : 0,
+                  }),
+                )}
               />
             </View>
 
diff --git a/packages/desktop-client/src/components/sidebar/Item.tsx b/packages/desktop-client/src/components/sidebar/Item.tsx
index e75c3fa3595..85b2d11fb32 100644
--- a/packages/desktop-client/src/components/sidebar/Item.tsx
+++ b/packages/desktop-client/src/components/sidebar/Item.tsx
@@ -4,9 +4,10 @@ import React, {
   type MouseEventHandler,
   type ReactNode,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { styles, theme, type CSSProperties } from '../../style';
+import { styles, theme } from '../../style';
 import { Block } from '../common/Block';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/ItemContent.tsx b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
index 73ca838f5bb..c9cbd1fcc66 100644
--- a/packages/desktop-client/src/components/sidebar/ItemContent.tsx
+++ b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
@@ -1,6 +1,9 @@
-import React, { type MouseEventHandler, type ReactNode } from 'react';
+import React, {
+  type MouseEventHandler,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties } from '../../style';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
index b83dcb3a96a..d7700372139 100644
--- a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
+++ b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
@@ -3,9 +3,10 @@ import React, {
   type ComponentType,
   type MouseEventHandler,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { theme, type CSSProperties } from '../../style';
+import { theme } from '../../style';
 import { Block } from '../common/Block';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index 0096ffe7c8b..a70840622d0 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React, { type CSSProperties, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { Resizable } from 're-resizable';
 
 import { closeBudget, replaceModal } from 'loot-core/src/client/actions';
@@ -94,7 +95,7 @@ export function Sidebar() {
     >
       <View
         innerRef={containerRef}
-        style={{
+        className={css({
           color: theme.sidebarItemText,
           height: '100%',
           backgroundColor: theme.sidebarBackground,
@@ -102,14 +103,14 @@ export function Sidebar() {
             opacity: isFloating ? 1 : 0,
             transition: 'opacity .25s, width .25s',
             width: hasWindowButtons || isFloating ? null : 0,
-          },
+          } as CSSProperties,
           '&:hover .float': {
             opacity: 1,
             width: hasWindowButtons ? null : 'auto',
-          },
+          } as CSSProperties,
           flex: 1,
           ...styles.darkScrollbar,
-        }}
+        })}
       >
         <View
           style={{
diff --git a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
index e7fddb15913..53928b62b7c 100644
--- a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
+++ b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SvgPin } from '../../icons/v1';
 import { SvgArrowButtonLeft1 } from '../../icons/v2';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
index 6274c89bb95..2171d99406c 100644
--- a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
+++ b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -1,7 +1,11 @@
 // @ts-strict-ignore
-import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, styles } from '../../style';
+import { styles } from '../../style';
 import { Text } from '../common/Text';
 import { PrivacyFilter } from '../PrivacyFilter';
 
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index b2ee1bb96e9..a253acd89cf 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -15,6 +15,7 @@ import React, {
   type ReactElement,
   type Ref,
   type MutableRefObject,
+  type CSSProperties,
 } from 'react';
 import { useStore } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -27,7 +28,7 @@ import { useSelectedItems } from '../hooks/useSelected';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete, SvgExpandArrow } from '../icons/v0';
 import { SvgCheckmark } from '../icons/v1';
-import { type CSSProperties, styles, theme } from '../style';
+import { styles, theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Input } from './common/Input';
@@ -810,19 +811,19 @@ export function TableHeader({
   );
 }
 
-type SelectedItemsButtonProps<T extends MenuItem = MenuItem> = {
+type SelectedItemsButtonProps<Name extends string> = {
   id: string;
   name: ((count: number) => string) | string;
-  items: Array<T | typeof Menu.line>;
-  onSelect: (name: string, items: Array<string>) => void;
+  items: MenuItem<Name>[];
+  onSelect: (name: Name, items: string[]) => void;
 };
 
-export function SelectedItemsButton<T extends MenuItem = MenuItem>({
+export function SelectedItemsButton<Name extends string>({
   id,
   name,
   items,
   onSelect,
-}: SelectedItemsButtonProps<T>) {
+}: SelectedItemsButtonProps<Name>) {
   const selectedItems = useSelectedItems();
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
@@ -1074,7 +1075,6 @@ export const Table = forwardRef(
             zIndex: editing || selected ? 101 : 'auto',
             transform: 'translateY(var(--pos))',
           }}
-          // @ts-expect-error not a recognised style attribute
           nativeStyle={{ '--pos': `${style.top - 1}px` }}
           data-focus-key={item.id}
         >
diff --git a/packages/desktop-client/src/components/transactions/SelectedTransactionsButton.jsx b/packages/desktop-client/src/components/transactions/SelectedTransactionsButton.tsx
similarity index 75%
rename from packages/desktop-client/src/components/transactions/SelectedTransactionsButton.jsx
rename to packages/desktop-client/src/components/transactions/SelectedTransactionsButton.tsx
index fbb65a602ca..fa1c85836ee 100644
--- a/packages/desktop-client/src/components/transactions/SelectedTransactionsButton.jsx
+++ b/packages/desktop-client/src/components/transactions/SelectedTransactionsButton.tsx
@@ -6,11 +6,41 @@ import { useDispatch } from 'react-redux';
 import { pushModal } from 'loot-core/client/actions';
 import { isPreviewId } from 'loot-core/shared/transactions';
 import { validForTransfer } from 'loot-core/src/client/transfer';
+import { type TransactionEntity } from 'loot-core/types/models';
 
 import { useSelectedItems } from '../../hooks/useSelected';
 import { Menu } from '../common/Menu';
 import { SelectedItemsButton } from '../table';
 
+type SelectedTransactionsButtonProps = {
+  getTransaction: (id: string) => TransactionEntity | undefined;
+  onShow: (selectedIds: string[]) => void;
+  onDuplicate: (selectedIds: string[]) => void;
+  onDelete: (selectedIds: string[]) => void;
+  onEdit: (
+    type:
+      | 'date'
+      | 'amount'
+      | 'account'
+      | 'payee'
+      | 'notes'
+      | 'category'
+      | 'cleared',
+    selectedIds: string[],
+  ) => void;
+  onLinkSchedule: (selectedIds: string[]) => void;
+  onUnlinkSchedule: (selectedIds: string[]) => void;
+  onCreateRule: (selectedIds: string[]) => void;
+  onSetTransfer: (selectedIds: string[]) => void;
+  onScheduleAction: (
+    action: 'post-transaction' | 'skip',
+    selectedIds: string[],
+  ) => void;
+  showMakeTransfer: boolean;
+  onMakeAsSplitTransaction: (selectedIds: string[]) => void;
+  onMakeAsNonSplitTransactions: (selectedIds: string[]) => void;
+};
+
 export function SelectedTransactionsButton({
   getTransaction,
   onShow,
@@ -25,7 +55,7 @@ export function SelectedTransactionsButton({
   showMakeTransfer,
   onMakeAsSplitTransaction,
   onMakeAsNonSplitTransactions,
-}) {
+}: SelectedTransactionsButtonProps) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const selectedItems = useSelectedItems();
@@ -82,8 +112,8 @@ export function SelectedTransactionsButton({
     const areAllSameDateAndAccount = transactions.every(
       tx =>
         tx &&
-        tx.date === firstTransaction.date &&
-        tx.account === firstTransaction.account,
+        tx.date === firstTransaction?.date &&
+        tx.account === firstTransaction?.account,
     );
     const areNoSplitTransactions = transactions.every(
       tx => tx && !tx.is_parent && !tx.is_child,
@@ -177,21 +207,29 @@ export function SelectedTransactionsButton({
     <SelectedItemsButton
       id="transactions"
       name={count => t('{{count}} transactions', { count })}
+      // @ts-expect-error fix me
       items={[
         ...(!types.trans
           ? [
-              { name: 'view-schedule', text: t('View schedule'), key: 'S' },
-              { name: 'post-transaction', text: t('Post transaction') },
-              { name: 'skip', text: t('Skip scheduled date') },
+              {
+                name: 'view-schedule',
+                text: t('View schedule'),
+                key: 'S',
+              } as const,
+              {
+                name: 'post-transaction',
+                text: t('Post transaction'),
+              } as const,
+              { name: 'skip', text: t('Skip scheduled date') } as const,
             ]
           : [
-              { name: 'show', text: t('Show'), key: 'F' },
+              { name: 'show', text: t('Show'), key: 'F' } as const,
               {
                 name: 'duplicate',
                 text: t('Duplicate'),
                 disabled: ambiguousDuplication,
-              },
-              { name: 'delete', text: t('Delete'), key: 'D' },
+              } as const,
+              { name: 'delete', text: t('Delete'), key: 'D' } as const,
               ...(linked
                 ? [
                     {
@@ -199,19 +237,22 @@ export function SelectedTransactionsButton({
                       text: t('View schedule'),
                       key: 'S',
                       disabled: selectedIds.length > 1,
-                    },
-                    { name: 'unlink-schedule', text: t('Unlink schedule') },
+                    } as const,
+                    {
+                      name: 'unlink-schedule',
+                      text: t('Unlink schedule'),
+                    } as const,
                   ]
                 : [
                     {
                       name: 'link-schedule',
                       text: t('Link schedule'),
                       key: 'S',
-                    },
+                    } as const,
                     {
                       name: 'create-rule',
                       text: t('Create rule'),
-                    },
+                    } as const,
                   ]),
               ...(showMakeTransfer
                 ? [
@@ -219,7 +260,7 @@ export function SelectedTransactionsButton({
                       name: 'set-transfer',
                       text: t('Make transfer'),
                       disabled: !canBeTransfer,
-                    },
+                    } as const,
                   ]
                 : []),
               ...(canMakeAsSplitTransaction
@@ -227,7 +268,7 @@ export function SelectedTransactionsButton({
                     {
                       name: 'make-as-split-transaction',
                       text: t('Make as split transaction'),
-                    },
+                    } as const,
                   ]
                 : []),
               ...(canUnsplitTransactions
@@ -237,18 +278,18 @@ export function SelectedTransactionsButton({
                       text: t('Unsplit {{count}} transactions', {
                         count: selectedIds.length,
                       }),
-                    },
+                    } as const,
                   ]
                 : []),
               Menu.line,
-              { type: Menu.label, name: t('Edit field') },
-              { name: 'date', text: t('Date') },
-              { name: 'account', text: t('Account'), key: 'A' },
-              { name: 'payee', text: t('Payee'), key: 'P' },
-              { name: 'notes', text: t('Notes'), key: 'N' },
-              { name: 'category', text: t('Category'), key: 'C' },
-              { name: 'amount', text: t('Amount') },
-              { name: 'cleared', text: t('Cleared'), key: 'L' },
+              { type: Menu.label, name: t('Edit field'), text: '' } as const,
+              { name: 'date', text: t('Date') } as const,
+              { name: 'account', text: t('Account'), key: 'A' } as const,
+              { name: 'payee', text: t('Payee'), key: 'P' } as const,
+              { name: 'notes', text: t('Notes'), key: 'N' } as const,
+              { name: 'category', text: t('Category'), key: 'C' } as const,
+              { name: 'amount', text: t('Amount') } as const,
+              { name: 'cleared', text: t('Cleared'), key: 'L' } as const,
             ]),
       ]}
       onSelect={name => {
@@ -288,6 +329,7 @@ export function SelectedTransactionsButton({
             onSetTransfer(selectedIds);
             break;
           default:
+            // @ts-expect-error fix me
             onEdit(name, selectedIds);
         }
       }}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index 5dd3c6cbc8e..d9a7dd7099b 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -13,12 +13,12 @@ import React, {
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import {
   format as formatDate,
   parseISO,
   isValid as isDateValid,
 } from 'date-fns';
-import { css } from 'glamor';
 
 import { pushModal } from 'loot-core/client/actions';
 import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
@@ -2538,20 +2538,18 @@ function notesTagFormatter(notes, onNotesTagClick) {
                 <Button
                   variant="bare"
                   key={i}
-                  className={String(
-                    css({
-                      display: 'inline-flex',
-                      padding: '3px 7px',
-                      borderRadius: 16,
-                      userSelect: 'none',
-                      backgroundColor: theme.noteTagBackground,
-                      color: theme.noteTagText,
-                      cursor: 'pointer',
-                      '&[data-hovered]': {
-                        backgroundColor: theme.noteTagBackgroundHover,
-                      },
-                    }),
-                  )}
+                  className={css({
+                    display: 'inline-flex',
+                    padding: '3px 7px',
+                    borderRadius: 16,
+                    userSelect: 'none',
+                    backgroundColor: theme.noteTagBackground,
+                    color: theme.noteTagText,
+                    cursor: 'pointer',
+                    '&[data-hovered]': {
+                      backgroundColor: theme.noteTagBackgroundHover,
+                    },
+                  })}
                   onPress={() => {
                     onNotesTagClick?.(validTag);
                   }}
diff --git a/packages/desktop-client/src/components/util/AmountInput.tsx b/packages/desktop-client/src/components/util/AmountInput.tsx
index 147b0066cb6..671be17d9bc 100644
--- a/packages/desktop-client/src/components/util/AmountInput.tsx
+++ b/packages/desktop-client/src/components/util/AmountInput.tsx
@@ -6,6 +6,7 @@ import React, {
   useEffect,
   type FocusEventHandler,
   type KeyboardEventHandler,
+  type CSSProperties,
 } from 'react';
 
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -14,7 +15,7 @@ import { amountToInteger, appendDecimals } from 'loot-core/src/shared/util';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { SvgAdd, SvgSubtract } from '../../icons/v1';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { InputWithContent } from '../common/InputWithContent';
 import { View } from '../common/View';
diff --git a/packages/desktop-client/src/components/util/PercentInput.tsx b/packages/desktop-client/src/components/util/PercentInput.tsx
index 88161884365..68368124e88 100644
--- a/packages/desktop-client/src/components/util/PercentInput.tsx
+++ b/packages/desktop-client/src/components/util/PercentInput.tsx
@@ -5,12 +5,12 @@ import React, {
   useEffect,
   type FocusEventHandler,
   type FocusEvent,
+  type CSSProperties,
 } from 'react';
 
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
-import { type CSSProperties } from '../../style';
 import { Input } from '../common/Input';
 import { useFormat } from '../spreadsheet/useFormat';
 
diff --git a/packages/desktop-client/src/hooks/useFeatureFlag.ts b/packages/desktop-client/src/hooks/useFeatureFlag.ts
index 3975d2acec3..fb4e205b2e7 100644
--- a/packages/desktop-client/src/hooks/useFeatureFlag.ts
+++ b/packages/desktop-client/src/hooks/useFeatureFlag.ts
@@ -5,9 +5,9 @@ import { useSyncedPref } from './useSyncedPref';
 const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   reportBudget: false,
   goalTemplatesEnabled: false,
-  spendingReport: false,
   dashboards: false,
   actionTemplating: false,
+  upcomingLengthAdjustment: false,
 };
 
 export function useFeatureFlag(name: FeatureFlag): boolean {
diff --git a/packages/desktop-client/src/hooks/useLocalPref.ts b/packages/desktop-client/src/hooks/useLocalPref.ts
index 3da16da937c..d5c236cc766 100644
--- a/packages/desktop-client/src/hooks/useLocalPref.ts
+++ b/packages/desktop-client/src/hooks/useLocalPref.ts
@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { useLocalStorage } from 'usehooks-ts';
 
 import { type LocalPrefs } from 'loot-core/src/types/prefs';
@@ -18,25 +16,8 @@ export function useLocalPref<K extends keyof LocalPrefs>(
 ): [LocalPrefs[K], SetLocalPrefAction<K>] {
   const [budgetId] = useMetadataPref('id');
 
-  const [value, setValue] = useLocalStorage<LocalPrefs[K]>(
-    `${budgetId}-${prefName}`,
-    undefined,
-    {
-      deserializer: JSON.parse,
-      serializer: JSON.stringify,
-    },
-  );
-
-  // Migrate from old pref storage location (metadata.json) to local storage
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [metadataPref] = useMetadataPref(prefName as any);
-  useEffect(() => {
-    if (value !== undefined || metadataPref === undefined) {
-      return;
-    }
-
-    setValue(metadataPref);
-  }, [value, metadataPref, setValue]);
-
-  return [value, setValue];
+  return useLocalStorage<LocalPrefs[K]>(`${budgetId}-${prefName}`, undefined, {
+    deserializer: JSON.parse,
+    serializer: JSON.stringify,
+  });
 }
diff --git a/packages/desktop-client/src/icons/AnimatedLoading.tsx b/packages/desktop-client/src/icons/AnimatedLoading.tsx
index 82476f66ce6..e6272195cec 100644
--- a/packages/desktop-client/src/icons/AnimatedLoading.tsx
+++ b/packages/desktop-client/src/icons/AnimatedLoading.tsx
@@ -1,6 +1,6 @@
 import React, { type SVGProps } from 'react';
 
-import { css, keyframes } from 'glamor';
+import { css, keyframes } from '@emotion/css';
 
 import { SvgLoading } from './Loading';
 
@@ -12,13 +12,13 @@ const rotation = keyframes({
 export function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
   return (
     <span
-      className={`${css({
+      className={css({
         animationName: rotation,
         animationDuration: '1.6s',
         animationTimingFunction: 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',
         animationIterationCount: 'infinite',
         lineHeight: 0,
-      })}`}
+      })}
     >
       <SvgLoading {...props} />
     </span>
diff --git a/packages/desktop-client/src/style/index.ts b/packages/desktop-client/src/style/index.ts
index 92a78c4f1a5..fb5f2ea25bb 100644
--- a/packages/desktop-client/src/style/index.ts
+++ b/packages/desktop-client/src/style/index.ts
@@ -1,4 +1,3 @@
 export * as colors from './colors';
 export * from './styles';
 export * from './theme';
-export * from './types';
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index d90ae062f7f..ea137a344c5 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -1,12 +1,13 @@
 // @ts-strict-ignore
-import { keyframes } from 'glamor';
+import { type CSSProperties } from 'react';
+
+import { keyframes } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
 
 import { tokens } from '../tokens';
 
 import { theme } from './theme';
-import { type CSSProperties } from './types';
 
 const MOBILE_MIN_HEIGHT = 40;
 
diff --git a/packages/desktop-client/src/style/types.ts b/packages/desktop-client/src/style/types.ts
deleted file mode 100644
index d1ae529d52f..00000000000
--- a/packages/desktop-client/src/style/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { type CSSProperties as ReactCSSProperties } from 'react';
-
-export type CSSProperties = ReactCSSProperties & {
-  [propertyName: string]: unknown;
-};
diff --git a/packages/desktop-client/src/util/router-tools.ts b/packages/desktop-client/src/util/router-tools.ts
index b47386270e9..1bba51ee678 100644
--- a/packages/desktop-client/src/util/router-tools.ts
+++ b/packages/desktop-client/src/util/router-tools.ts
@@ -9,7 +9,3 @@ export function ExposeNavigate() {
   }, [navigate]);
   return null;
 }
-
-export function openUrl(url: string) {
-  window.open(url, '_blank', 'noopener,noreferrer');
-}
diff --git a/packages/desktop-electron/menu.ts b/packages/desktop-electron/menu.ts
index 60463b8bffc..5897cd22d0b 100644
--- a/packages/desktop-electron/menu.ts
+++ b/packages/desktop-electron/menu.ts
@@ -1,10 +1,4 @@
-import {
-  MenuItemConstructorOptions,
-  Menu,
-  ipcMain,
-  app,
-  shell,
-} from 'electron';
+import { MenuItemConstructorOptions, Menu, ipcMain, app } from 'electron';
 
 export function getMenu(
   isDev: boolean,
@@ -173,7 +167,15 @@ export function getMenu(
       role: 'help',
       submenu: [
         {
-          label: 'Keyboard Shortcuts Reference',
+          label: 'Documentation',
+          click(_menuItem, focusedWin) {
+            focusedWin?.webContents.executeJavaScript(
+              'window.__actionsForMenu && window.__actionsForMenu.openDocsForCurrentPage()',
+            );
+          },
+        },
+        {
+          label: 'Keyboard Shortcuts',
           accelerator: '?',
           enabled: !!budgetId,
           click: function (_menuItem, focusedWin) {
@@ -184,15 +186,6 @@ export function getMenu(
             }
           },
         },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Learn More',
-          click() {
-            shell.openExternal('https://actualbudget.org/docs/');
-          },
-        },
       ],
     },
   ];
diff --git a/packages/loot-core/migrations/1722804019000_create_dashboard_table.js b/packages/loot-core/migrations/1722804019000_create_dashboard_table.js
index 228b85ede0d..fbed322fce5 100644
--- a/packages/loot-core/migrations/1722804019000_create_dashboard_table.js
+++ b/packages/loot-core/migrations/1722804019000_create_dashboard_table.js
@@ -17,7 +17,8 @@ export default async function runMigration(db) {
       INSERT INTO dashboard (id, type, width, height, x, y)
       VALUES
         ('${uuidv4()}','net-worth-card', 8, 2, 0, 0),
-        ('${uuidv4()}', 'cash-flow-card', 4, 2, 8, 0);
+        ('${uuidv4()}', 'cash-flow-card', 4, 2, 8, 0),
+        ('${uuidv4()}', 'spending-card', 4, 2, 0, 2);
     `);
 
     // Add custom reports to the dashboard
diff --git a/packages/loot-core/src/client/actions/app.ts b/packages/loot-core/src/client/actions/app.ts
index e586f55dc69..6f322b196c6 100644
--- a/packages/loot-core/src/client/actions/app.ts
+++ b/packages/loot-core/src/client/actions/app.ts
@@ -52,3 +52,29 @@ export function reloadApp() {
     global.Actual.reload();
   };
 }
+
+const getPageDocs = (page: string) => {
+  switch (page) {
+    case '/budget':
+      return 'https://actualbudget.org/docs/getting-started/envelope-budgeting';
+    case '/reports':
+      return 'https://actualbudget.org/docs/reports/';
+    case '/schedules':
+      return 'https://actualbudget.org/docs/schedules';
+    case '/payees':
+      return 'https://actualbudget.org/docs/transactions/payees';
+    case '/rules':
+      return 'https://actualbudget.org/docs/budgeting/rules';
+    case '/settings':
+      return 'https://actualbudget.org/docs/settings';
+    default:
+      // All pages under /accounts, plus any missing pages
+      return 'https://actualbudget.org/docs';
+  }
+};
+
+export function openDocsForCurrentPage() {
+  return () => {
+    global.Actual.openURLInBrowser(getPageDocs(window.location.pathname));
+  };
+}
diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts
index 484467285e8..11450cf4775 100644
--- a/packages/loot-core/src/client/state-types/modals.d.ts
+++ b/packages/loot-core/src/client/state-types/modals.d.ts
@@ -286,6 +286,7 @@ type FinanceModals = {
     onUnlink: () => void;
   };
   'keyboard-shortcuts': EmptyObject;
+  'goal-templates': EmptyObject;
 };
 
 export type PushModalAction = {
diff --git a/packages/loot-core/src/server/accounts/rules.test.ts b/packages/loot-core/src/server/accounts/rules.test.ts
index 468a89dc95f..6352bee9aec 100644
--- a/packages/loot-core/src/server/accounts/rules.test.ts
+++ b/packages/loot-core/src/server/accounts/rules.test.ts
@@ -516,6 +516,193 @@ describe('Rule', () => {
     });
   });
 
+  describe('split actions', () => {
+    const fixedAmountRule = new Rule({
+      conditionsOp: 'and',
+      conditions: [{ op: 'is', field: 'imported_payee', value: 'James' }],
+      actions: [
+        {
+          op: 'set-split-amount',
+          field: 'amount',
+          value: 100,
+          options: { splitIndex: 1, method: 'fixed-amount' },
+        },
+        {
+          op: 'set-split-amount',
+          field: 'amount',
+          value: 100,
+          options: { splitIndex: 2, method: 'fixed-amount' },
+        },
+      ],
+    });
+
+    test('basic fixed-amount', () => {
+      expect(
+        fixedAmountRule.exec({ imported_payee: 'James', amount: 200 }),
+      ).toMatchObject({
+        error: null,
+        subtransactions: [{ amount: 100 }, { amount: 100 }],
+      });
+    });
+
+    test('basic fixed-percent', () => {
+      const rule = new Rule({
+        conditionsOp: 'and',
+        conditions: [{ op: 'is', field: 'imported_payee', value: 'James' }],
+        actions: [
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            value: 50,
+            options: { splitIndex: 1, method: 'fixed-percent' },
+          },
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            value: 50,
+            options: { splitIndex: 2, method: 'fixed-percent' },
+          },
+        ],
+      });
+
+      expect(rule.exec({ imported_payee: 'James', amount: 200 })).toMatchObject(
+        {
+          error: null,
+          subtransactions: [{ amount: 100 }, { amount: 100 }],
+        },
+      );
+    });
+
+    test('basic remainder', () => {
+      const rule = new Rule({
+        conditionsOp: 'and',
+        conditions: [{ op: 'is', field: 'imported_payee', value: 'James' }],
+        actions: [
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            options: { splitIndex: 1, method: 'remainder' },
+          },
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            options: { splitIndex: 2, method: 'remainder' },
+          },
+        ],
+      });
+
+      expect(rule.exec({ imported_payee: 'James', amount: 200 })).toMatchObject(
+        {
+          error: null,
+          subtransactions: [{ amount: 100 }, { amount: 100 }],
+        },
+      );
+    });
+
+    const prioritizationRule = new Rule({
+      conditionsOp: 'and',
+      conditions: [{ op: 'is', field: 'imported_payee', value: 'James' }],
+      actions: [
+        {
+          op: 'set-split-amount',
+          field: 'amount',
+          value: 100,
+          options: { splitIndex: 1, method: 'fixed-amount' },
+        },
+        {
+          op: 'set-split-amount',
+          field: 'amount',
+          value: 50,
+          options: { splitIndex: 2, method: 'fixed-percent' },
+        },
+        {
+          op: 'set-split-amount',
+          field: 'amount',
+          options: { splitIndex: 3, method: 'remainder' },
+        },
+      ],
+    });
+
+    test('percent is of the post-fixed-amount total', () => {
+      // Percent is a percent of the amount pre-remainder
+      expect(
+        prioritizationRule.exec({ imported_payee: 'James', amount: 200 }),
+      ).toMatchObject({
+        error: null,
+        subtransactions: [{ amount: 100 }, { amount: 50 }, { amount: 50 }],
+      });
+    });
+
+    test('remainder/percent goes negative if less than expected after fixed amounts', () => {
+      // Remainder/percent goes negative if less than expected after fixed amounts
+      expect(
+        prioritizationRule.exec({ imported_payee: 'James', amount: 50 }),
+      ).toMatchObject({
+        error: null,
+        subtransactions: [{ amount: 100 }, { amount: -25 }, { amount: -25 }],
+      });
+    });
+
+    test('remainder zeroes out if nothing left', () => {
+      const rule = new Rule({
+        conditionsOp: 'and',
+        conditions: [{ op: 'is', field: 'imported_payee', value: 'James' }],
+        actions: [
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            value: 100,
+            options: { splitIndex: 1, method: 'fixed-amount' },
+          },
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            value: 100,
+            options: { splitIndex: 2, method: 'fixed-percent' },
+          },
+          {
+            op: 'set-split-amount',
+            field: 'amount',
+            options: { splitIndex: 3, method: 'remainder' },
+          },
+        ],
+      });
+
+      expect(rule.exec({ imported_payee: 'James', amount: 150 })).toMatchObject(
+        {
+          error: null,
+          subtransactions: [{ amount: 100 }, { amount: 50 }, { amount: 0 }],
+        },
+      );
+    });
+
+    test('generate errors when fixed amounts exceed the total', () => {
+      expect(
+        fixedAmountRule.exec({ imported_payee: 'James', amount: 100 }),
+      ).toMatchObject({
+        error: {
+          difference: -100,
+          type: 'SplitTransactionError',
+          version: 1,
+        },
+        subtransactions: [{ amount: 100 }, { amount: 100 }],
+      });
+    });
+
+    test('generate errors when fixed amounts undershoot the total', () => {
+      expect(
+        fixedAmountRule.exec({ imported_payee: 'James', amount: 300 }),
+      ).toMatchObject({
+        error: {
+          difference: 100,
+          type: 'SplitTransactionError',
+          version: 1,
+        },
+        subtransactions: [{ amount: 100 }, { amount: 100 }],
+      });
+    });
+  });
+
   test('rules are deterministically ranked', () => {
     const rule = (id, conditions) =>
       new Rule({
diff --git a/packages/loot-core/src/server/accounts/rules.ts b/packages/loot-core/src/server/accounts/rules.ts
index 8dfee69a322..280e84e655b 100644
--- a/packages/loot-core/src/server/accounts/rules.ts
+++ b/packages/loot-core/src/server/accounts/rules.ts
@@ -22,6 +22,7 @@ import {
 import { recurConfigToRSchedule } from '../../shared/schedules';
 import {
   addSplitTransaction,
+  groupTransaction,
   recalculateSplit,
   splitTransaction,
   ungroupTransaction,
@@ -44,6 +45,10 @@ function registerHandlebarsHelpers() {
 
   const helpers = {
     regex: (value: unknown, regex: unknown, replace: unknown) => {
+      if (value == null) {
+        return null;
+      }
+
       if (typeof regex !== 'string' || typeof replace !== 'string') {
         return '';
       }
@@ -620,6 +625,10 @@ export class Action {
         } else {
           object[this.field] = this.value;
         }
+
+        if (this.field === 'payee_name') {
+          object['payee'] = 'new';
+        }
         break;
       case 'set-split-amount':
         switch (this.options.method) {
@@ -663,135 +672,96 @@ function execNonSplitActions(actions: Action[], transaction) {
   return update;
 }
 
-export function execActions(actions: Action[], transaction) {
-  const parentActions = actions.filter(action => !action.options?.splitIndex);
-  const childActions = actions.filter(action => action.options?.splitIndex);
-  const totalSplitCount =
-    actions.reduce(
-      (prev, cur) => Math.max(prev, cur.options?.splitIndex ?? 0),
-      0,
-    ) + 1;
-
-  let update = execNonSplitActions(parentActions, transaction);
-  if (totalSplitCount === 1) {
-    // No splits, no need to do anything else.
-    return update;
-  }
-
-  if (update.is_child) {
-    // Rules with splits can't be applied to child transactions.
-    return update;
-  }
+function getSplitRemainder(transactions) {
+  const { error } = recalculateSplit(groupTransaction(transactions));
+  return error ? error.difference : 0;
+}
 
-  const splitAmountActions = childActions.filter(
+function execSplitActions(actions: Action[], transaction) {
+  const splitAmountActions = actions.filter(
     action => action.op === 'set-split-amount',
   );
-  const fixedSplitAmountActions = splitAmountActions.filter(
-    action => action.options.method === 'fixed-amount',
-  );
-  const fixedAmountsBySplit: Record<number, number> = {};
-  fixedSplitAmountActions.forEach(action => {
-    const splitIndex = action.options.splitIndex ?? 0;
-    fixedAmountsBySplit[splitIndex] = action.value;
-  });
-  const fixedAmountSplitCount = Object.keys(fixedAmountsBySplit).length;
-  const totalFixedAmount = Object.values(fixedAmountsBySplit).reduce<number>(
-    (prev, cur: number) => prev + cur,
-    0,
-  );
-  if (
-    fixedAmountSplitCount === totalSplitCount &&
-    totalFixedAmount !== (transaction.amount ?? totalFixedAmount)
-  ) {
-    // Not all value would be distributed to a split.
-    return transaction;
-  }
 
-  const { data, newTransaction } = splitTransaction(
-    ungroupTransaction(update),
+  // Convert the transaction to a split transaction.
+  const { data } = splitTransaction(
+    ungroupTransaction(transaction),
     transaction.id,
   );
-  update = recalculateSplit(newTransaction);
-  data[0] = update;
   let newTransactions = data;
 
-  for (const action of childActions) {
-    const splitIndex = action.options?.splitIndex ?? 0;
-    if (splitIndex >= update.subtransactions.length) {
-      const { data, newTransaction } = addSplitTransaction(
-        newTransactions,
-        transaction.id,
-      );
-      update = recalculateSplit(newTransaction);
-      data[0] = update;
+  // Add empty splits, and apply non-set-amount actions.
+  // This also populates any fixed-amount splits.
+  actions.forEach(action => {
+    const splitTransactionIndex = (action.options?.splitIndex ?? 0) + 1;
+    if (splitTransactionIndex >= newTransactions.length) {
+      const { data } = addSplitTransaction(newTransactions, transaction.id);
       newTransactions = data;
     }
-    action.exec(update.subtransactions[splitIndex]);
-  }
+    action.exec(newTransactions[splitTransactionIndex]);
+  });
 
-  // Make sure every transaction has an amount.
-  if (fixedAmountSplitCount !== totalSplitCount) {
-    // This is the amount that will be distributed to the splits that
-    // don't have a fixed amount. The last split will get the remainder.
-    // The amount will be zero if the parent transaction has no amount.
-    const amountToDistribute =
-      (transaction.amount ?? totalFixedAmount) - totalFixedAmount;
-    let remainingAmount = amountToDistribute;
-
-    // First distribute the fixed percentages.
-    splitAmountActions
-      .filter(action => action.options.method === 'fixed-percent')
-      .forEach(action => {
-        const splitIndex = action.options.splitIndex;
-        const percent = action.value / 100;
-        const amount = Math.round(amountToDistribute * percent);
-        update.subtransactions[splitIndex].amount = amount;
-        remainingAmount -= amount;
-      });
-
-    // Then distribute the remainder.
-    const remainderSplitAmountActions = splitAmountActions.filter(
-      action => action.options.method === 'remainder',
+  // Distribute to fixed-percent splits.
+  const remainingAfterFixedAmounts = getSplitRemainder(newTransactions);
+  splitAmountActions
+    .filter(action => action.options.method === 'fixed-percent')
+    .forEach(action => {
+      const splitTransactionIndex = (action.options?.splitIndex ?? 0) + 1;
+      const percent = action.value / 100;
+      const amount = Math.round(remainingAfterFixedAmounts * percent);
+      newTransactions[splitTransactionIndex].amount = amount;
+    });
+
+  // Distribute to remainder splits.
+  const remainderActions = splitAmountActions.filter(
+    action => action.options.method === 'remainder',
+  );
+  const remainingAfterFixedPercents = getSplitRemainder(newTransactions);
+  if (remainderActions.length !== 0) {
+    const amountPerRemainderSplit = Math.round(
+      remainingAfterFixedPercents / remainderActions.length,
     );
+    let lastNonFixedTransactionIndex = -1;
+    remainderActions.forEach(action => {
+      const splitTransactionIndex = (action.options?.splitIndex ?? 0) + 1;
+      newTransactions[splitTransactionIndex].amount = amountPerRemainderSplit;
+      lastNonFixedTransactionIndex = Math.max(
+        lastNonFixedTransactionIndex,
+        splitTransactionIndex,
+      );
+    });
 
-    // Check if there is any value left to distribute after all fixed
-    // (percentage and amount) splits have been distributed.
-    if (remainingAmount !== 0) {
-      // If there are no remainder splits explicitly added by the user,
-      // distribute the remainder to a virtual split that will be
-      // adjusted for the remainder.
-      if (remainderSplitAmountActions.length === 0) {
-        const splitIndex = totalSplitCount;
-        const { newTransaction } = addSplitTransaction(
-          newTransactions,
-          transaction.id,
-        );
-        update = recalculateSplit(newTransaction);
-        update.subtransactions[splitIndex].amount = remainingAmount;
-      } else {
-        const amountPerRemainderSplit = Math.round(
-          remainingAmount / remainderSplitAmountActions.length,
-        );
-        let lastNonFixedIndex = -1;
-        remainderSplitAmountActions.forEach(action => {
-          const splitIndex = action.options.splitIndex;
-          update.subtransactions[splitIndex].amount = amountPerRemainderSplit;
-          remainingAmount -= amountPerRemainderSplit;
-          lastNonFixedIndex = Math.max(lastNonFixedIndex, splitIndex);
-        });
+    // The last remainder split will be adjusted for any leftovers from rounding.
+    newTransactions[lastNonFixedTransactionIndex].amount -=
+      getSplitRemainder(newTransactions);
+  }
 
-        // The last non-fixed split will be adjusted for the remainder.
-        update.subtransactions[lastNonFixedIndex].amount -= remainingAmount;
-      }
-      update = recalculateSplit(update);
-    }
+  // The split index 0 (transaction index 1) is reserved for "Apply to all" actions.
+  // Remove that entry from the transaction list.
+  newTransactions.splice(1, 1);
+  return recalculateSplit(groupTransaction(newTransactions));
+}
+
+export function execActions(actions: Action[], transaction) {
+  const parentActions = actions.filter(action => !action.options?.splitIndex);
+  const childActions = actions.filter(action => action.options?.splitIndex);
+  const totalSplitCount =
+    actions.reduce(
+      (prev, cur) => Math.max(prev, cur.options?.splitIndex ?? 0),
+      0,
+    ) + 1;
+
+  const nonSplitResult = execNonSplitActions(parentActions, transaction);
+  if (totalSplitCount === 1) {
+    // No splits, no need to do anything else.
+    return nonSplitResult;
   }
 
-  // The split index 0 is reserved for "Apply to all" actions.
-  // Remove that entry from the subtransactions.
-  update.subtransactions = update.subtransactions.slice(1);
+  if (nonSplitResult.is_child) {
+    // Rules with splits can't be applied to child transactions.
+    return nonSplitResult;
+  }
 
-  return update;
+  return execSplitActions(childActions, nonSplitResult);
 }
 
 export class Rule {
diff --git a/packages/loot-core/src/server/accounts/sync.ts b/packages/loot-core/src/server/accounts/sync.ts
index b453a5b88d4..a861b374075 100644
--- a/packages/loot-core/src/server/accounts/sync.ts
+++ b/packages/loot-core/src/server/accounts/sync.ts
@@ -460,7 +460,7 @@ export async function matchTransactions(
     subtransactions,
   } of normalized) {
     // Run the rules
-    const trans = runRules(originalTrans);
+    const trans = await runRules(originalTrans);
 
     let match = null;
     let fuzzyDataset = null;
@@ -605,7 +605,7 @@ export async function addTransactions(
 
   for (const { trans: originalTrans, subtransactions } of normalized) {
     // Run the rules
-    const trans = runRules(originalTrans);
+    const trans = await runRules(originalTrans);
 
     const finalTransaction = {
       id: uuidv4(),
diff --git a/packages/loot-core/src/server/accounts/transaction-rules.test.ts b/packages/loot-core/src/server/accounts/transaction-rules.test.ts
index 3ca6834d99d..4a043e0ef09 100644
--- a/packages/loot-core/src/server/accounts/transaction-rules.test.ts
+++ b/packages/loot-core/src/server/accounts/transaction-rules.test.ts
@@ -126,7 +126,7 @@ describe('Transaction rules', () => {
     spy.mockRestore();
 
     // Finally make sure the rule is actually in place and runs
-    const transaction = runRules({
+    const transaction = await runRules({
       date: '2019-05-10',
       notes: '',
       category: null,
@@ -149,7 +149,7 @@ describe('Transaction rules', () => {
     });
     expect(getRules().length).toBe(1);
 
-    let transaction = runRules({
+    let transaction = await runRules({
       imported_payee: 'Kroger',
       notes: '',
       category: null,
@@ -165,7 +165,7 @@ describe('Transaction rules', () => {
     });
     expect(getRules().length).toBe(1);
 
-    transaction = runRules({
+    transaction = await runRules({
       imported_payee: 'Kroger',
       notes: '',
       category: null,
@@ -179,7 +179,7 @@ describe('Transaction rules', () => {
       id,
       conditions: [{ op: 'is', field: 'imported_payee', value: 'ABC' }],
     });
-    transaction = runRules({
+    transaction = await runRules({
       imported_payee: 'ABC',
       notes: '',
       category: null,
@@ -201,7 +201,7 @@ describe('Transaction rules', () => {
     });
     expect(getRules().length).toBe(1);
 
-    let transaction = runRules({
+    let transaction = await runRules({
       payee: 'Kroger',
       notes: '',
       category: null,
@@ -211,7 +211,7 @@ describe('Transaction rules', () => {
 
     await deleteRule(id);
     expect(getRules().length).toBe(0);
-    transaction = runRules({
+    transaction = await runRules({
       payee: 'Kroger',
       notes: '',
       category: null,
@@ -242,14 +242,14 @@ describe('Transaction rules', () => {
     await loadRules();
     expect(getRules().length).toBe(2);
 
-    let transaction = runRules({
+    let transaction = await runRules({
       imported_payee: 'blah Lowes blah',
       payee: null,
       category: null,
     });
     expect(transaction.payee).toBe('lowes');
 
-    transaction = runRules({
+    transaction = await runRules({
       imported_payee: 'kroger',
       category: null,
     });
@@ -315,7 +315,7 @@ describe('Transaction rules', () => {
     expect(rule2.conditions[1].value).toBe('beer_id');
   });
 
-  test('runRules runs all the rules in each phase', async () => {
+  test('await runRules runs all the rules in each phase', async () => {
     await loadRules();
     await insertRule({
       stage: 'post',
@@ -354,7 +354,7 @@ describe('Transaction rules', () => {
     });
 
     expect(
-      runRules({
+      await runRules({
         imported_payee: '123 kroger',
         date: '2020-08-11',
         amount: 50,
diff --git a/packages/loot-core/src/server/accounts/transaction-rules.ts b/packages/loot-core/src/server/accounts/transaction-rules.ts
index 710f057b03a..5a986186189 100644
--- a/packages/loot-core/src/server/accounts/transaction-rules.ts
+++ b/packages/loot-core/src/server/accounts/transaction-rules.ts
@@ -16,6 +16,7 @@ import {
 } from '../../types/models';
 import { schemaConfig } from '../aql';
 import * as db from '../db';
+import { getPayee, getPayeeByName, insertPayee } from '../db';
 import { getMappings } from '../db/mappings';
 import { RuleError } from '../errors';
 import { requiredFields, toDateRepr } from '../models';
@@ -273,8 +274,8 @@ function onApplySync(oldValues, newValues) {
 }
 
 // Runner
-export function runRules(trans) {
-  let finalTrans = { ...trans };
+export async function runRules(trans) {
+  let finalTrans = await prepareTransactionForRules({ ...trans });
 
   const rules = rankRules(
     fastSetMerge(
@@ -287,7 +288,7 @@ export function runRules(trans) {
     finalTrans = rules[i].apply(finalTrans);
   }
 
-  return finalTrans;
+  return await finalizeTransactionForRules(finalTrans);
 }
 
 // This does the inverse: finds all the transactions matching a rule
@@ -539,11 +540,20 @@ export async function applyActions(
     return null;
   }
 
-  const updated = transactions.flatMap(trans => {
+  const transactionsForRules = await Promise.all(
+    transactions.map(prepareTransactionForRules),
+  );
+
+  const updated = transactionsForRules.flatMap(trans => {
     return ungroupTransaction(execActions(parsedActions, trans));
   });
 
-  return batchUpdateTransactions({ updated });
+  const finalized: TransactionEntity[] = [];
+  for (const trans of updated) {
+    finalized.push(await finalizeTransactionForRules(trans));
+  }
+
+  return batchUpdateTransactions({ updated: finalized });
 }
 
 export function getRulesForPayee(payeeId) {
@@ -759,3 +769,44 @@ export async function updateCategoryRules(transactions) {
     }
   });
 }
+
+export type TransactionForRules = TransactionEntity & {
+  payee_name?: string;
+};
+
+export async function prepareTransactionForRules(
+  trans: TransactionEntity,
+): Promise<TransactionForRules> {
+  const r: TransactionForRules = { ...trans };
+  if (trans.payee) {
+    const payee = await getPayee(trans.payee);
+    if (payee) {
+      r.payee_name = payee.name;
+    }
+  }
+
+  return r;
+}
+
+export async function finalizeTransactionForRules(
+  trans: TransactionEntity | TransactionForRules,
+): Promise<TransactionEntity> {
+  if ('payee_name' in trans) {
+    if (trans.payee === 'new') {
+      if (trans.payee_name) {
+        let payeeId = (await getPayeeByName(trans.payee_name))?.id;
+        payeeId ??= await insertPayee({
+          name: trans.payee_name,
+        });
+
+        trans.payee = payeeId;
+      } else {
+        trans.payee = null;
+      }
+    }
+
+    delete trans.payee_name;
+  }
+
+  return trans;
+}
diff --git a/packages/loot-core/src/server/accounts/transactions.ts b/packages/loot-core/src/server/accounts/transactions.ts
index a056daac112..c91d0d95f0a 100644
--- a/packages/loot-core/src/server/accounts/transactions.ts
+++ b/packages/loot-core/src/server/accounts/transactions.ts
@@ -77,7 +77,13 @@ export async function batchUpdateTransactions({
   await batchMessages(async () => {
     if (added) {
       addedIds = await Promise.all(
-        added.map(async t => db.insertTransaction(t)),
+        added.map(async t => {
+          const account = accounts.find(acct => acct.id === t.account);
+          if (account.offbudget === 1) {
+            t.category = null;
+          }
+          return db.insertTransaction(t);
+        }),
       );
     }
 
diff --git a/packages/loot-core/src/server/accounts/transfer.ts b/packages/loot-core/src/server/accounts/transfer.ts
index 04545bf7853..f9c81048378 100644
--- a/packages/loot-core/src/server/accounts/transfer.ts
+++ b/packages/loot-core/src/server/accounts/transfer.ts
@@ -26,11 +26,16 @@ async function clearCategory(transaction, transferAcct) {
     [transferAcct],
   );
 
-  // We should clear the category to make sure it's not being
-  // accounted for in the budget, unless it should be in the case of
-  // transferring from an on-budget to off-budget account
+  // If the transfer is between two on-budget or two off-budget accounts,
+  // we should clear the category, because the category is not relevant
   if (fromOffBudget === toOffBudget) {
     await db.updateTransaction({ id: transaction.id, category: null });
+    if (transaction.transfer_id) {
+      await db.updateTransaction({
+        id: transaction.transfer_id,
+        category: null,
+      });
+    }
     return true;
   }
   return false;
diff --git a/packages/loot-core/src/server/budget/actions.ts b/packages/loot-core/src/server/budget/actions.ts
index 0d9950553d7..e0bfbf05c14 100644
--- a/packages/loot-core/src/server/budget/actions.ts
+++ b/packages/loot-core/src/server/budget/actions.ts
@@ -31,11 +31,12 @@ function getBudgetTable(): string {
 }
 
 export function isReflectBudget(): boolean {
-  const budgetType =
-    db.firstSync(`SELECT value FROM preferences WHERE id = ?`, [
-      'budgetType',
-    ]) ?? 'rollover';
-  return budgetType === 'report';
+  const budgetType = db.firstSync(
+    `SELECT value FROM preferences WHERE id = ?`,
+    ['budgetType'],
+  );
+  const val = budgetType ? budgetType.value : 'rollover';
+  return val === 'report';
 }
 
 function dbMonth(month: string): number {
diff --git a/packages/loot-core/src/server/budget/goal-template.pegjs b/packages/loot-core/src/server/budget/goal-template.pegjs
index dbe2dd3f16e..e8805c7c5b1 100644
--- a/packages/loot-core/src/server/budget/goal-template.pegjs
+++ b/packages/loot-core/src/server/budget/goal-template.pegjs
@@ -24,6 +24,8 @@ expr
     { return { type: 'remainder', priority: null, directive: template.directive, weight: remainder, limit } }
   / template: template _ 'average'i _ amount: positive _ 'months'i?
     { return { type: 'average', amount: +amount, priority: template.priority, directive: template.directive }}
+  / template: template _ 'copy from'i _ lookBack: positive _ 'months ago'i limit:limit?
+    { return { type: 'copy', priority: template.priority, directive: template.directive, lookBack: +lookBack, limit }}
   / goal: goal amount: amount { return {type: 'simple', amount: amount, priority: null, directive: 'goal' }}
 
 
diff --git a/packages/loot-core/src/server/budget/goals/goalsAverage.ts b/packages/loot-core/src/server/budget/goals/goalsAverage.ts
index 44151a59d1d..2dd7472ad06 100644
--- a/packages/loot-core/src/server/budget/goals/goalsAverage.ts
+++ b/packages/loot-core/src/server/budget/goals/goalsAverage.ts
@@ -10,7 +10,6 @@ export async function goalsAverage(
   errors,
   to_budget,
 ) {
-  // simple has an 'amount' param
   let increment = 0;
   if (template.amount) {
     let sum = 0;
diff --git a/packages/loot-core/src/server/budget/goals/goalsCopy.ts b/packages/loot-core/src/server/budget/goals/goalsCopy.ts
new file mode 100644
index 00000000000..7932cd7447d
--- /dev/null
+++ b/packages/loot-core/src/server/budget/goals/goalsCopy.ts
@@ -0,0 +1,38 @@
+// @ts-strict-ignore
+import * as monthUtils from '../../../shared/months';
+import { amountToInteger } from '../../../shared/util';
+import { getSheetValue } from '../actions';
+
+export async function goalsCopy(
+  template,
+  month,
+  category,
+  limitCheck,
+  errors,
+  limit,
+  hold,
+  to_budget,
+) {
+  // simple has 'monthly' and/or 'limit' params
+  if (template.limit != null) {
+    if (limitCheck) {
+      errors.push(`More than one “up to” limit found.`);
+      return { to_budget, errors, limit, limitCheck, hold };
+    } else {
+      limitCheck = true;
+      limit = amountToInteger(template.limit.amount);
+      hold = template.limit.hold;
+    }
+  }
+  let increment = 0;
+  if (template.lookBack) {
+    const sheetName = monthUtils.sheetForMonth(
+      monthUtils.subMonths(month, template.lookBack),
+    );
+    increment = await getSheetValue(sheetName, `budget-${category.id}`);
+  } else {
+    errors.push('Missing number of months to look back');
+  }
+  to_budget += increment;
+  return { to_budget, errors, limit, limitCheck, hold };
+}
diff --git a/packages/loot-core/src/server/budget/goaltemplates.ts b/packages/loot-core/src/server/budget/goaltemplates.ts
index d26485be44a..516218496e8 100644
--- a/packages/loot-core/src/server/budget/goaltemplates.ts
+++ b/packages/loot-core/src/server/budget/goaltemplates.ts
@@ -8,6 +8,7 @@ import { batchMessages } from '../sync';
 import { getSheetValue, isReflectBudget, setBudget, setGoal } from './actions';
 import { goalsAverage } from './goals/goalsAverage';
 import { goalsBy } from './goals/goalsBy';
+import { goalsCopy } from './goals/goalsCopy';
 import { goalsPercentage } from './goals/goalsPercentage';
 import { findRemainder, goalsRemainder } from './goals/goalsRemainder';
 import { goalsSchedule } from './goals/goalsSchedule';
@@ -528,6 +529,24 @@ async function applyCategoryTemplate(
         hold = goalsReturn.hold;
         break;
       }
+      case 'copy': {
+        const goalsReturn = await goalsCopy(
+          template,
+          month,
+          category,
+          limitCheck,
+          errors,
+          limit,
+          hold,
+          to_budget,
+        );
+        to_budget = goalsReturn.to_budget;
+        errors = goalsReturn.errors;
+        limit = goalsReturn.limit;
+        limitCheck = goalsReturn.limitCheck;
+        hold = goalsReturn.hold;
+        break;
+      }
       case 'by': {
         const goalsReturn = await goalsBy(
           template_lines,
diff --git a/packages/loot-core/src/server/main.ts b/packages/loot-core/src/server/main.ts
index a2a547173af..a7979f03781 100644
--- a/packages/loot-core/src/server/main.ts
+++ b/packages/loot-core/src/server/main.ts
@@ -1716,7 +1716,7 @@ handlers['download-budget'] = async function ({ fileId }) {
   const id = result.id;
   await handlers['load-budget']({ id });
   result = await handlers['sync-budget']();
-  await handlers['close-budget']();
+
   if (result.error) {
     return result;
   }
diff --git a/packages/loot-core/src/server/post.ts b/packages/loot-core/src/server/post.ts
index 8b49c359d41..1fa28cd22a0 100644
--- a/packages/loot-core/src/server/post.ts
+++ b/packages/loot-core/src/server/post.ts
@@ -15,6 +15,19 @@ function throwIfNot200(res, text) {
       const json = JSON.parse(text);
       throw new PostError(json.reason);
     }
+
+    // Actual Sync Server may be exposed via a tunnel (e.g. ngrok). Tunnel errors should be treated as network errors.
+    const tunnelErrorHeaders = ['ngrok-error-code'];
+    const tunnelError = tunnelErrorHeaders.some(header =>
+      res.headers.has(header),
+    );
+
+    if (tunnelError) {
+      // Tunnel errors are present when the tunnel is active and the server is not reachable e.g. server is offline
+      // When we experience a tunnel error we treat it as a network failure
+      throw new PostError('network-failure');
+    }
+
     throw new PostError(text);
   }
 }
diff --git a/packages/loot-core/src/shared/dashboard.ts b/packages/loot-core/src/shared/dashboard.ts
index 1479d9b3b4b..e5fbe9da282 100644
--- a/packages/loot-core/src/shared/dashboard.ts
+++ b/packages/loot-core/src/shared/dashboard.ts
@@ -17,4 +17,12 @@ export const DEFAULT_DASHBOARD_STATE: NewWidget[] = [
     y: 0,
     meta: null,
   },
+  {
+    type: 'spending-card',
+    width: 4,
+    height: 2,
+    x: 0,
+    y: 2,
+    meta: null,
+  },
 ];
diff --git a/packages/loot-core/src/shared/rules.ts b/packages/loot-core/src/shared/rules.ts
index fe4839b2229..e194266d4aa 100644
--- a/packages/loot-core/src/shared/rules.ts
+++ b/packages/loot-core/src/shared/rules.ts
@@ -61,6 +61,7 @@ const FIELD_INFO = {
     disallowedOps: new Set(['hasTags']),
   },
   payee: { type: 'id' },
+  payee_name: { type: 'string' },
   date: { type: 'date' },
   notes: { type: 'string' },
   amount: { type: 'number' },
@@ -112,6 +113,8 @@ export function mapField(field, opts?) {
   switch (field) {
     case 'imported_payee':
       return 'imported payee';
+    case 'payee_name':
+      return 'payee (name)';
     case 'amount':
       if (opts.inflow) {
         return 'amount (inflow)';
diff --git a/packages/loot-core/src/shared/util.test.ts b/packages/loot-core/src/shared/util.test.ts
index ce5117bf0e7..c18689963de 100644
--- a/packages/loot-core/src/shared/util.test.ts
+++ b/packages/loot-core/src/shared/util.test.ts
@@ -10,7 +10,8 @@ describe('utility functions', () => {
     expect(looselyParseAmount('3.45')).toBe(3.45);
     // cant tell if this next case should be decimal or different format
     // so we set as full numbers
-    expect(looselyParseAmount('3.456')).toBe(3456);
+    expect(looselyParseAmount('3.456')).toBe(3456); // the expected failing case
+    expect(looselyParseAmount('3.4500')).toBe(3.45);
     expect(looselyParseAmount('3.45000')).toBe(3.45);
     expect(looselyParseAmount('3.450000')).toBe(3.45);
     expect(looselyParseAmount('3.4500000')).toBe(3.45);
@@ -20,7 +21,8 @@ describe('utility functions', () => {
 
   test('looseParseAmount works with alternate formats', () => {
     expect(looselyParseAmount('3,45')).toBe(3.45);
-    expect(looselyParseAmount('3,456')).toBe(3456);
+    expect(looselyParseAmount('3,456')).toBe(3456); //expected failing case
+    expect(looselyParseAmount('3,4500')).toBe(3.45);
     expect(looselyParseAmount('3,45000')).toBe(3.45);
     expect(looselyParseAmount('3,450000')).toBe(3.45);
     expect(looselyParseAmount('3,4500000')).toBe(3.45);
diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts
index 04e33702c93..2dec806cc8e 100644
--- a/packages/loot-core/src/shared/util.ts
+++ b/packages/loot-core/src/shared/util.ts
@@ -427,9 +427,9 @@ export function looselyParseAmount(amount: string) {
     amount = amount.replace('(', '-').replace(')', '');
   }
 
-  // Look for a decimal marker, then look for either 1-2 or 5-9 decimal places.
+  // Look for a decimal marker, then look for either 1-2 or 4-9 decimal places.
   // This avoids matching against 3 places which may not actually be decimal
-  const m = amount.match(/[.,]([^.,]{5,9}|[^.,]{1,2})$/);
+  const m = amount.match(/[.,]([^.,]{4,9}|[^.,]{1,2})$/);
   if (!m || m.index === undefined) {
     return safeNumber(parseFloat(extractNumbers(amount)));
   }
diff --git a/packages/loot-core/src/types/models/rule.d.ts b/packages/loot-core/src/types/models/rule.d.ts
index b3e2b6befd5..1bfc9c0a0cd 100644
--- a/packages/loot-core/src/types/models/rule.d.ts
+++ b/packages/loot-core/src/types/models/rule.d.ts
@@ -35,6 +35,7 @@ type FieldValueTypes = {
   date: string;
   notes: string;
   payee: string;
+  payee_name: string;
   imported_payee: string;
   saved: string;
   cleared: boolean;
diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
index 8817cc3b509..5d695db083f 100644
--- a/packages/loot-core/src/types/prefs.d.ts
+++ b/packages/loot-core/src/types/prefs.d.ts
@@ -2,8 +2,8 @@ export type FeatureFlag =
   | 'dashboards'
   | 'reportBudget'
   | 'goalTemplatesEnabled'
-  | 'spendingReport'
-  | 'actionTemplating';
+  | 'actionTemplating'
+  | 'upcomingLengthAdjustment';
 
 /**
  * Cross-device preferences. These sync across devices when they are changed.
diff --git a/upcoming-release-notes/3471.md b/upcoming-release-notes/3471.md
new file mode 100644
index 00000000000..9446c98cf9d
--- /dev/null
+++ b/upcoming-release-notes/3471.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Replace glamor CSS-in-JS library with @emotion/css.
diff --git a/upcoming-release-notes/3611.md b/upcoming-release-notes/3611.md
new file mode 100644
index 00000000000..a2ab592631c
--- /dev/null
+++ b/upcoming-release-notes/3611.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Removing feature flag from spending reports.
diff --git a/upcoming-release-notes/3617.md b/upcoming-release-notes/3617.md
new file mode 100644
index 00000000000..6e686f2154a
--- /dev/null
+++ b/upcoming-release-notes/3617.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [youngcw]
+---
+
+Add goal template to copy budget from X months prior
diff --git a/upcoming-release-notes/3619.md b/upcoming-release-notes/3619.md
new file mode 100644
index 00000000000..5d69e3f600b
--- /dev/null
+++ b/upcoming-release-notes/3619.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Add action rule templating for `payee_name`
diff --git a/upcoming-release-notes/3624.md b/upcoming-release-notes/3624.md
new file mode 100644
index 00000000000..32d716f3a5b
--- /dev/null
+++ b/upcoming-release-notes/3624.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [Sjones512]
+---
+
+Fix rules for scheduled transactions incorrectly showing a split error when the all splits are "fixed-amount".
diff --git a/upcoming-release-notes/3639.md b/upcoming-release-notes/3639.md
new file mode 100644
index 00000000000..4d8a7ad9142
--- /dev/null
+++ b/upcoming-release-notes/3639.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [ SamBobBarnes ]
+---
+
+Add info text to Upcoming Length control.
diff --git a/upcoming-release-notes/3640.md b/upcoming-release-notes/3640.md
new file mode 100644
index 00000000000..cd8ec6273f5
--- /dev/null
+++ b/upcoming-release-notes/3640.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+TypeScript: migrated account header to TS.
diff --git a/upcoming-release-notes/3641.md b/upcoming-release-notes/3641.md
new file mode 100644
index 00000000000..4d0c1b8052e
--- /dev/null
+++ b/upcoming-release-notes/3641.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [jfdoming]
+---
+
+Fix visual glitches with scheduled split transactions
diff --git a/upcoming-release-notes/3651.md b/upcoming-release-notes/3651.md
new file mode 100644
index 00000000000..07e0be1653a
--- /dev/null
+++ b/upcoming-release-notes/3651.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [ SamBobBarnes ]
+---
+
+Add feature flag for upcoming length adjustment setting.
diff --git a/upcoming-release-notes/3674.md b/upcoming-release-notes/3674.md
new file mode 100644
index 00000000000..fc14c2590b0
--- /dev/null
+++ b/upcoming-release-notes/3674.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [greggroth]
+---
+
+Fixes 1Password credit card autocomplete showing on the transactions table
diff --git a/upcoming-release-notes/3676.md b/upcoming-release-notes/3676.md
new file mode 100644
index 00000000000..608c458cf85
--- /dev/null
+++ b/upcoming-release-notes/3676.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [youngcw]
+---
+
+Allow 4 decimal places in file import.
diff --git a/upcoming-release-notes/3679.md b/upcoming-release-notes/3679.md
new file mode 100644
index 00000000000..e19e4be6db3
--- /dev/null
+++ b/upcoming-release-notes/3679.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-rich]
+---
+
+Fix incorrect cumulative totals for Days 28+ on the Spending Report
diff --git a/upcoming-release-notes/3684.md b/upcoming-release-notes/3684.md
new file mode 100644
index 00000000000..598dbc9f39e
--- /dev/null
+++ b/upcoming-release-notes/3684.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [attyluccio]
+---
+
+Add Reconcile button on account page
diff --git a/upcoming-release-notes/3691.md b/upcoming-release-notes/3691.md
new file mode 100644
index 00000000000..00d9058ee42
--- /dev/null
+++ b/upcoming-release-notes/3691.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [deathblade666]
+---
+
+Add goal template reference guide to help menu
\ No newline at end of file
diff --git a/upcoming-release-notes/3695.md b/upcoming-release-notes/3695.md
new file mode 100644
index 00000000000..9ca75e2afe5
--- /dev/null
+++ b/upcoming-release-notes/3695.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [youngcw]
+---
+
+Fix broken budget copy in tracking budget
diff --git a/upcoming-release-notes/3697.md b/upcoming-release-notes/3697.md
new file mode 100644
index 00000000000..7db7e739fcf
--- /dev/null
+++ b/upcoming-release-notes/3697.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MikesGlitch]
+---
+
+Supporting the use of an ngrok tunnel when used to tunnel into actual-sync server
diff --git a/upcoming-release-notes/3699.md b/upcoming-release-notes/3699.md
new file mode 100644
index 00000000000..fc480967444
--- /dev/null
+++ b/upcoming-release-notes/3699.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [jfdoming]
+---
+
+Update Electron help menu to reflect new in-app menu
diff --git a/upcoming-release-notes/3704.md b/upcoming-release-notes/3704.md
new file mode 100644
index 00000000000..bbe3f21ca2d
--- /dev/null
+++ b/upcoming-release-notes/3704.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [UnderKoen]
+---
+
+Fix not being able to change Payee by rules
diff --git a/upcoming-release-notes/3705.md b/upcoming-release-notes/3705.md
new file mode 100644
index 00000000000..d959e9cd079
--- /dev/null
+++ b/upcoming-release-notes/3705.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [UnderKoen]
+---
+
+Fix category being set on off-budget accounts
diff --git a/upcoming-release-notes/3717.md b/upcoming-release-notes/3717.md
new file mode 100644
index 00000000000..7d15f5f138d
--- /dev/null
+++ b/upcoming-release-notes/3717.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MikesGlitch]
+---
+
+Fix race condition during downloading budget.
diff --git a/upcoming-release-notes/3718.md b/upcoming-release-notes/3718.md
new file mode 100644
index 00000000000..a62702a5925
--- /dev/null
+++ b/upcoming-release-notes/3718.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+SyncedPrefs: remove no longer necessary migration.
diff --git a/upcoming-release-notes/3722.md b/upcoming-release-notes/3722.md
new file mode 100644
index 00000000000..708b67c9269
--- /dev/null
+++ b/upcoming-release-notes/3722.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [AhmedElbohoty]
+---
+
+Translation support for desktop-client/src/components/reports/reports/CustomReport.tsx
diff --git a/yarn.lock b/yarn.lock
index ece1f5423e5..215b01b80d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -59,6 +59,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@actual-app/web@workspace:packages/desktop-client"
   dependencies:
+    "@emotion/css": "npm:^11.13.4"
     "@fontsource/redacted-script": "npm:^5.0.21"
     "@juggle/resize-observer": "npm:^3.4.0"
     "@playwright/test": "npm:1.41.1"
@@ -89,7 +90,6 @@ __metadata:
     debounce: "npm:^1.2.1"
     downshift: "npm:7.6.2"
     focus-visible: "npm:^4.1.5"
-    glamor: "npm:^2.20.40"
     i18next: "npm:^23.11.5"
     i18next-parser: "npm:^9.0.0"
     i18next-resources-to-backend: "npm:^1.2.1"
@@ -162,13 +162,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
-  version: 7.24.2
-  resolution: "@babel/code-frame@npm:7.24.2"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/code-frame@npm:7.24.7"
   dependencies:
-    "@babel/highlight": "npm:^7.24.2"
+    "@babel/highlight": "npm:^7.24.7"
     picocolors: "npm:^1.0.0"
-  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
   languageName: node
   linkType: hard
 
@@ -202,15 +202,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.24.5, @babel/generator@npm:^7.7.2":
-  version: 7.24.5
-  resolution: "@babel/generator@npm:7.24.5"
+"@babel/generator@npm:^7.24.5, @babel/generator@npm:^7.25.6, @babel/generator@npm:^7.7.2":
+  version: 7.25.6
+  resolution: "@babel/generator@npm:7.25.6"
   dependencies:
-    "@babel/types": "npm:^7.24.5"
+    "@babel/types": "npm:^7.25.6"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^2.5.1"
-  checksum: 10/7a3782f1d2f824025a538444a0fce44f5b30a7b013984279561bcb3450eec91a41526533fd0b25b1a6fde627bebd0e645c0ea2aa907cc15c7f3da2d9eb71f069
+  checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8
   languageName: node
   linkType: hard
 
@@ -327,12 +327,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3":
-  version: 7.24.3
-  resolution: "@babel/helper-module-imports@npm:7.24.3"
+"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
   dependencies:
-    "@babel/types": "npm:^7.24.0"
-  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
   languageName: node
   linkType: hard
 
@@ -420,17 +421,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.1":
-  version: 7.24.1
-  resolution: "@babel/helper-string-parser@npm:7.24.1"
-  checksum: 10/04c0ede77b908b43e6124753b48bc485528112a9335f0a21a226bff1ace75bb6e64fab24c85cb4b1610ef3494dacd1cb807caeb6b79a7b36c43d48c289b35949
+"@babel/helper-string-parser@npm:^7.24.8":
+  version: 7.24.8
+  resolution: "@babel/helper-string-parser@npm:7.24.8"
+  checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5":
-  version: 7.24.5
-  resolution: "@babel/helper-validator-identifier@npm:7.24.5"
-  checksum: 10/38aaf6a64a0ea2e84766165b461deda3c24fd2173dff18419a2cc9e1ea1d3e709039aee94db29433a07011492717c80900a5eb564cdca7d137757c3c69e26898
+"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5, @babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
   languageName: node
   linkType: hard
 
@@ -463,24 +464,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.24.2":
-  version: 7.24.5
-  resolution: "@babel/highlight@npm:7.24.5"
+"@babel/highlight@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/highlight@npm:7.24.7"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.24.5"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
     picocolors: "npm:^1.0.0"
-  checksum: 10/afde0403154ad69ecd58a98903058e776760444bf4d0363fb740a8596bc6278b72c5226637c4f6b3674d70acb1665207fe2fcecfe93a74f2f4ab033e89fd7e8c
+  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5":
-  version: 7.24.5
-  resolution: "@babel/parser@npm:7.24.5"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.5, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/parser@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/f5ed1c5fd4b0045a364fb906f54fd30e2fff93a45069068b6d80d3ab2b64f5569c90fb41d39aff80fb7e925ca4d44917965a76776a3ca11924ec1fae3be5d1ea
+  checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a
   languageName: node
   linkType: hard
 
@@ -1451,52 +1454,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
-  version: 7.25.0
-  resolution: "@babel/runtime@npm:7.25.0"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/6870e9e0e9125075b3aeba49a266f442b10820bfc693019eb6c1785c5a0edbe927e98b8238662cdcdba17842107c040386c3b69f39a0a3b217f9d00ffe685b27
+  checksum: 10/0c4134734deb20e1005ffb9165bf342e1074576621b246d8e5e41cc7cb315a885b7d98950fbf5c63619a2990a56ae82f444d35fe8c4691a0b70c2fe5673667dc
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3":
-  version: 7.24.0
-  resolution: "@babel/template@npm:7.24.0"
+"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.25.0, @babel/template@npm:^7.3.3":
+  version: 7.25.0
+  resolution: "@babel/template@npm:7.25.0"
   dependencies:
-    "@babel/code-frame": "npm:^7.23.5"
-    "@babel/parser": "npm:^7.24.0"
-    "@babel/types": "npm:^7.24.0"
-  checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.0"
+  checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.24.5, @babel/traverse@npm:^7.7.2":
-  version: 7.24.5
-  resolution: "@babel/traverse@npm:7.24.5"
+"@babel/traverse@npm:^7.24.5, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.7.2":
+  version: 7.25.6
+  resolution: "@babel/traverse@npm:7.25.6"
   dependencies:
-    "@babel/code-frame": "npm:^7.24.2"
-    "@babel/generator": "npm:^7.24.5"
-    "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-hoist-variables": "npm:^7.22.5"
-    "@babel/helper-split-export-declaration": "npm:^7.24.5"
-    "@babel/parser": "npm:^7.24.5"
-    "@babel/types": "npm:^7.24.5"
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.25.6"
+    "@babel/parser": "npm:^7.25.6"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.6"
     debug: "npm:^4.3.1"
     globals: "npm:^11.1.0"
-  checksum: 10/e237de56e0c30795293fdb6f2cb09a75e6230836e3dc67dc4fa21781eb4d5842996bf3af95bc57ac5c7e6e97d06446f14732d0952eb57d5d9643de7c4f95bee6
+  checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
-  version: 7.24.5
-  resolution: "@babel/types@npm:7.24.5"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.6, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+  version: 7.25.6
+  resolution: "@babel/types@npm:7.25.6"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.24.1"
-    "@babel/helper-validator-identifier": "npm:^7.24.5"
+    "@babel/helper-string-parser": "npm:^7.24.8"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
     to-fast-properties: "npm:^2.0.0"
-  checksum: 10/259e7512476ae64830e73f2addf143159232bcbf0eba6a6a27cab25a960cd353a11c826eb54185fdf7d8d9865922cbcd6522149e9ec55b967131193f9c9111a1
+  checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562
   languageName: node
   linkType: hard
 
@@ -1644,6 +1644,106 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.12.0":
+  version: 11.12.0
+  resolution: "@emotion/babel-plugin@npm:11.12.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.16.7"
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/serialize": "npm:^1.2.0"
+    babel-plugin-macros: "npm:^3.1.0"
+    convert-source-map: "npm:^1.5.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-root: "npm:^1.1.0"
+    source-map: "npm:^0.5.7"
+    stylis: "npm:4.2.0"
+  checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.13.0":
+  version: 11.13.1
+  resolution: "@emotion/cache@npm:11.13.1"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.0"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    stylis: "npm:4.2.0"
+  checksum: 10/090c8ad2e5b23f1b3a95e94f1f0554a40ed1dcd844c9d31629a68ff824eff40f32d1362f67aefa440ee0aabd5a8cabcc76870fd6d77144d3ff251bdcdf1420b9
+  languageName: node
+  linkType: hard
+
+"@emotion/css@npm:^11.13.4":
+  version: 11.13.4
+  resolution: "@emotion/css@npm:11.13.4"
+  dependencies:
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/cache": "npm:^11.13.0"
+    "@emotion/serialize": "npm:^1.3.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.0"
+  checksum: 10/57565a8bd9b712b0ade1c8b972bf2f84d2026e4372b3b035fb9d93a85a8f36ca7f2fbe67ecf32cc3fd03956587ece56ab89dd5bd43a76d3aed542a76841c76e5
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "@emotion/serialize@npm:1.3.1"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.0"
+    csstype: "npm:^3.0.2"
+  checksum: 10/4bbb9b417f88a7bb55c4ffba101e3e53059029c0258969683bb11216906e08cbd687b5674ec787ec41e5340399fb08af8881d6cf913caf8a5fdf84c4f4890f33
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/utils@npm:1.4.0"
+  checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.20.2":
   version: 0.20.2
   resolution: "@esbuild/aix-ppc64@npm:0.20.2"
@@ -5456,6 +5556,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse-json@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10/5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470
+  languageName: node
+  linkType: hard
+
 "@types/pegjs@npm:^0.10.3":
   version: 0.10.3
   resolution: "@types/pegjs@npm:0.10.3"
@@ -6571,13 +6678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asap@npm:~2.0.3":
-  version: 2.0.6
-  resolution: "asap@npm:2.0.6"
-  checksum: 10/b244c0458c571945e4b3be0b14eb001bea5596f9868cc50cc711dc03d58a7e953517d3f0dad81ccde3ff37d1f074701fa76a6f07d41aaa992d7204a37b915dda
-  languageName: node
-  linkType: hard
-
 "assert-plus@npm:^1.0.0":
   version: 1.0.0
   resolution: "assert-plus@npm:1.0.0"
@@ -6731,6 +6831,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-macros@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    cosmiconfig: "npm:^7.0.0"
+    resolve: "npm:^1.19.0"
+  checksum: 10/30be6ca45e9a124c58ca00af9a0753e5410ec0b79a737714fc4722bbbeb693e55d9258f05c437145ef4a867c2d1603e06a1c292d66c243ce1227458c8ea2ca8c
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-corejs2@npm:^0.4.8":
   version: 0.4.8
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8"
@@ -6938,13 +7049,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bowser@npm:^1.7.3":
-  version: 1.9.4
-  resolution: "bowser@npm:1.9.4"
-  checksum: 10/98b90d686d92e85471a5880c27dc18c892be2c84d7768d378d015bae6e8896eff2d47b0621e4a492063c15d9401c17ef1b318b98eb0ac0f0cfadfb7375fbe564
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -7814,7 +7918,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.6.0":
+"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0":
   version: 1.9.0
   resolution: "convert-source-map@npm:1.9.0"
   checksum: 10/dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
@@ -7855,13 +7959,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^1.0.0":
-  version: 1.2.7
-  resolution: "core-js@npm:1.2.7"
-  checksum: 10/834f3398eb587af52e0731d44ae3ead0d331a10fb253c8358c801cac9c1788d96faba8d83c4e8e53270b560969f512596dfdeca875ae626e8af2c901598706fc
-  languageName: node
-  linkType: hard
-
 "core-js@npm:^3.4":
   version: 3.35.1
   resolution: "core-js@npm:3.35.1"
@@ -7883,6 +7980,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
+  dependencies:
+    "@types/parse-json": "npm:^4.0.0"
+    import-fresh: "npm:^3.2.1"
+    parse-json: "npm:^5.0.0"
+    path-type: "npm:^4.0.0"
+    yaml: "npm:^1.10.0"
+  checksum: 10/03600bb3870c80ed151b7b706b99a1f6d78df8f4bdad9c95485072ea13358ef294b13dd99f9e7bf4cc0b43bcd3599d40df7e648750d21c2f6817ca2cd687e071
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^8.1.3":
   version: 8.2.0
   resolution: "cosmiconfig@npm:8.2.0"
@@ -7972,16 +8082,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-in-js-utils@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "css-in-js-utils@npm:2.0.1"
-  dependencies:
-    hyphenate-style-name: "npm:^1.0.2"
-    isobject: "npm:^3.0.1"
-  checksum: 10/ebd76577ac87d0881a7adcb1b1fadad1153c41b61d67e5b9b725fc4c861b90405a4472c26fdea140145d634412a54373f9a9f2c7714a84faa6b2178bcde77239
-  languageName: node
-  linkType: hard
-
 "css-select@npm:^5.1.0":
   version: 5.1.0
   resolution: "css-select@npm:5.1.0"
@@ -8926,7 +9026,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding@npm:^0.1.11, encoding@npm:^0.1.13":
+"encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
   dependencies:
@@ -8944,17 +9044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.12.0":
-  version: 5.15.0
-  resolution: "enhanced-resolve@npm:5.15.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.4"
-    tapable: "npm:^2.2.0"
-  checksum: 10/180c3f2706f9117bf4dc7982e1df811dad83a8db075723f299245ef4488e0cad7e96859c5f0e410682d28a4ecd4da021ec7d06265f7e4eb6eed30c69ca5f7d3e
-  languageName: node
-  linkType: hard
-
-"enhanced-resolve@npm:^5.17.1":
+"enhanced-resolve@npm:^5.12.0, enhanced-resolve@npm:^5.17.1":
   version: 5.17.1
   resolution: "enhanced-resolve@npm:5.17.1"
   dependencies:
@@ -10111,21 +10201,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fbjs@npm:^0.8.12":
-  version: 0.8.18
-  resolution: "fbjs@npm:0.8.18"
-  dependencies:
-    core-js: "npm:^1.0.0"
-    isomorphic-fetch: "npm:^2.1.1"
-    loose-envify: "npm:^1.0.0"
-    object-assign: "npm:^4.1.0"
-    promise: "npm:^7.1.1"
-    setimmediate: "npm:^1.0.5"
-    ua-parser-js: "npm:^0.7.30"
-  checksum: 10/80e855a89b956071676681c9481f399f2356435dc1745d47bd609ce9bd1dda1c487b18c8ffc58423f96452dab6932811ef70758ec8a875dac9ff319c0a5f9adc
-  languageName: node
-  linkType: hard
-
 "fd-slicer@npm:~1.1.0":
   version: 1.1.0
   resolution: "fd-slicer@npm:1.1.0"
@@ -10218,6 +10293,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: 10/caa799c976a14925ba7f31ca1a226fe73d3aa270f4f1b623fcfeb1c6e263111db4beb807d8acd31bd4d48d44c343b93688a9288dfbccca27463c36a0301b0bb9
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^4.0.0, find-up@npm:^4.1.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
@@ -10643,19 +10725,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glamor@npm:^2.20.40":
-  version: 2.20.40
-  resolution: "glamor@npm:2.20.40"
-  dependencies:
-    fbjs: "npm:^0.8.12"
-    inline-style-prefixer: "npm:^3.0.6"
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.5.10"
-    through: "npm:^2.3.8"
-  checksum: 10/ac000b9f2133570c5460dfc7c1778b1aa82f511af0fbf33d1aaecdf4866172011be3a14fcc796b5298e7a345c772bb25e81636f139357b028a47d85795fd2f9c
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -11167,13 +11236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hyphenate-style-name@npm:^1.0.2":
-  version: 1.0.4
-  resolution: "hyphenate-style-name@npm:1.0.4"
-  checksum: 10/d37883e6b7e1be62e1ddae29cac83fa59fb93c068bc8eb1561585439adbad91dcf7e264ee2a82c4378fc58049f7bd853544a4a81bf00d4aff717f641052323e7
-  languageName: node
-  linkType: hard
-
 "i18next-parser@npm:^9.0.0":
   version: 9.0.1
   resolution: "i18next-parser@npm:9.0.1"
@@ -11349,16 +11411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inline-style-prefixer@npm:^3.0.6":
-  version: 3.0.8
-  resolution: "inline-style-prefixer@npm:3.0.8"
-  dependencies:
-    bowser: "npm:^1.7.3"
-    css-in-js-utils: "npm:^2.0.0"
-  checksum: 10/1d47cdbfb70ee5590be521e0b3760665aee1b5fb764bb2ef15cc85e4dd70625c332d9219db4f9c38b6a16384e58fcbc5a27a3a8b63f557c369a530b4d0c3d30e
-  languageName: node
-  linkType: hard
-
 "inter-ui@npm:^3.19.3":
   version: 3.19.3
   resolution: "inter-ui@npm:3.19.3"
@@ -11813,7 +11865,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-stream@npm:^1.0.0, is-stream@npm:^1.0.1, is-stream@npm:^1.1.0":
+"is-stream@npm:^1.0.0, is-stream@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-stream@npm:1.1.0"
   checksum: 10/351aa77c543323c4e111204482808cfad68d2e940515949e31ccd0b010fc13d5fba4b9c230e4887fd24284713040f43e542332fbf172f6b9944b7d62e389c0ec
@@ -11975,16 +12027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isomorphic-fetch@npm:^2.1.1":
-  version: 2.2.1
-  resolution: "isomorphic-fetch@npm:2.2.1"
-  dependencies:
-    node-fetch: "npm:^1.0.1"
-    whatwg-fetch: "npm:>=0.10.0"
-  checksum: 10/bb5daa7c3785d6742f4379a81e55b549a469503f7c9bf9411b48592e86632cf5e8fe8ea878dba185c0f33eb7c510c23abdeb55aebfdf5d3c70f031ced68c5424
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-lib-coverage@npm:3.2.0"
@@ -14500,16 +14542,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^1.0.1":
-  version: 1.7.3
-  resolution: "node-fetch@npm:1.7.3"
-  dependencies:
-    encoding: "npm:^0.1.11"
-    is-stream: "npm:^1.0.1"
-  checksum: 10/17be1a182eec37ba43c1b02673329ab1fa1c2e3ddbdf9b5f62d5157aa118c253dcd42f338eb1b6fe84fb0689c4dd8eb5aaebf46a9b5a066fae88c74e36522688
-  languageName: node
-  linkType: hard
-
 "node-fetch@npm:^2.7.0":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
@@ -15230,14 +15262,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "picocolors@npm:1.0.0"
-  checksum: 10/a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981
-  languageName: node
-  linkType: hard
-
-"picocolors@npm:^1.1.0":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
   version: 1.1.0
   resolution: "picocolors@npm:1.1.0"
   checksum: 10/a2ad60d94d185c30f2a140b19c512547713fb89b920d32cc6cf658fa786d63a37ba7b8451872c3d9fc34883971fb6e5878e07a20b60506e0bb2554dce9169ccb
@@ -15546,15 +15571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"promise@npm:^7.1.1":
-  version: 7.3.1
-  resolution: "promise@npm:7.3.1"
-  dependencies:
-    asap: "npm:~2.0.3"
-  checksum: 10/37dbe58ca7b0716cc881f0618128f1fd6ff9c46cdc529a269fd70004e567126a449a94e9428e2d19b53d06182d11b45d0c399828f103e06b2bb87643319bd2e7
-  languageName: node
-  linkType: hard
-
 "prompts@npm:^2.0.1":
   version: 2.4.2
   resolution: "prompts@npm:2.4.2"
@@ -15565,7 +15581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -16536,7 +16552,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
+"resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -16562,7 +16578,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -16985,13 +17001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setimmediate@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "setimmediate@npm:1.0.5"
-  checksum: 10/76e3f5d7f4b581b6100ff819761f04a984fa3f3990e72a6554b57188ded53efce2d3d6c0932c10f810b7c59414f85e2ab3c11521877d1dea1ce0b56dc906f485
-  languageName: node
-  linkType: hard
-
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -17255,14 +17264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1":
-  version: 1.2.0
-  resolution: "source-map-js@npm:1.2.0"
-  checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5
-  languageName: node
-  linkType: hard
-
-"source-map-js@npm:^1.2.1":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
   checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
@@ -17279,6 +17281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -17746,6 +17755,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 10/58359185275ef1f39c339ae94e598168aa6bb789f6cf0d52e726c1e7087a94e9c17f0385a28d34483dec1ffc2c75670ec714dc5603d99c3124ec83bc2b0a0f42
+  languageName: node
+  linkType: hard
+
 "sumchecker@npm:^3.0.1":
   version: 3.0.1
   resolution: "sumchecker@npm:3.0.1"
@@ -18583,13 +18599,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^0.7.30":
-  version: 0.7.35
-  resolution: "ua-parser-js@npm:0.7.35"
-  checksum: 10/b6e99dc17599b04f2cd03c4de13593d8b300181402b65c95deeca6a507b96aef519e1d63fb8269af1532182ef41e61f0aca3dbae0f4add44521b5b836ccccc74
-  languageName: node
-  linkType: hard
-
 "ufo@npm:^1.3.0":
   version: 1.3.2
   resolution: "ufo@npm:1.3.2"
@@ -19493,13 +19502,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-fetch@npm:>=0.10.0":
-  version: 3.6.18
-  resolution: "whatwg-fetch@npm:3.6.18"
-  checksum: 10/05442d53fe108021e702f05cddb523d731c36d48058b2b2fe6b89d21f2484c05d469ed4a8906be4c3ea610ad094c340452ff29079317b3ad5ac89a7b65305add
-  languageName: node
-  linkType: hard
-
 "whatwg-mimetype@npm:^2.3.0":
   version: 2.3.0
   resolution: "whatwg-mimetype@npm:2.3.0"
@@ -20001,6 +20003,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.0":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: 10/e088b37b4d4885b70b50c9fa1b7e54bd2e27f5c87205f9deaffd1fb293ab263d9c964feadb9817a7b129a5bf30a06582cb08750f810568ecc14f3cdbabb79cb3
+  languageName: node
+  linkType: hard
+
 "yaml@npm:~2.5.0":
   version: 2.5.0
   resolution: "yaml@npm:2.5.0"