diff --git a/apps/www/components/Enterprise/Performance.tsx b/apps/www/components/Enterprise/Performance.tsx
index 73a32399be834..abffa0336dc80 100644
--- a/apps/www/components/Enterprise/Performance.tsx
+++ b/apps/www/components/Enterprise/Performance.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
-import { cn, Badge } from 'ui'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
+import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 interface Props {
   id: string
@@ -30,71 +30,11 @@ const Performance: FC<Props> = (props) => {
           ))}
         </div>
       </div>
-      <div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
-        <GraphLabel className="" />
-        <svg
-          width="100%"
-          height="100%"
-          viewBox="0 0 1403 599"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="absolute inset-0 w-full h-full"
-        >
-          <path
-            d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
-            fill="url(#paint0_linear_585_9420)"
-          />
-          <path
-            d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
-            stroke="hsl(var(--foreground-lighter))"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_585_9420"
-              x1="701.374"
-              y1="170.846"
-              x2="701.374"
-              y2="561.839"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="hsl(var(--border-overlay))" />
-              <stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
-            </linearGradient>
-          </defs>
-        </svg>
-        <div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
-      </div>
+      <UsersGrowthChart />
     </SectionContainer>
   )
 }
 
-const GraphLabel: FC<{ className?: string }> = ({ className }) => (
-  <div
-    className={cn(
-      'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
-      'flex flex-col items-center gap-1',
-      className
-    )}
-  >
-    <div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
-      <span className="label !text-[10px] !leading-3">Users</span>
-      <div className="flex items-center gap-2">
-        <span className="text-foreground-light text-2xl">930,550</span>
-        <Badge variant="success" size="small" className="h-[24px] px-2">
-          +13.4%
-        </Badge>
-      </div>
-    </div>
-    <div
-      className={cn(
-        'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
-        'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
-        'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
-      )}
-    />
-  </div>
-)
-
 interface HighlightItemProps {
   highlight: Highlight
 }
diff --git a/apps/www/components/Solutions/ResultsSection.tsx b/apps/www/components/Solutions/ResultsSection.tsx
index 16b9c6d7cdcde..1681cf7506237 100644
--- a/apps/www/components/Solutions/ResultsSection.tsx
+++ b/apps/www/components/Solutions/ResultsSection.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from 'react'
-import { cn, Badge, AnimatedCounter } from 'ui'
+
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { motion } from 'framer-motion'
-import { useMedia } from 'react-use'
+import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 export interface ResultsSectionProps {
   id: string
@@ -31,127 +30,11 @@ const ResultsSection: FC<ResultsSectionProps> = (props) => {
           ))}
         </div>
       </div>
-      <div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
-        <GraphLabel className="" />
-        <GraphPath className="absolute inset-0 w-full h-full" />
-
-        <svg
-          width="100%"
-          height="100%"
-          viewBox="0 0 1403 599"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="absolute inset-0 w-full h-full"
-        >
-          <path
-            d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
-            fill="url(#paint0_linear_585_9420)"
-          />
-          <path
-            d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
-            stroke="hsl(var(--foreground-lighter))"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_585_9420"
-              x1="701.374"
-              y1="170.846"
-              x2="701.374"
-              y2="561.839"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="hsl(var(--border-overlay))" />
-              <stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
-            </linearGradient>
-          </defs>
-        </svg>
-        <div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
-      </div>
+      <UsersGrowthChart />
     </SectionContainer>
   )
 }
 
