diff --git a/src/frontend/src/components/calendar/Calendar.tsx b/src/frontend/src/components/calendar/Calendar.tsx
index de1068398a..7917fd645b 100644
--- a/src/frontend/src/components/calendar/Calendar.tsx
+++ b/src/frontend/src/components/calendar/Calendar.tsx
@@ -25,7 +25,7 @@ import {
   IconDownload,
   IconFilter
 } from '@tabler/icons-react';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import type { CalendarState } from '../../hooks/UseCalendar';
 import { useLocalState } from '../../states/LocalState';
@@ -67,6 +67,11 @@ export default function Calendar({
     [state.selectMonth]
   );
 
+  useEffect(() => {
+    // Select initial month on first calendar render
+    state.ref?.current?.getApi()?.gotoDate(new Date());
+  }, []);
+
   // Callback when the calendar date range is adjusted
   const datesSet = useCallback(
     (dateInfo: DatesSetArg) => {
diff --git a/src/frontend/src/hooks/UseCalendar.tsx b/src/frontend/src/hooks/UseCalendar.tsx
index f7867eb0e3..9d86ccdd8c 100644
--- a/src/frontend/src/hooks/UseCalendar.tsx
+++ b/src/frontend/src/hooks/UseCalendar.tsx
@@ -102,7 +102,7 @@ export default function useCalendar({
 
   const query = useQuery({
     enabled: !!startDate && !!endDate,
-    queryKey: ['calendar', name, endpoint, queryFilters],
+    queryKey: ['calendar', name, endpoint, queryFilters, startDate, endDate],
     throwOnError: (error: any) => {
       showApiErrorMessage({
         error: error,