diff --git a/src/app/(main)/console/[[...websiteId]]/page.tsx b/src/app/(main)/console/[[...websiteId]]/page.tsx
index 93eafee4..7c3433c5 100644
--- a/src/app/(main)/console/[[...websiteId]]/page.tsx
+++ b/src/app/(main)/console/[[...websiteId]]/page.tsx
@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import ConsolePage from '../ConsolePage';
+import { ConsolePage } from '../ConsolePage';
 
 async function getEnabled() {
   return !!process.env.ENABLE_TEST_CONSOLE;
diff --git a/src/app/(main)/reports/[reportId]/FieldParameters.tsx b/src/app/(main)/reports/[reportId]/FieldParameters.tsx
index e99bf57d..ff2e3db7 100644
--- a/src/app/(main)/reports/[reportId]/FieldParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldParameters.tsx
@@ -2,9 +2,9 @@ import { useFields, useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { useContext } from 'react';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
-import FieldSelectForm from '../[reportId]/FieldSelectForm';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
+import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
+import { ParameterList } from '../[reportId]/ParameterList';
+import { PopupForm } from '../[reportId]/PopupForm';
 import { ReportContext } from './Report';
 
 export function FieldParameters() {
diff --git a/src/app/(main)/reports/[reportId]/FilterParameters.tsx b/src/app/(main)/reports/[reportId]/FilterParameters.tsx
index 9fbfc283..0011e527 100644
--- a/src/app/(main)/reports/[reportId]/FilterParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/FilterParameters.tsx
@@ -2,11 +2,11 @@ import { useContext } from 'react';
 import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
-import FilterSelectForm from '../[reportId]/FilterSelectForm';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
+import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
+import { ParameterList } from '../[reportId]/ParameterList';
+import { PopupForm } from '../[reportId]/PopupForm';
 import { ReportContext } from './Report';
-import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
+import { FieldFilterEditForm } from '../[reportId]/FieldFilterEditForm';
 import { isSearchOperator } from '@/lib/params';
 import styles from './FilterParameters.module.css';
 
diff --git a/src/app/(main)/reports/[reportId]/ReportPage.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
index c84ca95d..82161eaf 100644
--- a/src/app/(main)/reports/[reportId]/ReportPage.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -1,13 +1,13 @@
 'use client';
 import { useReport } from '@/components/hooks';
-import EventDataReport from '../event-data/EventDataReport';
-import FunnelReport from '../funnel/FunnelReport';
-import GoalReport from '../goals/GoalsReport';
-import InsightsReport from '../insights/InsightsReport';
-import JourneyReport from '../journey/JourneyReport';
-import RetentionReport from '../retention/RetentionReport';
-import UTMReport from '../utm/UTMReport';
-import RevenueReport from '../revenue/RevenueReport';
+import { EventDataReport } from '../event-data/EventDataReport';
+import { FunnelReport } from '../funnel/FunnelReport';
+import { GoalsReport } from '../goals/GoalsReport';
+import { InsightsReport } from '../insights/InsightsReport';
+import { JourneyReport } from '../journey/JourneyReport';
+import { RetentionReport } from '../retention/RetentionReport';
+import { UTMReport } from '../utm/UTMReport';
+import { RevenueReport } from '../revenue/RevenueReport';
 
 const reports = {
   funnel: FunnelReport,
@@ -15,7 +15,7 @@ const reports = {
   insights: InsightsReport,
   retention: RetentionReport,
   utm: UTMReport,
-  goals: GoalReport,
+  goals: GoalsReport,
   journey: JourneyReport,
   revenue: RevenueReport,
 };
diff --git a/src/app/(main)/reports/event-data/EventDataParameters.tsx b/src/app/(main)/reports/event-data/EventDataParameters.tsx
index 43553b08..751b3494 100644
--- a/src/app/(main)/reports/event-data/EventDataParameters.tsx
+++ b/src/app/(main)/reports/event-data/EventDataParameters.tsx
@@ -5,9 +5,9 @@ import { Icons } from '@/components/icons';
 import { useApi, useMessages } from '@/components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
 import { ReportContext } from '../[reportId]/Report';
-import FieldAddForm from '../[reportId]/FieldAddForm';
-import ParameterList from '../[reportId]/ParameterList';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { FieldAddForm } from '../[reportId]/FieldAddForm';
+import { ParameterList } from '../[reportId]/ParameterList';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 import styles from './EventDataParameters.module.css';
 
 function useFields(websiteId, startDate, endDate) {
diff --git a/src/app/(main)/reports/event-data/EventDataReport.tsx b/src/app/(main)/reports/event-data/EventDataReport.tsx
index 7e9c34df..7d94ddcf 100644
--- a/src/app/(main)/reports/event-data/EventDataReport.tsx
+++ b/src/app/(main)/reports/event-data/EventDataReport.tsx
@@ -1,7 +1,7 @@
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import { EventDataParameters } from './EventDataParameters';
 import { EventDataTable } from './EventDataTable';
 import Nodes from '@/assets/nodes.svg';
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx
index cc1a5f9e..9089f7de 100644
--- a/src/app/(main)/reports/funnel/FunnelParameters.tsx
+++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx
@@ -15,9 +15,9 @@ import {
 import { Icons } from '@/components/icons';
 import { FunnelStepAddForm } from './FunnelStepAddForm';
 import { ReportContext } from '../[reportId]/Report';
-import BaseParameters from '../[reportId]/BaseParameters';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
+import { BaseParameters } from '../[reportId]/BaseParameters';
+import { ParameterList } from '../[reportId]/ParameterList';
+import { PopupForm } from '../[reportId]/PopupForm';
 import styles from './FunnelParameters.module.css';
 
 export function FunnelParameters() {
diff --git a/src/app/(main)/reports/funnel/FunnelReport.tsx b/src/app/(main)/reports/funnel/FunnelReport.tsx
index ecdc11e7..5e42c58a 100644
--- a/src/app/(main)/reports/funnel/FunnelReport.tsx
+++ b/src/app/(main)/reports/funnel/FunnelReport.tsx
@@ -1,9 +1,9 @@
 import { FunnelChart } from './FunnelChart';
 import { FunnelParameters } from './FunnelParameters';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import Funnel from '@/assets/funnel.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 
diff --git a/src/app/(main)/reports/goals/GoalsParameters.tsx b/src/app/(main)/reports/goals/GoalsParameters.tsx
index 8edf5e97..63407d90 100644
--- a/src/app/(main)/reports/goals/GoalsParameters.tsx
+++ b/src/app/(main)/reports/goals/GoalsParameters.tsx
@@ -13,9 +13,9 @@ import {
   PopupTrigger,
   SubmitButton,
 } from 'react-basics';
-import BaseParameters from '../[reportId]/BaseParameters';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
+import { BaseParameters } from '../[reportId]/BaseParameters';
+import { ParameterList } from '../[reportId]/ParameterList';
+import { PopupForm } from '../[reportId]/PopupForm';
 import { ReportContext } from '../[reportId]/Report';
 import { GoalsAddForm } from './GoalsAddForm';
 import styles from './GoalsParameters.module.css';
diff --git a/src/app/(main)/reports/goals/GoalsReport.tsx b/src/app/(main)/reports/goals/GoalsReport.tsx
index 1df47174..fc1a7888 100644
--- a/src/app/(main)/reports/goals/GoalsReport.tsx
+++ b/src/app/(main)/reports/goals/GoalsReport.tsx
@@ -1,9 +1,9 @@
 import { GoalsChart } from './GoalsChart';
 import { GoalsParameters } from './GoalsParameters';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import Target from '@/assets/target.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 
diff --git a/src/app/(main)/reports/insights/InsightsParameters.tsx b/src/app/(main)/reports/insights/InsightsParameters.tsx
index 809dc435..8aa6ac57 100644
--- a/src/app/(main)/reports/insights/InsightsParameters.tsx
+++ b/src/app/(main)/reports/insights/InsightsParameters.tsx
@@ -1,10 +1,10 @@
 import { useMessages } from '@/components/hooks';
 import { useContext } from 'react';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ReportContext } from '../[reportId]/Report';
-import FieldParameters from '../[reportId]/FieldParameters';
-import FilterParameters from '../[reportId]/FilterParameters';
+import { FieldParameters } from '../[reportId]/FieldParameters';
+import { FilterParameters } from '../[reportId]/FilterParameters';
 
 export function InsightsParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
diff --git a/src/app/(main)/reports/insights/InsightsReport.tsx b/src/app/(main)/reports/insights/InsightsReport.tsx
index 749ab528..a13d8b84 100644
--- a/src/app/(main)/reports/insights/InsightsReport.tsx
+++ b/src/app/(main)/reports/insights/InsightsReport.tsx
@@ -1,7 +1,7 @@
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import { InsightsParameters } from './InsightsParameters';
 import { InsightsTable } from './InsightsTable';
 import Lightbulb from '@/assets/lightbulb.svg';
diff --git a/src/app/(main)/reports/journey/JourneyParameters.tsx b/src/app/(main)/reports/journey/JourneyParameters.tsx
index a89c9857..3118265c 100644
--- a/src/app/(main)/reports/journey/JourneyParameters.tsx
+++ b/src/app/(main)/reports/journey/JourneyParameters.tsx
@@ -11,7 +11,7 @@ import {
   TextField,
 } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 
 export function JourneyParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
diff --git a/src/app/(main)/reports/journey/JourneyReport.tsx b/src/app/(main)/reports/journey/JourneyReport.tsx
index e59746b5..2106f762 100644
--- a/src/app/(main)/reports/journey/JourneyReport.tsx
+++ b/src/app/(main)/reports/journey/JourneyReport.tsx
@@ -1,8 +1,8 @@
 'use client';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import { JourneyParameters } from './JourneyParameters';
 import { JourneyView } from './JourneyView';
 import Path from '@/assets/path.svg';
diff --git a/src/app/(main)/reports/retention/RetentionParameters.tsx b/src/app/(main)/reports/retention/RetentionParameters.tsx
index cc421fb1..42ae179b 100644
--- a/src/app/(main)/reports/retention/RetentionParameters.tsx
+++ b/src/app/(main)/reports/retention/RetentionParameters.tsx
@@ -3,7 +3,7 @@ import { useMessages } from '@/components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
 import { MonthSelect } from '@/components/input/MonthSelect';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 import { parseDateRange } from '@/lib/date';
 
 export function RetentionParameters() {
diff --git a/src/app/(main)/reports/retention/RetentionReport.tsx b/src/app/(main)/reports/retention/RetentionReport.tsx
index 06205570..dda56710 100644
--- a/src/app/(main)/reports/retention/RetentionReport.tsx
+++ b/src/app/(main)/reports/retention/RetentionReport.tsx
@@ -1,9 +1,9 @@
 import { RetentionTable } from './RetentionTable';
 import { RetentionParameters } from './RetentionParameters';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import Magnet from '@/assets/magnet.svg';
 import { REPORT_TYPES } from '@/lib/constants';
 import { parseDateRange } from '@/lib/date';
diff --git a/src/app/(main)/reports/revenue/RevenueParameters.tsx b/src/app/(main)/reports/revenue/RevenueParameters.tsx
index 6919bea3..8451644e 100644
--- a/src/app/(main)/reports/revenue/RevenueParameters.tsx
+++ b/src/app/(main)/reports/revenue/RevenueParameters.tsx
@@ -2,7 +2,7 @@ import { useMessages } from '@/components/hooks';
 import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
 import { useContext } from 'react';
 import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ReportContext } from '../[reportId]/Report';
 
 export function RevenueParameters() {
diff --git a/src/app/(main)/reports/revenue/RevenueReport.tsx b/src/app/(main)/reports/revenue/RevenueReport.tsx
index 2cdd6bb8..9f0ccbb4 100644
--- a/src/app/(main)/reports/revenue/RevenueReport.tsx
+++ b/src/app/(main)/reports/revenue/RevenueReport.tsx
@@ -1,9 +1,9 @@
 import Money from '@/assets/money.svg';
 import { REPORT_TYPES } from '@/lib/constants';
-import Report from '../[reportId]/Report';
-import ReportBody from '../[reportId]/ReportBody';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
+import { Report } from '../[reportId]/Report';
+import { ReportBody } from '../[reportId]/ReportBody';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
 import { RevenueParameters } from './RevenueParameters';
 import { RevenueView } from './RevenueView';
 
diff --git a/src/app/(main)/reports/utm/UTMParameters.tsx b/src/app/(main)/reports/utm/UTMParameters.tsx
index 2447668e..2a43fc40 100644
--- a/src/app/(main)/reports/utm/UTMParameters.tsx
+++ b/src/app/(main)/reports/utm/UTMParameters.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { useMessages } from '@/components/hooks';
 import { Form, FormButtons, SubmitButton } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
-import BaseParameters from '../[reportId]/BaseParameters';
+import { BaseParameters } from '../[reportId]/BaseParameters';
 
 export function UTMParameters() {
   const { report, runReport, isRunning } = useContext(ReportContext);
diff --git a/src/app/(main)/reports/utm/UTMReport.tsx b/src/app/(main)/reports/utm/UTMReport.tsx
index 8898120e..341747f0 100644
--- a/src/app/(main)/reports/utm/UTMReport.tsx
+++ b/src/app/(main)/reports/utm/UTMReport.tsx
@@ -1,8 +1,8 @@
 'use client';
-import Report from '../[reportId]/Report';
-import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[reportId]/ReportBody';
+import { Report } from '../[reportId]/Report';
+import { ReportHeader } from '../[reportId]/ReportHeader';
+import { ReportMenu } from '../[reportId]/ReportMenu';
+import { ReportBody } from '../[reportId]/ReportBody';
 import { UTMParameters } from './UTMParameters';
 import { UTMView } from './UTMView';
 import Tag from '@/assets/tag.svg';
diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx
index f6f3fd44..0830b8e4 100644
--- a/src/app/share/[...shareId]/SharePage.tsx
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -1,5 +1,5 @@
 'use client';
-import WebsiteDetailsPage from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
+import { WebsiteDetailsPage } from '../../(main)/websites/[websiteId]/WebsiteDetailsPage';
 import { useShareToken } from '@/components/hooks';
 import { Page } from '@/components/layout/Page';
 import { Header } from './Header';
diff --git a/src/components/common/AnimatedDiv.tsx b/src/components/common/AnimatedDiv.tsx
new file mode 100644
index 00000000..04a28c5b
--- /dev/null
+++ b/src/components/common/AnimatedDiv.tsx
@@ -0,0 +1,3 @@
+import { animated, AnimatedComponent } from '@react-spring/web';
+
+export const AnimatedDiv: AnimatedComponent<any> = animated.div;
diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx
index c4e8a371..fc65f7c2 100644
--- a/src/components/input/LanguageButton.tsx
+++ b/src/components/input/LanguageButton.tsx
@@ -26,7 +26,7 @@ export function LanguageButton() {
                 <Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
                   <Text
                     weight={value === locale ? 'bold' : 'normal'}
-                    color={value === locale ? 'primary' : 'muted'}
+                    color={value === locale ? undefined : 'muted'}
                   >
                     {label}
                   </Text>
diff --git a/src/components/layout/Page.module.css b/src/components/layout/Page.module.css
index 3b9a4581..80789360 100644
--- a/src/components/layout/Page.module.css
+++ b/src/components/layout/Page.module.css
@@ -7,6 +7,4 @@
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 20px;
-  min-height: calc(100vh - 60px);
-  min-height: calc(100dvh - 60px);
 }
diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 64bd4915..3d674ee8 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -1,6 +1,7 @@
 import { FixedSizeList } from 'react-window';
-import { useSpring, animated, config } from '@react-spring/web';
+import { useSpring, config } from '@react-spring/web';
 import classNames from 'classnames';
+import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { Empty } from '@/components/common/Empty';
 import { formatLongNumber } from '@/lib/format';
 import { useMessages } from '@/components/hooks';
@@ -94,14 +95,14 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
       <div className={styles.label}>{label}</div>
       <div className={styles.value}>
         {change}
-        <animated.div className={styles.value} title={props?.y as any}>
+        <AnimatedDiv className={styles.value} title={props?.y as any}>
           {props.y?.to(formatLongNumber)}
-        </animated.div>
+        </AnimatedDiv>
       </div>
       {showPercentage && (
         <div className={styles.percent}>
-          <animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
-          <animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
+          <AnimatedDiv className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
+          <AnimatedDiv>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</AnimatedDiv>
         </div>
       )}
     </div>
diff --git a/src/components/metrics/MetricCard.tsx b/src/components/metrics/MetricCard.tsx
index 2e322db4..5711e35e 100644
--- a/src/components/metrics/MetricCard.tsx
+++ b/src/components/metrics/MetricCard.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { useSpring, animated } from '@react-spring/web';
+import { useSpring } from '@react-spring/web';
 import { formatNumber } from '@/lib/format';
+import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import styles from './MetricCard.module.css';
 
@@ -37,9 +38,9 @@ export const MetricCard = ({
   return (
     <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
       {showLabel && <div className={styles.label}>{label}</div>}
-      <animated.div className={styles.value} title={value?.toString()}>
+      <AnimatedDiv className={styles.value} title={value?.toString()}>
         {props?.x?.to(x => formatValue(x))}
-      </animated.div>
+      </AnimatedDiv>
       {showChange && (
         <ChangeLabel
           className={styles.change}
@@ -47,13 +48,13 @@ export const MetricCard = ({
           title={formatValue(change)}
           reverseColors={reverseColors}
         >
-          <animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
+          <AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
         </ChangeLabel>
       )}
       {showPrevious && (
-        <animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
+        <AnimatedDiv className={classNames(styles.value, styles.prev)} title={diff.toString()}>
           {prevProps?.x?.to(x => formatValue(x))}
-        </animated.div>
+        </AnimatedDiv>
       )}
     </div>
   );