diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.js b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
similarity index 78%
rename from packages/desktop-client/src/components/budget/MonthCountSelector.js
rename to packages/desktop-client/src/components/budget/MonthCountSelector.tsx
index d34dbf7a7f7..d5bba0f3a20 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.js
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
@@ -6,7 +6,12 @@ import View from '../common/View';
 
 import { useBudgetMonthCount } from './BudgetMonthCountContext';
 
-function Calendar({ color, onClick }) {
+type CalendarProps = {
+  color: string;
+  onClick: () => void;
+};
+
+function Calendar({ color, onClick }: CalendarProps) {
   return (
     <CalendarIcon
       style={{ width: 13, height: 13, color, marginRight: 5 }}
@@ -15,7 +20,15 @@ function Calendar({ color, onClick }) {
   );
 }
 
-export function MonthCountSelector({ maxMonths, onChange }) {
+type MonthCountSelectorProps = {
+  maxMonths: number;
+  onChange: (value: number) => Promise<void>;
+};
+
+export function MonthCountSelector({
+  maxMonths,
+  onChange,
+}: MonthCountSelectorProps) {
   let { displayMax } = useBudgetMonthCount();
 
   // It doesn't make sense to show anything if we can only fit one
diff --git a/upcoming-release-notes/1560.md b/upcoming-release-notes/1560.md
new file mode 100644
index 00000000000..4e4b62baf88
--- /dev/null
+++ b/upcoming-release-notes/1560.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Jod929]
+---
+
+Refactor MonthCountSelector to tsx.
\ No newline at end of file