-const GraphLabel: FC<{ className?: string }> = ({ className }) => {
-  const isMobileOrTablet = useMedia('(max-width: 1280px)')
-
-  const motionProps = !isMobileOrTablet
-    ? {
-        initial: { offsetDistance: '0%', rotate: '0deg', opacity: 0 },
-        whileInView: { offsetDistance: '80%', rotate: '30deg', opacity: 1 },
-        viewport: { once: true },
-        transition: { type: 'spring', duration: 2.68, bounce: 0, delay: 0.25 },
-        style: {
-          offsetPath: 'path("M0 493.132C285.852 493.132 896.213 411.11 1401.8 1")',
-        },
-      }
-    : undefined
-
-  const Component = isMobileOrTablet ? 'div' : motion.div
-
-  return (
-    <Component
-      className={cn(
-        'absolute z-10 -top-10 2xl:top-[20%] left-[38%] md:top-[10%] md:left-[50%] lg:top-0 xl:left-0 w-fit h-[200px] lg:h-[400px]',
-        'flex flex-col items-center gap-1',
-        className
-      )}
-      {...motionProps}
-    >
-      <div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
-        <span className="label !text-[10px] !leading-3">Users</span>
-        <div className="flex items-center gap-2">
-          <span className="text-foreground-light text-2xl">
-            {isMobileOrTablet ? (
-              '5,230,550'
-            ) : (
-              <AnimatedCounter value={5230550} duration={2.68} delay={0.5} />
-            )}
-          </span>
-          <Badge variant="success" size="small" className="h-[24px] px-2">
-            {isMobileOrTablet ? (
-              '+28.3%'
-            ) : (
-              <AnimatedCounter
-                value={28.3}
-                duration={2.68}
-                delay={0.5}
-                isPercentage={true}
-                prefix="+"
-              />
-            )}
-          </Badge>
-        </div>
-      </div>
-      <div
-        className={cn(
-          'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
-          'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
-          'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
-        )}
-      />
-    </Component>
-  )
-}
-
-const GraphPath: FC<{ className?: string }> = ({ className }) => (
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 1403 494"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <motion.path
-      transition={{ duration: 0.5, delay: 0.5 }}
-      initial={{ pathLength: 0.001 }}
-      whileInView={{ pathLength: 1 }}
-      viewport={{ once: true }}
-      d="M0 493.132C285.852 493.132 896.213 411.11 1401.8 1"
-    />
-  </svg>
-)
-
 interface HighlightItemProps {
   highlight: Highlight
 }
diff --git a/apps/www/components/Supasquad/PerfectTiming.tsx b/apps/www/components/Supasquad/PerfectTiming.tsx
index 644f2af6e20ce..5f2ebba74c0c7 100644
--- a/apps/www/components/Supasquad/PerfectTiming.tsx
+++ b/apps/www/components/Supasquad/PerfectTiming.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
-import { cn, Badge } from 'ui'
+
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { companyStats } from '~/data/company-stats'
+import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 export interface PerfectTimingProps {
   id: string
@@ -30,71 +30,11 @@ const PerfectTiming = (props: PerfectTimingProps) => {
           ))}
         </div>
       </div>
-      <div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
-        <GraphLabel className="" />
-        <svg
-          width="100%"
-          height="100%"
-          viewBox="0 0 1403 599"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="absolute inset-0 w-full h-full"
-        >
-          <path
-            d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
-            fill="url(#paint0_linear_585_9420)"
-          />
-          <path
-            d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
-            stroke="hsl(var(--foreground-lighter))"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_585_9420"
-              x1="701.374"
-              y1="170.846"
-              x2="701.374"
-              y2="561.839"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="hsl(var(--border-overlay))" />
-              <stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
-            </linearGradient>
-          </defs>
-        </svg>
-        <div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
-      </div>
+      <UsersGrowthChart />
     </SectionContainer>
   )
 }
 
-const GraphLabel: FC<{ className?: string }> = ({ className }) => (
-  <div
-    className={cn(
-      'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
-      'flex flex-col items-center gap-1',
-      className
-    )}
-  >
-    <div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
-      <span className="label !text-[10px] !leading-3">Developers</span>
-      <div className="flex items-center gap-2">
-        <span className="text-foreground-light text-2xl">{companyStats.developersRegistered}</span>
-        <Badge variant="success" size="small" className="h-[24px] px-2">
-          {companyStats.developersRegisteredChange}
-        </Badge>
-      </div>
-    </div>
-    <div
-      className={cn(
-        'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
-        'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
-        'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
-      )}
-    />
-  </div>
-)
-
 interface HighlightItemProps {
   highlight: Highlight
 }
