diff --git a/apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
similarity index 90%
rename from apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx
rename to apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
index c35818596..5aae8eeb5 100644
--- a/apps/marketing/src/app/(marketing)/open/monthly-users-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
@@ -6,12 +6,12 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 import { cn } from '@documenso/ui/lib/utils';
 
-export type MonthlyUsersChartProps = {
+export type MonthlyNewUsersChartProps = {
   className?: string;
   data: GetUserMonthlyGrowthResult;
 };
 
-export const MonthlyUsersChart = ({ className, data }: MonthlyUsersChartProps) => {
+export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartProps) => {
   const formattedData = [...data].reverse().map(({ month, count }) => {
     return {
       month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
@@ -32,7 +32,7 @@ export const MonthlyUsersChart = ({ className, data }: MonthlyUsersChartProps) =
             <YAxis />
 
             <Tooltip
-              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'New Users']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
 
diff --git a/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
new file mode 100644
index 000000000..3c3f4476a
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MonthlyTotalUsersChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex items-center px-4">
+        <h3 className="text-lg font-semibold">Monthly Total Users</h3>
+      </div>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Total Users']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Users"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index f2964c0eb..5317e9644 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -9,7 +9,8 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
-import { MonthlyUsersChart } from './monthly-users-chart';
+import { MonthlyNewUsersChart } from './monthly-new-users-chart';
+import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
 
@@ -183,7 +184,8 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <MonthlyUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+        <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
+        <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>
diff --git a/apps/marketing/src/app/(marketing)/open/tooltip.tsx b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
index e6bf48a94..0ae92d535 100644
--- a/apps/marketing/src/app/(marketing)/open/tooltip.tsx
+++ b/apps/marketing/src/app/(marketing)/open/tooltip.tsx
@@ -23,8 +23,8 @@ export function OpenPageTooltip() {
             <path
               d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
               fill="currentColor"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </TooltipTrigger>
diff --git a/packages/lib/server-only/user/get-user-monthly-growth.ts b/packages/lib/server-only/user/get-user-monthly-growth.ts
index e39301504..6cbb511b7 100644
--- a/packages/lib/server-only/user/get-user-monthly-growth.ts
+++ b/packages/lib/server-only/user/get-user-monthly-growth.ts
@@ -5,28 +5,30 @@ import { prisma } from '@documenso/prisma';
 export type GetUserMonthlyGrowthResult = Array<{
   month: string;
   count: number;
+  cume_count: number;
 }>;
 
 type GetUserMonthlyGrowthQueryResult = Array<{
   month: Date;
   count: bigint;
+  cume_count: bigint;
 }>;
 
 export const getUserMonthlyGrowth = async () => {
   const result = await prisma.$queryRaw<GetUserMonthlyGrowthQueryResult>`
     SELECT
       DATE_TRUNC('month', "createdAt") AS "month",
-      COUNT("id") AS "count"
+      COUNT("id") as "count",
+      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "createdAt")) as "cume_count"
     FROM "User"
     GROUP BY "month"
     ORDER BY "month" DESC
     LIMIT 12
   `;
 
-  console.log('result', result);
-
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
     count: Number(row.count),
+    cume_count: Number(row.cume_count),
   }));
 };