diff --git a/packages/desktop-client/src/components/budget/BudgetPageHeader.js b/packages/desktop-client/src/components/budget/BudgetPageHeader.tsx
similarity index 69%
rename from packages/desktop-client/src/components/budget/BudgetPageHeader.js
rename to packages/desktop-client/src/components/budget/BudgetPageHeader.tsx
index 6f711901168..78899e60876 100644
--- a/packages/desktop-client/src/components/budget/BudgetPageHeader.js
+++ b/packages/desktop-client/src/components/budget/BudgetPageHeader.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { type CSSProperties, memo } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -7,9 +7,23 @@ import View from '../common/View';
 import { MonthPicker } from './MonthPicker';
 import { getScrollbarWidth } from './util';
 
+type BudgetPageHeaderProps = {
+  startMonth: string;
+  onMonthSelect: (month: string) => string;
+  numMonths: number;
+  monthBounds: { start: string; end: string };
+  style?: CSSProperties;
+};
+
 const BudgetPageHeader = memo(
-  ({ startMonth, onMonthSelect, numMonths, monthBounds, style }) => {
-    function getValidMonth(month) {
+  ({
+    startMonth,
+    onMonthSelect,
+    numMonths,
+    monthBounds,
+    style,
+  }: BudgetPageHeaderProps) => {
+    function getValidMonth(month: string) {
       let start = monthBounds.start;
       let end = monthUtils.subMonths(monthBounds.end, numMonths - 1);
 
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.js b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
similarity index 90%
rename from packages/desktop-client/src/components/budget/BudgetTotals.js
rename to packages/desktop-client/src/components/budget/BudgetTotals.tsx
index 3a811461fec..9f6be6fdf40 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.js
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { type ComponentType, memo, useState } from 'react';
 
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 import { theme, styles } from '../../style';
@@ -10,12 +10,22 @@ import { Tooltip } from '../tooltips';
 import RenderMonths from './RenderMonths';
 import { getScrollbarWidth } from './util';
 
+type BudgetTotalsProps = {
+  MonthComponent: ComponentType<{
+    monthIndex: number;
+    editing: boolean;
+  }>;
+  toggleHiddenCategories: () => void;
+  expandAllCategories: () => void;
+  collapseAllCategories: () => void;
+};
+
 const BudgetTotals = memo(function BudgetTotals({
   MonthComponent,
   toggleHiddenCategories,
   expandAllCategories,
   collapseAllCategories,
-}) {
+}: BudgetTotalsProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   return (
     <View
diff --git a/packages/desktop-client/src/components/budget/CategoryGroupsContext.js b/packages/desktop-client/src/components/budget/CategoryGroupsContext.ts
similarity index 100%
rename from packages/desktop-client/src/components/budget/CategoryGroupsContext.js
rename to packages/desktop-client/src/components/budget/CategoryGroupsContext.ts
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.tsx
similarity index 91%
rename from packages/desktop-client/src/components/budget/MonthPicker.js
rename to packages/desktop-client/src/components/budget/MonthPicker.tsx
index 4466edb38df..d48f41e928a 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { type CSSProperties, useState } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -6,13 +6,21 @@ import useResizeObserver from '../../hooks/useResizeObserver';
 import { styles, theme } from '../../style';
 import View from '../common/View';
 
+type MonthPickerProps = {
+  startMonth: string;
+  numDisplayed: number;
+  monthBounds: { start: string; end: string };
+  style: CSSProperties;
+  onSelect: (month: string) => void;
+};
+
 export const MonthPicker = ({
   startMonth,
   numDisplayed,
   monthBounds,
   style,
   onSelect,
-}) => {
+}: MonthPickerProps) => {
   const [hoverId, setHoverId] = useState(null);
   const [targetMonthCount, setTargetMonthCount] = useState(12);
 
@@ -40,11 +48,14 @@ export const MonthPicker = ({
   const lastSelectedIndex = firstSelectedIndex + numDisplayed - 1;
 
   const [size, setSize] = useState('small');
+
   const containerRef = useResizeObserver(rect => {
-    setSize(rect.width <= 400 ? 'small' : 'big');
-    setTargetMonthCount(
-      Math.min(Math.max(Math.floor(rect.width / 50), 12), 24),
-    );
+    return new ResizeObserver(() => {
+      setSize(rect.width <= 400 ? 'small' : 'big');
+      setTargetMonthCount(
+        Math.min(Math.max(Math.floor(rect.width / 50), 12), 24),
+      );
+    });
   });
 
   let yearHeadersShown = [];
diff --git a/packages/desktop-client/src/components/budget/util.js b/packages/desktop-client/src/components/budget/util.ts
similarity index 66%
rename from packages/desktop-client/src/components/budget/util.js
rename to packages/desktop-client/src/components/budget/util.ts
index db5f7e76895..528374925e7 100644
--- a/packages/desktop-client/src/components/budget/util.js
+++ b/packages/desktop-client/src/components/budget/util.ts
@@ -1,6 +1,16 @@
 import { styles, theme } from '../../style';
 
-export function addToBeBudgetedGroup(groups) {
+type BudgetGroupArgs = {
+  categories: object[];
+  hidden: number;
+  id: string;
+  is_income: number;
+  name: string;
+  sort_order: number;
+  tombstone: number;
+};
+
+export function addToBeBudgetedGroup(groups: BudgetGroupArgs[]) {
   return [
     {
       id: 'to-be-budgeted',
@@ -11,20 +21,20 @@ export function addToBeBudgetedGroup(groups) {
   ];
 }
 
-export function separateGroups(categoryGroups) {
+export function separateGroups(categoryGroups: BudgetGroupArgs[]) {
   return [
     categoryGroups.filter(g => !g.is_income),
     categoryGroups.find(g => g.is_income),
   ];
 }
 
-export function makeAmountGrey(value) {
+export function makeAmountGrey(value: number | string) {
   return value === 0 || value === '0' || value === ''
     ? { color: theme.altMenuItemText }
     : null;
 }
 
-export function makeAmountStyle(value) {
+export function makeAmountStyle(value: number) {
   const greyed = makeAmountGrey(value);
   if (greyed) {
     return greyed;
@@ -35,7 +45,7 @@ export function makeAmountStyle(value) {
   }
 }
 
-export function makeAmountFullStyle(value) {
+export function makeAmountFullStyle(value: number) {
   return {
     color:
       value < 0
@@ -46,7 +56,21 @@ export function makeAmountFullStyle(value) {
   };
 }
 
-export function findSortDown(arr, pos, targetId) {
+type CatagroryGroupArrArgs = {
+  cat_group: string;
+  hidden: number;
+  id: string;
+  is_income: number;
+  name: string;
+  sort_order: number;
+  tombstone: number;
+};
+
+export function findSortDown(
+  arr: CatagroryGroupArrArgs[],
+  pos: string,
+  targetId: string,
+) {
   if (pos === 'top') {
     return { targetId };
   } else {
@@ -66,7 +90,11 @@ export function findSortDown(arr, pos, targetId) {
   }
 }
 
-export function findSortUp(arr, pos, targetId) {
+export function findSortUp(
+  arr: CatagroryGroupArrArgs[],
+  pos: string,
+  targetId: string,
+) {
   if (pos === 'bottom') {
     return { targetId };
   } else {
diff --git a/upcoming-release-notes/1777.md b/upcoming-release-notes/1777.md
new file mode 100644
index 00000000000..ef76d6ba239
--- /dev/null
+++ b/upcoming-release-notes/1777.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Jod929]
+---
+
+refactor the following in budget to ts: util, MonthPicker, BudgetPageHeader, BudgetTotals, CategoryGroupsContext.
\ No newline at end of file