diff --git a/apps/www/components/UsersGrowthChart.tsx b/apps/www/components/UsersGrowthChart.tsx
new file mode 100644
index 0000000000000..a6c10a72b535b
--- /dev/null
+++ b/apps/www/components/UsersGrowthChart.tsx
@@ -0,0 +1,150 @@
+import React, { FC, useMemo, useEffect, useState } from 'react'
+import { cn, Badge, AnimatedCounter } from 'ui'
+import { motion } from 'framer-motion'
+import { useMedia } from 'react-use'
+
+import { companyStats } from '~/data/company-stats'
+
+const UsersGrowthChart: FC = () => {
+  return (
+    <div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
+      <GraphLabel className="" />
+      <GraphPath className="absolute inset-0 w-full h-full" />
+
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1403 599"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute inset-0 w-full h-full"
+      >
+        <path
+          d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
+          fill="url(#paint0_linear_585_9420)"
+        />
+        <path
+          d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
+          stroke="hsl(var(--foreground-lighter))"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_585_9420"
+            x1="701.374"
+            y1="170.846"
+            x2="701.374"
+            y2="561.839"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="hsl(var(--border-overlay))" />
+            <stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
+    </div>
+  )
+}
+
+const GraphLabel: FC<{ className?: string }> = ({ className }) => {
+  const isMobileOrTablet = useMedia('(max-width: 1280px)')
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  // Use client-side flag to prevent hydration mismatch
+  const shouldShowAnimated = useMemo(() => {
+    // Always show animated version until client-side hydration is complete
+    if (!isClient) return true
+    return !isMobileOrTablet
+  }, [isClient, isMobileOrTablet])
+
+  // Use the same server-safe logic for motion props
+  const motionProps = shouldShowAnimated
+    ? {
+        initial: { offsetDistance: '0%', rotate: '0deg', opacity: 0 },
+        whileInView: { offsetDistance: '62%', rotate: '23.4deg', opacity: 1 },
+        viewport: { once: true },
+        transition: { type: 'spring', duration: 2.68, bounce: 0, delay: 0.25 },
+        style: {
+          offsetPath: 'path("M0 493.132C285.852 493.132 896.213 411.11 1401.8 1")',
+        },
+      }
+    : undefined
+
+  // Use the same server-safe logic for component selection
+  const Component = shouldShowAnimated ? motion.div : 'div'
+
+  return (
+    <Component
+      className={cn(
+        'absolute z-10 -top-10 2xl:top-[20%] left-[38%] md:top-[10%] md:left-[50%] lg:top-0 xl:left-0 w-fit h-[200px] lg:h-[400px]',
+        'flex flex-col items-center gap-1',
+        className
+      )}
+      {...motionProps}
+    >
+      <div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
+        <span className="label !text-[10px] !leading-3">
+          {companyStats.developersRegistered.label}
+        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-light text-2xl">
+            {shouldShowAnimated ? (
+              <AnimatedCounter
+                value={companyStats.developersRegistered.number}
+                duration={2.68}
+                delay={0.5}
+              />
+            ) : (
+              companyStats.developersRegistered.text
+            )}
+          </span>
+          <Badge variant="success" size="small" className="h-[24px] px-2">
+            {shouldShowAnimated ? (
+              <AnimatedCounter
+                value={companyStats.developersRegisteredChange.number}
+                duration={2.68}
+                delay={0.5}
+                isPercentage={true}
+                prefix="+"
+              />
+            ) : (
+              companyStats.developersRegisteredChange.text
+            )}
+          </Badge>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
+          'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
+          'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
+        )}
+      />
+    </Component>
+  )
+}
+
+const GraphPath: FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 1403 494"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <motion.path
+      transition={{ duration: 0.5, delay: 0.5 }}
+      initial={{ pathLength: 0.001 }}
+      whileInView={{ pathLength: 1 }}
+      viewport={{ once: true }}
+      d="M0 493.132C285.852 493.132 896.213 411.11 1401.8 1"
+    />
+  </svg>
+)
+
+export default UsersGrowthChart
diff --git a/apps/www/data/company-stats.ts b/apps/www/data/company-stats.ts
index 9c7337873463f..d078c071ac85b 100644
--- a/apps/www/data/company-stats.ts
+++ b/apps/www/data/company-stats.ts
@@ -1,6 +1,25 @@
+// For each stat we provide text and number
+// Text is used for labels and static components
+// Number is used for animated components (eg. AnimatedCounter)
 export const companyStats = {
-  databasesManaged: '6,500,000+',
-  databasesLaunchedDaily: '35,000+',
-  developersRegistered: '2,500,000+',
-  developersRegisteredChange: '+13.4%',
+  databasesManaged: {
+    number: 6_500_000,
+    text: '6,500,000+',
+    label: 'Databases managed',
+  },
+  databasesLaunchedDaily: {
+    number: 35_000,
+    text: '35,000+',
+    label: 'Databases launched daily',
+  },
+  developersRegistered: {
+    number: 2_500_000,
+    text: '2,500,000+',
+    label: 'Users',
+  },
+  developersRegisteredChange: {
+    number: 13.4,
+    text: '+13.4%',
+    label: 'Users growth',
+  },
 }
