diff --git a/src/routes/details/awsDetails/detailsHeader.tsx b/src/routes/details/awsDetails/detailsHeader.tsx
index 39cd67a75..bf2a58001 100644
--- a/src/routes/details/awsDetails/detailsHeader.tsx
+++ b/src/routes/details/awsDetails/detailsHeader.tsx
@@ -21,7 +21,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedAwsReportItemsParams } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -83,11 +83,24 @@ const tagPathsType = TagPathsType.aws;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnCostTypeSelect = (value: string) => {
     const { onCostTypeSelect } = this.props;
 
diff --git a/src/routes/details/azureDetails/detailsHeader.tsx b/src/routes/details/azureDetails/detailsHeader.tsx
index 18dc975b3..915f0ae28 100644
--- a/src/routes/details/azureDetails/detailsHeader.tsx
+++ b/src/routes/details/azureDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedAzureReportItemsParams } from 'routes/utils/computedReport/getComputedAzureReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -76,11 +76,24 @@ const tagPathsType = TagPathsType.azure;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/details/gcpDetails/detailsHeader.tsx b/src/routes/details/gcpDetails/detailsHeader.tsx
index 9d3b93b92..100cc930c 100644
--- a/src/routes/details/gcpDetails/detailsHeader.tsx
+++ b/src/routes/details/gcpDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedGcpReportItemsParams } from 'routes/utils/computedReport/getComputedGcpReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -77,11 +77,24 @@ const tagPathsType = TagPathsType.gcp;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/details/ibmDetails/detailsHeader.tsx b/src/routes/details/ibmDetails/detailsHeader.tsx
index e06c0908a..dde58f7f9 100644
--- a/src/routes/details/ibmDetails/detailsHeader.tsx
+++ b/src/routes/details/ibmDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedIbmReportItemsParams } from 'routes/utils/computedReport/getComputedIbmReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedIbmReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -77,11 +77,24 @@ const tagPathsType = TagPathsType.ibm;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/details/ociDetails/detailsHeader.tsx b/src/routes/details/ociDetails/detailsHeader.tsx
index ab03edd03..9e2af2c2c 100644
--- a/src/routes/details/ociDetails/detailsHeader.tsx
+++ b/src/routes/details/ociDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedOciReportItemsParams } from 'routes/utils/computedReport/getComputedOciReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOciReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -76,11 +76,24 @@ const tagPathsType = TagPathsType.oci;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/details/ocpDetails/detailsHeader.tsx b/src/routes/details/ocpDetails/detailsHeader.tsx
index d63bf8107..608c1b9a6 100644
--- a/src/routes/details/ocpDetails/detailsHeader.tsx
+++ b/src/routes/details/ocpDetails/detailsHeader.tsx
@@ -21,7 +21,7 @@ import { EmptyValueState } from 'routes/components/state/emptyValueState';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedOcpReportItemsParams } from 'routes/utils/computedReport/getComputedOcpReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOcpReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -86,23 +86,19 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, DetailsHeade
   public state: DetailsHeaderState = { ...this.defaultState };
 
   public componentDidMount() {
-    this.setState({ currentDateRangeType: this.getCurrentDateRangeType() });
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
   }
 
   public componentDidUpdate(prevProps: DetailsHeaderProps) {
     const { timeScopeValue } = this.props;
 
     if (prevProps.timeScopeValue !== timeScopeValue) {
-      this.setState({ currentDateRangeType: this.getCurrentDateRangeType() });
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
     }
   }
 
-  private getCurrentDateRangeType = () => {
-    const { timeScopeValue } = this.props;
-
-    return timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate;
-  };
-
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/details/rhelDetails/detailsHeader.tsx b/src/routes/details/rhelDetails/detailsHeader.tsx
index 19c71edae..367ccb9b8 100644
--- a/src/routes/details/rhelDetails/detailsHeader.tsx
+++ b/src/routes/details/rhelDetails/detailsHeader.tsx
@@ -19,7 +19,7 @@ import { EmptyValueState } from 'routes/components/state/emptyValueState';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedRhelReportItemsParams } from 'routes/utils/computedReport/getComputedRhelReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedRhelReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -79,11 +79,24 @@ const tagPathsType = TagPathsType.rhel;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 
diff --git a/src/routes/utils/dateRange.ts b/src/routes/utils/dateRange.ts
index 34a331320..105571b31 100644
--- a/src/routes/utils/dateRange.ts
+++ b/src/routes/utils/dateRange.ts
@@ -75,6 +75,10 @@ export const getDateRange = (dateRangeType: DateRangeType, isFormatted = true) =
   return dateRange;
 };
 
+export const getCurrentDateRangeType = (timeScopeValue: number) => {
+  return timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate;
+};
+
 export const getDateRangeTypeDefault = (queryFromRoute: Query, defaultToPreviousMonth: boolean): DateRangeType => {
   if (queryFromRoute.dateRangeType) {
     return queryFromRoute.dateRangeType;