diff --git a/apps/www/data/enterprise.tsx b/apps/www/data/enterprise.tsx
index c1453958d41d6..746a8478e4452 100644
--- a/apps/www/data/enterprise.tsx
+++ b/apps/www/data/enterprise.tsx
@@ -139,12 +139,12 @@ export default {
       "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations—whether you're handling high-traffic applications, complex queries, or massive data volumes.",
     highlights: [
       {
-        heading: 'Databases managed',
-        subheading: companyStats.databasesManaged,
+        heading: companyStats.databasesManaged.label,
+        subheading: companyStats.databasesManaged.text,
       },
       {
-        heading: 'Databases launched daily',
-        subheading: companyStats.databasesLaunchedDaily,
+        heading: companyStats.databasesLaunchedDaily.label,
+        subheading: companyStats.databasesLaunchedDaily.text,
       },
     ],
   },
diff --git a/apps/www/data/ga.tsx b/apps/www/data/ga.tsx
index 016bda3d1e34c..95fbbaf7c4368 100644
--- a/apps/www/data/ga.tsx
+++ b/apps/www/data/ga.tsx
@@ -20,11 +20,11 @@ export const data = (isDark: boolean) => ({
   highlightsSection: {
     highlights: [
       {
-        number: companyStats.databasesManaged,
+        number: companyStats.databasesManaged.text,
         text: 'databases managed',
       },
       {
-        number: companyStats.databasesLaunchedDaily,
+        number: companyStats.databasesLaunchedDaily.text,
         text: 'databases launched daily',
       },
       {
diff --git a/apps/www/data/open-source/contributing/supasquad.tsx b/apps/www/data/open-source/contributing/supasquad.tsx
index 89c0f669637c3..7897c9dd98c9f 100644
--- a/apps/www/data/open-source/contributing/supasquad.tsx
+++ b/apps/www/data/open-source/contributing/supasquad.tsx
@@ -138,12 +138,12 @@ export const data = {
       "Supabase's explosive growth means more builders need help. There are more opportunities to contribute, and more ways to make your mark. Join SupaSquad and help us support this thriving ecosystem of builders.",
     highlights: [
       {
-        heading: 'databases managed',
-        subheading: companyStats.databasesManaged,
+        heading: companyStats.databasesManaged.label,
+        subheading: companyStats.databasesManaged.text,
       },
       {
-        heading: 'databases launched daily',
-        subheading: companyStats.databasesLaunchedDaily,
+        heading: companyStats.databasesLaunchedDaily.label,
+        subheading: companyStats.databasesLaunchedDaily.text,
       },
     ],
   },
diff --git a/apps/www/data/solutions/developers.tsx b/apps/www/data/solutions/developers.tsx
index c07be712c534a..31a440f5da5f3 100644
--- a/apps/www/data/solutions/developers.tsx
+++ b/apps/www/data/solutions/developers.tsx
@@ -595,12 +595,12 @@ const data: () => {
         "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
       highlights: [
         {
-          heading: 'databases managed',
-          subheading: companyStats.databasesManaged,
+          heading: companyStats.databasesManaged.label,
+          subheading: companyStats.databasesManaged.text,
         },
         {
-          heading: 'databases launched daily',
-          subheading: companyStats.databasesLaunchedDaily,
+          heading: companyStats.databasesLaunchedDaily.label,
+          subheading: companyStats.databasesLaunchedDaily.text,
         },
       ],
     },
diff --git a/apps/www/data/solutions/firebase.tsx b/apps/www/data/solutions/firebase.tsx
index f420b6a6413b1..d0d6d89c84a82 100644
--- a/apps/www/data/solutions/firebase.tsx
+++ b/apps/www/data/solutions/firebase.tsx
@@ -548,12 +548,12 @@ const data = {
       "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
     highlights: [
       {
-        heading: 'databases managed',
-        subheading: companyStats.databasesManaged,
+        heading: companyStats.databasesManaged.label,
+        subheading: companyStats.databasesManaged.text,
       },
       {
-        heading: 'databases launched daily',
-        subheading: companyStats.databasesLaunchedDaily,
+        heading: companyStats.databasesLaunchedDaily.label,
+        subheading: companyStats.databasesLaunchedDaily.text,
       },
     ],
   },
diff --git a/apps/www/data/solutions/innovation-teams.tsx b/apps/www/data/solutions/innovation-teams.tsx
index 34554605104c6..553025183096d 100644
--- a/apps/www/data/solutions/innovation-teams.tsx
+++ b/apps/www/data/solutions/innovation-teams.tsx
@@ -596,12 +596,12 @@ const data: () => {
         "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
       highlights: [
         {
-          heading: 'databases managed',
-          subheading: companyStats.databasesManaged,
+          heading: companyStats.databasesManaged.label,
+          subheading: companyStats.databasesManaged.text,
         },
         {
-          heading: 'databases launched daily',
-          subheading: companyStats.databasesLaunchedDaily,
+          heading: companyStats.databasesLaunchedDaily.label,
+          subheading: companyStats.databasesLaunchedDaily.text,
         },
       ],
     },
diff --git a/apps/www/data/solutions/neon.tsx b/apps/www/data/solutions/neon.tsx
index a2b1e3ed61842..95c99d95ae61e 100644
--- a/apps/www/data/solutions/neon.tsx
+++ b/apps/www/data/solutions/neon.tsx
@@ -540,12 +540,12 @@ const data = {
       "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
     highlights: [
       {
-        heading: 'databases managed',
-        subheading: companyStats.databasesManaged,
+        heading: companyStats.databasesManaged.label,
+        subheading: companyStats.databasesManaged.text,
       },
       {
-        heading: 'databases launched daily',
-        subheading: companyStats.databasesLaunchedDaily,
+        heading: companyStats.databasesLaunchedDaily.label,
+        subheading: companyStats.databasesLaunchedDaily.text,
       },
     ],
   },
diff --git a/apps/www/data/solutions/postgres-developers.tsx b/apps/www/data/solutions/postgres-developers.tsx
index 13584b2386650..7c682450d9c7a 100644
--- a/apps/www/data/solutions/postgres-developers.tsx
+++ b/apps/www/data/solutions/postgres-developers.tsx
@@ -695,12 +695,12 @@ const data: () => {
         "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
       highlights: [
         {
-          heading: 'databases managed',
-          subheading: companyStats.databasesManaged,
+          heading: companyStats.databasesManaged.label,
+          subheading: companyStats.databasesManaged.text,
         },
         {
-          heading: 'databases launched daily',
-          subheading: companyStats.databasesLaunchedDaily,
+          heading: companyStats.databasesLaunchedDaily.label,
+          subheading: companyStats.databasesLaunchedDaily.text,
         },
       ],
     },
diff --git a/apps/www/data/solutions/startups.tsx b/apps/www/data/solutions/startups.tsx
index 1b59fdfdb2a4f..8ef98a86132d6 100644
--- a/apps/www/data/solutions/startups.tsx
+++ b/apps/www/data/solutions/startups.tsx
@@ -584,12 +584,12 @@ const data: () => {
         "Supabase ensures optimal database performance at any scale, so you can focus on innovating and growing without worrying about infrastructure limitations — whether you're handling high-traffic applications, complex queries, or massive data volumes.",
       highlights: [
         {
-          heading: 'databases managed',
-          subheading: companyStats.databasesManaged,
+          heading: companyStats.databasesManaged.label,
+          subheading: companyStats.databasesManaged.text,
         },
         {
-          heading: 'databases launched daily',
-          subheading: companyStats.databasesLaunchedDaily,
+          heading: companyStats.databasesLaunchedDaily.label,
+          subheading: companyStats.databasesLaunchedDaily.text,
         },
       ],
     },
diff --git a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
index f47274aff1e4f..b3bd56aa0390f 100644
--- a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
+++ b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx
@@ -61,7 +61,7 @@ export interface AnimatedCounterProps {
  * <AnimatedCounter
  *   value={13.4}
  *   isPercentage
- *   showPlus
+ *   prefix="+"
  *   duration={3}
  *   delay={0.5}
  * />